WN - Positionera en DIV i botten av en annan div

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Positionera en DIV i botten av en annan div (https://www.wn.se/forum/showthread.php?t=27501)

Det är inte första gången jag sitter här och försöker lägga en DIV i botten av en annan med alltid slutat med en tabell med valign="bottom" för jag inte hittat lösningen. Tyvärr verkar inte tabell hjälpa mig denna gången.

Jag vill lägga en div som består av en bild, och ovanför denna skall det vara en ruta med text, alltså en ny DIV. Denna rutan vill jag skall lägga sig i botten av bilden, problemet är att det är många bilder med olika höjder så därför kan jag inte placera den med "top".

Så här ser min kod ut idag:

Kod:

#image {

 position:relative;

 width:680px;

 height:auto;

 margin-right:0px;

 margin-bottom:5px;

 float: center;

}



#tex5 {

 position:absolute;

 top:0px;

 left:0;

 width:680px;

 height:100%;

 padding:0px;

 background:#000;

 

}



#text {

 filter: alpha(opacity=70);

 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);

 -moz-opacity: 0.70;

 opacity:0.7;

}

#words {

position:absolute;

 top:210px;

 left:0;

 width:380px;

 height:42px;

 background:transparent;

 padding:5px;

 text-align:center;

}

Kod:

<div id="image">

<img src="bild.jpg" border="0"></a>"

Response.write "<div id=""text""></div>"

Response.write "<div id=""words"">TEXT</div>"

Response.write "</div>"

Hm, jag skulle använt "bottom:0;" för den div du vill ha i botten. Funkar inte det?

vertical-align:bottom fungerar tyvärr inte. Det är mycket irriterande.

Ibland går det helt enkelt inte att lösa så och man får tänka om. Finns en hel del kvar att önska av implementeringen av CSS i de stora webbläsarna i dagsläget.

Det finns ingen cross-browserlösning vad jag vet så det borde du nog hålla dig borta från oavsett.

Har du någon sida där man kan se hur det ser ut just nu? Jag förstår inte riktigt vad ni vill åstadkomma...

Padding-bottom eller margin-bottom borde ju funka fint, om jag förstått är någorlunda korrekt...

EDIT: Med tanke på de andra inläggen här, så har jag missförstått er fullständigt... ;)
Dock ser jag gärna ett demo-exempel på vad ni vill åstadkomma. (Problemlösande är roligt... :))

Citat:

Originally posted by jonny@Feb 27 2008, 15:34
vertical-align:bottom fungerar tyvärr inte.

Det funkar för element med display:table-cell. :) TD-elementet har det förstås default, men man kan sätta det i sin css för andra element också. Dock saknas stöd för display:table(-cell|-row|) i samtliga versioner av MSIE... Dean Edwards compliance-script för MSIE fixar det tyvärr inte heller.

Jag fattar kanske inte riktigt vad du vill men jag försöker.

CSS

Kod:

#image-wrapper{

 width:680px;

 height:auto;

 margin:0 0 5px 0;

}



#image{

 float:left;

 width:100%;

 height:auto;

}



#text{

 float:left;

 width:100%;

 height:auto;

}



#words{

 float:left;

 width:100%;

 height:auto;

}



img{

border:none;

}



img a{

border:none;

}

HTML

Kod:

<div id="image-wrapper">

 <div id="image"

  <img src="bild.jpg" />

 </div>

 <div id="text">

  Lite text

 </div>

 <div id="words">

  Några ord

 </div>

</div>

class istället för id på divarna om du har flera :)

Sen vettetusan om det behövs något hack för att komma runt eventuell IE bug.

Personligen brukar jag göra så här

Kod:

<div id="images">

<% for image in @image %>

 <div class="image-wrapper">

  <div class="image">

   <img src="" />

  </div>

  <div class="image-description">

   <p>text</p>

  </div>

  <div class="image-tags">

   <% for tag in @image.tag %>

    <span class="image-tag">ord/tag</span>

   <% end %>

  </div>

 </div>

<% end %>

</div>

Och sedan köra med floats i css.