Css , posizionamento relativo.

**NarakuS** · 16-09-2011, 20:00

Ciao a tutti ^^
Probabilmente sono diventato stupido , ma ho ri iniziato ad utilizzare il css dopo molto tempo che non lo facevo e stavo facendo delle prove sulle proprietà. Ricordavo che funzionasse , ed invece.

A questo Link trovare il mio problema.
http://www.nobgdr.altervista.org/css.html

Problema che è il seguente :
Perchè quando cerco di posizionare il quadrato rosso dando un margine dall'alto rispetto all'imaggine e NON rispetto all'intera pagina , non funziona ?

Il codice html è
codice:

codice:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="it" lang="it">
<head>
<link rel="stylesheet" href="cssprova.css" type="text/css" />
</head>
<body>
	<div id="contenuto">
		<div id="main"> 
			<div id="submain">
			Prova
				<div id="menu">
				</div>
				<div id="content">
					<div id="upcont">
						<div id="leftupcont"></div>
						<div id="rightupcont"></div>
					</div>
					<div id="downcont">
						<div id="leftdowncont"></div>
						<div id="rightdowncont"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Mentre il css
codice:

codice:

body {
	background-color:#cec5b4;
	}
	
	
#contenuto {
	background:blue;
	}
	
#main {
	width:801px;
	height:737px;
	margin:auto;
	background:url('Loginsplit/1level.png');
	position:relative;
	}
	
#submain {
	width:672px;
	height:473px;
	background:red;
	position:relative;
	margin: 20px 0px 0px 0px;
	}

**sandrone65** · 16-09-2011, 22:28

E' un normale comportamento noto come "collasso dei margini verticali" ci hanno sbattuto la testa tutti

Quando 2 o più elementi di blocco (adiacenti o innestati) senza nessuna separazione tra di loro hanno margini verticali, questi si combinano per formare un unico margine.
Nel caso di elementi innestati (cioè il tuo caso, un div dentro l'altro), l’unico margine risultato del collasso dei margini è sempre applicato a l’elemento più esterno di tutti, quindi il quadratone rosso ti resta appiccicato in alto al suo contenitore

Discussione: Css , posizionamento relativo.

Strumenti discussione

Ricerca discussione

Visualizza

Css , posizionamento relativo.

Permessi di invio