✔ Absolute Poitionierung von DIvs in TD

Status
Nicht offen für weitere Antworten.
aquasonic

aquasonic

Erfahrenes Mitglied
Hallo zusammen,

schon wieder ein CSS Problem:

Ich habe eine Tabelle mit einem TD, welches je nach Text in einem anderen TD eine dynamische Höhe hat. Ich sollte nun aber im TD links 2 DIVs haben, eines unten und eines oben positioniert.

Code: 
<table>
 <tr>
  <td>
   <div style="vertical-align:top">top</div>
   <div style="vertical-align:bottom">bottom</div>
  </td>
  <td>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br></td>
 </tr>
</table>

Dies geht aber so leider nicht, habe auch schon viel gesucht und probiert, geht aber irgendwie nicht. Ich kann das Layout leider nicht komplett mit Divs erstellen, da dies schon vorhanden ist und zu aufwendig wäre. Zudem kann ich das Mutterelement (also das table) nicht absolut positionieren, da es sonst das ganze Layout verschiebt.

Wäre um jede Hilfe dankbar ;) Danke...
 
Mein Lösungsvorschlag geht da in eine ganz andere Richtung ;)

HTML: 
<table>
       <tr>
           <td style="vertical-align:top;">top</td>
           <td rowspan="2">bla<br>bla<br>bla<br>bla<br>bla<br>bla<br></td>
       </tr>
       <tr>
           <td style="vertical-align:bottom;">bottom</td>
       </tr>
</table>
 
Jep der klappt sogar, bin ich nicht drauf gekommen ;)

Aber, dies geht nur im Firefox ;) Also so schon nicht, aber ich habe dies noch ein bisschen komplexer:

Code: 
<tr class="function">
	<td style="width:9px; height:6px"></td>
	<td style="width:18px" rowspan="3"></td>
	<td valign="top" rowspan="3" class="function">Leiter/in Personalentwicklung</td>
</tr>
<tr><td style="background-color:#FF6600;"></td></tr>
<tr><td style="height:7px"></td></tr>

Code: 
.table_jobdesc tr.function td.function {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 26pt;
	color: #FF6600;
	line-height: 28pt;
}

im IE geht das mit der Höhe leider nicht.
 
Nunja, war vielleicht blöd einen neuen Thread zu erstellen. Aber wenn du genau überlegst, ist das Resultat im Endeffekt das gleiche. Aber so konnte ich es nun lösen. Also im Firefox wenigstens ;)
 
Mein zuletzt gezeigter Lösungsvorschlag funktioniert in allen mir zur Verfügung stehenden Browser.

Meine Testumgebung: Win2k, Firefox 1.5.0.7, IE 6.0, Mozilla 1.7.12, Netscape 7.0, Opera 9.01
 
Und wenn du die Höhe einbaust so wie es bei mir ist? Also links 3 Zeilen (obere und untere nur 6px hoch) und rechts die eine? Was hast du für ein Doctype drin?
 
Bei mir spielt es keine Rolle, ob ich für die Zellen eine Höhe bestimme, oder nicht.

Ich teste hier mit diesem Doctype:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

Der einizige Unterschied im IE liegt darin, daß er leere Tabellenzellen nicht darstellt.
 
OK, aber bei diesem Doctype geht es auch im Firefox nimmer :(

kannst du mir mal deinen gesamten Code posten, damit ich den mal probieren kann?!

Danke ;)
 
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

</head>
<body>

<table border="1">
       <tr>
           <td style="width:9px;height:6px;"></td>
           <td style="width:18px;" rowspan="3"></td>
           <td rowspan="3">bla<br>bla<br>bla<br>bla<br>bla<br>bla<br></td>
       </tr>
       <tr>
           <td></td>
       </tr>
       <tr>
           <td style="height:6px;"></td>
       </tr>
</table>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück