Newsgroup: it.comp.www.html
Titolo: Allineamento verticale.

Salve gente, è il mio primo messaggio in questo newsgroup.
Il mio problema (solo il primo di una lunga serie che vi proporrò, ho il
presentimento) consiste in questo: ho un div alto "tot" pixel, come faccio a
posizionare il testo centralmente *in senso verticale* rispetto ad esso?
Usare   vertical-align: middle;   nello stile del div non funziona... non so
dove sbattere la testa!
MaxArt

Non si può.....

 Non si può.....
Alé. Alla faccia di chi dice che i CSS possono sopperire alle tabelle in
tutto e per tutto, ma porc!!! :-(
MaxArt

 tutto e per tutto, ma porc!!! :-(
mi associo a questa affermazione ;-)
alla fine è meglio fare una tabella e con poco codice e senza accrocchi 
ti funziona con tutti i browser!
-- 
             /\ SCIRIO - 
http://scirio.altervista.org
/vvvvvvvvvvvv \-----------------------------------------------,
`^^^^^^^^^^^^ /=============================================="
             \/ 1 battuta al giorno? 
http://tinyurl.com/37ee7

 afferma che:

Con position.
Ciao.
-- 
[Non siamo materia che aspetta, ma schemi che si perpetuano.]
Rhadamanth.net (
http://www.rhadamanth.net
)
FIAG (
http://www.fiag.it
)
Savona Web (
http://www.savonaweb.net
)

 
YouGetWhatYourAbleToGet
-- 
Spoken: How much is that gorilla in the window?
Take our advice, At any price, A gorilla like Magilla is mighty nice.
Gorilla, Magilla Gorilla for sale

> ho un div alto "tot" pixel
Lasci ((tot pixel/2) - n) di top-margin:
<div style="height: 100px">
<p style="margin-top: 45px;padding: 0px;">Testino</p>
</div>
Il discorso di usare tabello o meno per la formattazione grafica è un
discorso di compromesso tra "semantica" (che poi incide anche sulla
accessibilità) e resa grafica.
In teoria le tabella dovrebbe essere usata per presentare dati in forma
tabulare, poi ovviamente c'è sempre l'eccezione..
-- 
:: Massimiliano Mattei
:: Project Leader
:: EVA Group :: 
www.evagroup.net
:: Soluzioni extranet :: e-business :: corporate portal

 YouGetWhatYourAbleToGet
Ma a me andrebbe pure bene, solo che sembra che corrente che va per la
maggiore sia quella secondo cui il layout table-less č Bene, mentre il
layout con le tabelle č Male. Questo non va bene secondo me, perché se una
cosa la dobbiamo imparare č che tabelle e CSS sono cose diverse: non c'č
dubbio che i CSS siano uno strumento grandemente piů potente, ma non č
esente da limiti. Uno di questi limiti č appunto il centramento verticale.
Adesso io mi chiedo che cavolo ci voleva per implementarlo da subito, ma
dico... :-(
E avrei anche un bel po' da dirne, sui CSS. Un'eccellente idea ma a volte
con cadute di stile veramente deprimenti. Per certe cose č addirittura da
preferire l'errata interpretazione del box model di IE 5.x...
MaxArt

 Con position.
Una risposta del genere sembra che presupponga che "position" non l'abbia
mai sentito nominare: non č cosě. Ho provato in tanti modi coi
posizionamenti, ma di qualcosa di veramente effettivo manco a parlarne!
Guarda la pagina di questo tipo:
http://www.aspekt1.net/ms/dev/vertical-align.html
Si č davvero impegnato, non c'č che dire. Ma una soluzione definitiva e
unica per tutti i browser non l'ha trovata, e per Opera e NS ha dovuto
ricorrere ai CSS2.
MaxArt

 preferire l'errata interpretazione del box model di IE 5.x...
Beh il box model di IE è sbagliato, ma non del tutto stupido ha una sua
logica. E' più simile a come penserebbe una persona comune ad una tabella
per impaginare.
Il problema grave di IE è però il non voler correggere l'errore dopo ben
tre versioni di browser.


 mai sentito nominare: non č cosě.
[CUT]
Non presuppone niente, elencavo un modo per ovviare al problema.
Come hai visto nell'esempio del post superiore position permette di
ricreare il layout voluto.


 ben tre versioni di browser.
Brutta rogna, eh?
MaxArt

 Insomma, tutto questo peso non ce lo vedo.
Secondo me se i CSS li usi come si deve il risparmio in termini non solo di
codice ma anche di tempo č notevole; una volta che hai creato il tuo bel
foglio di stile cosa ci vuole a richiamarlo col tuo bel
<div id="nome div">testo</div>
o
<div class="class">testo</div>?

 <div class="class">testo</div>?
certo, se però non devi smadonnare e fare accrocchi (che non vanno su 
tutti i browser) per un semplice allineamento verticale!


 fregato!
[CUT]
Basta utilizzare il box model standard e due righe (due!) di hack per IE. E
il tuo layout avrà una corrispondenza del 100% su ogni browser.


 tutti i browser) per un semplice allineamento verticale!
A parte che non č cosě difficile, in ogni caso comunque trovi decine di
risorse sul web gratuite che ti guidano passo passo alla creazione del
layout voluto. Basta smanettare una volta. Capito il concetto le volte
successive ci impiegherai mezzo secondo.


 successive ci impiegherai mezzo secondo.
la soluzione che mi era stata proposta x un allineamento verticale e 
centrale senza tabelle era questo:
http://www.constile.org/template/centrare_il_box/
solo che a parte non funzionare con tutti i browser (e chiudiamo un 
occhio :p)
rimpicciolendo la pagina scrolla giustamente, ma mangia il margine di 
sinistra e in alto
inoltre la cosa sembra non funzionare se si usano le percentuali, o 
almeno non funziona con quella verticale
temporaneamente ho risolto usando le tabelle, e ho risolto tutti i problemi
però appunto è un pò brutto mischiare le cose, anche per una questione 
di inclusione


 di inclusione
In ogni caso non vedo tutto questo problema.
Appurato che usare le tabelle crea molti più problemi di quelli che
risolve, appurato che si sta usando uno strumento sviluppato per fare
tutt'altro, nessuno mangia chi usa le tabelle per il layout.
Per cui se non siete capaci a gestire layout complessi senza tabelle,
usatele e buona notte.
Nessuno vi dirà niente. Nel mentre continuate a studiare i CSS e imparatene
sempre di più i trucchi e i segreti.


 IE. E il tuo layout avrà una corrispondenza del 100% su ogni browser.
Mmm, non so se ci siamo intesi. La difficoltà consiste nel controllare
adeguatamente la larghezza totale dei box quando si ha a che fare con
lunghezze elastiche o con percentuali. Cosa intendi con "utilizzare il box
model standard"? E quale sarebbe l'hack di cui parlavi?
MaxArt

 model standard"? E quale sarebbe l'hack di cui parlavi?
Il box model standard è questo:
http://www.w3.org/TR/REC-CSS2/box.html
E' semplice basta dare un'occhiata al disegno in box dimension per capire
come funziona.
Il box model errato di IE invece si comporta in modo differente.
Uno degli hack è il Tantek method:
voice-family: "\"}\""; 
voice-family: inherit; 
http://www.rhadamanth.net/acc_boxmodel_err.php
http://www.rhadamanth.net/difbrow.php


 
http://www.rhadamanth.net/difbrow.php
Grazie della dritta! Purtroppo, non risolve però la mia idea, perché ancora
non è comprensiva dei margini.
MaxArt