[CSS] background-image in menu en daaroverheen buttons

[T i M]

Aan de linkerkant van mijn site heb ik een menu, het menu opsich is een plaatje. Mijn code van het menu is alsvolgt:

Cascading Stylesheet:

#main_left {            
        width: 207; 
        float: left;                
}
#menu_left {
    width: 207px;
    height: 256px;
    background-image: url(../images/layout/menu.png);   
    margin-top: 5px;
}

Het probleem: in het menu moeten ook knoppen komen. Je raadt het al, die knoppen zijn ook plaatjes. Nja geen probleem zou je zeggen, maar ik krijg ik mijn menu helemaal geen button te zien. Als ik die class ergens anders opneem in mijn HTML code dan komt ie wel tervoorschijn. Als ik de button in de HTML code opneem zoals dit:

HTML:

<img src="path/naar/img" height="getal" width="getal">

Dan pakt ie hem wel. Dit is de code van mijn button:

Cascading Stylesheet:

.menu_home { background-image: url(../images/layout/menu_l_home.png); width: 192px; height: 32px; }

Dit is mijn stukje HTML:

HTML:

<div id="main_left">
    <div id="menu_left">
                 <a href="#" class="menu_home"></a> 
                
    </div>      
</div>

[user109731]

Ik denk dat het probleem is dat je een inline element (<a>) een height en width wil geven. Dat kan alleen met block-level elementen.

Je kunt ervoor zorgen dat die link zich als een block gedraagt door display:block; toe te voegen aan .menu_home

[erwin85]

Probeer er list items in te zetten. En in die list item een plaatje te zetten.

Dus zo:

<div id="main_left">
<div id="menu_left">
<ul>
<li class="menu_home"><a href="#"></a></li>
</ul>

</div>
</div>

Ik hoop dat het lukt zo.

[ Voor 59% gewijzigd door erwin85 op 31-08-2006 12:32 ]