Layout con float non corretto

**Fred_88** · 12-06-2008, 23:02

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>newlayout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
	margin:0;
	padding:0;
	text-align:center;
	background-color:#727272;
}
div#container{
	width:743px;
	margin:0 auto;
	text-align:left;
}
div#top {
	background-image:url(img/top.gif);
	background-repeat:no-repeat;
	width:743px;
	height:35px;
}
div#head {
	background-image:url(img/header.gif);
	background-repeat:no-repeat;
	width:743px;
	height:109px;
}
div#nav{
	background-image:url(img/navbar.gif);
	background-repeat:repeat-y;
	float:right;
	width:160px;
	text-align:center;
}
div#cont{
	background-image:url(img/content.gif);
	background-repeat:repeat-y;
	width:544px;
	margin-right:160px;
	padding:38px;
}
div#foot{
	background-image:url(img/footer.gif);
	background-repeat:no-repeat;
	width:704px;
	height:40px;
	clear:right;
	text-align:center; 
	padding: 10px;
}
</style>
</head>
<body>
<div id="container">
	<div id="top"></div>
	<div id="head"></div>
	<div id="nav">NavBar
NavBar
NavBar
NavBar</div>
	<div id="cont">Salve a tutti ragazzi,
riempio questo spazio
per fare delle prove.
Baci,
Fred</div>
	<div id="foot">Footer</div>
</div>
</body>
</html>

Il DIV "nav" risulta spostato di un 40 pixels a destra.. :S e non arriva sino al footer..

sapreste indicarmi l'errore?
http://travtool.com/css/newlayout.html

**Mich_** · 13-06-2008, 09:08

Anzitutto la centratura del container nel body sara` a discrezione del browser: infatti alcuni browser stringono il body il piu` possibile, quindi la centratura successiva perde significato: ti manca il width:100%; da inserire nel body.

Poi attenzione ai conti (per i browser standard, quindi escludendo IE quirks mode):
#cont e` largo 720px (544 + 38 + 38), con il margine di 160 non puo` starci dentro il container. In qualche browser (IE ad esempio) il #container viene allargato: magari e` questo il problema.

Il #foot non risulta centrato (ti manca il margin:0 auto;)

**Fred_88** · 13-06-2008, 09:59

Originariamente inviato da Mich_
Anzitutto la centratura del container nel body sara` a discrezione del browser: infatti alcuni browser stringono il body il piu` possibile, quindi la centratura successiva perde significato: ti manca il width:100%; da inserire nel body.

Poi attenzione ai conti (per i browser standard, quindi escludendo IE quirks mode):
#cont e` largo 720px (544 + 38 + 38), con il margine di 160 non puo` starci dentro il container. In qualche browser (IE ad esempio) il #container viene allargato: magari e` questo il problema.

Il #foot non risulta centrato (ti manca il margin:0 auto;)

ma il padding non agisce solo sulla formattazione del testo? :S

**Mich_** · 13-06-2008, 10:31

Non so cosa intendi.
Il padding e` lo spazio interno al border (ha lo sfondo del blocco), ma la larghezza di un blocco si ottiene sommando:
margin + border + padding + width + padding + border + margin
Invece in IE quirks mode si ottiene:
margin + width + margin

Mi sa che dovresti ripassare la lezione sul box-nodel in qualsiasi tutorial CSS (ad esempio quello in HTML.it)

Discussione: Layout con float non corretto

Strumenti discussione

Ricerca discussione

Visualizza

Layout con float non corretto

Permessi di invio