Annidamento DIV malfunzionante

17-02-2007, 14.51.30

ciao a tutti.
potreste aiutarmi con la diposizione di questi tag div che sto impazzendo?

sto impaginando un sito e sto cercando di disporre i div in modo da garantire una visualzìizzazione ottiamale anche a finestre non massimizzate.

ho disposto un div per la testata che contiene un'immagine.

Codice HTML:

div.testata{
border-style:solid 2px;
top: 2px;
width: 70%;
position: absolute;
background-color:#666666;
left: 10%;
}

sotto di esso ho disposto un div contenitore che dovrà contenere tutti i successivi tag del sito.

Codice HTML:

div.contenitore{
width: 70%;
left: 10%;
position:absolute;
top: 150px;
padding-left: 0;
}

al suo interno ho disposto tutti i successivi tag.
un tag menu_sn che contiene una serie di tabelle che devono rimanere fisse a sinistra ed una barra. entrambi devono essere attaccati a filo alla testata.

Codice HTML:

div.barra{
width: 720px;
left: 175px;
position: absolute;
top: 0px;
height: 27px;
background-image:url(./img/testa_tab.gif); 
color: Activecaption;
padding-top: 3px;
padding-left: 5px; 
}
div.menu_sn{
border-style:solid 0px;
margin-left: 0;
padding: 0px;
left: 0;
top: 0px;
position: absolute;
width: 150px;
}

alla destra del menu e subito sotto la barra, vorrei inserire un div che contenga i contenuti effettivi del sito.
il fatto è che vorrei circondarlo di un ulteriore div in modo che presenti una sorta di cornice.
per questo avrei annidato due div fondo che contiene contenitore_inner:

Codice HTML:

div.fondo{
width: 725px;
position: absolute;
left: 175px;
top: 29px;
background-color: #CCCCCC;
}

div.contenitore_inner{
width: 100%;
position: absolute;
top: 5px;
left: 5px;
right: 5px;
background-color: #FFFFFF;
}

lo schema sarebbe

Codice HTML:

<html>
...
<div class="testata"></div>
<div class="contenitore">
<div class="barra"></div>
<div class="menu_sn">
   ...
   bla bla
</div>
<div class="fondo">
<div class="contenitore_inner">
 materiale sito
</div>
</div>
</div>

il problema è che riscontro un errore serio nella visualizzazione nei div fondo e contenitore_inner.
ovvero, l'inner annulla la visualizzazione del div fondo e non si vede più il colore di sfondo (e quindi la cornice) del div fondo...

perchè??

grazie.

19-02-2007, 13.34.00

ti serve per un layout??? se si cerca tra le discussioni del forum ne abbiamo parlato ciao..

**heracleum** · 19-02-2007, 22.14.18

Così a occhio.. (perché sai che è sempre meglio un link ad una pagina online, anche appositamente solo per farsi aiutare meglio, no?

)

a occhio noto una cosa poco ortodossa che mi colpisce:
se
div.fondo
è soltanto un wrapper di
div.contenitore_inner
cioè lo deve avvolgere...
quindi
div.contenitore_inner dovrebbe semplicemente sguazzare all'interno del PADRE (contenitore) div.fondo..
PERCHE' div.contenitore_inner ha un posizionamento assoluto?????
io proverei un semplicissssimo:

div.contenitore_inner{
background-color: #FFFFFF;
}

(niente positioning quindi niente top left right e vai con lisssio.. poi width:100% in un div "normale" non ha senso, già si prende tutto lo spazio essendo un elemento block, rimane solo il colore di sfondo).

Ovvio che non so se div.fondo ha gli stili settati bene.. soprattutto non capisco come un div che si chiama FONDO possa avere top: 29px;

bottom potrei capire.. come mai "fondo" dovrebbe stare così in alto invece che in fondo?

20-02-2007, 01.54.15

intanto grazie per le risposte.
fondo stava per fondo del contenitore inner, per cui intrerpretalo come Sfondo :)

l'idea di non usare necessariamente un positioning non è male, alla fine, per zelo posizionavo tutto e a volte le cose si sballavano invece di andare a posto.

quindi se un div sta dentro un altro quand'è che serve dargli un posizionamento relativo o assoluto?

grazie.

Discussione: Annidamento DIV malfunzionante

LinkBack

Strumenti discussione

Display

Annidamento DIV malfunzionante

Regole di scrittura