Newsgroup: it.comp.www.html
Titolo: Centrare il testo in un DIV

Gentili iscritti, ho provato a guardare un po' di post precedenti 
relativi alla centratura. Ma non ho trovato soluzioni semplici. E' mai 
possibile che non si possa usare il tag vertical-align: middle 
all'interno di qualcosa per cercare in un box quadrato di centrare il 
testo usando DIV?
<div style="font-size: 15px; text-align: center; background-color: 
#ff0000; color: #ffffff; width: 100px; height: 100px;">
Ciao
</div>
Quali altre soluzioni semplici per centrare il testo? Non esiste un tag 
predefinito? E' proprio necessario impostare margin, padding, ecc.?
Grazie!

 testo usando DIV?
Nella domanda intendevo "Centratura verticale del testo", mi sono 
dmenticato di scriverlo, scusate. Un saluto.

 ha scritto nel messaggio
news:beh07n$tla$2...@news.ngi.it...

<div style="font-size: 15px; text-align: center; background-color:
#ff0000; color: #ffffff; width: 100px; height: 100px;">
  <table border="0" cellpadding="0" cellspacing="0" width="100%"
height="100%">
    <tr>
      <td width="100%" align="center" height="100%">Ciao</td>
    </tr>
  </table>
</div>
forse cosě ?
--
Ola Giancarlo
__________\ ||| /__________
                    O-O
                     -_-
http://www.fattimiei.net/
http://www.giocaestudio.it/

> forse cosě ?
Ti ringrazio, sei stato gentile a rispondermi. Mi sono perň dimenticato 
di dire che vorrei provare a scrivere codice XHTML senza usare le 
tabelle come elementi per la formattazione. Quindi usare solo i vari tag 
<div>, <span>, non le tabelle.
Grazie comunque, ciao, un saluto.
--
by Paolo Guagliumi
Casale Monferrato - (AL)

"Paolo G." ha scritto:
| Gentili iscritti, ho provato a guardare un po' di post precedenti
| relativi alla centratura. Ma non ho trovato soluzioni semplici. E' mai
| possibile che non si possa usare il tag vertical-align: middle
| all'interno di qualcosa per cercare in un box quadrato di centrare il
| testo usando DIV?
Ciao Paolo,
    fai sempre domande interessantissime! Il vertical-align serve per
l' allineamento di elemento un rispetto alla attuale riga di testo.
Dai uno sguardo qui per capire a cosa serve esattamente:
http://www.w3schools.com/css/tryit.asp?filename=trycss_vertical-align
Soluzioni semplici direi che non ce n'e'...ne ho elaborate due, questa
č la prima, che serve soprattutto a centrare un numero conosciuto a priori
di righe di testo all' interno di un div. Usa il dimensionamento del div in em.
Per farti capire gli em, ecco un estratto della reference w3c all' url
http://www.w3.org/TR/REC-CSS2/syndata.html
 :
"The 'em' unit is equal to the computed value of the 'font-size' property
of the element on which it is used. The exception is when 'em' occurs in
the value of the 'font-size' property itself, in which case it refers to the font size
of the parent element. It may be used for vertical or horizontal measurement.
(This unit is also sometimes called the quad-width in typographic texts.)
Example(s):
The rule:
H1 { line-height: 1.2em }
means that the line height of H1 elements will be 20% greater than
the font size of the H1 elements. On the other hand:
H1 { font-size: 1.2em }
means that the font-size of H1 elements will be 20% greater
than the font size inherited by H1 elements."
La questione del dimensionamento in em č delicata, soprattutto
perchč i differenti browsers rendono in maniera differente.
Ho trovato qui una soluzione che parifica la presentazione
degli elementi dimensionati in em nei vari browsers:
http://www.thenoodleincident.com/tutorials/typography/index.html
Riepilogando, ecco la prima soluzione che ho pensato in file html completo.
Ti basta copia-incollarla nel tuo editor.
E' stata testata con IE5.5, Opera 7.0 e Mozilla 1.3.
La seconda soluzione che ho trovato č molto piů flessibile e non ha le
limitazioni del dimensionamento in em nč del numero di righe che va conosciuto
a priori... magari la posto domani.
Ciao!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd
">
<html>
<head>
<title>Testo centrato verticalmente con gli em - by SantaKlauss</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 2.6">
<style type="text/css">
body{
    margin: 0px;
    padding: 0px;
    font-size: 76%;
    font-family: georgia,serif;
    }
div#embox{
    width: 30em;
    height: 9em;
    border: 1px solid #000;
    text-align: center;
    }
div#embox p{
    margin: 0px;
    padding: 0px;
    position: relative;
    top: 4em;
    font-size: 1em;
    /*viene prevista una sola riga di testo,
    quindi 4righe sopra (e 4 sotto di conseguenza)*/
    }
</style>
</head>
<body>
<div id="embox">
    <p>Questo testo e' centrato in verticale e in orizzontale</p>
</div>
</body>
</html>


Non č la migliore delle soluzioni, ma potresti adattarla al tuo caso
particolare agendo sullo spaziatore.
Ecco il codice:
<html>
<head>
<title></title>
<style type="text/css">
body{
    margin: 0px;
    padding: 0px;
    font-size: 76%;
    font-family: verdana, arial, sans-serif;
    }
div#spazio{
 height: 50%;
 }
div#contenitore{
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    text-align: center;
 background-color: #00f;
    }
div#interno{
    margin: 0px;
    padding: 0px;
    position: relative;
    background-color: #f00;
    }
</style>
</head>
<body>
<div id="contenitore">
 <div id="spazio"> </div>
    <div id="interno">Mettici quello che vuoi</div>
 <div id="spazio"> </div>
</div>
</body>
</html>
Se non ti importa l'altezza del div 'contenitore' la puoi lasciare cosě.
Ciao.

 testo usando DIV?
[...]
Pensavo funzionasse con un margin-top: auto; margin-bottom: auto; ma invece
non va...
Che controsenso... con i margini laterali funziona!...
:(
Mi spiace non essere in grado di aiutarti.
--
Wildchild

"Paolo G." ha scritto:
| Gentili iscritti, ho provato a guardare un po' di post precedenti
| relativi alla centratura. Ma non ho trovato soluzioni semplici. E' mai
| possibile che non si possa usare il tag vertical-align: middle
| all'interno di qualcosa per cercare in un box quadrato di centrare il
| testo usando DIV?
SantaKlauss (it's me!) ha scritto:
| La seconda soluzione che ho trovato è molto più flessibile e non ha le
| limitazioni del dimensionamento in em nè del numero di righe che va conosciuto
| a priori... magari la posto domani.
Sorry, la soluzione che ho trovato funziona solo su IE.
In via teorica era perfetta... ci ho pensato un po', l' ho scritta in tre minuti,
l' ho vista velocemente solo su IE perchè poi sono uscito.
Credo che stavolta il browser che si comporta bene è IE, peccato.
Proverò ancora, ma non so se si possa trovare una soluzione senza dimensionare
il paragrafo che va centrato verticalmente nel div...
Alla prossima,
    SantaKlauss

 Mi spiace non essere in grado di aiutarti.
Ti ringrazio, sei stato gentilissimo lo stesso.
Un salutone.
Paolo Guagliumi
Casale Monferrato AL
pguag...@nospamlibero.it

     fai sempre domande interessantissime! 
No, sono io che ringrazio te per le risposte corpose ed il tempo che hai 
speso per scriverle.
Grazie a te, Wildchild e Giulio. Ora posso centrareeeee......, :)
Ciao, ciao.

 Gentili iscritti, ...
Il problema dell'allineamento verticale, senza far uso di tabelle, 
comunque non mi sembra cosě banale. Se non si danno dei riferimenti 
assoluti, non č di facile soluzione, mi pare. In questa pagina se ne 
parla in questo forum:
http://www.siteexperts.com/forums/viewConverse.asp?d_id=9934&Sort=0
Ma non sembra dare risposte significative, mi pare. Questo č un peccato, 
perchč se non si riesce a centrare in modo semplice verticalmente degli 
elementi, immagini, ecc. il problema di organizzare l'informazione si 
complica rispetto alle tabelle... quindi come poter evitare di usare le 
tabelle quando i div e span non offrono tutto ciň che le tabelle possono 
offrire in modo altrettanto semplice?
Grazie, lascio la parola a voi, un saluto.
Vertical alignment can only be set for
The content of table cells in relation to the height of the cells
<div style="height:10em; border:solid">
   <table style="height:100%"><tr>
     <td style="vertical-align:middle">
       test
     </td>
   </tr></table>
</div>
Characters or images (inline elements) inside a block in relation to the 
height of the other characters (not the height of the block).
<p style="font-size:2em; border:solid; height:5em">
   LARGE TEXT
   <span style="vertical-align:middle; font-size:10px;">
     test
   </span>
</p>
Quite obviously, the best way to set vertical alignment for entire 
blocks is to use tables. The website you are reading right now is using 
tables for layout.

"Paolo G."  ha scritto:
| Il problema dell'allineamento verticale, senza far uso di tabelle,
| comunque non mi sembra così banale. Se non si danno dei riferimenti
| assoluti, non è di facile soluzione, mi pare..
Ciao Paolo,
    centrare verticalmente un elemento è piuttosto semplice conoscendone
le sue dimensioni... il problema è quando queste non sono note a priori.
Ho un po' di tempo, ecco le due soluzioni conoscendo le dimensioni
dell' elemento (userò un div come esempio). In entrambi i casi l' allineamento
centrale è sia in verticale che in orizzontale.
* Se le dimensioni del div da centrare sono in percentuale,
ecco come fare:
<style type="text-css">
div#container{
    position: relative; /*serve per consentire il posizionamento assoluto degli elementi al suo interno*/
    /*ecc...*/
    }
div#container div#centered{
    position: absolute;
    top: 20%;
    left: 30%;
    width: 60%;
    height: 40%;
    border: 1px solid #f00
    }
</style>
Nota che 2*top+width deve darti 100%, cosi come 2*left+height.
* Se le dimensioni del div da centrare sono fisse, per esempio in pixel, ecco
la soluzione che usa i valori negativi dei margini. La tecnica l' ho trovata un po'
di tempo fa su 
http://www.wpdfd.com/editorial/wpd0103.htm#toptip
e direi che è geniale.
<style type="text/css">
div#container{
    position: relative;
    /*ecc...*/
    }
div#container div#centered{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 200px;
    margin: -100px 0 0 -200px; /* i margini a valore negativo pari a metà delle dimensioni*/
    border: 1px solid #f00
    }
</style>
Il problema è quando non si conoscono le dimensioni del div da centrare verticalmente...
un metodo decisamente "bovino" sarebbe quello di scrivere il css senza centrare il div,
fare un po' di prove con i vari browser, misurarlo con uno screen ruler e dargli delle
dimensioni accettabili che possano andare bene.
Saluti,
    SantaKlauss

 
[...]
butto nel piatto anche questo vecchio URL di constile:
http://www.constile.org/template/centrare_il_box/
che in sostanza spiega il tuo metodo (margini negativi).
nota storica: penso che entrambi i link segnalati siano
l'estensione di:
http://bluerobot.com/web/css/center2.html
sto facendo delle ricerche, perche' mi ricordo
di aver letto qualcosa su "margin: auto;" e allineamento
verticale. lessi qualcosa che mi confuse le idee ancora
di piu'... :)
ciao.
-- 
email: goldicus1970 AT 
yahoo.it
web: 
http://www.deelan.com

 di piu'... :)
ecco:
mi stavo chiedendo *perche'* c'e' un trattamento
diverso tra margin: auto; tra centratura orizzontale
e verticale. ho fatto una ricerca:
da:
http://lists.w3.org/Archives/Public/www-style/2001Oct/0078.html
[vadim plessky]
 > that's what I was referencing to, for example. I expect that defining
 > DIV { margin: auto } will position DIV block in the center not only
 > horizontally, but vertically as well.
[tantek]
 > Well, the spec _does_ say to treat margin-top:auto as margin-top:0
 > and margin-bottom:auto as margin-bottom:0, so I am not sure why you
 > would expect vertical centering from that.
[vadim plessky]
 > Why do I think that box should be rendered vertically with margin:
 > auto? Because it's quite logical.
ho dato un occhio alle specifiche per margin-left e
margin-right:
da CSS 2.1:
http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins
10.3.3 Block-level, non-replaced elements in normal flow
''If both 'margin-left' and 'margin-right' are 'auto', their computed 
values are equal. This horizontally centers the element with respect to 
the edges of the containing block.''
mentre per quanto riguarda margin-top e margin-bottom:
http://www.w3.org/TR/CSS21/visudet.html#Computing_heights_and_margins
10.6.3 Block-level and 'inline-block', non-replaced elements in normal 
flow and floating, non-replaced elements
''If 'top', 'bottom', 'margin-top', or 'margin-bottom' are 'auto', their 
computed value is 0. ''
cioe scrivendo in mio <div> e lasciandolo nel "normal
flow" cioe' senza posizionamento assoluto:
<body>
   <div id="box"><p>abc</p></div>
</body>
e applicando al box:
#box {
   margin: auto;
 
   width: 300px; height: 300px; 		
   border: 1px solid red;
}
body,html {
   height:100%; margin:0; border: 1px solid red;
}
come previsto il box *sigh* si centra solo orizzontalmente.
merda. va proprio bene cosi, il problema era noto perche'
lo scambio di messaggi tantek/vadim e' datato 2001, i CSS 2.1 sono 
recenti (28 January 2003), ed e' stato scritto chiaramente  che gli 
elementi con margin-left|right:auto si centrano in orizzontale, mentre 
con margin-top|bottom il valore viene impostato a zero.
ho intrepretato correttamente il tutto?
mi rendo conto che sto messaggio non serve a nulla
ma volevo solo esternare la mia delusione al NG.


Deelan ha scritto:
| > sto facendo delle ricerche, perche' mi ricordo
| > di aver letto qualcosa su "margin: auto;" e allineamento
| > verticale. lessi qualcosa che mi confuse le idee ancora
| > di piu'... :)
|
| ecco:
[... mega-cut...]
| come previsto il box *sigh* si centra solo orizzontalmente.
| merda. va proprio bene cosi, il problema era noto perche'
| lo scambio di messaggi tantek/vadim e' datato 2001, i CSS 2.1 sono
| recenti (28 January 2003), ed e' stato scritto chiaramente  che gli
| elementi con margin-left|right:auto si centrano in orizzontale, mentre
| con margin-top|bottom il valore viene impostato a zero.
|
| ho intrepretato correttamente il tutto?
| mi rendo conto che sto messaggio non serve a nulla
| ma volevo solo esternare la mia delusione al NG.
Ciao Deelan,
    invece è utilissimo, almeno ci siamo tolti un dubbio. Grazie!
Ciao,
    SantaKlauss

 e verticale. ho fatto una ricerca:
[...]
Sì, è la soluzione che speravo funzionasse, come ho scritto in un mio post
precedente.
Comunque anche dai post di Tantek, non si capisce il perchè di questa
scelta... semplicemente tantek osserva che le specifiche w3c così hanno
detto, ma l'utilità o il motivo proprio non si capisce... :(
Ciao!
--
Wildchild

 ma volevo solo esternare la mia delusione al NG.
Mi associo, :(
-- 
Paolo Guagliumi - ICQ 46580228
_______________________________________
Casale Monferrato - Alessandria - Italy
mailto:
pguagliumi@no_spam_please_libero.it
http://web.tiscali.it/saw

 
http://www.constile.org/template/centrare_il_box/
Ciao. Grazie per la tua risposta. Ho iniziato a studiare i CSS da poco, 
quindi ho ancora parecchio da imparare e ti e vi ringrazio per le utili 
indicazioni che avete fornito.
Cercavo perň una soluzione che non preveda margini negativi, ecc. mi 
spiego. Siccome nel Web č suggerito dal W3C di abbandonare l'uso delle 
tabelle per la formattazione e passare a <div> + <span> + css, ecc. per 
l'organizzazione della struttura del sito allora ho deciso di provare a 
prendere un sito internet scelto a caso con una grafica abbastanza 
accattivante e di riprodurlo per conto mio usando solo <div> + <span> + 
css. Il sito in questione che ho scelto č l'home-page di:
http://www.immediapress.it/sito/index.php
e per il posizionamento delle immagini "Strumenti per comunicare" e 
"Cerca nei comunicati stampa" ho assegnato dei valori assoluti rispetto 
ad una box che ho definito e che contiene queste 2 immagini.
Il problema si complica con "Login Area", User ID, Password, Argomenti, 
ecc. cioč su di una stessa linea o se non interpreto male, in un DIV ci 
sono TANTI elementi. Ora un'istruzione, se funzionasse, del tipo: 
"vertical-align: middle" su tutti quegli elementi non ci starebbe male, 
sta scritto:
"The vertical-align property may be used to alter the vertical 
positioning of an inline element, relative to its parent element or to 
the element's line. (An inline element is one which has no line break 
before and after it, for example, EM, A, and IMG in HTML.)"
http://www.htmlhelp.com/reference/css/text/vertical-align.html
e l'elemento padre non potrebbe essere un box? E allora gli elementi 
interni non dovrebbero posizionarsi bene in orizzontale da soli??? Io 
non riesco neppure a centrare verticalmente le immagini!
Se non c'č un metodo semplice per realizzare questo, l'evitare di usare 
le tabelle per formattare le pagine penso sia discutibile, parere 
personale e limitato all'esperienza che ho acquisito sino ad oggi.
L'organizzazione della pagina e CSS sarebbero anche abbastanza pulite e 
se questo 'benedetto' vertical-align: middle fosse un po' piů 
comprensivo, saremmo a cavallo nell'abbandonare le tabelle per i div... 
ma se cosě non č...:
body
{	text-align: center;
	margin-top: 0px;
	color: #000000;
	background-color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
}
 
a:link { background:#ffffff; color: #000000; text-decoration: none; }
a:visited { background:#ffffff; color: #000000; text-decoration: none; }
a:hover { background:#ffffff; text-decoration: underline; }
 
div#sfondo {
		width: 760px; height: 1200px;
		background-color: red;
		color: #000000;
		position: relative;
		text-align: left;
		margin-right: auto;
		margin-left: auto;
}
 
div#sfondo div#sfondotopbanner {
		background-color: #E7EBEF;
		color: #000000;
		position: absolute;
		height: 78px; width: 100%;
		left: 0px; top: 0px;
}	
 
div#sfondo div#sfondotopbanner div#bannersinistro {
		position: absolute;
		top: 9px; left: 10px;
}
 
div#sfondo div#sfondotopbanner div#bannerdestro {
		position: absolute;
		top: 9px; right: 10px;
}
 
div#sfondo div#sfondotitolo {
		background-color: #ffffff;
		color: #000000;
		position: absolute;
		height: 75px; width: 100%;
		left: 0px; top: 78px;			
}
div#sfondo div#sfondotitolo div#logo1 {
		position: absolute;
		top: 0px; left: 0px;
}
 
div#sfondo div#sfondotitolo div#logo2 {
		position: absolute;
		top: 21px; left: 0px;
}
 
div#sfondo div#sfondotitolo div#menu {
		position: absolute;
		top: 0px; right: 0px;
		width: 280px; height: 22px;
		text-align: right;
		margin-right: 4px;
}
 
div#sfondo div#sfondotitolo div#data{
		position: absolute;
		bottom: 0px; right: 0px;
		width: 220px; height: 22px;
		text-align: right;
		margin-right: 4px;
}
 
div#sfondo div#sfondobluricerca {
		background-color: #104573;
		color: #000000;
		position: absolute;
		height: 24px; width: 100%;
		left: 0px; top: 153px;	
}
 
div#sfondo div#sfondobluricerca div#strumenti {
		position: absolute;
		top: 5px;
		left: 0px;
		text-align: left;
		margin-left: 4px;
}
 
div#sfondo div#sfondobluricerca div#casellatesto {
		position: absolute;
		top: 3px; left: 475px;
		height: 18px; width: 110px;
}
 
div#sfondo div#sfondobluricerca div#cerca {
		position: absolute;
		top: 4px;
		right: 0px;
		text-align: right;
		margin-right: 4px;
}
 
div#sfondo div#sfondologin {
		background-color: #EFEBDE;
		color: #000000;
		position: absolute;
		height: 24px; width: 100%;
		left: 0px; top: 178px;	
}
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
" xml:lang="en" lang="en">
<head>
	<title>immediapress</title>
 
	<link rel="stylesheet" href="layout1.css" type="text/css" media="all"/>
 
</head>
<body>
	<div id="sfondo">
 
		<div id="sfondotopbanner">
 
			<div id="bannersinistro">
				<a alt="bannersinistro" href="logo1" ><img border="0" 
alt="banner-sinistro" src="bannerEspertidi468x60.gif" /></a>
			</div>
 
			<div id="bannerdestro">
				<a alt="bannersinistro" href="logo1" ><img border="0" 
alt="banner-destro" src="logo_prnewswire.gif" /></a>
			</div>
 
		</div>
 
		<div id="sfondotitolo">
 
			<div id="logo1"><img border="0" alt="logo-alto" src="logo1.gif"/></div>
 
			<div id="logo2"><img border="0" alt="logo-basso" 
src="logo2_giallo.gif"/></div>
 
			<div id="menu">
				<a href="ppp">Home Page</a>
				|
				<a href="ppp">Mappa</a>
				|
				<a href="ppp">Registrati</a>
				|
				<a href="ppp">Contattaci</a>
			</div>
 
			<div id="data">
				Giovedi 10 Luglio 2003 - ore:13.02
			</div>
 
		</div>
 
		<div id="sfondobluricerca">
			<div id="strumenti">
				<img src="servizi_integ.gif" width="296" height="14" alt="strumenti 
per comunicare" />
			</div>
 
			<div id="casellatesto">
				<input style="height: 18px; width: 110px;" type="text" name="ppp" />
			</div>
 
			<div id="cerca">
				<img id="cerca" src="cerca.gif" width="162" height="7" alt="cerca" />
			</div>
		</div>
 
		<div id="sfondologin">
						<img style="text-align: center;" src="login.gif" width="71" 
height="12" alt="" />
 
						<span>User ID</span>
 
						<span>Password</span></div>
 
		</div>
 
	</div>
 
</body>
</html>
Grazie x eventuali suggerimenti.


 le sue dimensioni... 
Ora provo questo tuo metodo, grazie Santa, ti faccio sapere se avrą o 
meno avuto successo. Grazie per l'interesse. L'unica cosa č che per 
centrare ci vogliono calcoli e tante righe. E' inspiegabile come mai non 
abbiano realizzato il tutto in un'unica istruzione lasciando al browser 
il problema di preoccuparsi della centratura. Il W3C suggerisce 
calorosamente di abbandonare le tabelle per la formattazione delle 
pagine ma se poi per centrare qualche elemento bisogna scrivere molte 
righe e perdere parecchio tempo...
Grazie ancora, ciao ciao.


 non riesco neppure a centrare verticalmente le immagini!
ho fatto un test:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" 
"
http://www.w3.org/TR/html4/strict.dtd
">
<html>
<head>
<title>V-align</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#search {
   border: 1px solid #222; padding: 2px;
   /* applicare questo qui non serve a nulla */
   /* vertical-align: middle; */
}
#search img {
   border: 1px solid #222;
   vertical-align: middle; /* qui e' + utile */
}
</style>
</head>
<body>
<div id="search"><img height="30" src="images/test.gif">Login: <input 
type="text" name="search"> Password:<input type="text" name="search"> 
<button type="submit">Click</button></div>
</body>
questo in mozilla 1.4 fa in modo di allineare vert. l'immagine
non alla baseline del testo anonimo ma in maniera diversa. se
cambi il valore di vert. align le cose cambiano in maniera
sensibile.
screenshot:
http://www.deelan.com/bugz/valign.jpg
ciao.
-- 
goldicus1970 AT 
yahoo.it
http://www.deelan.com

 Ora provo questo tuo metodo...
No Santa, non sta funzionando per ciň che mi serve. Vi sono in effetti 
problemi nel centrare verticalmente degli oggetti in modo semplice.
Parlando con ragazzi + esperti di me si č arrivati alla conclusione, per 
il momento, ci conviene specificare un padding-top assoluto.
Grazie ancora, un saluto.


 <html>
Ti ringrazio! Sei stato molto gentile a scrivere un esempio cosě lungo, 
mi č stato utile per capire un aspetto. La centratura degli elementi, 
comunque, se non erro, si riferisce sempre all'immagine, č l'immagine 
che determina la centratura degli altri elementi, almeno dalle mie prove 
č emerso questo.
Il mio problema invece č centrare l'immagine all'interno di un div. E 
allo stato attuale io risolvo la cosa con un posizionamento assoluto di 
alcuni pixel dal top.
Io scrivo:
div#sfondo div#sfondologin {
	background-color: #EFEBDE;
	color: #000000;
	position: absolute;
	width: 100%;
	height:24px;
	left: 0px; top: 178px;
	padding-top:5px;
	vertical-align: middle;
}
 
img {
	vertical-align: middle; /* qui e' + utile */
}


 prendere spunto vedi: 
http://www.adaptivepath.com/
Ho provato a scaricare il file html e il file css (low.css e screen.css) 
ma in locale vengono visualizzati in tutt'altro modo.
Non riesco a catturare certe immagini di sfondo!


"Paolo G."  ha scritto:
| > Ora provo questo tuo metodo...
|
| No Santa, non sta funzionando per ciò che mi serve. Vi sono in effetti
| problemi nel centrare verticalmente degli oggetti in modo semplice.
|
| Parlando con ragazzi + esperti di me si è arrivati alla conclusione, per
| il momento, ci conviene specificare un padding-top assoluto.
Ciao Paolo,
    a questo punto piuttosto che usare un padding che viene interpretato
in maniera differente tra IE e gli altri browser se la dimensione è specificata
(nel primo viene computato come parte della dimensione effettiva, negli altri no)
ti basta scrivere nel css per esempio:
position: relative;
top: 120px;
Oppure se quello che vuoi centrare è un block-level element in
un altro block-level element ti conviene specificare il margin-top.
Se l' altezza non è specificata il problema non c'e' e va benissimo un padding-top.
Altrimenti una delle due soluzioni che ti ho presentato (dipende dal caso)
oppure il box model hack di Tantek.
Molto bello il sito che hai deciso di clonare. Ho dato una letta veloce al css che hai
postato, mi pare che ci siano troppi elementi posizionati, ma magari è solo una mia
impressione.
Buon divertimento!
    SantaKlauss

 Non riesco a catturare certe immagini di sfondo!
Ok, tutto ok, ci sono riuscito.


 impressione.
Hai ragione, ma se non posiziono tutti queli elementi il sito non mi 
diventa *identico*. Io vorrei fosse identico ma realizzato senza fare 
uso di tabelle.
Grazie x le utili indicazioni.


| No Santa, non sta funzionando per ciň che mi serve. Vi sono in effetti
| problemi nel centrare verticalmente degli oggetti in modo semplice.
Ciao Paolo,
    il vertical align non serve solo per centrare immagini.
Copia-incolla questa pagina html che ho fatto di esempio
nel tuo editor.
Ciao!
    SantaKlauss
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd
">
<html>
<head>
<title>Esempio vertical-align</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 2.6">
<style type="text/css">
p{
    background-color: #20C078;
    color: #90FF00;
    font-family: impact, serif;
    font-size: 30pt;
    font-weight: 700;
    text-align: center;
    }
span.bigover{
    color: #90ACD0;
    font-size: 50pt;
    vertical-align: baseline;
    }
span.bigunder{
    color: #90ACD0;
    font-size: 50pt;
    vertical-align: text-top;
    }
span.smallcentered{
    color: #FF7000;
    font-family: arial,serif;
    text-transform: uppercase;
    font-size: 12pt;
    font-weight: 900;
    vertical-align: middle;
    }
</style>
</head>
<body>
<div>
    <p>
        <span class="bigover">S</span>
        anta
        <span class="bigunder">K</span>
        lauss
        <span class="smallcentered">working on CSS</span>
    </p>
</div>
</body>
</html>

 nel tuo editor.
Bell'esempio, grazie Santa come sempre.
-- 
Paolo Guagliumi - ICQ 46580228 - Casale Monferrato - Alessandria - Italy
-> newsletter gratuita infosapere -> 
http://web.tiscali.it/infosapere
 <-

Paolo G. ha scritto:
| Siccome nel Web è suggerito dal W3C di abbandonare l'uso delle
| tabelle per la formattazione e passare a <div> + <span> + css, ecc. per
| l'organizzazione della struttura del sito allora ho deciso di provare a
| prendere un sito internet scelto a caso con una grafica abbastanza
| accattivante e di riprodurlo per conto mio usando solo <div> + <span> +
| css. Il sito in questione che ho scelto è l'home-page di:
|
| 
http://www.immediapress.it/sito/index.php
|
[...cut...]
Ciao Paolo,
    in questi ultimi due-tre giorni ho avuto un po' di tempo, è infatti superata una
tappa importante nel mio percorso di studi (non so se si dice così... lunedì mi
sono diplo-laureato in Informatica).
Il tuo esperimento mi ha incuriosito, e siccome era tempo per mettermi alla
prova, sto provando anch' io a clonare il sito che hai scelto tu.
Ho trovato in effetti moltissime difficoltà nei due div che hai indicato...
Ho pensato che una soluzione potesse essere una cosa del tipo:
p.valigned{
    height: 23px;
    font-size: 23px;
    /*ecc..*/
    }
p.valigned *{
    vertical-align: middle
    }
p.valigned span{
    font-size: 11px
    }
In sostanza si dichiara un paragrafo in cui il font-size e' pari all' altezza, anche se per inserire
il testo si usa uno span con font-size l' effettiva dimensione. Link e immagini verrebbero centrate
verticalmente. In via teorica potrebbe funzionare se..
Mi pare che IE cmq non supporti il selettore universale, ma si può ovviare con una regola tipo:
p.valigned img, p.valigned span, p.valigned a{
    vertical-align: middle
    }
Dicevo potrebbe funzionare SE non ci fossero degli elementi che non sono inline,
cioè gli <input> sui quali il vertical-align non ha effetto.
Così ho provato con margin e padding ma sui vari browsers rendeva differentemente...
l' unica cosa a parer mio è usare il posizionamento assoluto di ogni singolo elemento.
Oppure l' alternativa è usare le tabelle per quelle due righe che includono dei campi
di input... ci ho pensato un po' e ho detto: il modo migliore per sistemare gli elementi
dei form è sempre stato, e credo che lo sarà sempre... l' uso di tabelle.
Tra l' altro sul sito del W3C nella reference ho scoperto la natura "duale"
(e se mi è consentito: fuorviante) del vertical-align.
Se applicato agli elementi <td> si comporta proprio come se il suo
contenuto avesse un attributo valign (ora deprecato) che permette la
centratura verticale di un qualsiasi elemento.
Quindi dopo un paio di orette di tentativi, ho risolto in 5 minuti e rende
uguale su tutti i browsers.
In quanto alla questione che hai sollevato tu sull' uso di tabelle per il layout...
qui non si tratta di usare le tabelle per strutturare un intero layout ma solo
di usare due tabelle per sistemare gli elementi di input di due form.
Ci sono cose che vanno, e andranno fatte, alla vecchia maniera, questo
forse è uno di quei casi.
Come mi era sembrato a prima vista, ci sono troppi elementi posizionati
nel tuo css. Non ho ancora finito, ma credo che avrò posizionate solo il
mini-menù di navigazione, la data e le quattro colonne dell' area centrale
del sito. Se ti va, quando siamo entrambi un po' avanti possiamo scambiarci
i sorgenti per confrontare le scelte implementative, e se hai bisogno di una
mano per il javascript non esitare a mandarmi una mail.
Ciao e buon divertimento,
    SantaKlauss