Larghezza div annidati

[Asmodeo]

Ho un div (chiamiamolo padre) contenente altri div (figli). Il problema è questo: la larghezza del padre è impostata in % e anche quella dei figli, solo che alcuni browser (explorer e opera mi pare) interpretano la larghezza dei figli come % di quella del padre, mentre altri (netscape e mozilla) la interpretano come % della pagina intera. Il risultato è che la visione è diversa per ogni browser!!!
Come posso fare?

[Jerry Masslo]

se posti del codice ci si butta un occhio, l'interpretazione corretta è % rispetto all'elemento contenitore e non mi risulta che mozilla si comporti come dici tu.

[span]

Originariamente inviato da Asmodeo
Ho un div (chiamiamolo padre) contenente altri div (figli). Il problema è questo: la larghezza del padre è impostata in % e anche quella dei figli, solo che alcuni browser (explorer e opera mi pare) interpretano la larghezza dei figli come % di quella del padre, mentre altri (netscape e mozilla) la interpretano come % della pagina intera. Il risultato è che la visione è diversa per ogni browser!!!
Come posso fare?

se non ricordo male è IE che la interpreta riferita all'intera pagina, ma dipende dal doctype che utilizzi

[Jerry Masslo]

Originariamente inviato da span
se non ricordo male è IE che la interpreta riferita all'intera pagina, ma dipende dal doctype che utilizzi

ho l'impressione che stia usando un position:absolute annidato dentro un div normale.

[Asmodeo]

già, sbaglio? cmq ecco il codice....

HTML

  
    <div id="centrale">
        <div id="header"></div>
	<div id="menu"></div>
	<div id="contenuti"></div>	
	<div id="extranav"></div>
    </div>

CSS

  
div#header{
	background-color: #005F90;
	width: 60%;
	height: 20%;
	position: absolute;
	top: 0%;
}
div#menu{
	background-color: #2D94FD;
	position: absolute;
	top: 20%;
	width: 15%;
}
div#contenuti{
	background-color: #02B6EA;
	position: absolute;
	top: 20%;
	margin-left: 15%;
	margin-right: 15%;
	width: 30%;
}
div#extranav{
	background-color: #2D94FD;
	position: absolute;
	top: 20%;
	margin-left: 45%;
	width: 15%;
}
div#centrale{
	background-color: #02B6EA;
	width: 60%;
	height: 83%;
	margin: auto;
	text-align: left
}

[Asmodeo]

UP. Che sbaglio?

[Jerry Masslo]

Originariamente inviato da Asmodeo
UP. Che sbaglio?

Per capire cosa fare occorrerebbe sapere cosa vuoi fare, magari con un disegno, magari basta dare un position:relative al div contenitore o non esserci bisogno di nessun position:absolute.

[Asmodeo]

Ecco un'immagine di come dovrebbe apparire: immagine

Spero che si capisca quello che voglio fare...
Cmq, giallo=centrale, blu=menu, rosso=header, verde=extranav, nero=contenuti. Inoltre il mio intento sarebbe quello di mantenere extranav e menu della stessa larghezza. Si può fare? Cmq ho provato a smanettare un pò con il posizionamento relativo, ma crea degli spazi vuoti assurdi!

[Jerry Masslo]

allora, col posizionamento assoluto non c'è alcun problema a posizionarli a quel modo, devi solo dare position:relative a #centrale in questo modo i layer annidati si riferiranno a esso, forse dovresti togliere il text-align:left ma non mi ricordo se è necessario.

Però questo tipo di layout è piuttosto delicato, nel senso che le colonne ti diventano completamente indipendenti, se il contenuto di una colonna supera l'area assegnata cominciano i problemi, e non sono solo questi.

Senza bisogno di ricorrere ai layer si può fare lo stesso con guadagno di elasticità, l'unica complicazione non insormontabile sarebbe se tu volessi tre colonne di 3 colori diversi senza ricorrere a un'immagine di sfondo, se non ti servono necessariamente 3 colori il tutto diventa molto più semplice e tido un link dove ti fanno un layout a 1, 2 o 3 colonne dove puoi settare molte opzioni.


Vedi se ti accontenti.

[Asmodeo]

Grazie mille, stavo cercando proprio una cosa del genere!!! Certo che pero' c'e' da spararsi a fare un sito il piu' fluido possibile!!! :gren: