[CSS] Problema con i margini superiori

**programfile** · 06-04-2011, 22:25

Salve a tutti!
Sto facendo una prova per imparare i CSS, ma c'è una cosa che mi sfugge.
A me piacerebbe fare un DIV completamente uguale al body, che mi serve per ricoprirlo completamente. Dentro a tale div ci sono gli altri contenuti.
In poche parole il div in questione deve andare a ricoprire completamente il body, deve avere le stesse dimensioni. Il problema è che se imposto il bordo per il div tutto viene bene, se lo tolgo, il div "slitta" di tot pixel sotto, e non ricopre più il body.
Questi i codici:

Codice XHTML

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">
<HTML>

<HEAD>

<TITLE>Esempio css</TITLE>
<link rel="stylesheet"  type="text/css" href="stile.css">

</HEAD>

<BODY>

<div id="pre">


<div>
<h1> City Style </h1>
</div>

<div>



Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo 
testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo 
testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo ....... </p>
</div>
</div>

</body>
</html>

Codice CSS

codice:

body {

margin: 0px;
padding: 0px;
width: 100%;
height: 1000px;
background-color: #0D0D14;
background-image: url(citta.jpg);
background-repeat: repeat-x;
background-position: bottom left;

}

#pre {
margin: 0px;
padding: 0px;
width: 100%;
height: 1000px;
background-color: transparent;
background-image: url(muro.png);
background-repeat: no-repeat;
background-position: 0px 0px;

}

L'altezza del body e del div devo impostarla in pixel altrimenti mi viene "tagliata" l'immagine di sfondo.
Se il codice CSS è quello postato mi viene quello che si vede nell'immagine1.
Se invece aggiungo questo

codice:

border: 1px solid transparent;

al codice CSS nell'ID che si chiama #pre, mi viene fuori quello che si vede nell'immagine2.

Perchè?
Dove sbaglio?
C'è un modo per evitare di inserire quel bordino, facendo si che il body e il div siano perfettamente uno sopra l'altro?
Grazie infinite!!!

PS: ho caricato un immagine, si vede?

**programfile** · 06-04-2011, 22:30

immagine

**Prill** · 07-04-2011, 07:56

Il margine che vedi è quello di h1, c'è una recentissima discussione sul problema http://forum.html.it/forum/showthrea...readid=1454939 nella quale è lincato anche un articolo che spiega esaurientemente cosa accade fra margini verticali contigui di elementi diversi, per i quali prevale quello maggiore che tende ad esser reso all'esterno dell'elemento in questione. In presenza di un bordo (credo che la tua prima immagine si riferisca all'aggiunta del bordo) o anche di un padding minimo che separi i margini dei due elementi questi non collassano più e la visualizzazione è quella voluta.
Puoi risolvere semplicemente azzerarando il margine superiore di h1 e se vuoi che sia distanziato dal margine superiore della pagina dare un padding-top al div che lo contiene

**programfile** · 09-04-2011, 12:02

Grazie mille, ho risolto!!!!

Ti ringrazio molto anche per la pagina che mi hai linkato, molto interessante!
Grazie!

**Prill** · 09-04-2011, 18:14

Prego

Discussione: [CSS] Problema con i margini superiori

Strumenti discussione

Ricerca discussione

Visualizza

[CSS] Problema con i margini superiori

Permessi di invio