sovrapposizione div

**afrappe** · 10-03-2010, 10:12

ho questo codice dove il <div class="rightbox"> deve sovrapporsi al header e al foother
si sovrappone correttamente al header tramite margine negativo, faccio la stessa cosa per il footer ma nonostante il margine negativo viene appicato, questo "rightbox" viene coperto dal footer, ho giocato un po con i z-index ma questo non sembra avere effetto, sara' forse perche prima del footer ho messo un clear:both per pulire il flottaggio dei div superiori?
non riesco a venirne fuori, quello che voglio ottenere e qualcosa simile a questo:
http://www.standpointtech.com

codice:

<html>
<head>
<style>
* 
{
    margin: 0px;
    padding: 0px;
}
html, body
{
    margin: 0;
    padding: 0;
    height: 100%;
   
}

body
{
    font: 75% "Trebuchet MS", Arial, Tahoma, Verdana;
    height:100%;
}

p
{
    margin: 0 10px 10px;
}


.mainBox
{
	width: 1000px;
	border: solid 1px #cccccc;
	margin: auto;
}

.header
{
	border: solid 1px #000000;
	background-color: #aaa567;
	height: 200px;
}
.foother
{
	background-color: #aaa567;
	height: 100px;
	border: solid 1px #000000;
}

.rightbox
{
	border: solid 1px #000000;
	float: right;
	width: 780px;
	height:400px;
	background-color: #356;
	margin-top: -100px;
	margin-right: 10px;
	margin-bottom: -50px;           
}

.leftbox
{
	float: left;
	width: 200px;
	height:200px;
	background-color: #333333;
}


</style>
</head>
<body>
<div class="mainBox">

	<div class="header"><h1>Header</h1></div>
	<div class="center">
		<div class="leftbox">
		sdassa
	
		sdassa

		sdassa

		sdassa

		sdassa

		sdassa

		sdassa

		sdassa

		sdassa

		sdassa

		sdassa

		</div>		
		<div class="rightbox">
			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			a

			ciccio


		</div>			
		<div style="clear:both;"></div>
	</div>
        <div class="foother"><h1>Foother</h1></div>

</div>
</body>
</html>

**Mich_** · 10-03-2010, 10:34

sara' forse perche prima del footer ho messo un clear:both per pulire il flottaggio dei div superiori?

Potrebbe anche essere.

Prova a giocare con i float in modo furbo.
Potresti forse usare i float: left per la struttura principale, e il float:right per il box che si sovrappone.
In tal caso il clear e` solo sul left, non su both.

Comunque per realizzare una cosa come quella, la cosa piu` sicura sono i posizionamenti assoluti: in una situazione cosi` complessa (con un box che si sovrappone a tre oggetti diversi) non puoi sapere come i browser si comportano.
Nota che l'uso dei posizionamenti e` riservato a programmatori esperti, e che i trabocchetti sono dietro l'angolo di tutti i brwoser che non hai testato (incluse le versioni che escono in futuro), ma in quel caso specifico li reputo piu` sicuri dei float (parere mio).

**afrappe** · 10-03-2010, 11:17

ho provato anche con i posizionamenti assoluti e in questo caso è piu facile posizionare i box con maggiore accuratezza ma non riesco poi a posiziona il footer, questo mi si piazza in alto subito sotto all'header in quanto non "sente" lo spazio occupato dai box posizionati in maniera assuluta

**Mich_** · 10-03-2010, 12:32

Mi sono spiegato male.

Il pos. assoluto dovrebbe servire SOLO per il box che si sovrappone: il resto va posizionato normalmente.
occorre chiaramente tenere conto che nella zona con il box che si sovrappone lo spazio deve essere lasciato vuoto.
Quindi ci dovra` essere una larghezza minima del tutto (questo porta ad uno scorrimento orizzontale in alcune risoluzioni) ed occorrera` lavorare bene con i colori o le immagini di sfondo (per valorizzare il tipo di layout).

Ma forse il contenitore del tutto e alcuni singoli pezzi andranno dimensionati in modo rigido (ma probabilmente conviene usare gli em anziche` px).

Discussione: sovrapposizione div

Strumenti discussione

Ricerca discussione

Visualizza

sovrapposizione div

Permessi di invio