problema CSS - box model method

**Manzo** · 26-01-2005, 19:08

Ciao a tutti,
non ho trovato uno spazio apposito per i css quindi provo a postare qui.

Sto testando il box model method per le gestione del sito ma ho trovato subito un problema nella gestione dei margini.

In sostanza il problema è questo. All'interno di una serie di div metto il titolo h1 con un margine superiore di 10px. Il div che contiene l'h1 ha una immagine di sfondo e tutti i div precedenti hanno un margin impostato a 0px.
Con explorer nessun problema, con mozilla mi sposta tutti i div precedenti di 10 px come se l'avessero impostato.

Chissà se sono stato chiaro...

Grazie a tutti!
Cesare

Vi posto una semplificazione della cosa:

<html>
<head>
<link rel="stylesheet" href="css/test.css" media="screen,projection,handheld" type="text/css" />
<title>Titolo</title>
</head>
<body>

<div class="main">
<div class="contenitore">
<div class="header">
<h1>Titolo</h1>
</div>
</div>
</div>

</body>
</html>

E i css relativi sono:

html {
height: 100%;
margin: 0px;
padding: 0px;
}

body {
height: 100%;
margin: 0px;
padding: 0px;
color:#000000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
background:#FFFFFF;
}

div.main {
margin : 0px;
width:100%;
height:100%;
padding: 0px;
background: transparent;
border-style: none;
border-width: 0px;
font-size: 12px;
text-align: center;
}

div.contenitore {
text-align: left;
border-style: solid;
border-width: 0px 1px 0px 1px;
border-color: #C6DC93;
margin: 0px auto 0px auto;
background: #FFFFFF;
width: 730px;
\width: 734px;
w\idth: 730px;
min-height:100%;
height: auto !important;
height: 100%;
}

div.header {
display: block;
z-index: 1;
margin : 0px;
vertical-align: middle;
background: #FFFFFF url("../img/top.png") no-repeat;
border-style: solid;
border-color: #FFFFFF;
border-width: 0px 0px 10px 0px;
height: 100px;
\height: 101px;
he\ight: 100px;
}

h1 {
margin: 10px 0px 0px 80px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
font-weight: normal;
text-align: left;
font-size: 30px;
line-height: 30px;

}

**floyd46** · 26-01-2005, 19:32

con gli <h1>.....<h6> prova ad impostare il margin:0; e setta il padding-top:XXpx; se vuoi che i titoli si distacchino dal bordo
superiore del box in cui si trovano.
P.S. ho letto in fretta questo tuo 3d; spero sia questa la soluzione, altrimenti appena ho 2 min lo rileggo.
Saluti

**floyd46** · 26-01-2005, 19:50

ciao
mi sa che è come ti ho postato nella risposta precedente, anche se l'ho letta in fretta;
in pratica con il codice che hai scritto tu prima, cioè:

codice:

h1 { 
margin: 10px 0px 0px 80px; 
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
color: #000000; 
font-weight: normal; 
text-align: left; 
font-size: 30px; 
line-height: 30px; 
}

il box dai bordi di colore verdino sembrava staccato dal margine superiore della window del browser di 10px (che era il margine da te impostato; invece dovresti scrivere così:

codice:

h1 { 
margin: 0 0 0 80px; 
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
color: #000000; 
font-weight: normal; 
text-align: left; 
font-size: 30px; 
line-height: 30px; 
padding-top:10px;
}

per fare in modo che, come in IE, appare attaccato al margine superiore.
Spero di aver interpretato bene la tua domanda.
Saluti

**Manzo** · 26-01-2005, 19:50

usando l'attributo padding invece che margin tutto pare funzionare...
mah!

Grazie!

Cesare

Discussione: problema CSS - box model method

Strumenti discussione

Ricerca discussione

Visualizza

problema CSS - box model method

Re: problema CSS - box model method

Re: Re: problema CSS - box model method

grazie

Permessi di invio