Layout con posizionamento assoluto e footer

**Luca_pluatrco** · 24-08-2009, 16:31

Salve,

ho realizzato un layout a 3 colonne con posizionamento assoluto. Ora è stato richiesto di aggiungere anche un footer, ma a questo punto sorgono i problemi:

Se aggiungo il footer DENTRO il contenitore padre (position:relative) che contiene le colonne posizionate assolutamente, il footer si colloca a inizio pagina (questo perché il div padre sembra avere altezza nulla).

Se metto il footer DOPO/FUORI e posizionato assolutamente, questo va a piazzarsi a fondopagina, sovrapponendosi pero' con le colonne che sono molto lunghe.

Come potrei risolvere?
Grazie

codice:

  
<div ID="contentBox3COLS">
     <div ID="contentLeft3COLS"></div>
     <div ID="contentMiddle3COLS"></div>
     <div ID="contentRight3COLS"></div>
</div>
     <div ID="footer"></div>

#contentBox3COLS
{
	position: relative; 
	min-width:980px; 	
}

#contentLeft3COLS
{ 
	position: absolute; 
	top: 0; 
	left: 20px; 	
	width:270px; 
	margin-left:0px;
	margin-right:5px;
}
  
#contentRight3COLS
{ 	
	position: absolute; 
	left: auto; 
	right: 20px; 
	margin-right:0px;
	width:28%;
}

#contentMiddle3COLS
{ 
	position:absolute; 
	top:0; 
	bottom:0px; 
	margin-left:5px;
	margin-right:20px;	
	left:286px; 
	right:28%; 	
}
#footer
{
	position:relative;
	bottom:0;
	left:0;
	width:100%;

	background:White url(images/Backgrounds/Lava_footer_background.png) top right no-repeat ;/**/
}

**simotenax** · 24-08-2009, 16:51

ma perchè hai posizionato i contenitori assolutamente per ottenere il layout???
non ti conveniva farli flottare??

cmq per posizionare una barra fissa in basso c'è questo recente topic dove è stato trattato l'argomento http://forum.html.it/forum/showthrea...readid=1351619

**Luca_pluatrco** · 24-08-2009, 16:54

Purtroppo il post da te segnalato nn fa al caso mio, in quanto vorrei avere a fondo pagina il footer e non sempre in primo piano.

Il sito cui lavoro è un CMS e con posizionamento assoluto mi sembrava molto + semplice, dato che con float ho sperimentato spesso problemi dovuti a overlapping.

Nel mio caso il contenuto non è noto a priori (puo' essere una tabella/immagine/solo testo e di dimensioni non note).

**simotenax** · 24-08-2009, 16:59

cosa intendi per overlapping te?? ricorda comunque che così posizionato solo ridimensionando la finestra perdi tutte le proporzioni, stesso effetto che ottieni se cambi risoluzione schermo..

hai per caso un link pubblicabile dove visionare la pagina?

ah altra cosa.. come mai sottolinei il fatto di non conoscere il contenuto a priori? appunto per questo secondo me la soluzione migliore è usare dei contenitori flottanti..

**simotenax** · 24-08-2009, 17:05

spero che questo esempietto possa esserti d'aiuto

codice:

<html>
<head>
<style>

*{
	margin:0px;
	padding:0px;
}

#main{
	width:980px;
	margin:0 auto;
}

#left{
	float:left;
	width:150px;
	background:#f00;
}

#center{
	flaot:left;
	width:680px;
	background:#0f0;
}


#right{
	float:left;
	width:150px;
	background:#00f;
}

#footer{
	width:980px;
	background:ff0;
}

</style>
</head>
<body>
<div id="main">
	<div id="left"></div>
	<div id="middle"></div>
	<div id="right"></div>
	<div style="clear:both"></div>
	<div id="footer"></div>
</div>
</body>
</html>

**Luca_pluatrco** · 24-08-2009, 17:08

Ho testato il portale con diverse risoluzioni e tutti i box interni sono allargati (con schermo grande) o ristretti (ma fino ad certo limite).

Purtroppo non ho nessun link in quanto il portale richiede un login per accedervi.

Il portale è stato iniziato piu' di un anno fa ed ora è notevolmente complesso, per cui passare a float in modo indolore lo vedo impossibile...è stata una scelta fatta inizialmente.

**simotenax** · 24-08-2009, 17:12

purtroppo così facendo ti sei imbattuto in tutte le problematiche del posizionamento assoluto, per posizionare il div assoluto sempre in basso o dai un altezza fissa alle tre colonne (ma non penso sia il caso) o gestisci il posizionamento del footer tramite js a seconda della dimensione delle 3 colonne..

almeno il cms si potrà sapere qual'è

??

**Luca_pluatrco** · 24-08-2009, 17:21

Il CMS è sviluppato in toto da noi e si tratta di un concorrente di sharepoint (non ancora sul mercato).

Giusto per prova ho sostituito velocemente i posizionamenti assoluti. Il problema "sembrerebbe" quasi risolto, il quasi è dovuto alla colonna centrale che viene posizionata "sotto" le altre due, ma pur sempre in posizione centrale.

Come potrei aggiustare le dimentioni (che per la colonna di destra devono essere in % e per quella centrale fluide)?

codice:

#contentLeft3COLS
{ 
	/*
	position: absolute; 	
	top: 0; 
	left: 20px;
	 */	
	 float:left;
	width:270px; 
	margin-left:0px;
	margin-right:5px;

}
 
 
#contentRight3COLS
{ 	
	/*
	position: absolute; 
	left: auto; 
	right: 20px; 
	*/
	float:right;
	margin-right:0px;
	width:28%;
}



#contentMiddle3COLS
{ 
	padding:2px;
	/*
	position:absolute; 
	top:0; 
	bottom:50px; 
	left:286px; 
	right:28%; 
*/
float:left;
	margin-left:271px;
	margin-right:28%;	
	
}

**simotenax** · 24-08-2009, 17:25

prova a diminuire la dimensione delle due colonne laterali.. dovrebbe essere quello il problema..

**Luca_pluatrco** · 24-08-2009, 17:31

Anche riducendo notevolmente le colonne laterali, quella centrale continua a rimanere sotto al centro.

Deve essere la colonna centrale prima o dopo nel codice html quando si posiziona tramite float?
Al momento si trova dopo

Discussione: Layout con posizionamento assoluto e footer

Strumenti discussione

Ricerca discussione

Visualizza

Layout con posizionamento assoluto e footer

Permessi di invio