[HTML/CSS] Menu met afbeeldingen

[Timons106]

Na lang zoeken en proberen ga ik hier toch een poging wagen.

Ik heb dus een menu gemaakt met afbeeldingen en tekst, elk menu item heeft een andere afbeelding.
Eerst gebruikte ik hier de img tag voor in HTML, maar er is mij toen verteld dat ik hiervoor background-url in CSS moest gebruiken zodat ik een hover effect toe kan voegen (wat uiteraard ook met JS kan, maar dat terzijde).

HTML:

<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="films.html">Films</a></li>
<li><a href="bioscopen.html">Bioscopen</a></li>
<li><a href="acties.html">Acties</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>

Cascading Stylesheet:

#menu {
    background-color:#000;
    box-shadow: 0px 4px 10px #000;
    /*border:1px solid #C00;*/
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
    padding:15px;
    /*background: #0399D4;
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#A1A1A1);
    background: -webkit-gradient(linear, left top, left bottom, from(#C30), to(#C00));
    background: -moz-linear-gradient(top,  #EBEBEB,  #C00);*/
}

#menu ul {
    display:inline;
    margin:0;
    padding:0;
    list-style:none;
    word-spacing:20px;
}

#menu li {
    font-size:15px;
    word-spacing:20px;
}

#menu li:hover {

}

#menu li:first-child {
    background-image:url('House.png');
    background-repeat:no-repeat;
    background-position:left center;
}

#menu li:nth-child(2) {
    background-image:url('House.png');
    background-repeat:no-repeat;
    background-position:left center;
}

#menu li:nth-child(3) {
    background-image:url('House.png');
    background-repeat:no-repeat;
    background-position:left center;
}

#menu li:nth-child(4) {
    background-image:url('House.png');
    background-repeat:no-repeat;
    background-position:left center;
}

#menu li:nth-child(5) {
    background-image:url('House.png');
    background-repeat:no-repeat;
    background-position:left center;
}

#menu li:last-child {
    background-image:url('House.png');
    background-repeat:no-repeat;
    background-position:left center;
}

#menu a {
    text-decoration:none;
    color:#FFF;
    display:inline;
    margin:0;
    /*padding:10px;
    padding-left:10px;
    padding-right:10px;
    font-size:15px;*/
    font-size:15px;
    padding-right:20px;
    padding-top:5px;
    padding-bottom:16px;
    padding-left:10px;
}

#menu a:hover {
    text-decoration:none;
    color:#C4091C;
    display:inline;
    margin:0;
    padding-top:5px;
    padding-bottom:16px;
    padding-left:10px;
    font-size:15px;
    padding-right:20px;
    background:#FFF;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

Het resultaat is dat de background afbeelding in de tekst wordt weergeven, en ik wil graag ruimte tussen de afbeelding en de tekst.

Wie ziet wat ik fout doe?

[Keeper]

Wat wil je nu precies? Dat het plaatje bij die list links van de tekst komt? Dus iets als

code:

[~~~] Home
[^^^] Films

Dan moet je een padding-left toevoegen aan je li die net zo breed (of iets breder) is als je achtergrondplaatje.

Je CSS is trouwens niet heel handig opgezet met die nth-child en first-child dingen. Ten eerste werkt nth-child niet in oude IE's, maar los daarvan koppel je nu heel sterk de volgorde van je menu aan welk plaatje er getoond moet worden. Het is veel handiger om gewoon classes aan die li's toe te voegen en op basis van de class het juiste achtergrondplaatje inladen.

Daarnaast hoef je niet elke keer

code:

background-repeat:no-repeat; 
background-position:left center;

te herhalen. Dat kan je prima bij de regel voor #menu li toevoegen, dan overerven de andere li's dat netjes.

[Timons106]

Keeper schreef op dinsdag 25 september 2012 @ 13:41:
Dan moet je een padding-left toevoegen aan je li die net zo breed (of iets breder) is als je achtergrondplaatje.

Geweldig!
Het werkt nu perfect

[RM-rf]

let wel op dat je beter geen 'display: inline' kunt toepassen voor elementen die je paddings/margins wilt geven... display inline betekent eigenlijk dat je element in de 'textflow' meeloopt...

beter is dan bv display: block; maar vermoedelijk wil je voor de List-items (LI's) eerder display: inline-block gebruiken...

overigens zou ik ook prefereren om niet met nth-child() pseudoclasses te werken voor duidelijk identificeerbare elementen, maar dan te kiezen voor een class of zelfs een id.
en daaraan de unieke afbeelding te hangen, zodat je straffeloos de volgorde kunt veranderen of elementen aan je menu kunt toevoegen zònder direkt je afbeeldingen door elkaar te hebben.

[Timons106]

Ik heb nu:

HTML:

<li id="home-image"><a href="index.html">Home</a></li>

Cascading Stylesheet:

#home-image {
    background-image:url('House.png');
    width:16px;
    height:16px;
}

Maar het werkt niet .

[Keeper]

Wat werkt er niet precies? Wordt het plaatje herhaald? Dat komt doordat je background-repeat op no-repeat moet zetten. Standaard wordt aan achtergrondafbeelding namelijk zowel verticaal (y-as) als horizontaal (x-as) herhaald. Dat kan je aanpassen door voor background-repeat no-repeat, repeat-y, of repeat-x te gebruiken.

[Timons106]

Keeper schreef op dinsdag 25 september 2012 @ 14:16:
Wat werkt er niet precies? Wordt het plaatje herhaald? Dat komt doordat je background-repeat op no-repeat moet zetten. Standaard wordt aan achtergrondafbeelding namelijk zowel verticaal (y-as) als horizontaal (x-as) herhaald. Dat kan je aanpassen door voor background-repeat no-repeat, repeat-y, of repeat-x te gebruiken.

Dat weet ik , dat heb ik ook toegepast.
Maar de afbeelding wordt helemaal niet weergegeven.

Wow, sorry ik had even een faal moment!
Ik zat op index.html te kijken terwijl ik het op acties.html had aangepast .

Heel erg bedankt voor de tips iedereen .

[ Voor 13% gewijzigd door Timons106 op 25-09-2012 14:25 ]

[Keeper]

Klopt het pad naar het plaatje? Heb je nog ergens anders CSS staan die dingen anders laten werken? Zie http://jsfiddle.net/uYJwN/ voor een werkend voorbeeld. Misschien kan je daar wat van je eigen code inzetten...

[Wary87]

Ik zou het oplossen door elke li een aparte class te geven in plaats van CSS3 pseudo-selectors te gebruiken. Oudere browsers kunnen hier niet goed mee omgaan want zelfs een :last-child hebben oudere nog ondersteunde ie versies nog moeite mee.

Via de CSS kan je dan gebruik maken van een sprite waar je alle plaatjes en hovers in verwerkt. Met de classes kan je dan de coördinaten aanroepen van de sprite waarbij je het beste alle plaatjes in een lange rij onder elkaar kan zetten met veel pixels tussen de plaatjes. Dan heb je volledige controle over de positie van de achtergrond plaatjs in de list.

Let er wel op dat plaatjes slecht indexeren. Dus ik zou alsnog tekst invoeren maar deze een text-indent geven van -9999px zodat ze niet te zien zijn op het beeldscherm maar wel te indexeren door een zoekmachine.