menu

[matteo01]

Sto cercando di imparare l' uso dei css, ma sto incontrando già mille problemi solo nel cercare di creare un menu!!
In pratica ho creato un elenco non ordinato con 4 link. (contenuto in un div con larghezza impostata a 760 px! Il menu che voglio realizzare DEVE AVERE anch' esso larghezza totale di 760 px!!)
a questo elenco ho appricato queste regole CSS:

ul li {
font: bold 12px Arial, verdana, "sans-serif";
text-align: center;
width: 190px;
border: 1px inset red;
float: right;
list-style: none;
}

ul li a:link {
color: #FF0000;
width: 100%;
text-decoration: none;
background-color: #666666;
}

ul li a:visited {
color: #000000;
width: 100%;
text-decoration: none;
background-color: #666666;
}


ul li a:hover {
color: #000000;
width: 100%;
text-decoration: underline;
background-color: #ff0000;
}

E vi elenco i problemi e le varie cose che non riesco a capire:

In internet explorer :
- Pagina visualizzata come vorrei se imposto il float: right; mentre se imposto float: left; non so perchè ma il brovser mi lascia 1 spazio vuoto a sinistra e l' ultima voce del menù scende alla riga sucessiva

In firefox:

- sia impostando float a left o right è abbondante lo spazio vuoto sulla prima riga e una voce del menu e sempre su una seconda riga
- Il colore di sfondo impostato per il link è presente soltanto in corrispondenza del testo del link, mentre per il resto della larghezza dell' elemento LI viene visualizzato il colore di sfondo dell' elemento contenitore
- la riga del menu è posizionata 1 riga più in basso rispetto all' inizio del div, mentre io la vorrei completamente in alto

Se qualcuno riesce a darmi qualche dritta gli sarei molto grato!!

[fcaldera]

inizia col togliere margin e padding dalla lista

ul {
margin : 0;
padding : 0;
}

poi non sarebbe se facessi un esempio dell'effetto finale, di come lo vorresti... una screenshot o simile

[matteo01]

diciamo che quello che immagino è molto simile al menu di Html.it, soltanto con ogni voce divisa da un bordo e col link che oltre a cambiare colore di sfondo al passaggio del mouse acquisti anche 1 sottolineatura in quella situazione..

[matteo01]

Allora, adesso ho fatto questo:
- Tolto i margini e padding a ul
- impostato float: left; oltre che ad ul li{...} anche ad ogni regola ul li a:....

Ed ho ottenuto che il colore di sfondo impostato viene visualizzato per tutto l' elemento LI anche con firefox, e non soltanto per il testo del link, e eliminato lo spazio vuoto nella riga.

Ora, se quello che ho fatto è giusto, resta soltanto 1 problema!

in internet explorer tutto va perfettamente, mentre con firefox l' ultima voce del menù mi va a capo! Credo sia colpa della larghezza impostata a 190px con width, che se vi si aggiunge lo spessore dei bordi logicamente aumenta! però se porto la larghezza a 188px firefox la interpreta correttamente, mentre in explorer il menù appare più corto di quel che dovrebbe..
Anche impostando la larghezza di LI con width: 25% si ha lo stesso problema...

[matteo01]

Praticamente è il problema (credo) che explorer interpreta con width sia margini padding e bordi, e non solo l' area del contenuto come invece fa explorer! Ma credevo che fosse un problema risolto in explorer 6!
Ho provato anche ad annullarlo con questo codice:

ul li {
font: bold 12px Arial, verdana, "sans-serif";
text-align: center;
width: 190px;
border: 1px inset red;
float: left;
list-style: none;
voice-family: "\"}\"";
voice-family: inherit;
width: 188px;
}

Ma continua a portarmi LI a 188px+bordi su firefox e 188px totali su explorer!!

[Mich_]

Nel box model del W3C (e di molti browser) il width esclude padding, border, margin

Nel box model di IE, invece, il width include padding e border, mentre esclude margin.

Pero` in IE6, se lavora con la DTD XHTML Strict, il box model dovrebbe essere quello corretto del W3C.

Perche` IE6 riconosca il DOCTPE occorre che questo sia nella prima riga: occorre quindi omettere qualsiasi commento ed anche il prologo XML (che sarebbe consigliato dal W3C, ma non e` obbligatorio).

[matteo01]

Il fatto è che la mia pagina è in HTML 4.01
non c'è un modo per correggere questo errore??

[Mich_]

Passare a XHTML non e` poi cosi` complicato.
C'e` anche uno strumento che fa la conversione in automatico (pero` occorre poi verificarla): Tidy.

[matteo01]

Quindi per poter usare i CSS HTML non è indicato?
Sono alle prime armi con entrambi e dopo che mi son studiato html (perchè fino ad oggi usavo dreamweaver) e ho appena iniziato a studiare i css, mettermi cobntemporaneamente a studiare XHTML non mi andrebbe..

[matteo01]

nessuno sa suggerirmi qualcosa?