Dreamweaver: css e margintop

Di: Pacio | 26/09/2020 17:00:56
ho un problema con una div perche vorrei levare un margintop che explorer mi mette contro la mia volontà!
posto il codice perche è la cosa piu semplice per farvelo capire:
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
<html xmlns="http://www.w3.org/1999/xhtm">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#contenuto {
position:relative;
height: auto;
width: 900px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
}
#prima {
height: 100px;
width: 900px;
background-color: #0066CC;
}
#seconda {
height: auto;
margin-top: 3px;
background-color: #FF6600;
}
-->
</style>
</head>
<body>
<div id="contenuto">
<div id="prima">
<h1>prima</h1>
</div>
<div id="prima">
<h1>prima</h1>
</div>
<div id="seconda">
<h1>seconda</h1>
</div>
<div id="seconda">
<h1>seconda</h1>
</div>
</div>
</body>
</html>
- - - - - - - - - - - - - - - - - - - - -
perche quando nella seconda div mi appare un margintop che mi sposta in basso di circa 10px la div?
se duplico la prima div non ci sono margini fra le due div azzurre, mentre se duplico la seconda mi viene un margine che separa le due div arancioni.
spero di essermi spigato. nel caso chiedetemi ulterori spiegazioni.
vorrei che sia in IE che in firefox tutte le div fossero attaccate.
grazie 1000 in anticipo.

Risposte



Ecco come devi formattare, devi tener conto anche degli <h1>:
<!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/xhtm">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Usare i DIV</title>
<style type="text/css">
<!--
#container {
width: 900px;
}
#prima {
height: 100px;
background-color: #0066CC;
}
#seconda {
background-color: #FF6600;
height: 70px;
}
#h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
padding-left: 8px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="prima">
<h1 id="h1">Prima</h1>
</div>
<div id="prima">
<h1 id="h1">Prima</h1>
</div>
<div id="seconda">
<h1 id="h1">Seconda</h1>
</div>
<div id="seconda">
<h1 id="h1">Seconda</h1>
</div>
</div>
</body>
</html>

Di: Gian Paolo | 26/09/2020 17:01:56


grazie. funziona ma non capisco perche...

Di: Pacio | 26/09/2020 17:01:56