Ho creato un semplicissimo layout per un sito internet (sono all'inizio dei lavori) ed ho un semplice problema (credo), ma non riesco a risolverlo..
posto qui il codice della pagina html e di seguito del file css
Codice PHP:
<!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>Sistemi per La Nautica</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="page">
CONTENUTO</p>
</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
Qui il file css:
Codice PHP:
body {
background:url(../img/bg.gif) 0 0 repeat-x #15AEFD;
padding:0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 18px;
}
#container{
margin: 20px auto;
width: 1000px;
border-style:solid;
border-width:1px;
background: #db1818;
}
#header {
background: #FFFFFF url(../logo/logo.png) no-repeat;
height: 317px;
width: 1000px;
}
#page{
width: 500px;
float: left;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
border-style: solid;
border-width: 0px;
border-color: #000000;
background: #DDDDDD;
}
#footer{
width: 1000px;
height: 30px;
float: left;
border-style: solid;
border-width: 0px;
border-color: #000000;
background: #b9b9f6;
margin-top: 0px;
}
come potete vedere, io ho creato all'interno di body un div chiamato container che contiene gli elementi del sito.
Al suo interno ho messo due div chiamati page e footer e sono correttamente sistemati, per il momento, uno sotto l'altro..
"L'errore" sta nel fatto che a destra dell'elemento page non viene visualizzato il colore di sfondo dell'elemento container (visto che vi é dello spazio vuoto), cosa che invece dovrebbe fare credo..