Div che si sovrappongono

**Ashry** · 27-04-2006, 18:04

Salve ho un problema con alcuni div; non riesco ad evitare che si sovreppongano.
Io vorrei che LinkListprodotti si posizionasse sotto a linkList e che sx si allungasse a seconda della linghezza degli altri due ma non ci riesco...
... potete dirmi dove sbaglio per favore?

<div id="sx">
<div id="linkList">
</div>
<div id="linkListprodotti">
</div>
</div>

#sx{width:205px;
display:block;
position:absolute;
left:0;
top:168;
}

#linkList{ position: absolute;
display:block;
left:0;
right:0;
width: 204px;
background-color:#F7F6EF;
border-top:1px solid #F9F8F2;
border-bottom:1px solid #E7E6DC;
border-right:1px solid #E7E6DC;
background-image:url(../images/tit_menu.gif);
background-repeat:no-repeat;
background-position:left top;
padding-top:35px;
padding-bottom:15px;
}

#linkListprodotti{ position: absolute;
display:block;
left:0;
right:0;
width: 204px;
background-color:#F7F6EF;
border-top:1px solid #F9F8F2;
border-bottom:1px solid #E7E6DC;
border-right:1px solid #E7E6DC;
background-image:url(../images/menu_prodotti.gif);
background-repeat:no-repeat;
background-position:left top;
padding-top:35px;
padding-bottom:15px;
}

Grazie

**thomas_anderson** · 27-04-2006, 18:20

ciao! lo sbaglio fondamentalmente sta nella scelta del tipo di posizionamento. il posizionamento assoluto non consente di avere colonne di eguale lunghezza senza usare alcuni accorgimenti, perchè la lunghezza dipende dal tipo di contenuto. poi tu hai posizionato due blocchi assoluti l'uno all'interno dell'altro. posiziona assolutamente solo il blocco #sx e poi inserisci al suo interno gli altri due attrvaerso marginazione. è inutile specificare display: block per due <div>, visto che di default i div sono già di blocco.

se vuoi posizionarli assolutamente all'interno di #sx, devi dichiarare per #sx position: relative, in modo da avere un posizionamento contestuale al blocco in cui ti trovi.

**Ashry** · 28-04-2006, 09:20

Sei stato molto gentile grazie

**Ashry** · 28-04-2006, 13:04

Posso chiederti un'altro aiuto?

Perchè il DIV content ed il div DX non si allungano se il testo supera la lunghezza della pagina?

<body>
<div id="container">
<div id="content">
<div id="flash">
</div>
<div id="sx">
</div>
<div id="dx">
</div>
<div id="footer"></div>
</div>
</div>
</body>

CSS:

body {
font-size:72%;
font-family:Arial, Helvetica, sans-serif;
color:#666666;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#FFFFFF;
background-image: url(../images/px_bg.jpg);
background-repeat:repeat-x;
}

body,html { height:100%;margin:0 }

#container {
width:780px; height:100%;
position:absolute;top:00%;left:50%;
margin: 0 0 0 -380px;
background-image:url(../images/px_top_bg.jpg);
background-position:top centre;
background-repeat:no-repeat;
background-color:transparent;
}

#content{ width:750px;
height:100%;
position:absolute;top:00%;left:50%;
margin: 0 0 0 -375px;
background-color:#F7F6EF;
background-image: url(../images/px_content_bg.jpg);
background-repeat:repeat-y;
background-position:center top;
}

#flash{ width:750px;
height:168px;
background-image:url(../images/px_flash_bg.jpg);
background-position:top left;
background-repeat:repeat-x;
}

#sx{width:204px;
background-color:#F7F6EF;
border-top:1px solid #F9F8F2;
border-bottom:1px solid #E7E6DC;
border-right:1px solid #E7E6DC;
position:absolute;
left:0;
top:168;
}
#cantieri{position:absolute;
right:0;
top:168;
width:545px;
height:24px;
background-color:#E9E8E1;
border-bottom:1px solid #E8E7DE;}

#dx{position:absolute;
right:0;
top: 193px;
width:475px;
margin:5px 35px 5px 35px;
border-left:1px solid #F9F8F2;
border-top:1 px solid #F9F8F2;
text-align:justify;
}

#footer{ width:750px;
height:36px;
position:absolute;
bottom:0;
left:0;
right:0;
background-image:url(../images/px_footer_bg.jpg);
background-repeat:no-repeat;
background-position:bottom center;}

Discussione: Div che si sovrappongono

Strumenti discussione

Ricerca discussione

Visualizza

Div che si sovrappongono

Permessi di invio