Foto's inplaats van tekst in menu

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Matthijs Vos

Matthijs Vos

06/01/2013 14:24:04
Quote Anchor link
Hallo,

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;
}


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?
 
PHP hulp

PHP hulp

29/03/2024 07:47:11
 
Eddy E

Eddy E

06/01/2013 14:33:49
Quote Anchor link
Plaatje inderdaad als achtergrond, tekst weghalen via text-indent: -9999px; bijvoorbeeld.
 
Matthijs Vos

Matthijs Vos

06/01/2013 14:37:11
Quote Anchor link
Als ik dat doe, valt ook het plaatje weg. Maar de width: die ik instel werkt volegns mij ook op een of andere manier niet, want als ik hem breeder maak word hij inbrowser niet breeder.
 
Eddy E

Eddy E

06/01/2013 14:39:13
Quote Anchor link
Plaatje stel je in als achtergrond, dan valt die niet weg.
Welke HTML gebruik je nu?
 
Matthijs Vos

Matthijs Vos

06/01/2013 14:42:25
Quote Anchor link
Ik gebruik voornamelijk php, ivm wordpress. maar het doctype is XHTML 1.0. Maar bij mij valt de achtergrond ook niet weg, maar de volledige knop valt gewoon weg (en daarmee het plaatje dus ook)
 
Eddy E

Eddy E

06/01/2013 14:52:12
Quote Anchor link
Op de <a> geef je de text-indent.
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.
 
Matthijs Vos

Matthijs Vos

06/01/2013 14:58:16
Quote Anchor link
Ik heb de doctype aangepast (<!DOCTYPE html>)
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
 
Eddy E

Eddy E

06/01/2013 15:06:18
Quote Anchor link
Kijk eens naar http://codepen.io/anon/pen/GIdji

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 ;)
 

06/01/2013 15:57:47
Quote Anchor link
Hier een nette schone Fiddle voor je probleem. Al had degene hierboven het ook al geklaard.

Jou werkende code
 
Wouter J

Wouter J

06/01/2013 16:05:37
Quote Anchor link
Wuk, waarom verwijderen jullie die lijst? Niet meer nodig? Hoezo? Omdat je denkt dat een nav element al een lijst aangeeft? Ik dacht het niet... Omdat je denkt dat het in 1 regel staat? Ik dacht het niet...
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.