Contenuto sempre centrato height e width 100%

**Federix** · 23-05-2006, 09:24

Io ho provato e con HTML 4.01, l'altezza al 100% del livello viene applicata correttamente, così come l'altezza del body e dell'HTML, solo che in IE il body e l'html vengono interpretati bene, mentre con FF il tag html finisce prima del tag body :master:

codice:

<style type="text/css">
html {
	width:100%;
	height:100%;
	text-align:center;
	vertical-align:middle;
	border:1px solid blue;
}
body {
	width:100%;
	height:100%;
	text-align:center;
	vertical-align:middle;
	border:1px solid red;
}
#centro {
	width:100%;
	height:100%;
	line-height:100%;
	margin:auto;
	padding:0px;
	vertical-align:middle;
	border:1px solid green;
	display:block;
}
</style>
.
.
<div id="centro">[img]work_in_progress.png[/img]</div>

Con XHTML l'altezza al 100% del livello non viene interpretata, e viene adattata all'altezza del contenuto. Con il DOCTYPE Transitional non mi funge neanche il margin:auto; del livello centro.
I tag html e body assumono le stesse condizioni dell'HTML 4.01

**webdemo** · 23-05-2006, 10:07

Esattamente così...

Il target infatti è:
- contenuti sempre centrati
- DTD XHTML 1.0 Strict
- <div> e non <table>

nel mio primo post funzia ma con solo le prime due condizioni, infatti ho utilizzato <table>

ciaux

**Federix** · 23-05-2006, 10:13

Io ho trovato una specie di soluzione, anche se un pò macchinosa, però sembrerebbe funzionare con HTML, XHTML Transitional e Strict:

codice:

<!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">
<head>
<title>Titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html {
	height:100%;
}
body {
	height:100%;
}
#centro {
	position:absolute;
	top:50%;
	left:50%;
	margin: -200px 0 0 -380px;
}
</style>
</head>
<body>
<div id="centro">[img]work_in_progress.png[/img]</div>
</body>
</html>

**webdemo** · 23-05-2006, 10:21

ok, per un singolo elemento può andar bene,
ma il problema è realizzare un div elastico 100% height e width.

ciaux

**Federix** · 23-05-2006, 10:45

L'height al 100% il div non lo riconosce, ne con IE ne con FF, solo misure in pixel

**webdemo** · 23-05-2006, 10:50

o meglio, non lo riconosce se il div in questione è il contenitore, perché se tu fai un primo div alto 100px e dentro un div alto 50% allora funzia...

ciaux

**Federix** · 23-05-2006, 11:19

Originariamente inviato da webdemo
o meglio, non lo riconosce se il div in questione è il contenitore, perché se tu fai un primo div alto 100px e dentro un div alto 50% allora funzia...

ciaux

A me non sembra, anche se metto un livello contenitore, il livello contenuto dentro non mi prende mail l'altezza 100% a meno che non metta anche position:absolute;

codice:

#centro {
	width:100%;
	height:100%;
	border:1px solid green;
	position:absolute;
}

Mandando in palla IE però

**webdemo** · 23-05-2006, 11:39

be, se tu imposti height del contenitore in px
poi riesci a pilotare il contenuto in %:

codice:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>height width</title>
<style type="text/css">
<!--
#contenitore {
	height: 300px;
	width: 300px;
	background-color:#009966;
}
#contenitore #contenuto {
	height: 100%;   /*300px di contenitore*/
	width: 50%;     /*150px di contenitore*/
	background-color:#66FF99;
}
-->
</style>
</head>

<body>
<div id="contenitore">
		<div id="contenuto">contenuto</div>
</div>
</body>
</html>

il problema però rimane: come impostare il contenitore ad height 100%?

Si potrebbe individuare il tipo di monitor dell'utente e impostare di conseguenza l'altezza del div contenitore in px... È una soluzione da Star Trek?
Forse si, perché non ri riuscirebbe mai a calcolare l'esatto spazio a disposizione in height a causa delle differenze tra i vari brw e inoltre a causa di tutte le barre di navigazione che rubano spazio...

ciaux

Discussione: Contenuto sempre centrato height e width 100%

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio