posizionamento DIV

**videoD** · 01-02-2006, 17:15

Ciao,

ho la seguente pagina:

<html>
<head>
<title>prova</title>
<style>
BODY {
FONT-SIZE: 12px; BACKGROUND: white; FONT-FAMILY: "Verdana", sans-serif
}
div.header {
BACKGROUND: black;
COLOR: red;
left: 0 px;
width: 800 px;
height: 100px
}

div.footer {
position: absolute;
top: 500 px;
left: 0 px;
zindex: 1;
width: 800px;
BACKGROUND: orange;
height: 10px

}
</style>
</head>

<body>

<div class='header'> UNO </div>

dfgdgdgdgdgdgdgdgdfgfdg
dfgdfgfffffffffffffffff

dfgdgdgdgdgdgdgdgdfgfdg
dfgdfgfffffffffffffffff

dfgdgdgdgdgdgdgdgdfgfdg
dfgdfgfffffffffffffffff

dfgdgdgdgdgdgdgdgdfgfdg
dfgdfgfffffffffffffffff

dfgdgdgdgdgdgdgdgdfgfdg
dfgdfgfffffffffffffffff

dfgdgdgdgdgdgdgdgdfgfdg
dfgdfgfffffffffffffffff

dfgdgdgdgdgdgdgdgdfgfdg
dfgdfgfffffffffffffffff

dfgdgdgdgdgdgdgdgdfgfdg
dfgdfgfffffffffffffffff

dfgdgdgdgdgdgdgdgdfgfdg
dfgdfgfffffffffffffffff

dfgdgdgdgdgdgdgdgdfgfdg
dfgdfgfffffffffffffffff

dfgdgdgdgdgdgdgdgdfgfdg
dfgdfgfffffffffffffffff

dfgdgdgdgdgdgdgdgdfgfdg
dfgdfgfffffffffffffffff

dfgdgdgdgdgdgdgdgdfgfdg
dfgdfgfffffffffffffffff

dfgdgdgdgdgdgdgdgdfgfdg
dfgdfgfffffffffffffffff

dfgdgdgdgdgdgdgdgdfgfdg
dfgdfgfffffffffffffffff

dfgdgdgdgdgdgdgdgdfgfdg
dfgdfgfffffffffffffffff

dfgdgdgdgdgdgdgdgdfgfdg
dfgdfgfffffffffffffffff

dfgdgdgdgdgdgdgdgdfgfdg
dfgdfgfffffffffffffffff

<div class='footer'> due </div>

</body>
</html>

come faccio a fare in modo che il div "footer", si sposti a seconda del contenuto della pagina..
es
io di default lo imposto a "top=600px", se il contenuto non sta in questo spazio, il footer si sposta in modo da farcelo stare...

Possibile?

**giogalga** · 01-02-2006, 19:21

VEdiamo un pò se ho capito bene:

Potresti fare questa prova:
1)inserisci una tabella di 1 riga * 1 colonna
2)sposti il contenuto del testo all' interno della tabella
3)imposti l' altezza della tabella a 500 pixel ( 100 li stai usando per l' header)
4) cambi il valore che hai dato nella parte del css ( invece di mettere 600 px metti "

div.footer {
position: absolute;
top: inherit;
left: 0 px;
zindex: 1;
width: 100%;
BACKGROUND: orange;
height: 10px

Dovrebbe funzionare.
Quindi se il testo supera i 600 px il tuo footer si adatta, se è minore di 600 px il footer rimane comunque a 600.

**giogalga** · 01-02-2006, 19:23

La tabella deve essere posizionata tra header e footer:

<html>
<head>
<title>prova</title>
<style>
BODY {
FONT-SIZE: 12px; BACKGROUND: white; FONT-FAMILY: "Verdana", sans-serif
}
div.header {
BACKGROUND: black;
COLOR: red;
left: 0 px;
width: 800 px;
height: 100px
}

div.footer {
position: absolute;
top: inherit;
left: 0 px;
zindex: 1;
width: 100%;
BACKGROUND: orange;
height: 10px

}
</style>
</head>

<body>
<div class='header'> UNO

</div>

<table width="100%" height="500px" border="0">
<tr>
<th scope="col">

qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</p>

qqqqqqqqqqqqqqqqqqqqqqqqqqqq</p>

qqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</p>

qqqqqqqqqqqqqqqqqqqqqqqqqqq</p>

qqqqqqqqqqqqqqqqqqqqqqqqqqqqq</p>

qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</p>

qqqqqqqqqqqqqqqqqqqqqqqqqqq</p>

qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</p>

qqqqqqqqqqqqqqqqqqqqqqq</p>

qqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</p>

qqqqqqqqqqqqqqqqqqqqqqqqqqqqq</p>

qqqqqqqqqqqqqqqqqqqqqqqqqq</p>

</p>

qqqqqqqqqqqqqqqqqqqqqqqqqq</p>

qqqqqqqqqqqqqqqqqq</p>

qqqqqqqqqqqqqqqqqqqqqq</p>

qqqqqqqqqqqqqqqqqqqqqq</p>

qqqqqqqqqqqqqqqqqqqqqqqqqqqq</p>

a</p>

a</p>

a</p>

a</p>

</p></th>
</tr>
</table>

</p>
<div class='footer'> due </div>

</body>
</html>

**videoD** · 02-02-2006, 10:36

grazie mille
ora lo provo...

Discussione: posizionamento DIV

Strumenti discussione

Ricerca discussione

Visualizza

posizionamento DIV

Dimenticavo

Permessi di invio