6 6 6 D e V i L 6 6 6 ’s B l o g

Oggi pacioccavo con il CSS, e ne è venuto fuori qualcosa che ho ritenuto carino, ho deciso di condividerlo.

Ecco cosa ci serve:
Immagine sinistra (sfondo_sx.gif):

Immagine destra (sfondo_dx.gif):  

Logo (logo_30x30.gif):

CSS:

#main_menu {
padding: 9px;
background-color:#003300;
overflow:auto;
padding-bottom: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#main_menu ul, #main_menu ul li {
display: inline;
}
#main_menu a, #main_menu .logo {
float:left;
}
#main_menu a {
cursor: pointer;
color: #FFFFFF;
text-decoration:none;
margin:0 10px;
line-height:27px;
background:url(sfondo_dx.gif) right top no-repeat;
font-size: 12px;
padding-right:9px;
background-color: #006600;
}
#main_menu span {
background:url(sfondo_sx.gif) left top no-repeat;
display:block;
padding-left:9px;
}
#main_menu a:hover {
background-color:#007700;
}


Codice HTML:

<div id="main_menu">
<ul>
<li class="logo"><img src="logo_30x30.gif" width="30" height="30" border="0"></li>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Catalogo</span></a></li>
<li><a href="#"><span>Marchi</span></a></li>
</ul>
</div>