uomoserio
02-03-2012, 15:20
Ciao a tutti, ho iniziato da poco l'apprendimento di HTML e CSS e ho un dubbio riguardo alcuni concetti di base, come l'interazione degli elementi e dei loro margini. :confused:
Ho costruito un layout di base formattando vari div, alcuni annidati, tramite CSS e fino a qui nessun problema. Per maggiore chirezza ho assegnato un colore di fondo ad ogni box div, così da poterlo riconoscere facilmente.
Ecco il codice del file html con il layout vuoto:
<?xml version="1.0"?>
<!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> La mia prima pagina XHTML </title>
<link href="miostile.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="Text/HTML; charset=ISO-8859-1" />
</head>
<body>
<div id="main">
<div id="header"></div>
<div id="container">
<div id="content">
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
e questo è il suo CSS:
body {
margin: 0px;
font-family: verdana, arial, sans-serif;
}
#main {
margin: 0px auto 0px auto;
width: 1000px; height: 600px;
background-color: blue;
}
#header {
background-color: yellow;
width: 100%; height: 60px;
text-align: center;
}
#container {
width: 100%;
height: 540px;
background-color: green;
}
#content {
width: 800px; height: 520px;
background-color: beige;
}
#footer {
background-color: darkred;
width: 100%; height: 20px;
}
Quando però inserisco i testi (ad esempio il titolo nell'header o un paragrafo nel div dei contenuti) accade che i margini dei testi inseriti interagiscono con gli ingombri degli altri box div, anche se non sono quelli a cui appartengono.
Io avevo capito che gli elementi con margini interagiscono fra di loro solo entro i confini del box div a cui appartengono, cioè il "padre"....ma evidentemente mi sbaglio, perché accade esattamente l'opposto! :muro:
Non so se sono riuscito a spiegare bene il problema, per sicurezza ho allegato l'immagine del layout con i testi (dove ho descritto e si vede l'errore).
Vorrei che qualcuno riuscisse a chiarirmi bene il concetto: i margini degli elementi blocco come "Paragrafo" o "H1, H2, etc..." interagiscono con qualsiasi elemento adiacente nella pagina o soltanto all'interno del box div a cui appartengono? :confused:
Grazie per la pazienza...
Ho costruito un layout di base formattando vari div, alcuni annidati, tramite CSS e fino a qui nessun problema. Per maggiore chirezza ho assegnato un colore di fondo ad ogni box div, così da poterlo riconoscere facilmente.
Ecco il codice del file html con il layout vuoto:
<?xml version="1.0"?>
<!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> La mia prima pagina XHTML </title>
<link href="miostile.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="Text/HTML; charset=ISO-8859-1" />
</head>
<body>
<div id="main">
<div id="header"></div>
<div id="container">
<div id="content">
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
e questo è il suo CSS:
body {
margin: 0px;
font-family: verdana, arial, sans-serif;
}
#main {
margin: 0px auto 0px auto;
width: 1000px; height: 600px;
background-color: blue;
}
#header {
background-color: yellow;
width: 100%; height: 60px;
text-align: center;
}
#container {
width: 100%;
height: 540px;
background-color: green;
}
#content {
width: 800px; height: 520px;
background-color: beige;
}
#footer {
background-color: darkred;
width: 100%; height: 20px;
}
Quando però inserisco i testi (ad esempio il titolo nell'header o un paragrafo nel div dei contenuti) accade che i margini dei testi inseriti interagiscono con gli ingombri degli altri box div, anche se non sono quelli a cui appartengono.
Io avevo capito che gli elementi con margini interagiscono fra di loro solo entro i confini del box div a cui appartengono, cioè il "padre"....ma evidentemente mi sbaglio, perché accade esattamente l'opposto! :muro:
Non so se sono riuscito a spiegare bene il problema, per sicurezza ho allegato l'immagine del layout con i testi (dove ho descritto e si vede l'errore).
Vorrei che qualcuno riuscisse a chiarirmi bene il concetto: i margini degli elementi blocco come "Paragrafo" o "H1, H2, etc..." interagiscono con qualsiasi elemento adiacente nella pagina o soltanto all'interno del box div a cui appartengono? :confused:
Grazie per la pazienza...