allineamento verticale

[oronze]

ho letto e cercato in internet ma non capisco perchè non vada...
allora...ho un div comn position absolute

#nav_3{
    background-color: #CC6600;
    position: absolute;
    width: 100px;
    height: 30px;
    top: 0px;
    left: 206px;
    text-align: center;
    vertical-align: bottom;
} 

e vorrei che il testo al suo interno fosse allineato middle (al centro) ma in alternativa anche bottom (però non proprio bottom ma bottom meno 3 px....come faccio? non mi allinea nulla in verticale...in orizzontale funziona tutto correttamente perchè?

[Mich_]

Con il posizionamento assoluto, la centratura vert e` uguale a quella orizz.:
top: 50%;
margin-top: (meta` dell'altezza)


Il text-align allinea solo il testo (o altro elemento inline) all'interno della riga orizzontale
Il vertical-align allinea elementi di tipo table

Invece per centrare un testo (di un'unica riga) all'interno del suo

, ti basta mettere il line-height uguale all'altezza del blocco.

[oronze]

ok...non ho capito molto però :-P potresti supportarmi con un paio di righette di css
il testo non è dentro un p in quanto è una semplice parola contenuta nel div
<div class="nav_3">Testo</div>

[Mich_]

Il testo dentro un <div> e` un errore di semantica (e anche di sintassi se usi XHTML).

<div class="nav_3">

Testo</p></div>

CSS:

#nav_3{
    background-color: #C60;
    /* position: absolute; 
    top: 0px;
    left: 206px;*/
    width: 100px;   /* potrebe non starci. Meglio usare unita` di misura in em */
    height: 30px;
}
#nav_3 p {
    width: 100%;
    height: 100%;        /* oppure 30px; */
    text-align: center;   /* centratura orizz */
    line-height: 30px;   /* centratura vert */
}

[oronze]

grazie....uso xhtml, non sapevo dell'obbligo del p...ma...perchè in em? che differenza c'è?
edit: bugia, con explorer si vede bene, con firefox devo mettere 15 invece che 30...perchè?

[oronze]

piccolo uppettino indiscreto

[Mich_]

Originariamente inviato da oronze
piccolo uppettino indiscreto

Su cosa uppi?
Non ho capito la domanda, per questo non ho risposto.

[oronze]

ok...rispiego....
allora, mi hai scritto in un commento al css che è preferibile porre le dimensioni in em piuttosto che in px perchè "potrebe non starci.". Non ho capito sta cosa e che differenza c'è tra em e px...
punto due....il tuo sistema funziona correttamente con explorer mentre con firefox vedo il testo spostato in basso di circa 15px...come mai? potrei risolvere facendo caricare due css diversi in base al browser ma preferirei evitare

[Mich_]

Originariamente inviato da oronze
ok...rispiego....
allora, mi hai scritto in un commento al css che è preferibile porre le dimensioni in em piuttosto che in px perchè "potrebe non starci.". Non ho capito sta cosa e che differenza c'è tra em e px...

La risposta la trovi in tutti i manuali CSS, probabilmente molto meglio di come posso rispondere io.
px e` una misura fissa, em e` una misura che dipende dalla dimensione del font.
Dato che non puoi sapere quale font usa l'utente (la tua eventuale scelta viene sovrascritta dalle impostazioni del browser) e` meglio se usi le dimension dei blocchi che devono contenere testo in em.

punto due....il tuo sistema funziona correttamente con explorer mentre con firefox vedo il testo spostato in basso di circa 15px...come mai? potrei risolvere facendo caricare due css diversi in base al browser ma preferirei evitare

Non dovrebbero esserci quelle differenze.
A me risulta che il testo viene centrato in vert. se line-height e` uguale ad height.
Potrei aver dimenticato qualcosa; l'argomento e` gia` stato affrontato in passato: con una ricerca nel forum (bottone in alto) trovi sicuro altre discussioni con soluzion complete.

[oronze]

perfetto...ho risolto...allora, a parte che sto riscrivendo tutto perchè mi ero scordato di piazzare i div all'interno di un altro div nav (visto che sono i pulsanti per la navigazione) per il mio problema ho risolto facendo così (posto solo una porzione di codice magari può servire ad altri utenti che hanno un problema simile)

#nav_2{
    background-color: #909000;
    width: 100px;
    height: 30px;
    position: relative;
    top: 0px;
    left:3px;
    float:left;
}
#nav_2 p{
    text-align: center;
    margin: 0px;
    line-height: 30px;
}
#nav_3{
    background-color: #CC6600;
    width: 100px;
    height: 30px;
    position: relative;
    top: 0px;
    left:6px;
    float:left;
}