Komisches CSS verhalten?

[Dieter Falk]

Hallo Forum,

ich habe ein Menü in HTML und die dazugehörigen Stylesheets geschrieben. Das Menü ist wie folgt aufgebaut:

<ul id="menubar">
 <li class="newdate"><a href="">Neuen Termin anlegen</a></li>
 <li class="newnews"><a href="">Neue News anlegen</a></li>
 <li class="overview"><a href="">Übersicht</a></li>
 <li class="archiv"><a href="">Archiv</a></li>
 <li class="account"><a href="">Kontoeinstellungen</a></li>
 <li class="logout"><a href="">Logout</a></li>
</ul>

und mein CSS Code dazu sieht so aus:

#menubar {
 background-color:#bfd33e;
 font-size:0.750em;
 padding:5px 0px 5px 5px;
 margin:0px;
}

#menubar li {
 padding-left:30px;
 padding-right:10px;
 height:24px;
 margin:0px;
 list-style:none;
 background-position:2px 0px;
 background-repeat:no-repeat;
}

.newdate {
 background-image:url(./img/newdate.gif);
 float:left;
}

.newnews {
 background-image:url(./img/newnews.gif);
 float:left;
}

.overview {
 background-image:url(./img/overview.gif);
 float:left;
}

.archiv {
 background-image:url(./img/archiv.gif);
 float:left;
}

.account {
 background-image:url(./img/account.gif);
 float:left;
}

.logout {
 background-image:url(./img/logout.gif);
}

Nun zu dem Problem: Wenn ich das letzte Element, also das LI mit der Class "logout" nicht Links floaten lasse, dann steht der Text zwar rechts neben dem Element "account", aber das Hintergrundbild ist ganz links unter dem von "newdate". Wenn ich das LI Element mit der Class "logout" links floaten lasse, dann wird das UL Element mit der ID "menubar" nicht mehr richtig dargestellt.

Hat da jemand eine Idee?

Vielen Dank für die Hilfe!

Gruß, Dieter

[Elya]

Hallo Dieter,

Nun zu dem Problem: Wenn ich das letzte Element, also das LI mit der Class "logout" nicht Links floaten lasse, dann steht der Text zwar rechts neben dem Element "account", aber das Hintergrundbild ist ganz links unter dem von "newdate". Wenn ich das LI Element mit der Class "logout" links floaten lasse, dann wird das UL Element mit der ID "menubar" nicht mehr richtig dargestellt.

Wie wäre denn die von Dir gewünschte "richtige" Darstellung?

Gruß aus Köln-Ehrenfeld,

Elya

[Dieter Falk]

Hallo Elya,

Hallo Dieter,

Nun zu dem Problem: Wenn ich das letzte Element, also das LI mit der Class "logout" nicht Links floaten lasse, dann steht der Text zwar rechts neben dem Element "account", aber das Hintergrundbild ist ganz links unter dem von "newdate". Wenn ich das LI Element mit der Class "logout" links floaten lasse, dann wird das UL Element mit der ID "menubar" nicht mehr richtig dargestellt.

Wie wäre denn die von Dir gewünschte "richtige" Darstellung?

Eine Menüzeile, und in dieser Zeile dann die Menüitems einfach immer horizontal nebeneineander angeordnet. Unter der Menüzeile soll dann der andere Content folgen.

Gruß, Dieter

[Elya]

Hallo Dieter,

Eine Menüzeile, und in dieser Zeile dann die Menüitems einfach immer horizontal nebeneineander angeordnet. Unter der Menüzeile soll dann der andere Content folgen.

Ich vermute, daß "nicht richtige ul" bedeutet, daß die Höhe der Leiste nicht mitkommt. Gib #menubar mal eine Höhe wie den li-Elementen auch, das sollte helfen.

Gruß aus Köln-Ehrenfeld,

Elya

[Dieter Falk]

Hallo Elya,

Eine Menüzeile, und in dieser Zeile dann die Menüitems einfach immer horizontal nebeneineander angeordnet. Unter der Menüzeile soll dann der andere Content folgen.

Ich vermute, daß "nicht richtige ul" bedeutet, daß die Höhe der Leiste nicht mitkommt. Gib #menubar mal eine Höhe wie den li-Elementen auch, das sollte helfen.

ja simmt jetzt geht es, aber wieso muss ich dieser Menübar noch die Höhe mitgeben. Ich dachte eigentlich, da die Elemente HTML-Technisch sich ja innerhalb der Menubar befinden, diese auch automatisch die Elemente umläuft.

Gruß, Dieter

[Elya]

Hallo Dieter,

Ich vermute, daß "nicht richtige ul" bedeutet, daß die Höhe der Leiste nicht mitkommt. Gib #menubar mal eine Höhe wie den li-Elementen auch, das sollte helfen.

ja simmt jetzt geht es, aber wieso muss ich dieser Menübar noch die Höhe mitgeben. Ich dachte eigentlich, da die Elemente HTML-Technisch sich ja innerhalb der Menubar befinden, diese auch automatisch die Elemente umläuft.

Siehe die Antwort von Cheatah: wenn's floatet, beeinflußt es nicht die Höhe.

Gruß aus Köln-Ehrenfeld,

Elya

[Cheatah]

Hi,

ja simmt jetzt geht es, aber wieso muss ich dieser Menübar noch die Höhe mitgeben.

musst Du nicht. Es ist lediglich eine Möglichkeit.

Ich dachte eigentlich, da die Elemente HTML-Technisch sich ja innerhalb der Menubar befinden, diese auch automatisch die Elemente umläuft.

Siehe Elyas Hinweis auf meine vorherige Antwort ;-) und lösche mal testweise die gefloateten Elemente. Wie hoch ist das verbleibende Element?

height:auto berechnet sich, ohne gefloatete Inhaltselemente zu beachten, sofern das Element selbst nicht gefloatet ist und keine von "visible" unterschiedliche overflow-Eigenschaft besitzt.

Cheatah

[Cheatah]

Hi,

Nun zu dem Problem: Wenn ich das letzte Element, also das LI mit der Class "logout" nicht Links floaten lasse, dann steht der Text zwar rechts neben dem Element "account", aber das Hintergrundbild ist ganz links unter dem von "newdate".

gefloatete Elemente sind aus dem Elementfluss genommen. Nicht gefloatete Elemente ignorieren diese bei der Wahl ihrer Position und Ausmaße. Folge: Dein letztes <li> beginnt dort, wo es begänne, wenn Du die gelfoateten Elemente einfach mal aus dem Dokument löschst - und das Hintergrundbild natürlich auch.

Wenn ich das LI Element mit der Class "logout" links floaten lasse, dann wird das UL Element mit der ID "menubar" nicht mehr richtig dargestellt.

"Nicht richtig" bedeutet was, und was wäre "richtig"?

Cheatah