nicht angemeldet
Probleme beim Verschachteln von DIVs (Referenzierung)
Hallo,
ich überlege nun schon seit Tagen an einem Problem, das ich einfach nicht gelöst bekomme und ich nicht weiss, was genau ich falsch gemacht habe - vielleicht fällt hier einem ja mit einem Blick auf, was mein Denkfehler ist.
Zum Problem:
Ich habe eine Webseite erstellt, die ohne TABLE strukturiert ist, nur mit CSS.
Damit eine äußere Box mit dem Inhalt mitwächst und einen Rahmen anzeigen kann, habe ich das DIV für den Inhalts-Bereich RELATIV positionieren müssen.... darunter kommt nochmals ein DIV, was die Tabelle noch ein STück weiter einrückt (nicht so geschickt, aber ist nicht das Problem).
Das Problem ist die unterste Zeile der dann folgenden Tabelle: Dort ist eine Grafik hinterlegt, AUF der ich Text plazieren will - was am besten mittels einer CSS-Positionierung geht.
Dazu habe ich in dem TABLE-TD, wo die Grafik geladen wird, ein DIV eingefügt, was jedoch RELATIVE positioniert ist und somit, so wie ich das eigentlich verstehe, als neues Elternelement für ein darin eingeschlossenes, ABSOLUTE positioniertes DIV-Tag fungieren müßte.
Aber das tut es nicht: Das DIV-Tag orientiert sich leider immer am äußersten DIV-Tag und verschiebt so auch gleichzeitig schon die Grafik aus der Tabelle mit an die andere Position.
Wieso?? Wenn ich ein DIV REALTIVE positioniere und keine weiteren Angaben zu TOP oder LEFT mache, dann müßte es sich doch an die Position einfügen, an der es im normalen HTML-Fluß steht, oder nicht?
Hier eine Übersicht des Codes:
------------------------
<div style="position:relative;left:183px;top:70px;z-index:12;">
<div style="position:relative;margin-left:50px;">
<table border="0" cellpadding="0" cellspacing="0" width="486">
<tr><td>
..............Inhalt.............
</td></tr>
<tr>
<td width="114" colspan="3">
## Hier das DIV, was als Elternobjekt fungieren SOLLTE:
<div style="position:relative;">
<img src="grafiken/produkt_unten_start.gif" width="114" height="30" border="0">
+++++ Hier das innere DIV, welches eine Tabelle enthält, die mit dem Text darin genau auf der Grafik darfstellt werden soll:
<div style="position:absolute;top:4px;left:1px;">
<table style="table_layout:fixed;" border="0" width="110">
<tr>
<td width="70"><span class="preis_prae">ab <span class="preis_style">9,99</span></span></td><td width="40"><img src="grafiken/schwarz_pfeil_maske.gif" border="0"><a href="irgendwo.html">Info</a></td>
</tr>
</table>
</div>
</div></td>
..... Rest der Tabelle
</table>
</div>
</div>
----------------------------------
Und um das mal zu sehen, habe ich diesen Ausschnitt der Seite auf folgende Adresse kopiert:
http://www.karstenschaefer.de/test/start_test_forum.html
Vielen vielen Dank für mögliche Hilfen !!!
-
hi,
Das Problem ist die unterste Zeile der dann folgenden Tabelle: Dort ist eine Grafik hinterlegt, AUF der ich Text plazieren will - was am besten mittels einer CSS-Positionierung geht.
ich würde sagen, dass dürfte noch besser gehen, wenn du den text einfach in eine stinknormales html-element packst, per width/height für entsprechende ausmaße und per margin/padding für entsprechende abstände sorgst, und dann das bild einfach als hintergrundbild für das element einfügst.
dann kannst du dir jegliches herumhantieren mit absoluter/relativer positionierung an dieser stelle sparen.
gruss,
wahsaga