Problemi Altezza Divs con %

**aswreee** · 01-12-2010, 00:38

Salve a tutti,

sto cercando di fare un semplice sito con un div principale di grandezza width e height 100% che contenga al suo interno altri 3 divs con altezza dichiarata sempre in % in modo da tenere il tutto fluido al massimo cosi che renda bene su tutte le configurazioni possibile.

Il codice che uso è questo :

CSS

codice:

@font-face {
	font-family: 'DanielRegular';
	src: url('Font/daniel-webfont.eot');
	src: local('?'), url('Font/daniel-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DanielBold';
	src: url('Font/danielbd-webfont.eot');
	src: local('?'), url('Font/danielbd-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DanielBlackRegular';
	src: url('Font/danielbk-webfont.eot');
	src: local('?'), url('Font/danielbk-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

div.principale {
width: 100%;
height: 100%;
background-color: blue;
}

div.principale img {
border-width:0;
}

div.nome {
height: 30%;
text-align: center;
background-color:red;
}

p.nome {
font:6em 'DanielBlackRegular', Arial, sans-serif;
text-shadow:#aabbcc 8px 10px 2px;
}

div.links{
height:35%;
text-align:center;
letter-spacing:3em;
background-color:yellow;
}

div.prizes{
height:35%;
text-align:center;
letter-spacing:3em;
background-color:green;
}

div#facebook,img.facebook1,div#facebook:hover .facebook2,div#lastfm,img.lastfm1,div#lastfm:hover .lastfm2,div#linkedin,img.linkedin1,div#linkedin:hover .linkedin2,div#live,img.live1,div#live:hover .live2,div#twitter,img.twitter1,div#twitter:hover .twitter2,div#wordpress,img.wordpress1,div#wordpress:hover .wordpress2,div#youtube,img.youtube1,div#youtube:hover .youtube2 {
display:inline;
}

img.facebook2,div#facebook:hover .facebook1,img.lastfm2,div#lastfm:hover .lastfm1,img.linkedin2,div#linkedin:hover .linkedin1,img.live2,div#live:hover .live1,img.twitter2,div#twitter:hover .twitter1,img.wordpress2,div#wordpress:hover .wordpress1,img.youtube2,div#youtube:hover .youtube1 {
display:none;
}

e questo è L'HTML:

codice:

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>
			Benvenuti!
		</title>
		<link rel='stylesheet' type='text/css' href='indexpage.css'>
		<link rel='icon' type='image/ico' href='favicon.ico'>
	</head>
	<body>
		<div class="principale">
			<div class="nome">	
				<p class="nome">Benvenuti</p>
			</div>
			<div class="links">
					<div id="facebook">[img]Img/facebook1.png[/img][img]Img/facebook2.png[/img]</div>
					<div id="lastfm">[img]Img/lastfm1.png[/img][img]Img/lastfm2.png[/img]</div>
					<div id="linkedin">[img]Img/linkedin1.png[/img][img]Img/linkedin2.png[/img]</div>
					<div id="live">[img]Img/live1.png[/img][img]Img/live2.png[/img]</div>
					<div id="twitter">[img]Img/twitter1.png[/img][img]Img/twitter2.png[/img]</div>
					<div id="wordpress">[img]Img/wordpress1.png[/img][img]Img/wordpress2.png[/img]</div>
					<div id="youtube">[img]Img/youtube1.png[/img][img]Img/youtube2.png[/img]</div>
			</div>
			<div class="prizes">
					[img]Img/vsp.png[/img]
					[img]Img/vtsp.png[/img]
			</div>
		</div>
	</body>
</html>

Purtroppo però le altezze dei divs non vengono rispettate, e di fatto viene usato solo metà pagina, quando io vorrei il div grande che contiene i 3 piccoli div i quali hanno a loro volta gli elementi centrati verticalmente.

Sapete dirmi dove sbaglio?

Grazie!

P.S. Naturalmente i background-color stanno li solo per farmi capire di preciso la grandezza dei divs :P

**Prill** · 01-12-2010, 21:51

Ciao aswreee, non ho guardato nel dettaglio il tuo codice, ma se il tuo div "principale" deve avere altezza eguale al 100%, sarà necessario aggiungere al css

codice:

html, body {height:100%}

sarebbe bene anche azzerare tutti i margini e padding ripristinandoli solo dove servano (* {margin:0; padding:0)}

**aswreee** · 02-12-2010, 12:35

Grazie mille

risolto

Mi sento idiota a non averci pensato eheh

Grazie ancora

Discussione: Problemi Altezza Divs con %

Strumenti discussione

Ricerca discussione

Visualizza

Problemi Altezza Divs con %

Permessi di invio