Newsgroup: it.comp.www.html
Titolo: Posizionamento verticale di immagini in DIV

Buongiorno a tutti, avrei la necessità di *allineare un'immagine in
fondo ad un div* di dimensioni variabili. Ecco un esempio di XHTML e
CSS:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd
">
<html>
<head>
  <title>Posizionamento verticale di immagini in DIV</title>
  <style type="text/css">
    #area {
	width: 140px; 
	height: 80%; 
	border: 1px solid black; 
	}
  </style>
  </head>
<body>
  <div id="area">
    <img src="img.gif" alt="img" width="100" height="100" />
  </div>
</body>
</html>
So che l'attributo "vertical-align: bottom" non si applica in questo
caso, perchè riguarda la posizione di un'img rispetto a del testo...
Qualcuno sa suggerire come fare?
Grazie in anticipo!

 	height: 80%; 
perche' IE6 considera e visualizza height:80% mentre mozilla no?
forse perhe' <body> e' il container di #area e body NON si estende per
tutta la lunghezza della pagina?
perche' invece IE estende body? se riusciamo
a venir fuori da sta rogna siamo un po' piu' vicini alla
soluzione.
ho messo on-line il codice per fare dei test, provate
questo link con i vostri browser:
http://www.deelan.com/bugz/divheight.htm
non lasciatevi distrarre da charlize t.
ciao.
-- 
goldicus1970 AT 
yahoo.it
http://www.deelan.com

 tutta la lunghezza della pagina?
E' esatto, infatti perchč anche Mozilla mostri il div alto l'80% č
necessario che esso sia "figlio" di un div grande quanto lo schermo:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd
">
<html>
<head>
  <title>Posizionamento verticale di immagini in DIV</title>
  <style type="text/css">
body {
	margin: 0px;
	}
#content {
	position: absolute;
	width: 99%;
	height: 99%;
	border: 1px dashed blue; 
	}
#area {
	width: 100px; 
	height: 50%; 
	border: 1px solid black; 
	vertical-align: bottom;
	}
  </style>
  </head>
<body>
  <div id="content">
    <div id="area">
      <img src="img.gif" alt="img" width="100" height="100" />
    </div>
  </div>
</body>
</html>
Resta la questione di come allineare in basso l'img nel div "area"...
Max

 Resta la questione di come allineare in basso l'img nel div "area"...
appena ho un attimo provo.


 incorrect.
te pareva. IE non considerando il tag <html> si accontenta
di un "body { height:100% }", mozilla no.
quindi, la nuova pagina diventa:
http://www.deelan.com/bugz/divheight_ok.htm
ciao.
-- 
email: 
goldic...@yahoo.it
web: 
http://www.deelan.com

 ho chiesto e mi ha risposto david baron
Non lo conosco, chi è? Nel caso possiamo chiedere a lui circa il
posizionamento verticale dell'img nel div?
Grazie ancora,
Max

 Non lo conosco, chi č?
http://dbaron.org/
-- 
Have a nice day. Ro!
http://www.risorse.net

 posizionamento verticale dell'img nel div?
ti hanno risposto dall'"altra parte", cmq riporto qui,
visto che la risposta non e' per  niente ovvia:
div { position: relative }
img { position: absolute; bottom: 0 }
cioe' tradotto nel nostro es:
http://www.deelan.com/bugz/divheight_ok.htm
#area {	
   position: relative;
   width: 500px;
   height: 80%;
   border: 1px solid black;
}
img { position: absolute; bottom: 0px }
provato con mozilla 1.3, ie6 e opera7.
tempo fa chiesi a gianluca di 
constile.org
 di spiegarmi
che fa "relative" e dopo la sua spiegazione mi fu chiaro: gli
elementi figli di #area  posizionati via "absolute" prenderanno
come riferimento la posizione del div padre #area e non
il <body> (cioe' l'intera pagina) come fanno di solito.
troppo bello per essere vero, prevedo risultati
catastrofici sui browser un po' piu' vecchi.
bye


Grazie mille!!! :)
Devo dire che la soluzione non era proprio ovvia... la spiegazione è
molto utile e servirà per altri layout.
Grazie ancora!
Max