DIV in einer TD unten ausrichten?!

M

medico

Erfahrenes Mitglied
Hallo zusammen,

zur Info gleich vorweg ich bin überhaupt kein CSS Profi....noch in den Kinderschuhen.

Es ist so ich habe eine Seite mit einer Tabelle, die sieht ungefähr so aus:
HTML: 
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="30" height="150">&nbsp;</td>
    <td width="800" height="150">&nbsp;</td>
    <td width="30" height="150">&nbsp;</td>
  </tr>
  <tr>
    <td width="30">&nbsp;</td>
    <td width="800">Content - Variabler Bereich</td>
    <td width="30">&nbsp;</td>
  </tr>
  
  <tr>
    <td width="30" height="250">&nbsp;</td>
    <td width="800" height="250">&nbsp;</td>
    <td width="30" height="250">&nbsp;</td>
  </tr>
</table>

Nun möchte ich gern im Contentbereich (der ja je nach Text eine varriable Höhe hat) ein Bild als Div hinterlegen und dieses Div soll immer unten am Rand der TD sein, also so das es mit nach unten wanderd sobald der Text länger ist. Ist das Möglich? Und wenn ja wie?!

Ich hoffe Ihr versteht was ich meine.
Danke schon mal
Gruß medico
 
Hi,

Webmaster FAQ -> CSS Wie richte ich eine Box am unteren Rand der Elternbox aus?

Den HTML-Code mit den verschachtelten DIVs bitte auch so übernehmen, damit's mit der Positionierung des DIVs so funktioniert, wie du dir das vorstellst; das äußere erste DIV relativ positionieren, darin das zweite absolut.

Wenn es sich aber tatsächlich nur um ein Hintergrundbild für die Tabellenzelle handeln soll, geht's auch völlig ohne DIVs :-)

Code: 
<td style="background:url(...) left bottom; padding-bottom:[Bildhöhe];">


mfg Maik
 
Danke für die schnelle Antwort, wie schon gesagt ich habe davon null Ahnung :-(

Und so ganz verstehe ich das auch nicht, wie ich den Code in die Tabelle einbauen muss. Das es ohne Div geht das weiß ich und hätte es auch hinbekommen.
N ur ist es so das ich dann noch ein Bild darüber legen muss per z-index.

Kannst Du mir nicht kurz zeigen wie ich das mit dem tabellen Code machen muss das das div untene angezeigt wird.....hatte es zwar schon fats...nur im FireFox wird das irgendwie nix.

DANKE
 
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-02-18" />

<title>tutorials.de</title>

<style type="text/css">
/* <![CDATA[ */
* {
margin:0;
padding:0;
}
td {
vertical-align:top;
}
div#parentBox {
position:relative;
min-height:150px;
height:auto !important;
height:150px;
width:780px;
padding:10px 10px 70px 10px;
border:1px solid #000;
}
div#childBox {
position:absolute;
left:0;
bottom:0;
height:50px;
width:780px;
padding:10px;
background:#ccc;
}
/* ]]> */
</style>

</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="30" height="150">&nbsp;</td>
    <td width="800" height="150">&nbsp;</td>
    <td width="30" height="150">&nbsp;</td>
  </tr>
  <tr>
    <td width="30">&nbsp;</td>
    <td width="800">
        <div id="parentBox">
             <h2>parentBox</h2>

             <!-- Hier folgt der weitere Inhalt der #parentBox -->
             <p>Content - Variabler Bereich</p>
             <p>Content - Variabler Bereich</p>
             <p>Content - Variabler Bereich</p>
             <!--<p>Content - Variabler Bereich</p>
             <p>Content - Variabler Bereich</p>
             <p>Content - Variabler Bereich</p>
             <p>Content - Variabler Bereich</p>
             <p>Content - Variabler Bereich</p>
             <p>Content - Variabler Bereich</p>
             <p>Content - Variabler Bereich</p>
             <p>Content - Variabler Bereich</p>
             <p>Content - Variabler Bereich</p>
             <p>Content - Variabler Bereich</p>
             <p>Content - Variabler Bereich</p>
             <p>Content - Variabler Bereich</p>
             <p>Content - Variabler Bereich</p>
             <p>Content - Variabler Bereich</p>
             <p>Content - Variabler Bereich</p>
             <p>Content - Variabler Bereich</p>
             <p>Content - Variabler Bereich</p>-->
             <p>-Ende-</p>

             <div id="childBox">
                  <p>Platzhalter für Bild</p>
             </div>
        </div>
    </td>
    <td width="30">&nbsp;</td>
  </tr>
  <tr>
    <td width="30" height="250">&nbsp;</td>
    <td width="800" height="250">&nbsp;</td>
    <td width="30" height="250">&nbsp;</td>
  </tr>
</table>
</body>
</html>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück