Posizionamento in un div

[Gemini]

Ciao a tutti
ho inserito in un div un'immagine. Vorrei posizionare la foto nella parte inferiore del div.
Come faccio a posizionarla sotto? Vorrei fare tutto questo nel file .css
Grazie mille

[fcaldera]

div {
position: relative;
}

div img {
position : absolute;
bottom : 0;
left : 0;
}

[Gold34gl3]

scusate se riapro il 3d, ma mi sembrava non molto vecchio...e potrebbe dare una soluzione anche al mio problema (e a molti altri nella mia situazione).
ho un div allineato in posizionamento assoluto rispetto al contenitore.
in IE7 e FF si visualizza correttamente, mentre su IE6 non viene proprio visualizzato.
ho fatto una prova cambiando da assoluto a relativo, e a quel punto il div interessato compare giustamente in fondo alla pagina.

come posso modificare affinche anche su IE6 si visualizzi correttamente nella posizione desiderata?

grazie

[Myaku]

Originariamente inviato da Gold34gl3
scusate se riapro il 3d, ma mi sembrava non molto vecchio...e potrebbe dare una soluzione anche al mio problema (e a molti altri nella mia situazione).
ho un div allineato in posizionamento assoluto rispetto al contenitore.
in IE7 e FF si visualizza correttamente, mentre su IE6 non viene proprio visualizzato.
ho fatto una prova cambiando da assoluto a relativo, e a quel punto il div interessato compare giustamente in fondo alla pagina.

senza codice completo facciamo ben poco, comunque ...

come posso modificare affinche anche su IE6 si visualizzi correttamente nella posizione desiderata?

... per IE, usa i commenti condizionali.

[Gold34gl3]

veramente l'ho fatto, stò usando i commenti condizionali, cmq or anon ho il codice sotto mano, quinid appena ritorno in ufficio te lo mando così che puoi dirmi eventualmente come procedere.
per la soluzione dei margini bordi e larghezze ho adottato la soluzione del commento /**/ ma per il posizionamento assoluto non so come fare...

grazie per il momento per il consiglio

[Gold34gl3]

questa è la struttura

<div id="container">

<div id="principale" >

<div id="colonna_1">
<div class="header">
<div id="top_1">
<div id="intestazione_top">[img]img/logo.jpg[/img]</div>
<div id="menu">
<table width="200" cellpadding="5" cellspacing="0" border="0">
<tr>
<td>[url="azienda.php"]Azienda[/url]</td>
</tr>
<tr>
<td>[url="dove_siamo.php"]Dove Siamo[/url]</td>
</tr>
<tr>
<td>[url="contattaci.php"]Contattaci[/url]</td>
</tr>
</table>
</div> 
</div>
<div class="ombra_1"></div>
<div class="ombra_3"></div>
<div id="sotto_top_1">
<div id="img_top_fissa"></div>
</div> 
</div>

<div id="corpo_centrale">
<div id="colonna_sinistra">

<div id="struttura_corpo">

<div id="zona_centro">













 </div>
</div>
</div>
</div>

<div id="spazio_bianco">
<?php  include ("bottom.html"); ?>
</div>


</div>
<div id="colonna_2">

<?php include ("menu.php");?> 
</div>


</div>

</div>

questo invece il css

/* CSS Document */
body, html {
    text-align: left;
    margin-top:10px;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:left;
    background-color: #C8C8C8;
}

#container {
    margin:auto;
    width:800px;
    background-color:#FFFFFF;
    position:relative;
}

#principale {
    width:800px;


    }
    
#colonna_1 {
    margin-top:0px;
    width:800px;
    float:left;
    min-height:500px;
    height:100%;
    background-color:#FFFFFF;
}

#colonna_2 {
    width:206px;
    left:556px;
    top:0px;
    position:relative;
    left:556px;
        top:0px;
    position /**/:absolute;
    top /**/:0px;
    left /**/:556px;
    background-color:#B95315;
    border-right-width:1px;
    border-right-width /**/:2px;
    border-left-width:1px;
    border-left-width /**/:2px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #FFFFFF;
    border-left-color: #FFFFFF;
}

.header {
    height:229px;
    background-color:FFFFFF;
}

#top_1 {
    float:left;
    width:800px;
    height:110px;
    margin-top:10px;
    margin-top /**/:20px;
    margin-bottom:0px;
    background-color:#999999;

}

#intestazione_top {
    position:absolute;
    top:25px;
    left:10px;
}

#sotto_top_1 {
    width:800px;
    float:left;
    height:101px;
    margin-top:0px;
    background-image: url(../img/scritta_background.jpg);
    background-repeat: no-repeat;

}

#img_top_fissa {
    position:relative;
    top:-5px;
    left:30px;


 }
 
.ombra_1 {
    width:556px;
    float:left;
    height:4.5px;
    height /**/:9px;
    background-image:url(../img/sotto_top.jpg);
    background-position:left bottom;
    background-repeat:no-repeat;
}
 .ombra_3 {
    width:35px;
    height:4.5px;
    height /**/:9px;
    float:right;
    background-image:url(../img/sotto_top_corto.jpg);
    background-position:bottom;
    background-repeat:repeat-x;
}

#corpo_centrale {
    float:left;
    width:100%;
    height:100%;
    min-height:300px;
 }

#zona_centro {
    float:left;
    width:330px;
    height:100%;
    margin-top:5px;
    margin-top /**/:10px;
    margin-right:2.5px;
    margin-right /**/:5px;
    margin-left:5px;
    margin-left /**/:10px;
}
 
 .sotto_corpo_1 {
    width:800px;
    height:9px;
    float:left;
    background-image:url(../img/sotto_top_old1.jpg);
    background-position:left bottom;
    background-repeat:repeat-x;
}
 
 .sotto_corpo_3 {
    width:35px;
    height:9px;
    float:right;
    background-image:url(../img/sotto_top_corto.jpg);
    background-position:bottom;
    background-repeat:repeat-x;
}
 

 #colonna_sinistra {
    width:555px;
    float:left;
}
 
 #struttura_corpo {
     width:555px;
    height:100%;
    float:left;
    clear:right; 
 }
    
#corpo_prodotti    
    {
    margin-top:30px;
    margin-left:0px;
    width:200px;
    float:left;
    background-color: #B95315;
    height:100%;
    }
    
.td_prodotti_catalogo {
    padding-top:8px;
    padding-left:15px;
    width:100%;
    font-family:Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
    font-size: 12px;
}

#td_sotto_prodotti_catalogo {    
    width:100%;
    font-size: 11px;
}

#td_sotto_prodotti_catalogo a{
    margin-bottom:1px;
    margin-top:1px;
    margin-left: 20px;
    text-decoration: none;
    color:#F9D5BF;
    font-size: 11px;
}

#td_sotto_prodotti_catalogo a:hover{
    margin-bottom:1px;
    margin-top:1px;
    margin-left: 20px;
    text-decoration: none;
    color:#333333;
    font-size: 11px;

}

#menu {
    position:relative;
    top:25px;
    left:470px;
    width:200px;
    color:#FFFFFF;
    padding-left: 5px;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #FFFFFF;

}



#menu a {
    color:#FFFFFF;
    font-size:12px;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    text-decoration:none;
    font-weight: bold;
}

#spazio_bianco {
    clear: both;
    float: left;
    height: 30px;
    width: 100%;
    vertical-align: top;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #333333;
} 

come posso far affinche anche su IE<7 si visualizzi sempre in alto nella posizione corretta?
quale hack utilizzare?
grazie

[Gold34gl3]

facendo così riesco a portarlo nella posizione corretta per quanto riguardo l'ordinamento orizzontale, ma per allinearlo verticalmente come faccio? non posso impostare una distanza dal top fissa (negativo: in quanto deve salire verso l'alto di tot pixel ) in quanto il corpo della pagina cresce e diminuisce dinamicamente.




#colonna_2 {
width:206px;
position:relative;
position /**/:absolute;
top:0px;
left:556px;
background-color:#B95315;
border-right-width:1px;
border-right-width /**/:2px;
border-left-width:1px;
border-left-width /**/:2px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-left-color: #FFFFFF;
}

[fontlover]

il codice di fcaldera funziona xche è giusto cosi'

e anche x IE6 , xche dici che nn va?

ti faccio un esempio con bordi e background giusto x rendersi conto .vedi se e' questo che volevi o nn ho capito

#box {
  position: relative;
  width: 400px;
  height: 400px;	 
  border: 4px solid orange;
  background: lime;
}

#box1 img {
  width: 100px;
  height: 100px;
  border: 2px solid navy;		  
  position: absolute;  
  bottom: 5px;			/* xche staccato dal bordo e' +fico  :mame: */
  right: 5px;					/* idem.... */
  background: white;
}  

		<div id="box">
  		     <div id="box1">
			
		     </div>
		</div>

[Gold34gl3]

ma infatti io non ho detto ceh la soluzione postata da fcaldera non funziona!!
infattis e hai notato sul mio codice ci sono diverse parti in posizionamento assoluto... tipo img top fissa

ma non capisco per quale motivo solo ed esclusivamente il menù che dovrebbe accavallare il corpo del sito... non si visualizza

possibileche per lui il box model non è il div principale ma assume altro box ? in box model è quello che contine il div ordinato con posizionamento assoluto...eppure qualcosa non và!

[Gold34gl3]

infatti spostatoil box di riferimento da principale a colonna1 il menù posizionato in modo assoluto compare, ma mi restituisce un problema su FF il quale è sicuramente + facile da risolvere!
:master: