probs mit display:block / float:right in mozilla

[kaifreund]

Hallo Forum,
ich bin mir nicht sicher was ich falsch mache und versuche es mal zu beschreiben.

In einer rechtsausgerichteten! horizontalen Navigation habe ich Textbuttons die mittels display:block und padding einen Rahmen bekommen.

a.navimain{
font-size:9pt;
color:black;
display:block;
text-align:center;
width:100%;
border:black solid 1px;
padding:2px 2px 1px 2px;
text-decoration:none;
font-weight:bold;
}


Da ich das mittels Listen und display:inline nicht hinbekomme, habe ich die einzelnen Buttons in eine Tabellenreihe gepackt. Funzt prima (reines css wäre mir allerdings lieber).
ABER Firefox 1.0 zieht den Text! des rechten Buttons bis über die rechte Framegrenze anstelle das padding zu beachten = der rechte Button wird bis zum Text "abgeschnitten"

Ich habe mal die Border auf 1 gesetzt um es deutlicher zu machen. Hier ist der Link:


Was mache ich falsch?
lg.kai

 

[lengsel]

...habe ich die einzelnen Buttons in eine Tabellenreihe gepackt. Funzt prima (reines css wäre mir allerdings lieber).
ABER Firefox 1.0 zieht den Text!

Welch Überraschung, Camino (0.7) auch, aber das nur am Rande.

table-less würde ich das so vorschlagen:

<div id="navi">
<span>Link1</span>
<span>Link2</span>
usw...
</div>

Sollte den selben Effekt haben, und es ist keine Tabelle nötig.
Das div ist ein Blockelemet, die spans sind inline-Elemete. Darauf aufbauend würde ich dann nochmal die Styles entwickeln. Mal sehen was die Mozilla-abkömmlinge dann damit machen...

Grüße,
Flo

 

[kaifreund]

Hi Flo,
das bringt bei mir ähnliche Resultate wie <li> Tags. Ich bekomme die Buttons nicht als display:block dargestellt. So wie von Dir vorgeschlagen sind die Buttons nicht nebeneinander, sondern untereinander angeordnet und die Border erstreckt sich über die gesamte Breite und nicht je nach Wortlänge nur mit Abstand 2px vom Wort. Mag sein das ich was übersehe, vielleicht beisst sich aber auch display:block und inline Element?

gruesse kai

 

[BlackCat]

Das mal als Beispiel wie du es mit Listen hinbekommst:

.Navi ul {
margin:0;
padding:0.5em 0 0.5em 0;
border:1px dotted #000000;
}
.Navi li {
margin:1.4em;
padding:0;
display:inline;
list-style:none;
}


im HTML dann einfach

<ul class="Navi">

<li class="Navi">


Gruss

Retrax


Edit: Das Beispiel musst Du natürlich noch an deine Bedürfnisse anpassen.

 

[kaifreund]

@ Retrax

Hmmm... funzt immer noch nicht. Kann ich <ul> nicht floaten? ... Weiss der Geier was ich da nicht kapiere - oder Du vielleicht? ;-)


ul {margin-top:16px;
float:right;
}

li {display:inline;
list-style:none;
font-size:9pt;
color:black;
text-align:center;
width:100%;
border:black solid 1px;
padding:2px 2px 1px 2px;
text-decoration:none;
font-weight:bold;
}

[...]
<ul>
<li><a href="javascript:NaviFrames('produkte/fs_prod_navi3.html',3,'blank.html',4,'blank.html',5)" >PRODUKTE</a></li>
<li><a href="javascript:NaviFrames('blank.html',3,'preise/preise.html',4,'blank.html',5)" >PREISE</a></li>
<li><a href="javascript:NaviFrames('blank.html',3,'bestellung/bestellung.html',4,'blank.html',5)" >ONLINEBESTELLUNG</a></li>
</ul>
[...]


lg + danke!
kai

 

[BlackCat]

Also meines Wissens ist es korrekterweise so, daß du für <ul> als auch für <li> margin und padding setzen musst.

Gruss

Retrax

 

[lengsel]

...vielleicht beisst sich aber auch display:block und inline Element?

Naja, wenn Du ein inline-Element wie z.B. <span> mit display:block formatierst, dann stehen sie natürlich nicht mehr in einer Zeile nebeneienander, sondern brechen nach sich um. Der umgekehrte Weg ist eben Listen so hinzubiegen, dass sie nebeneeinander stehen (display: inline). Brauche ich aber gar nichts zu verbiegen, denn wenn ich die <span>s in ein div packe, habe ich ja schon eine Reihe Texte nebeneienander. Das Stylesheet muss ich ja jetzt nur an die veränderte Situation anpassen. Das div bekommt einen right-margin, damit sein Inhalt am rechten Rand nicht verschütt geht, so wie das vorher passiert ist. (Kleine Träumerei: <politik margin-right: 100%>immer</politik>). Den <span>s würde ich dann entsprechend padding-right geben, damit sie auseinander rutschen.
Sollte zum Ergebnis haben dass es genauso aussieht wie Du es haben willst, ohne dass rechts was verloren geht.

So habe ich zumindest das Beispiel in dem Link verstanden, vielleicht denke ich ja aber auch gerade ganz falsch...oder Du willst was anderes. Ich machs manchmal gern etwas zu kompliziert...

Grüße,
Flo

 

[kaifreund]

Hi Flo,
da brat mir einer einen Storch.
Nix ist. Firefox 1.0 okay aber nur incl. display:inline für die <li>. IE 6 stapelt die Buttons brav übereinander. S.... Okay ich bin blöd.... Hilfst Du mir trotzdem? Hier das aktuellste CSS incl nahezu aller hier gemachter Vorschläge (die sich teileweise aufheben):

div {
margin:0px;
margin-top:16px;
padding:0px;
float:right;
}


li {
display:inline;
list-style:none;
font-size:9pt;
color:black;
text-align:center;
width:100%;
border:black solid 1px;
padding:2px 3px 1px 3px;
text-decoration:none;
font-weight:bold;
margin:0px;
margin-left:10px;
}


merci!!
kai
ps: <politik> ist dann wohl css 5 standard? ;-)


---
Ergänzung:
So supi ist die Lösung doch nicht: Bei hover gibt es nun ein Problem...

 

[lengsel]

Hi Flo,
da brat mir einer einen Storch.
Nix ist. Firefox 1.0 okay aber nur incl display:inline für die <li>. IE 6 stapelt die Buttons brav übereinander....

ps: <politik> ist dann wohl css 5 standard? ;-)

Offensichtlich will hier der IE Blockelemente auch nach Aufforderung nicht inline darstellen. Deswegen meinte ich vorhin, es ist imho immer der unelegantere Weg das display von Elementen zu verändern, was Du ja machen musst wenn Du Listenelemente nimmst. Hast Du mal meinen <div>/<span> Vorschlag ausprobiert?

Hilfe (nach Kräften) für ehrliche Probleme gibts immer, nur die die offensichtlich zu faul zum suchen sind bekommen keine Antwort (in diesem Thread ja jetzt nicht der Fall).

Ich glaube die <politik>-styles werden wir wohl nicht mehr erleben...

Grüße,
Flo

 

[kaifreund]

Hi Flo,
ja klar habe ich auch die <div> <span> Variante getestet. -Faul war ich definitv nicht. Habe etliche Tuts durch die sich mit Listen und Navigation beschäftigen. Mir schwirrt schon der Kopf (bin halt noch nicht so der CSS Freak). Aber klar ist mir das nicht was da (ab)geht. Habe es gerade online gestellt...

glimpse.de/esa

nerv.

kai
ps: das mit der Politik wird uns noch ereilen...

 

[lengsel]

Und?
War das nicht das was Du wolltest? (Im Groben zumindest?)
Wenn nein, versuch doch nochmal genau zu erklären wo Du hinwillst (optisch erstmal, vergiss die Technik).

Grüße,
Flo

 

[kaifreund]

Hast Du mal den IE probiert?...
Was unabhängig davon mich bei der Modzilla Variante jetzt noch stören würde ist das hover / focus einen Hintergrund / Rahmen ziehen der eben nicht das seitliche padding beinhaltet was der Button (Rahmen zum Text) aber hat. Das bekomm ich nicht weg. Aber viel sonderbarer finde ich den IE...

lg.kai

 

[lengsel]

Habs mir jetzt mal im IE angesehen...warum das so ist, wissen wohl nur die IE-Programmierer.
Muss jetzt leider mal ne Weile weg, schau mir das heute abend nochmal an.

Grüße,
Flo

 

[kaifreund]

Hey Flo,
noch ne Idee?

lg.kai

 

[lengsel]

Ups, sorry, habs total verpennt. Ne spontane Idee habe ich dazu eigentlich keine, zumal genau dieses Konstrukt bei mir eigentlich immer recht gut funktioniert, auch im IE. Hast Du mal nur das div/span Gespann probiert, ohne ihm weitere styles zuzuordnen? Wie sieht das dann aus?
Wenn das funktioniert, würde ich die styles Stück für Stück neu schreiben. Manchmal hat man irgendwo nen Hund drin, der einem erst auffällt wenn man was von Grund auf neu macht. Eine Art Betriebsblindheit.

Grüße,
Flo

 

[kaifreund]

Weiss was du meinst, werde wohl genau das nun zum 3x machen. Ich denke es hat was mit float und padding zu tun... aber was...?

lg. + Danke
kai

 

[kaifreund]

Flo,
es geht jetzt.

Und zwar mag der IE die width:100% des <span>s nicht (logisch eigentlich, bei der Tabellenlösung <td> war es nötig).

Noch was ganz anderes:
Kannst Du mir sagen wie ich

.vertrieb a:link, a:visited, a:hover{
color:black; text-decoration:underline;
}

.kontakt a:link, a:visited, a:hover{
color:black; text-decoration:underline;
}{

in eine Zeile packen kann?
-Sorry off topic aber...

lg.kai

 

[lengsel]

Das ist CSS, somit nicht OT.

Wenn ich das richtig sehe sind die Klassen ja völlig gleich. Nimm sie nur einmal und gib ihr einen Namen der dich daran erinnert dass Du sie für sowohl als auch verwendest. Und schon isses in einer Zeile , oder meintest Du das anders? Ich habe das so verstanden: aus zwei mach eins.

Grüße,
Flo