nicht angemeldet
Nachfolgender Text bei position:absolute
Matthias ApselHallo,
ich arbeite für eine Landkartenanwendung mit absoluter Positionierung des Symbols (symbol.gif) auf einer darunterliegenden Karte (karte.jpg). Funktioniert perfekt.
<div style="position:absolute; top:100px; left:100px">
<img src="karte.jpg" />
<img src="symbol.gif" style="position:absolute; left:57%; top:23%;" />
</div>
Dieser Text soll unter dem DIV stehen.
Mein Problem: Der nachfolgende Text erscheint nicht wie gewünscht unter dem <div> mit der Kartendarstelllung, sondern oberhalb. Da durch position:absolute das <div> laut SELFHTML "aus dem normalen Elementfluss entfernt und haben damit keinen Einfluss auf nachfolgende Elemente hat"
Was soll ich machen?
Auf eine ebenfalls absolute Positionierung des Textes möchte ich verzichten, da ich mit den Abmessungen der Karte.jpg und damit der <div>-Höhe variabel bleiben möchte.
-
Hi,
warum positionierst du das div absolut?
Würde position:relative nicht reichen um das symbol richtig zu positionieren?~dave
-
warum positionierst du das div absolut?
Würde position:relative nicht reichen um das symbol richtig zu positionieren?relative bei <div> habe ich schon ausprobiert, das Problem dabei:
in diesem Fall entstprechen left:100% bei der Symbolpositionierung NICHT mehr der <div>-breite bzw. gleichzeitig Kartenbreite, sondern der Viewportbreite. top:100% würde noch passen und bezieht sich komischerweise nicht auf die Viewporthöhe.
-
Hi!
in diesem Fall entstprechen left:100% bei der Symbolpositionierung NICHT mehr der <div>-breite bzw. gleichzeitig Kartenbreite,
:D
Das Div IST so breit wie sein Elternelement. Das ist eine Standardeigenschaft dieser Dinger. (border hat schon so manchem ein Licht aufgehen lassen) Sorge also dafuer, dass dein Div so breit wie die Karte ist und fertig.
--
Signaturen sind blöd!-
Ok, das habe ich nicht gewußt. Ich müßte also bei Verwendung von position:relative für das <div> diesem genau die Breite der Karte zuweisen.
Ich möchte allerdings die Karte austauschbar machen und müßte daher immer wieder die width des <div> manuell anpassen. Das würde ich mir mit position:absolute ersparen, da sich da 100% automatisch auf die Karten- bzw. DIV-Breite beziehen.
Außerdem wird der Text weiterhin nicht genau unter dem <div> angezeigt, wenn ich das <div> selber auf der Seite per CSS-top nach unten verschoben habe. Sonder um diesen nach unten verschobenen Wert zu hoch oben, also ins DIV hinein.
-
Hi,
Ich möchte allerdings die Karte austauschbar machen und müßte daher immer wieder die width des <div> manuell anpassen. Das würde ich mir mit position:absolute ersparen, da sich da 100% automatisch auf die Karten- bzw. DIV-Breite beziehen.
Das erspart dir position:absolute für den DIV deshalb, weil die Breite dann nach der Methode shrink-to-fit berechnet wird.
Bspw. mit Floating des DIVs oder display:inline-block kannst du das aber auch erreichen.
Außerdem wird der Text weiterhin nicht genau unter dem <div> angezeigt, wenn ich das <div> selber auf der Seite per CSS-top nach unten verschoben habe. Sonder um diesen nach unten verschobenen Wert zu hoch oben, also ins DIV hinein.
Tja, dann lass’ das halt einfach :-P
Nutze stattdessen bspw. ein margin-top, wenn das DIV mehr Abstand nach oben hin haben soll.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Das erspart dir position:absolute für den DIV deshalb, weil die Breite dann nach der Methode shrink-to-fit berechnet wird.
Das verstehe ich jetzt nicht, was meinst du mit shrink-to-fit?
Grundsätzlich soll ja die Breite des Divs immer den selben Wert haben nämlich jene der Breite der Karte (unabhängig von der Breite des Browserfensters), damit die Koordinatenberechnung per % der Symbole darauf korrekt ist.Tja, dann lass’ das halt einfach :-P
Nutze stattdessen bspw. ein margin-top, wenn das DIV mehr Abstand nach oben hin haben soll.ok, das hilft, danke für den Tipp! :-)
Insgesamt seh ich aber noch nicht so viele Vorteile bei Verwendung von relative statt absolute:
Bei absolute müßte ich den folgenden Text extra wieder genau per CSS positionieren, damit er unter dem div steht.und bei relativ müßte ich extra immer die DIV-Breite an die Karte anpassen.
Also scheinbar beides "automatisch" geht nicht, oder? ;-)
-
Hi,
Das erspart dir position:absolute für den DIV deshalb, weil die Breite dann nach der Methode shrink-to-fit berechnet wird.
Das verstehe ich jetzt nicht, was meinst du mit shrink-to-fit?
Das, was die Spezifikation definiert.
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-widthInsgesamt seh ich aber noch nicht so viele Vorteile bei Verwendung von relative statt absolute:
Bei absolute müßte ich den folgenden Text extra wieder genau per CSS positionieren, damit er unter dem div steht.Das ist ja schon mal ein ziemlicher Nachteil. Insb., wenn du die Bilder austauschen möchtest, und damit auch die Höhe dieses Bereiches variabel werden kann.
und bei relativ müßte ich extra immer die DIV-Breite an die Karte anpassen.
Also scheinbar beides "automatisch" geht nicht, oder? ;-)
Doch. Und wie, schrieb ich gerade schon.
Bitte nicht nur die Hälfte lesen bzw. unbekanntes/nicht verstandenes kommentarlos ignorieren.
Und bitte mit den Grundlagen von CSS beschäftigen.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
ChrisB,
du kennst dich aber ganz schön gut mit den Tiefen des CSS aus, nicht? ;-)
Hab jetzt mit deiner Hilfe glaub ich die optimale, automatische, flexible Lösung gefunden. Danke, und für jene die's interessiert:<div style="position:relative; display:inline-block; margin-top:100px; margin-left:100px"> <img src="karte.jpg" /> <img src="symbol.gif" style="position:absolute; left:57%; top:23%; margin-top:-4px; margin-left:-4px;" /> </div> <div> Dieser Text steht jetzt genau unter der Karte! </div>-
Om nah hoo pez nyeetz, Thomas!
<div style="position:relative; display:inline-block; margin-top:100px; margin-left:100px">
<img src="karte.jpg" />
<img src="symbol.gif" style="position:absolute; left:57%; top:23%; margin-top:-4px; margin-left:-4px;" />
</div><div>
Dieser Text steht jetzt genau unter der Karte!
</div>Es gibt passendere Elemente anstelle des Div. Falls jener Text auch noch zum Bild gehören sollte, würde ich ihn strukturell in das gruppierende Element mit aufnehmen. Matthias -- 1/z ist kein Blatt Papier. 
-
-
-
-
-
-
-
-