Problema con div in position absolute annidati in div con position relative

**robmare** · 24-11-2010, 11:11

Ciao a tutti.

Ho un problema con dei DIV con position:absolute che stanno dentro un DIV con position:relative.

Il problema nasce per via dell'altezza, infatti il DIV principale che ha position:relative non si adatta al contenuto che ha position:absolute e l'altezza rimane 0px.

Qualcuno sa come risolvere questo problema senza usare JAVASCRIPT?

Grazie infinite.
Roberto

**Mich_** · 24-11-2010, 11:33

posta anche:
- il codice HTML dei blocchi interessati (e anche del contenitore del blocco relative)
- il codice CSS relativo ai blocchi di cui sopra
- la DTD

In alternativa posta un link alla pagina (eventualmente in un sito di prova - vedi regolamento)

**robmare** · 25-11-2010, 11:16

Ciao e grazie della tua risposta.

Al di là del codice volevo sapere soltanto se si può fare in modo che un DIV contenitore con position:relative possa adattare la propria altezza autmaticamente in base alla somma delle altezze dei DIV contenuti in esso che sono disposti con position:absolute.

Grazie mille.
Roberto

**Mich_** · 25-11-2010, 11:27

Lo fa automaticamente.
E che mi risulti non ci sono bachi segnalati a tale proposito.

Quindi se hai un problema di quel tipo, c'e` un errore, ma per capire quale occorre vedere il codice (o la pagina).

In linea di massima i posizonamenti assoluti si usano solo se strettamente necessario, ed e` utile una buona esperienza: e` molto facile che in brwoser diversi, o con diverse condizioni si abbiano delle sovrapposizioni o dei blocchi che non si vedono.

**robmare** · 26-11-2010, 10:39

Ok, ti posto il codice.

HTML

codice:

<body>
   <div id="overall" class="overall">
     <div id="contenuto">
       <div class="contenuto_interno">
          <div id="content-container-two-column">
             <div class="due_colonne">
 	       <div id="content-main-two-column">
  	          <div id="maincontent">
 		       ...
 	          </div>
 						
 	          <div id="three-column-container">
 	             <div id="three-column-side1">
 	                  ...
 	             </div>
 	             <div id="three-column-side2">
 		          ...
 	             </div>
 	             <div id="three-column-middle">
 		          ...
 	             </div>
 	          </div>
  	          <div class="clear"></div>
 	       </div>
  	       <div id="content-side-two-column">
 		      ...
     	          <div class="clear"></div>
 	       </div>
  	       <div class="clear"></div>
 	    </div>
          </div>
           <div id="feature-area-home">
 		...
          </div>
       </div>
    </div>
     <div id="top-area" class="top-area">
       <div class="top-left">
 	   ...
       </div>
        <div class="top-right" style="text-align:right;">
  	   ...
       </div>
        <div id="BannerParts"></div>
 	<div class="clear"></div>
     </div>
     <div id="nav-main">
       ... menu ...
    </div>
     <div id="top-information">
       <div id="login">
 	   ...
       </div>
        <div id="top-information-phone">
 	   ...
       </div>
    </div>
     <div id="footer">
 	   ...
    </div>
 </div>
  <div id="footer-sub">
 	...
 </div>
</body>

CSS

codice:

/*YAHOO RESET*/
html{color:#000}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td

{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
li{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:”}
abbr,acronym {border:0;font-variant:normal}
/* to preserve line-height and selector appearance */
sup {vertical-align:text-top}
sub {vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
/*to enable resizing for IE*/
input,textarea,select{font-size:100%}
/*because legend doesn’t inherit in IE */
legend{color:#000}

html{background-image: url('images/main_bg.jpg');background-position: left top;background-repeat: repeat-x}
body{margin:0px;font-family:Verdana, Arial, Helvetica, sans-serif;font-size:0.7em;line-height:1.4em;color:#666}

.overall 
{
	position:relative;
	width:935px;
	height:2505px;
	margin:auto auto 20px auto;
	-moz-box-shadow: 5px 5px 5px 5px #777;
	-webkit-box-shadow: 5px 5px 5px 5px #777;
	
	background-color:#fff;
}

#contenuto 
{
	position:absolute;
	top:280px;
	width:933px; /* width:760px; */
}

.contenuto_interno 
{
	position:relative;
}

#content-container-two-column {
	position:absolute;top:101px;width:933px;height:2100px;border-left:solid 1px #777;border-right:solid 1px 	

#777;background:url(../../images/bg-content-side.png) repeat-y right #ffffff
}

.due_colonne 
{
	position:relative;
	margin-top:20px;
}

#content-main-two-column { 
	position:relative;width:670px;margin-left:20px;margin-right:20px;float:left
}

#maincontent 
{
	position:absolute;
	top:381px;
	width:690px;
	margin-right:20px;
}

#three-column-container { 
	position:absolute;top:20px;width:690px;height:350px;background:url('images/bg-three-column-home.png') 	

repeat-y;padding:0;margin-right:20px
}

#three-column-side1{float:left;width:30%}
#three-column-side2{float:right;width:30%}
#three-column-middle{width:30%;margin:0px 32% 0px 35%}

.clear  {
     height: 0px;
     line-height: 0px;
     font-size: 0px;
     margin: 0px;
     padding:0px;
     clear: both;
     border: 0px;
}

#content-side-two-column{float:right;width:160px;margin-right:15px}
#content-side-two-column a:link,#content-side2-three-column a:link,#content-side1-three-column a:link,#content-

side-two-column a:visited,#content-side2-three-column a:visited,#content-side1-three-column a:visited
	{text-decoration:none}
#content-side-two-column a:hover,#content-side2-three-column a:hover,#content-side1-three-column a:hover
	{text-decoration:underline}

#feature-area-home {
	position:absolute;
	top:0px;
	width:933px;
	height:100px;
	text-align:center;
	font-size:1.2em;
	font-weight:bold;
	border:solid 1px #777;
	background:#fff;
	}

#feature-area-home a:link,
#feature-area-home a:visited {
	color:#dcf2f7;
	text-decoration:underline;
	}
	
#feature-area-home a:hover {
	text-decoration:none;
	}

.top-area 
{
	position:absolute;
	top:0;
	width:933px;
	height:150px;
	background-color:#fff;
	background-image:url('images/sfondo-top.jpg');
	background-repeat:repeat-y;
	background-position:left top;
	border-top:solid 1px #777;
	border-left:solid 1px #777;
	border-right:solid 1px #777;
	}

.top-left
{
	margin:15px;
	float:left;
	}
.top-right
{
	margin:15px;
	float:right;
	}
	
#BannerParts 
{
	text-align:right;
	}

#nav-main {
	position:absolute;
	top:151px;
	width:933px; /* width:740px; */
	height:40px;
	background:#608fc8 url(../../images/bg-nav.png) no-repeat;
	font-weight:bold;
	border-right:solid 1px #777;
	border-left:solid 1px #777;
	line-height:40px;
}

#nav-main div {
	top:0;
	right:0;
	background:#4b6cb5 url(../../images/bg-nav-side.png) top right no-repeat;
	width:25%;
	_width:25.5%;
	position:absolute;
	padding:.8em 0 1em 0;
}

#nav-main ul {
	margin:0;
	padding:0 20% 0 0;
}
	
#nav-main li {
	display:inline;
	list-style:none;
	padding:0 1em 0 0;
	background:none;
}

#nav-main a {
	margin-left:20px;
	color:#FFFFFF;
	text-decoration:none;
}

#nav-main a:hover {
	color:#D4E7F8;
	text-decoration:underline;
}


#nav-main li.current a:link,
#nav-main li.current a:visited {
	text-decoration:underline;
}

#nav-main li.current a:hover {
	color:#D4E7F8;
	text-decoration:underline;
}

#nav-main li.current a:active {
	margin:10px;
	color:#FFFFFF;
}

/* ACTIVE PAGES */
#nav-main a.StaticSelectedStyle,
#nav-main a.StaticSelectedItem {
	color:#D4E7F8;
	text-decoration:underline;
}


#top-information {
	position:absolute;top:190px;width:933px;height:90px;color:#777;font-size:small;background-

color:#eeeeff;border-left:solid 1px #777;border-right:solid 1px #777
}


#top-information-phone {
	text-align:left;
	border-left:1px dotted #777;
	position:absolute;
	top:0;
	left:75%;
	height:100%;
	padding:0 0 0 2%;
	font-size:9px;
	color:#777;
}

#login {position:relative}
#login input.amministra,#login input.logout {
	margin-left:10px;color:#000000;font-size:small;background-color:transparent;border:solid 1px #000
}
#login .login .lnkMenu {font-size:30px;background-color:transparent}

#footer {
	position:absolute;
	top:2480px;
	width:933px;
	background:#608fc8 url(../../images/bg-nav.png) bottom left no-repeat;
	margin-bottom:20px;
	color:#a9c0db;
	font-size:10px;
	text-align:center;
	height:30px;
	line-height:30px;
	border-left:solid 1px #777;
	border-right:solid 1px #777;
	border-bottom:solid 1px #fff;
}

#footer div {
	background:#4b6cb5 url(../../images/bg-nav-side.png) bottom right no-repeat;
	width:25%;
	_width:25.5%;
	position:absolute;
	top:0;
	right:0;
	padding:.8em 0 1em 0;
}

#footer a:link,
#footer a:visited {
	color:#FFFFFF;
	text-decoration:none;
}

#footer a:hover {
	color:#D4E7F8;
	text-decoration:none;
}

#footer a:active {
	color:#FFFFFF;
}

#footer-sub {
	position:relative;
	margin-top:1em;
	margin-left:auto;
	margin-right:auto;
	width:900px; /* width:740px; */
	text-align:center;
	padding:.1em 0 2em 0;
	font-size:.8em;
	color:#999999;
	}

#footer-sub ul {
	margin:0;
	padding:0;
	}
	
#footer-sub li {
	display:inline;
	list-style:none;
	margin:0 20px 0 0;
	background:none;
	}

#footer-sub a:link,
#footer-sub a:visited {
	text-decoration:none;
	color:#980000;
}

#footer-sub a:hover {
	color:#980000;
	text-decoration:underline;
}

Il div che si dovrebbe adattare al contenuto e che invece resta con altezza zero è quello con id="overall".

Grazie mille.
Roberto

**Mich_** · 26-11-2010, 11:23

Hai postato molto codice: chiaramente non lo ho guardato tutto ...

E la mia impressione e` che ci siano un po' troppi contenitori, forse la meta` potrebbero essere sufficienti per fare quello che vuoi: il fatto che sono molti complica il tuo lavoro (e le complicazioni sono foriere di errori).

Comunque in quei casi e` opportuno mettere un commento nella chiusura dei blocchi, altrimenti e` facile perdersi. Esempio:

codice:

  <div id="pippo">
    ... eccc ...
  </div>

Anzitutto attenzione che usi nomi uguali per oggetti diversi (id="overall" class="overall"): potrebbe diventare un problema in alcuni casi (ad esempio se JS deve individuare uno degli oggetti)

Sei sicuro che il problema sia nel blocco .overall? Quel blocco ha un'altezza fissa e non ha quindi la possibilita` di ridursi a zero (e neppure di espandersi, per la verita`).
Perche` io credo invece che il problema nei blocchi piu` interni.
Per verificare dovresti dare colori di sfondo diversi a ciascun blocco e/o usare strumenti tipo la "developer bar" di FireFox (ma ci sono strumenti analoghi anche per altri browser)

Comunque se dovessi metterci mano, io partirei da zero, inziando a sezionare l'HTML secondo il significato semantico, cercando di ridurre il numero di contenitore annidati (non credo che la semantica richieda 8 livelli di innestamento: la mente umana e` si` elastica, ma non fino a questo punto; se veramente sono necessari, quella sezione e` da dividere in piu` pagine).

E poi non mi pare che ci sia la necessita` di usare i posizionamenti: se poi l'utente ha un font un po' piu` grande del tuo, si creano delle sovrapposizioni e si perde del contenuto.
Prova ad usare le normali tecniche di layout ad una, due e tre colonne, applicandole di volta in volta dove necessario (vedi riferimenti tra i "link utili").

**robmare** · 26-11-2010, 13:44

Ciao.

Hai ragione ti ho postato una versione in cui cercavo di adattare manualmente l'altezza del div "overall" per poi eventualmente usare un javascript che impostasse l'height ad ogni caricamento di pagina.

Il problema infatti è che usando questo template per diverse pagine non posso usare un'altezza fissa perché il contenuto di ogni pagina è diverso.

Ovviamente nella versione che non funziona, l'height del div "overall" è impstata ad auto.

In questo caso, il footer si vede sovrapposto al primo blocco in alto...

Ciao e grazie.

P.S.: e se provassi con height 100% ? Ti faccio sapere.

**Mich_** · 26-11-2010, 15:43

Qualsiasi determinazione dell'altezza dara` problemi. In linea di massima l'latezza non va definita (va lasciata automatica).
E avrai grossi problemi con i posizionamenti assoluti (insormontabili in un'ottica cross-browser e con risoluzioni diverse).

La soluzione piu` semplice e` dimenticare il position: il posizionamento viene fatto solo tramite i float, dove ci sono oggetti da affiancare.

**robmare** · 29-11-2010, 12:38

Ho capito.
Poiché la mia necessità di posizionare i div con "absolute" deriva dalla necessità di tenere il contenuto della pagina in alto per i motori di ricerca, vedrò di chiedere consiglio in qualche forum per il SEO.

Ti ringrazio per la disponibilità.

A presto,
Roberto

Discussione: Problema con div in position absolute annidati in div con position relative

Strumenti discussione

Ricerca discussione

Visualizza

Problema con div in position absolute annidati in div con position relative

Permessi di invio