Menü-Liste mit BG-Image, float:left und unterschied. Breiten

[Gunnar Bittersmann]

@@kay:

nuqneH

HTML
<div id="navcontainer">
      <ul id='navlist'>
<li id="menu0"><a href="/0.php"></a></li>
<li id="menu1"><a href="/1.php"></a></li>
<li id="menu2"><a href="/2.php"></a></li>
<li id="menu3"><a href="/3.php"></a></li>

<li id="menu4" class='current'></li>
<li id="menu5"><a href="5.php"></a></li>
<li id="menu6"><a href="/6.php"></a></li>
</ul></div>

CSS:
#navcontainer{
list-style-type: none;
clear:both;
}

Die Eigenschaft 'list-style-type' ist für 'div'-Elemente wirkungslos. Sie wird auch nicht von 'div[@id="navcontainer"]' an 'ul[@id="navlist"]' vererbt. Du wolltest sie für letzteres Element angeben.

Das 'div[@id="navcontainer"]' ist auch völlig überflüssig. Du brauchst für 'ul[@id="navlist"]' keinen zusätzlichen Container.

Und die Klasse "current" brauchst du auch nicht.

Was du allerdings brauchst, sind Linktitel. Etliche Besucher sehen keine Bilder, sondern nur Texte. Unter diesen auch für dich wichtige.

Auf die Linktitel wendest du dann eine geeignete Image-Replacement-Technik an.

#navlist li{
float: left;
margin: 0;
padding: 0;
height:25px;
width:136px;
display:inline-block
}

'display: inline-block' in Kombination mit 'float' ist unsinnig, da durch letzteres 'display' auf "block" gesetzt wird. [CSS21 §9.7] Verwende entweder 'display: inline-block' oder 'float'. (S.a. [INLINE-BLOCK])

#navlist li a{
height:25px;
width:136px;
display:inline-block
}

Wozu nochmals die Größenangabe? Die hat doch schon das 'li'-Elternelement. Und warum "inline-block"?

#navlist li a { display: block } und gut ist.

#navlist li a:hover, #navlist .current{
height:25px;
width:136px;
background-position: 0 bottom;
}

Dito. Wozu nochmals die Größenangabe?

#menu0, #menu0 a {background:url(/images/menu/0.png);}
#menu1, #menu1 a {background:url(/images/menu/1.png);}
#menu2, #menu2 a {background:url(/images/menu/2.png);}
#menu3, #menu3 a {background:url(/images/menu/3.png);}
#menu4, #menu4 a {background:url(/images/menu/4.png);}
#menu5, #menu5 a {background:url(/images/menu/5.png);}
#menu6, #menu6 a {background:url(/images/menu/6.png);}

Warum  haben sowohl die 'li[@id="menu…"]'-Elemente als auch deren 'a'-Elemente das Hintergrundbild?

Und es sollten nicht alle Menüpunkte ihr eigenes Hintergrundbild haben, sondern alle dasselbe Hintergrundbild (mit jeweils anderen 'background-position'-Werten). Das spart Ladezeit und Speicherbedarf. [PERFORMANCE-BP1]

Problem. Menüeintrag 136px breit. Bilder sind manchmal breiter Manchmal schmaler.

Wo ist das Problem, jedem Menüpunkt eine eigene Breite zu geben?

Qapla'