Div relativ positionieren sprengt Tabelle

[garugc]

Hallo Leute,

ich möchte beim Klick auf einen Link versch. divs ein- bzw. ausblenden. Wie das geht hab ich bereits hinbekommen. die divs enthalten Grafiken und sollen pixelgenau platziert werden. Wenn ich position: absolute verwende, verschiebt sich die Grafik je nach Browsergröße. Also hab ich relative eingesetzt. Hie bleibt die Grafik zwar an ihrem Platz, aber dafür sprengt sie die Tabelle..
kann mir da jemand helfen?

Hier der Code:

<table cellspacing="0" cellpadding="0" width="1017" height="619" align="center">
  <tr>
 <td colspan="3" width="1017" height="124" style="background-image: url('images/head.gif'); background-repeat: no-repeat; background-position: 0px 0px;">
<div id="kontakt" style="visibility:hidden; position:relative; top:8px; left:977px;">
  <img src="images/kontakt_bild.gif" border="0" height="124" width="250" alt="Kontakt" />
</div>
<div id="anfahrt" style="visibility: hidden;">
  hier kommt anfahrt rein
</div>
      </td>
 </tr>

---

Dies ist nur der Head der HP. Und dieser wird vom unteren Teil der Homepage abgetrennt.

[Marc]

Hallo garugc,

ich möchte beim Klick auf einen Link versch. divs ein- bzw. ausblenden. Wie das geht hab ich bereits hinbekommen. die divs enthalten Grafiken und sollen pixelgenau platziert werden. Wenn ich position: absolute verwende, verschiebt sich die Grafik je nach Browsergröße.

Aber nur uunter bestimmten Voraussetzungen. Denn absolute ist trotz seines Namens eine relative Angabe.

Steht hier in SelfHTML im Kapitel CSS/Positionierung, in der Suche findest Du auch Threads dazu (müsste sogar noch durch runterscrollen erreichbar sein).

Viele Grüße,
Marc.

[garugc]

Hi Marc,

die Anleitung hatte ich bereits gelesen:
"Denn absolute verhält sich durchaus relativ, wie die inneren div-Elemente a4 bis a6 des Beispiels zeigen: relativ nämlich zum Rand des Elternelements (a3), vorausgesetzt dieses Element ist mit absolute, fixed oder relative positioniert. Falls kein von static abweichend positioniertes Vorfahrenelement existiert, bezieht sich die Positionierung auf das body-Element."

Ich hab den Div jetzt auf absolute gesetzt. Somit sprengt er nimmer den Rahmen. Die td, in der das Div liegt hab ich auf relative gesetzt. Jetzt müsste laut Anleitung der Div sich am td ausrichten. Tut er aber nicht..

Hallo garugc,

ich möchte beim Klick auf einen Link versch. divs ein- bzw. ausblenden. Wie das geht hab ich bereits hinbekommen. die divs enthalten Grafiken und sollen pixelgenau platziert werden. Wenn ich position: absolute verwende, verschiebt sich die Grafik je nach Browsergröße.

Aber nur uunter bestimmten Voraussetzungen. Denn absolute ist trotz seines Namens eine relative Angabe.

Steht hier in SelfHTML im Kapitel CSS/Positionierung, in der Suche findest Du auch Threads dazu (müsste sogar noch durch runterscrollen erreichbar sein).

Viele Grüße,
Marc.

[garugc]

ok, habs hinbekommen.. hab einfach nen Div um den Div gesetzt und den auch auf absolute gesetzt.. weiß zwar nicht, warum der sich jetzt nicht verschiebt, aber egal.. hauptsache es klappt.

merci

[Marc]

Hallo,

ok, habs hinbekommen.. hab einfach nen Div um den Div gesetzt und den auch auf absolute gesetzt.. weiß zwar nicht, warum der sich jetzt nicht verschiebt, aber egal.. hauptsache es klappt.

Schön! Danke für die Rückmeldung (so wissen Leute, die im Archiv Lösungsvorschläge finden, auch ob sie zum gewünschten Ergebnis geführt haben).

Viele Grüße,
Marc.

[garugc]

jetzt hab ich für die Positionierung folgendes angegeben:

#kontakt { position:absolute; top:-22px; left:767px; }
*html #kontakt { position:absolute; top:16px; left:767px; }

aber der IE positioniert es trotzdem nach den oberen Angaben..

ok, habs hinbekommen.. hab einfach nen Div um den Div gesetzt und den auch auf absolute gesetzt.. weiß zwar nicht, warum der sich jetzt nicht verschiebt, aber egal.. hauptsache es klappt.

merci

[MudGuard]

Hi,

#kontakt { position:absolute; top:-22px; left:767px; }
*html #kontakt { position:absolute; top:16px; left:767px; }

Meintest Du * html #kontakt ?

cu,
Andreas

[Marc]

Hallo,

#kontakt { position:absolute; top:-22px; left:767px; }
*html #kontakt { position:absolute; top:16px; left:767px; }

Meintest Du * html #kontakt ?

Und was ist der Unterschied zwischen dem ersten und dem zweiten #kontakt?

Du positionierst ein und dasselbe Element!

Viele Grüße,
Marc.

[garugc]

hatte das *html gegen * html ausgetauscht in der Hoffnung, es würde dann funzen.. beides klappt nicht.

der Unterschied ist die Position des Elements. Ich möchte doch dem IE eine eigene Position vermitteln..

Hallo,

#kontakt { position:absolute; top:-22px; left:767px; }
*html #kontakt { position:absolute; top:16px; left:767px; }

Meintest Du * html #kontakt ?

Und was ist der Unterschied zwischen dem ersten und dem zweiten #kontakt?

Du positionierst ein und dasselbe Element!

Viele Grüße,
Marc.

[Marc]

Hallo,

hatte das *html gegen * html ausgetauscht in der Hoffnung, es würde dann funzen.. beides klappt nicht.

Kann auch nicht...

der Unterschied ist die Position des Elements. Ich möchte doch dem IE eine eigene Position vermitteln..

Dann benutz Conditional Comments.

Viele Grüße,
Marc.

[ChrisB]

Hi,

#kontakt { position:absolute; top:-22px; left:767px; }
*html #kontakt { position:absolute; top:16px; left:767px; }

Meintest Du * html #kontakt ?

Und was ist der Unterschied zwischen dem ersten und dem zweiten #kontakt?

Du positionierst ein und dasselbe Element!

Nein, tut er nicht.
Da es kein Element namens *html gibt, formatiert die zweite Regel *gar* *nichts*.

Die dritte genannte formatiert #kontakt in aelteren IEs anders, weil der meint, es gebe ueberhalb html noch irgendein weiteres Element.

MfG ChrisB

[Harlequin]

Yerf!

Ich hab den Div jetzt auf absolute gesetzt. Somit sprengt er nimmer den Rahmen. Die td, in der das Div liegt hab ich auf relative gesetzt. Jetzt müsste laut Anleitung der Div sich am td ausrichten. Tut er aber nicht..

Du testest im FF?

Vielleicht sollte man im Artikel mal ergänzen, dass die Aussage nicht auf Tabellenelemente zutrifft. Bei denen ist das Verhalten einer Positionierung abweichend von static "undefined". Und der Firefox hält sich mal wieder absolut wortgetreu and die Specs...

Die Lösung ist daher tatsächlich ein zusätzlicher Div in der Tabellenzelle, damit dort die Positionierung wirkt.

Gruß,

Harlequin

[Marc]

Hallo Harlequin,

Ich hab den Div jetzt auf absolute gesetzt. Somit sprengt er nimmer den Rahmen. Die td, in der das Div liegt hab ich auf relative gesetzt. Jetzt müsste laut Anleitung der Div sich am td ausrichten. Tut er aber nicht..

Vielleicht sollte man im Artikel mal ergänzen, dass die Aussage nicht auf Tabellenelemente zutrifft.

Danke für den Hinweis. Das wir mir so auch noch nicht klar...

Viele Grüße,
Marc.

[MudGuard]

Hi,

Die Lösung ist daher tatsächlich ein zusätzlicher Div in der Tabellenzelle, damit dort die Positionierung wirkt.

Wobei es ein div um das div um das Bild nicht braucht.

Ein div reicht (position:relative), darin kann man dann das img positionieren.

cu,
Andreas

[Harlequin]

Yerf!

Ein div reicht (position:relative), darin kann man dann das img positionieren.

Stimmt, so genau hat ich mir dann die Ausgangslage nicht angeschaut.

Allerdings find ichs blöd, das man trotzdem einen eigentlich unnützen div braucht, damit die Positionierung funktioniert.

Gruß,

Harlequin

[garugc]

ich hatte die ganzen Posts übersehen und einfach dazwischen gepostet..

also:

1. ein Div reicht nicht. Bei position:relative wird eben der Head-Bereich abgesprengt. Habe einen zweiten div darum gelegt, und die Tabelle bleibt heil:

<div style="position:relative; top:0px; left:0px;">
<div id="kontakt">
  <img src="images/kontakt_bild.gif" border="0" height="124" width="250" alt="Kontakt" />
</div>
<div id="anfahrt" style="display:none;">
  hier kommt anfahrt rein
</div>
</div>

Jetzt hab ich nur noch das Problem, dass die Grafik im IE 2 pixel zu weit unten liegt. Habe das versucht so zu fixen, aber es klappt nicht:

#kontakt { position:absolute; top:-22px; left:767px; display:none; }
*html #kontakt { position:absolute; top:100px; left:767px; display:none; }

weiß jemand ne Antwort?

Yerf!

Ein div reicht (position:relative), darin kann man dann das img positionieren.

Stimmt, so genau hat ich mir dann die Ausgangslage nicht angeschaut.

Allerdings find ichs blöd, das man trotzdem einen eigentlich unnützen div braucht, damit die Positionierung funktioniert.

Gruß,

Harlequin

[Marc]

Hallo garugc,

1. ein Div reicht nicht. Bei position:relative wird eben der Head-Bereich abgesprengt. Habe einen zweiten div darum gelegt, und die Tabelle bleibt heil:

  
<div style="position:relative; top:0px; left:0px;">  
<div id="kontakt">  
  <img src="images/kontakt_bild.gif" border="0" height="124" width="250" alt="Kontakt" />  
</div>  
<div id="anfahrt" style="display:none;">  
  hier kommt anfahrt rein  
</div>  
</div>  

Wird Dir das nicht langsam selber unübersichtlich? Füllst Du die Tabelle wirklich mit tabellarischen Daten? Oder eher für das Layout?

Ich rate Dir: misch nicht Tabellen-Layout mit CSS-Layout, Inline-Styles mit zentralen Formaten.

Entscheide Dich!

Und vorher: denk mal nach, heißt: mach Dir ein Konzept. Und dann: Entscheide Dich. Du kannst gerne mal hier fragen, was Dir Leute mit langjähriger Erfahrung raten (Tabellen-Layout oder CSS).

Aber vielleicht kannst Du Dir die Antwort schon denken. ;-)

Viele Grüße,
Marc.

[garugc]

Ich hatte mich eigentlich für tabellen-Layout entschieden.

nur weiß ich nicht, wie ich das ein- und ausblenden von Ebenen ohne divs bewerkstelligen soll.

[Marc]

Hallo,

Ich hatte mich eigentlich für tabellen-Layout entschieden.

nur weiß ich nicht, wie ich das ein- und ausblenden von Ebenen ohne divs bewerkstelligen soll.

In der Regel benutzen Anfänger ein Tabellen-Layout, um sich das Leben leichter zu machen. Ich bin mir aber sicher, dass Dir vor allem der Internet-Explorer noch weitere Fallen stellen wird.

Wenn Deine Seite noch nicht fertig ist, überleg mal, ob es nicht noch Zeit ist, die Tabellen rauszuschmeißen. Es gibt doch genug Vorlage für CSS-Layouts, die Du kostenlos übernehmen kannst.

Hier findest Du sicher Hilfe bei konkreten Problemen. Auf ein Problem mit Tabellen bist Du ja bereits gestoßen...

Viele Grüße,
Marc.

[garugc]

ja, werd ich nochmal überdenken. merci

[Harlequin]

Yerf!

1. ein Div reicht nicht. Bei position:relative wird eben der Head-Bereich abgesprengt. Habe einen zweiten div darum gelegt, und die Tabelle bleibt heil:

<div style="position:relative; top:0px; left:0px;">
<div id="kontakt">
  <img src="images/kontakt_bild.gif" border="0" height="124" width="250" alt="Kontakt" />
</div>
<div id="anfahrt" style="display:none;">
  hier kommt anfahrt rein
</div>
</div>

Du hast es bestimmt nicht so probiert:

<div style="position:relative; top:0px; left:0px;">
   <img id="kontakt" src="images/kontakt_bild.gif" border="0" height="124" width="250" alt="Kontakt" />
 <div id="anfahrt" style="display:none;">
   hier kommt anfahrt rein
 </div>
 </div>

Das äußere Div mit position:relativ ist (leider) notwendig, aber das position:absolute kannst du direkt auf das Bild anwenden.

#kontakt { position:absolute; top:-22px; left:767px; display:none; }
*html #kontakt { position:absolute; top:100px; left:767px; display:none; }

weiß jemand ne Antwort?

Außer dem bereits gesagtem (zwischen dem * und html gehört ein Leerzeichen), der unterschied beträgt da aber nicht nur 2 Pixel...

Außerdem: display:none? Kommt da noch etwas damit das angezeigt wird? Vielleicht liegt ja dort der Fehler...

Gruß,

Harlequin

[Marc]

Hallo Harlequin,

Außer dem bereits gesagtem (zwischen dem * und html gehört ein Leerzeichen), der unterschied beträgt da aber nicht nur 2 Pixel...

??? Steh ich jetzt total auf dem Schlauch? * html bedeutet doch dass hier etwas mit jedem html-Element geschehen soll, welches sich in einem beliebigen Element befindet. Aber das html-Element hat kein übergeordnetes Element!

Viele Grüße,
Marc.

[Harlequin]

Yerf!

??? Steh ich jetzt total auf dem Schlauch?

Nicht du, sondern der IE...

* html bedeutet doch dass hier etwas mit jedem html-Element geschehen soll, welches sich in einem beliebigen Element befindet. Aber das html-Element hat kein übergeordnetes Element!

Der IE (bis Version 6) ist da anderer Meinung ;-)

Gruß,

Harlequin

[garugc]

Also Leute,

zunächst Danke für die ganzen BEiträge, habe etwas gebraucht, um das Thread-Format hier zu raffen.. insofern steh ich auch aufm Schlauch.

Das display:none; steht da, weil ich noch ein skript habe, mit dem die einzelnen Divs ein- bzw. ausgeblendet werden.

Der IE ignoriert die Anweisung hinter dem * html. Ich dachte, der IE interpretiert alles danach. Bei mir wird aber von beiden Browsern nur die obere Anweisung interpretiert.

ok, und der Tipp mit dem img hat es letztendlich gebracht (HEUREKA!!):

<div style="position:relative; top:0px; left:0px;">
  <img id="kontakt" src="images/kontakt_bild.gif" border="0" height="124" width="250" alt="Kontakt" />
<div id="anfahrt" style="display:none;">
  hier kommt anfahrt rein
</div>
</div>

das wars. Jetzt sitzt es in beiden Browsern richtig!!
Jetzt kann ich sogar die Anweisung hinter dem * html raus nehmen, da es sowieso unwirksam ist.

Muchas gracias!

[ChrisB]

Hi,

Allerdings find ichs blöd, das man trotzdem einen eigentlich unnützen div braucht, damit die Positionierung funktioniert.

Man sollte in diesem Falle vielleicht eher darueber nachdenken, ob's nicht "bloed" ist, dass man eine Tabelle zur Auszeichnung der vorliegenden Inhalte (miss-)"braucht".

MfG ChrisB

[Harlequin]

Yerf!

Man sollte in diesem Falle vielleicht eher darueber nachdenken, ob's nicht "bloed" ist, dass man eine Tabelle zur Auszeichnung der vorliegenden Inhalte (miss-)"braucht".

In diesem Fall ja, aber manchmal will man eben auch den Inhalt von Tabellen optisch schön gestalten. Spätestens dann steht man aber wieder vor dem gleichen Problem...

Gruß,

Harlequin