CSS: UL menu met achtergrond afbeeldingen probleem

[hydex]

Ik probeer om d.m.v css een horizontaal menu te maken met achtergrond afbeeldingen. Alles werkt alleen worden de afbeeldingen niet volledig (in hoogte en breedte) weergegeven. Het lijkt dus of de width en height niet werkt.

hier is mijn css code:

code:

#menu { 
    
position:relative; 
top:115px; 
border:1px solid red; 
left:186px; 
height:40px; 

} 
#menu ul, #menu ul li { 

list-style-type: none; 
display: inline; 
padding: 0; 
margin: 0; 
width:152px; 
height:40px; 
} 

#menu ul li a { 

white-space: nowrap; 
padding: 5px; 
margin: 1px; 
width:152px; 
height:40px; 
text-decoration: none; 
background-image:url('images/menu_item.png'); 
background-repeat: no-repeat; 
} 
#menu a:hover{ 

width:152px; 
height:40px; 
background-image:url('images/menu_item_over.png'); 
background-repeat: no-repeat; 
}

mijn html code ziet er als volgt uit:

code:

<div id="menu"> 
    <ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">RSS</a></li> 
    </ul> 
    
</div>

wat doe ik fout. De afbeeldingen zijn 152px breed en 40px hoog.

[MsG]

Display: inline kent geen hoogte en wijdte eigenschap.

Je kan bijvoorbeeld de a'tjes in de li's weer stijlen met hoogte en wijdte, dat deed ik eens als workaround, maar weet niet of dat de beste methode is.

Anders kan je eens float left proberen te gebruiken ipv display inline.

[apokalypse]

MsG schreef op zondag 23 mei 2010 @ 13:42:
Display: inline kent geen hoogte en wijdte eigenschap.

Je kan bijvoorbeeld de a'tjes in de li's weer stijlen met hoogte en wijdte, dat deed ik eens als workaround, maar weet niet of dat de beste methode is.

Anders kan je eens float left proberen te gebruiken ipv display inline.

Of display:inline-block

[hydex]

De display inline heb ik nodig om de items naast elkaar te tonen. Float left werkt niet goed, want dan komen de items onderelkaar.

[MsG]

apokalypse schreef op zondag 23 mei 2010 @ 13:43:
[...]

Of display:inline-block

Klopt maar die wordt niet super breed ondersteunt, is nog wat nieuw.

hydex schreef op zondag 23 mei 2010 @ 13:44:
De display inline heb ik nodig om de items naast elkaar te tonen. Float left werkt niet goed, want dan komen de items onderelkaar.

Dan zet je de width en height in de a's met een display: block.

[ Voor 46% gewijzigd door MsG op 23-05-2010 13:45 ]

[hydex]

display:inline-block krijg ik ook niet werkend onder IE8.
ik hoop dat dit gaat werken anders moet ik er allemaal aparte divs van gaan maken. Juist die UL lijst maakt het op een eenvoudige manier dynamisch.

[MsG]

Misschien kan je hier nog wat mee. Had enigzins hetzelfde probleem, Crisp heeft toen een mooi voorbeeld gemaakt.

[CSS] UL centreren zonder hardcoded breedte

[Rockafello]

Ik meen me te herinneren dat dit een bug is in IE. tijd geleden zelfde probleem gehad en opgelost door ul/li te vervangen door div.

[hydex]

Bedankt voor jullie reacties. Ik lees dat de inline-block pas vanaf IE 8 gesuppord wordt. Dit wordt mij een beetje te gek. Ik ga wel apart divjes naast elkaar zetten.

[MsG]

Je kan het dan alsnog met de a'tjes truuk, dat lijkt me beter dan divjes te gebruiken.

Dus de a'tjes op display: block en de li'tjes op display: inline

[apokalypse]

MsG schreef op zondag 23 mei 2010 @ 13:45:
Klopt maar die wordt niet super breed ondersteunt, is nog wat nieuw.

quote: http://www.quirksmode.org/css/display.html

IE 6/7 accepts the value only on elements with a natural display: inline.

Een <li> is een inline element.
Voor firefox 2: -moz-inline-box

dus

code:

 display: -moz-inline-box; /* Fixes Firefox */
 display: inline-block;

[R4gnax]

apokalypse schreef op zondag 23 mei 2010 @ 14:50:
Een <li> is een inline element.

Een <li> is een block level element.

hydex schreef op zondag 23 mei 2010 @ 13:59:
Bedankt voor jullie reacties. Ik lees dat de inline-block pas vanaf IE 8 gesuppord wordt. Dit wordt mij een beetje te gek. Ik ga wel apart divjes naast elkaar zetten.

Fix eerder je CSS eventjes, zou ik zeggen.

Cascading Stylesheet:

#menu ul, #menu ul li
{ 
  list-style-type: none; 
  display: inline; 
  padding: 0;
  margin: 0; 
  width:152px;  /* <-- !!! */
  height:40px; 
} 

Het gaat natuurlijk nooit werken als je de list maar net breed genoeg maakt voor één list item. Daar kwam dan ook je probleem met floats vandaan.


Wat betreft inline-block support: je hoeft met maar twee dingen rekening te houden. IE6/7 en Firefox 2. Firefox 2 kun je zelfs nog negeren. Check onderstaande CSS even. Je zult zien dat de IE compatibility werkelijk miniem is. (Uiteraard serveer je deze normaal gesproken uit een tweede stylesheet die met conditional comments alleen door IE 6/7 opgepikt wordt.)

Cascading Stylesheet:

ul#menu { 
  display: block;
  position: relative; 
  top: 115px;
  left: 186px;

  border: 1px solid red; 
  height: 40px; 
}

ul#menu, ul#menu li
{ 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
}

ul#menu li
{
  display: inline-block;
}

ul#menu li a
{
  display: block;

  background-image: url('images/menu_item.png'); 
  background-repeat: no-repeat; 

  line-height: 40px;
  text-decoration: none;
  white-space: nowrap; 

  margin: 1px 0;
  padding: 5px 0;
  height: 40px;
  width: 152px; 
} 

ul#menu li a:hover
{ 
  background-image:url('images/menu_item_over.png'); 
}


/* == Legacy Gecko (Firefox) compatibility == */

/* Detect and support Gecko 1.8.1 (Firefox 2.0) */
ul#menu li, x:-moz-any-link
{
  display: -moz-inline-stack;
}

/* Detect Gecko 1.9.0 (Firefox 3.0) and undo Gecko 1.8.1 compatibility */
ul#menu li, x:-moz-any-link, x:default
{
  display: inline-block;
}


/* == Legacy Trident (Internet Explorer) compatibility == */

ul#menu li, ul#menu li a
{
  *display: inline;
  *zoom: 1;
}

De Firefox 2 compatibility is wat complexer, omdat je geen CSS hacks of conditional include mechanisme hebt. Er worden daar wat Mozilla-specifieke pseudo-selectors uit de kast gehaald om Firefox 2 en vervolgens Firefox 3 en hoger te targeten.

LET OP: Dit is nog geen 'drop-in' oplossing, alleen even snel een herordening van jouw stylesheet en wat toevoegingen om inline-block min of meer werkend te krijgen. Het wijst je alleen de juiste weg. De rest moet je zelf nog uitzoeken.