[CSS] problema "footer" pagina

**Andrea1979** · 03-04-2004, 16:47

Il layout delle pagine che sto cercando di ottenere è molto semplice:
allineato a sinistra, con due colonne la prima delle a larghezza fissa (per un menu ad immagini) e la seconda a larghezza variabile, contenente testo.
Fino a qui tutto bene: ho creato #navmenu e #content

codice:

#navmenu {
	position: absolute;
	height: auto;
	width: 185px;
	left: 20px;
	top: 30px;
}



#content {
	position: absolute;
	height: auto;
	width: auto;
	left: 235px;
	top: 30px;
}

A questo punto mi sarebbe piaciuto aggiungere anche un #footer contenente altre informazioni, posizionarlo al di sotto dei precedenti div... e qui sorgono i miei problemi, nel senso che i due div superiori mi coprono il footer. Ho anche pensato di inserire i due div, navmenu e content, in un altro box (tipo static), ma ancora nessun buon risultato. Come ovviare? Ringrazio anticipatamente

**deleted_id_48586** · 04-04-2004, 11:28

ti posto un mio codice di esempio:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>

<style type="text/css">

body {
margin:5px 0 0 0;
padding:0;
text-align:center;
font-family:verdana;
font-size:80%;
}

#contenitore {
margin:auto;
padding:5px;
text-align:left;
width:760px;
border: 1px solid gray;
}

#testa {
padding:5px;
margin:0 0 5px 0;
border: 1px solid gray;
}

#corpo {
float:left;
width:520px;
padding:5px;
border: 1px solid gray;
}

#sidebar {
width:200px;
margin-left:540px;
padding:5px;
border: 1px solid gray;
}

#footer {
clear:both;
padding:5px;
margin:0;
border: 1px solid gray;
}

</style>
</head>
<body>

<div id="contenitore">

<div id="testa">

<h1>Testa</h1>

Logo e navigazione globale.</p>

</div>
<div id="corpo">

<h1>Corpo</h1>

</p>
Corpo del documento
</p>

Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova
Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova
Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova
</p>

Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova
Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova
Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova
</p>

Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova
Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova
Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova
</p>

Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova
Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova
Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova Testo di prova
</p>

</div>

<div id="sidebar">

<h1>Sidebar</h1>

menù di navigazione.
</p>

<ul>[*]link[*]link[*]link[*]link[*]link[*]link[/list]

</div>

<div id="footer">
<h1>footer</h1>

informazioni</p>
</div>

</div>

</body>
</html>

Sostanzialmente devi usare il "floating" per il posizionamento dei due DIV affiancati mentre al footer applichi prima di tutto la seguente regola:

#footer {
clear:both;
}

**Andrea1979** · 04-04-2004, 12:23

Grazie per l'aiuto!

you rock :metallica

Discussione: [CSS] problema "footer" pagina

Strumenti discussione

Ricerca discussione

Visualizza

[CSS] problema "footer" pagina

Permessi di invio