allineamento bottom di un div...

**mikk76** · 08-01-2006, 13:06

ciao a tutti!
ho una strutta di questo tipo
(vedi allegato)
Vorrei riuscire a tenere allineata sempre in bottom l'immagine.
Il tutto è contenuto in un div #container...riporto il codice.
-------------------------
#container {
min-height: 100%;
height: auto !important;
height: 100%;
width:528px;
background-image:url(img/bg_body_centrale.gif);
background-repeat:repeat-y;
}

#body_sx {
background-color:#984742;
width:119px;
float:left;
height:100%;
}
#body_dx {
float:right;
width:409px;
height:100%;
}
#body_img {
width:409px;
height:305px;
vertical-align: bottom;
float:right;
bottom: 0px;
top:100%;
}
-----------------------------
<div id="container">
<div id="body_sx">testo della colonna di sinistra</div>
<div id="body_dx">testo della colonna di destra</div>
<div id="body_img">[img]img/body_home.jpg[/img]</div>
</div>
-----------------------------

non so bene come posizionare e gestire il div body_img...quello che vedete sopra è un'esperimento che non ha funzionato

come vedete i div hanno height:100% quindi si adattano all'altezza della pagina...
grazie in anticipo a chi mi aiuterà

**seed_squall_it** · 09-01-2006, 03:06

Nella regola di stile del box "body_img":

codice:

#body_img {
width: LARGHEZZA; /* Tale da contenere l'immagine */
height: ALTEZZA; /* Tale da contenere l'immagine */
position: absolute;
bottom: 0;
left: 0;
}

Nella regola del box "container" aggiungi position: relative.

Visto che "container" ha height: 100%, ti consiglio di impostare anche gli elementi html e body con altezza 100%, per "fare un favore" al caro IE!

**mikk76** · 09-01-2006, 22:44

squall, grazie 1000 per i tuoi illuminanti consigli

ho ancora due perplessità

1) in IE l'immagine mi rimane sollevata di 3 px dal fondo, mentre con FF aderisce perfettamente al bordo basso... :master:

2) ho provato ad inserire testo nel div #body_dx: il testo ad un certo punto scompare sotto il div #body_img. Ho provato ad assegnare a #body_dx uno z-index maggiore, ma il risultato è che, ovviamente, il testo v sopra ll'immagine..come posso far stare l'immagine sempre sotto al testo, indipendentemente da quanto esso è? :master:

thanks again!

**seed_squall_it** · 09-01-2006, 23:45

A questo punto ti conviene cambiare proprio "strategia". I box posizionati in modo assoluto sono estratti dal normale flusso del documento e quindi non ne condizionano il layout (è come se per gli altri box non esistessero). Se vuoi aggiungere un testo al box destro, devi ricorrere al posizionamento flottante e al ripristino del flusso nella posizione che ti interessa.
Ti riporto qui il tuo codice CSS del box inferiore che contiene l'immagine, con le opportune modifiche:

codice:

#body_img { 
width: 409px; 
height: 305px;
clear: both;
}

Ricordati che però questo box si posiziona ora immediatamente sotto il bordo inferiore del box flottante più alto!

Per l'immagine, intendi dire che è l'immagine ad essere sollevata di 3px dal bordo inferiore o che è il box che la contiene ad essere sollevato rispetto al bordo inferiore della pagina?

**mikk76** · 17-01-2006, 16:20

Originariamente inviato da seed_squall_it
Per l'immagine, intendi dire che è l'immagine ad essere sollevata di 3px dal bordo inferiore o che è il box che la contiene ad essere sollevato rispetto al bordo inferiore della pagina?

la prima che hai detto

seed, ho provato con l'ultimo consiglio che mi hai dato, ma è un gran casino

provo a riportare il codice completo...
home page
----------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test css</title>
<link href="stile.css" rel="stylesheet" type="text/css">
</head>

<body>
<table border="0" align="center" cellpadding="0" cellspacing="0"
style="width:564px;height:100%">
<tr>
<td class="col_sx"></td>
<td valign="top" height="100%"><table
style="width:528px;height:100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="205" valign="top" bgcolor="#A37854">

header in flash

</td>
</tr>
<tr>
<td height="23" bgcolor="#c6c6c6"></td>
</tr>
<tr>
<td height:"100%">
<div id="container">

<div id="body_sx">
menu
</div>

<div id="body_dx">test test test test test test test test test test
test test test test test test

test test test test test test test test test test test test test
test test test

test test test test test test test test test test test test test
test test test

test test test test test test test test test test test test test
test test test

test test test test test test test test test test test test test
test test test

test test test test test test test test test test test test test
test test test

test test test test test test test test test test test test test
test test test

test test test test test test test test test test test test test
test test test

test test test test test test test test test test test test test
test test test

test test test test test test test test test test test test test
test test test

test test test test test test test test test test test test test
test test test

</div>

<div id="body_img">
[img]img/body_home.jpg[/img]
</div>

</div>

</td>
</tr>
</table></td>

<td class="col_dx"></td>

</tr>
</table>

</body>
</html>
---------------------------------

foglio di stile
----------------------------------
html, body {
height: 100%;
margin:0px;
background-color:#4B0000;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
width:528px;
background-color:#F0F0F0;
background-repeat:repeat-y;
position:relative;
}
.main {
width:100%;
height:100%;

}
.col_sx {
background-color:#B50000;
background-repeat:repeat-y;
width:18px;
}
.col_dx {
background-color:#B50000;
background-repeat:repeat-y;
width:18px;
}
#body_sx {
background-color:#984742;
width:119px;
float:left;
height:100%;
}
#body_dx {
background-color:#f0f0f0;
float:right;
width:409px;
height:100%;
position:relative;
z-index:0;

}
#body_img {
width: 409px;
height: 305px;
clear: both !important
position: absolute;

margin-left:90px;
}

uff...la visualizzazione è diversa da IE a FF...ma sballata in entrambi

grazie mille per ora...

**mikk76** · 17-01-2006, 17:31

a sto punto cambio strategia, come consigliato da seed_squall...faccio un nuovo post

Discussione: allineamento bottom di un div...

Strumenti discussione

Ricerca discussione

Visualizza

allineamento bottom di un div...

Permessi di invio