Centrare contenuto nel DIV

[monigna82]

Salve...
allora dopo mille consigli da parte vostra sono riuscita a creare un menu semplicemente con i div... è venuto anche abbastanza bene ma ho un problema tra i browser...

Firefox me lo fa visionare correttamente, mentre IE o Chrome mi danno un avanzo di pixel....

Mi spiego meglio... con firefox me lo fa vedere così: clicca

Mentre con IE non mi mantiene la formattazione del testo e avanzano dei pixel:clicca

In HTML il codice è questo:
si considera che tale div è contenuto in un altro con queste proprietà:

#menuSUPERIORE
{
	position:absolute;
	width:943px;
	top:100px;
	left:13px;
	right:13px;
	}

<div id="menu01o" style="text-align:center">
<ul>[*]CATEGORIE[*]ALBERGHI[*]RISTORANTI[*]SHOPPING[*]VIAGGI[*]PROMOZIONI[*]SERVIZI[*]PUBBLICIT&Aacute;[/list]
</div>

mentre il CSS è:

#menu01o { 	
width: 941px;
font-family: Helvetica, Arial, sans-serif;
font-size: 65%; }

#menu01o ul{ 	
margin: 0; 
list-style: none; 	
padding-left: 0; 	
height: 28px; 	
cursor: auto; 	
background-color: #2d87aa; }

#menu01o li{ 	
font-size: 0.7em; 	
display: inline; 	
width:117px; 	
margin: 0; 	padding: 0; 	
font-family: Arial, Helvetica, sans-serif; }

#menu01o a:link, #menu01o a:visited{ 	
float: left; 	
background:url(../../images/btn_nuovi/bottone.jpg); 	
background-position: 0 0; 	
color: #fff; 	
text-decoration: none; 
padding-top: 0.75em; 	
padding-bottom: 0.6em; 	
width: 6.2em; 	
border-left-width: 0px; 	
border-top-style: none; 	
border-right-style: none; 	
border-bottom-style: none; 	
border-left-style: none; 	
padding-right: 1.8em; 	
padding-left: 2.5em; 	
font-weight: bold; }

#menu01o a:hover, #menu01o a:focus, #menu01o a:active{ 	
background-position: 0 28px;
color: #000000; }

[ashtur1]

io non userei la position absolute ma

#menuSUPERIORE
{

width:943px;
margin:100px auto 0 auto;

}
o padding-top a scelta
ciao

[Mich_]

Il problema potrebbe essere dato dall'uso di padding: in IE il padding ed i bordi fanno parte del width, mentre nei browser conformi padding e border vanno ad aggiungersi al width.

Comunque in quel codice ci sono alcune cose che non capisco:
1. Perche` il float e` dato al tag <a> e non al[*]? Andrebbe dato ai tag[*].

2. Perche` all'interno di un blocco di larghezza fissa (in px - il[*]) usi un blocco con dimensioni in em? Questo porta a problemi: prova ad aumentare la dimensione del font e vedrai che la cosa non e` cosi` bella.
Mi pare di aver capito che vuoi un layout fisso (la larghezza totale e` definita in px): allora tutto deve essere in px, e le scritte devono starci fino ad una dimensione di 18-20px (che e` quello che usano persone con difetti di vista). Il layout deve mantenersi e le scritte non devono sovrapporsi; eventualmente e` permesso che alcuni blocchi vadano a capo se non ci stanno nella larghezza.

[monigna82]

è qualcosa che non mi spiego... ma se il FLOAT lo metto nel tag <a> mi funziona tutto correttamente... se invece lo inserisco nell'[*] mi sparisce l'immagine di fondo e non mi fa più allineare il testo... ho provato in mille modi e facendo prova di pixel in pixel...

Per quanto riguarda poi le misure in px e em... ammetto che quelle in em derivano da un tutorial... che mi sono riadattata a mio favore... questa diversità di unità di misure provoca veri e propri disastri o è più una cosa di correttezza sintattica?

Come posso allineare il testo al centro del singolo pulsante.. se provo a centrarlo verticalmente un pò di più mi aumenta anche l'altezza del div, cosa che poi mi sfalla il rollover dato che se aumenta la dimensione verticale appare un minimo di immagine "gialla" (ovvero immagine che mi appare sul rollover modificando le coordinate del background-positio)

[Mich_]

Originariamente inviato da monigna82
è qualcosa che non mi spiego... ma se il FLOAT lo metto nel tag <a> mi funziona tutto correttamente... se invece lo inserisco nell'[*] mi sparisce l'immagine di fondo e non mi fa più allineare il testo... ho provato in mille modi e facendo prova di pixel in pixel...

Questo mi fa pensare ad un errore da qualche altra parte, per cui le cose non si innestano piu` correttamente. Prova a fare una verifica della correttezza sintattica del codice (usa i validatori HTML e CSS).
Comunque nell'altro post ti avevo consigliato di inserire nel CSS dei tag <a>:
display:block; width:100%; height: 100%;
sono le cose che servono per far coincidere il link con il suo contenitore

Per quanto riguarda poi le misure in px e em... ammetto che quelle in em derivano da un tutorial... che mi sono riadattata a mio favore... questa diversità di unità di misure provoca veri e propri disastri o è più una cosa di correttezza sintattica?

Non e` questione di sintassi, ma di logica, se poi le misure nn sono congruenti hai effetti strani e impredicibili (tipo quello segnalato sopra, o quello segnalato sotto)

Come posso allineare il testo al centro del singolo pulsante.. se provo a centrarlo verticalmente un pò di più mi aumenta anche l'altezza del div, cosa che poi mi sfalla il rollover dato che se aumenta la dimensione verticale appare un minimo di immagine "gialla" (ovvero immagine che mi appare sul rollover modificando le coordinate del background-positio)

Per il "filo di giallo" puoi sempre allargare l'immagine e lasciare lo spazio per qualche px di gioco. In pratica: tu hai le imamgini alte 28px (l'immagine doppia e` quindi 56px); falle alte 30+30 (o anche di piu`) in modo che se sballa di 1 px non si veda.
Per allineare un testo di un'unica riga in verticale si puo` usare il line-height che deve essere messo uguale all'height dell'oggetto.

[monigna82]

Scusate se rompo ma non riesco a venirne a capo...
allora ho fatto la validazione sia del CSS che dell'HTML sul sito della W3C e mi sono passati entrambi... a parte un errore sull'html che però non capisco va tutto bene il codice.

Ora posto la pagina html e anche il css perchè bhò ammetto che sto entrando in un limbo assurdo.
Ad ogni modo nel frattempo sto anche cercando di mettere mani sulle misure.. vorrei portarle tutte in pixel. Il menu verticale come puoi vedere sfalla di alcuni pixel in altezza che non capisco dato che lo fa solo sull'ultimo :S

Pag HTML
Pag CSS

[Mich_]

Che caos!!!

In allegato vedi un pezzetto di come visualizzo la tua pagina nel mio browser (Mozilla in una finestra di circa 800 x 600px)

Andando ad analizzare il codice, noto che fai gran uso di posizinamento assoluto, che e` proprio quello che porta a quegli effetti.
Finche` non sarai piu` addentro nelle tecniche dei CSS, dovresti dimenticare completamente il posizionmento: tra i "link utili" ci sono numerosi esempi di layout, qualsi tutti senza posizionamenti.

Inoltre fai gran usi di formattazione mediante attributi HTML: dovresti toglierla, dato che interferisce con i CSS, e browser diversi risolvono i conflitti in modo diverso. Questo ti fa anche togliere quell'attributo background che non esiste in XHTML.

Anche le tabelle per formattare sono da evitare: le tabelle devono servire solo per inserire dati tabellari; un uso improprio riduce l'accessibilta` della pagina, e penalizza la pagina nell'indicizzazione da parte dei motori di ricerca.

[monigna82]

Mhhh ok accetto il suggerimento di andarmi a vedere i layout tra i link utili ma potresti spiegarmi cosa intendi con:
"Inoltre fai gran usi di formattazione mediante attributi HTML: dovresti toglierla, dato che interferisce con i CSS, e browser diversi risolvono i conflitti in modo diverso. Questo ti fa anche togliere quell'attributo background che non esiste in XHTML" (sorry ma non ho trovato come ricitare :S)

a quali attributi html ti riferisci?

Si la tabella l'ho usata per sistemare la parte alta della pagina perchè era già fatta così on line e ho cercato, ammetto di fa la furba e invece di ricostruirmi tutta la parte ce l'ho inserita dentro...
perdono!

[monigna82]

ma come mai te la visualizzi in quel modo? porca miseria ho provato a vedere la pag da più monitor e ho anche settato il mio a 800*600 ma quel brutto scherzetto non me lo fa...
Mhhh mi sarebbe stato utili se invece me lo avesse fatto... avrei potuto testare ogni cosa....

Ho provato sia con IE, con Firefox che con Chrome :S

[Mich_]

Attributi HTML: quelli inseriti dentro i tag.
Attributi di formattazione: quelli che portano a dimensioni,colori, e altre caratteristiche non funzionali, ma di aspetto.
Se usi gli attributi HTML per la formattazione, ed usi anche i CSS, poi i browser non sanno piu` quale tipo di attributi seguire: alcuni danno la precedenza agli attributi HTML, altri ai CSS.

Io ho il font minimo settato a 14 px, dato che ho i pixel piccoli e con font piccoli non riesco a leggere.
Prova ad ingrandire il font nel tuo browser.