Foto's inplaats van tekst in menu
Ik ben bezig met het omzetten van een layout (gemaakt met photoshop) in css. Nu heb ik bij het menu een probleem. Doordat deze knoppen nogal wat layout hebben meegekregen (die je volgens mij niet na kan maken met css) wil ik ipv tekst werken met een foto. Wordpress (wat ik gebruik) geeft echter automatisch tekst. Ik heb nu de volgende css:
Quote:
#menu{
height:37px;
background-image:url(pictures/menu-bg.png);
font-size:0px;
}
#menu ul{
list-style:none;
}
#menu li{
display:inline;
background-image:url(pictures/menu-sprite.png);
}
/* Knop */
#menu li a{
border:#00F solid 1px;
}
#menu li a:hover{
border:#F00 solid 1px;
}
/* Home */
#menu li.menu-item-23{
width:70px;
height:37px;
background-position:-10px 0px;
}
height:37px;
background-image:url(pictures/menu-bg.png);
font-size:0px;
}
#menu ul{
list-style:none;
}
#menu li{
display:inline;
background-image:url(pictures/menu-sprite.png);
}
/* Knop */
#menu li a{
border:#00F solid 1px;
}
#menu li a:hover{
border:#F00 solid 1px;
}
/* Home */
#menu li.menu-item-23{
width:70px;
height:37px;
background-position:-10px 0px;
}
Maar door de font-size:0px; krijg je ook de foto niet te zien.
Voor de mensen die de knoppen willen zien: http://fox-creations.nl/anja/wp-content/themes/anjastoffen.nl/pictures/menu-sprite.png
Wie weet hoe ik dit kan oplossen?
Welke HTML gebruik je nu?
Op de <li> óf <a> geef je de background-image.
Waarom XHTML? Waarom niet gewoon HTML5?
Zo aangepast, maar ben je gelijk van die rare dingen af.
Ik heb nu:
#menu{
height:37px;
background-image:url(pictures/menu-bg.png);
font-size:30px;
}
#menu ul{
list-style:none;
}
/* Knop */
#menu li{
display:inline;
background-image:url(pictures/menu-sprite.png);
}
#menu li a{
border:#EEE solid 1px;
text-indent: -9999px;
}
/* Home */
#menu li.menu-item-23{
width:70px;
background-position:-18px -12px;
background-repeat:no-repeat;
}
#menu li.menu-item-23 a{
text-indent: -9999px;
}
Maar dan verdwijnt de tekst niet
Even voor je uitgetypted zonder die rare <ul> en <li> (die zijn echt niet meer nodig, ook niet voor sematiek).
En pas die -9px eens naar naar -9999px... daar verdwijnen ze echt wel hoor ;)
Jou werkende code
