Menu con i CSS

[Lucasweb]

Salve ragazzi,
sto provando a fare un semplice menu disegnato con photoshop in puro CSS
senza l'utilizzo di tabelle.
In allegato vedete il file di immagine errato e quello che invece dovrebbe venire.
Ho dei problemi però quando lo costruisco con il codice.

In pratica ci sono degli spazi in alto ed in basso alle varie immagini
che metto come sfondo dei div che contengono gli elementi del menu.
Anche impostando a 0 i margini e i padding.

[webdemo]

credo si possa evitare di creare una img: freccia+filo+fondo, forse basta estrapolare la freccetta...


cmq posta il codice, altrimenti è difficile aiutarti


ciaux

[andrea.paiola]

magari usa delle liste non ordinate (e non dei div) per fare i menu

[Lucasweb]

Ho modificato un po le cose ieri alle tre di notte più o meno.
Va meglio ma ancora non ci siamo.

Il codice:

<style>
/** MENU 3 ** sfondo sfumato **/
ul.menu3 {
width:200px;
list-style:none; /* elimino i punti elenco */
margin:0; padding:0; /* elimino i rientri delle liste */
}
ul.menu3 li a {
display:block; /* il link occupa tutto lo spazio orizzontale */
text-decoration:none; /* elimino la sottolineatura, che si tratta di un link si capisce dalla struttura */
padding:0 1em; /* lascia spazio far il bordo del menu e il testo del link */
height:2em;line-height:2em; /* altezza del link: height e line-height devono avere il medesimo valore */
}
ul.menu3 li {
display:inline;
background:url('images/menu_center.gif'); /*pre-load immagine*/
}
ul.menu3 li a:link, ul.menu3 li a:visited {
background:#ccc;
color: #009;
background:#eee url('images/menu_center.gif') 100% 0 repeat-y;
} /* colori per il link */
ul.menu3 li a:hover, ul.menu3 li a:active {
background:#eee url('images/menu_center.gif') 100% 0 repeat-y;
color:#c00;
} /* colori per l'effetto roll-over */

#menu_top {
background: url('images/menu_top.gif');
background-repeat : no-repeat;
height: 6px;
}
#menu_bottom {
background: url('images/menu_bottom.gif');
background-repeat : no-repeat;
height: 6px;
}

#menu {
width: 200px;
background:#000;
}
</style>

<div id="menu">
<div id="menu_top"></div>
<ul class="menu3">
[*]Sezione Link 1
[*]Sezione Link 2
[*]Sezione Link 3
[*]Sezione Link 4
[*]Sezione Link 5
[/list]
<div id="menu_bottom"></div>
</div>

L'immagine dell'effetto che ottengo.
Il nero che si vede è uno sfondo del div per rendermi conto dello spazio.

[andrea.paiola]

innanzitutto metti ul, ul *{margin:0;padding:0}
per rendere cross browser

[Lucasweb]

Assurdo.
Su firefox va bene e su explorer non.

Come mai ?