centrare testo

[maya_deva]

Devo riuscire a centrare il testo al centro della pagina, qualsiasi sia la risoluzione del monitor.


Ho provato cosi ma non funziona.
Qualcuno riesce ad aiutarmi?

body {
background-color:white;
color:black;
font-family:helvetica;
text-align:left;
font-size: 20px;
font-weight: bold;
}



#contenitore {
width:1100px;
margin:-30px auto 0px auto;
position:relative;
top:50%
left:50%
height:600px;
}



span {display:none;}

[chipdb]

così dovrebbe funzionare (testato con ie7 + ff):

	body
	{
		margin: 0;
		padding: 0;
		text-align: center;
		background-color:white;
		color:#000;
		font-family:helvetica;
		font-size: 20px;
		font-weight: bold;
	}
	#contenitore
	{
		margin-top: -300px;
		position: absolute;
		margin-left: -350px;
		width:700px;
		height:600px;
		left: 50%;
		top: 50%;
		border: 1px solid;
	}

Ah una cosa, 1100px di larghezza sono un pò troppi, considera chi ha risoluzioni più piccole di 1280, come la 1024x768 e 800x600, non ci crederai ma è ancora la maggior parte della gente. Fossi in te diminuirei un pò lo spazio, nel codice sopra ho messo una larghezza di 700 ed un margin left della metà (350).

[maya_deva]

no non funziona ancora__me lo centra in orizzontale ma io voglio che me lo centri anche in verticale.

riposto tutto il codice:



@charset "utf-8";
/* CSS Document */


body
{
margin: 0;
padding: 0;
text-align: center;
background-color:white;
color:#000;
font-family:helvetica;
font-size: 17px;
font-weight: bold;
}


#contenitore
{
margin-top: -300px;
position: absolute;
margin-left: -350px;
width:700px;
height:600px;
left: 50%;
top: 50%;
}



a {
text-decoration: none;
color:black;
font-family:helvetica;
font-size:25px;
font-weight: bold;
}


a:hover {
color:black;
}


a:visited {
color:black;
}


pre#parole {
color:black;
font-family:helvetica;
font-size: 17px;
font-weight: bold;
}


span {display:none;}

[chipdb]

con firefox, opera, ie6 e ie7 funziona... con quale browser non funziona?

[maya_deva]

con firefox e ie7

[Myaku]

Originariamente inviato da maya_deva
con firefox e ie7

hai svuotato la cache dei browser?
il codice (sia html che css) è validato o ci sono degli errori?

[fcaldera]

a occhio manca

body, html { height: 100%; width: 100%}


se avessi guardato i link utili (un link scritto a caratteri enormi )avresti trovato subito un tutorial che ti spiega come fare

[Myaku]

Originariamente inviato da fcaldera
a occhio manca

body, html { height: 100%; width: 100%}

correggimi se sbaglio, ho notato che anche non inserendolo la centratura funziona ugualmente. L'unico inconveniente che si presenta è che se la finestra viene ridimensionata oltre un certo valore parte del layout viene tagliato nella parte superiore, cosa che non accade portando appunto i due elementi al 100% in larghezza e altezza.

Ti risulta?

[fcaldera]

naturalmente, se l'altezza del contenitore diventa maggiore rispetto al viewport non potrà che essere tagliato sia sopra che sotto. L'altezza al body è necessaria altrimenti la proprietà top: 50% al contenitore non potrebbe funzionare correttamente

L'idea potrebbe essere quella di inserire piuttosto un min-height in pixel al body

[Myaku]

thanks!