nicht angemeldet
Problem mit DIV-Containern
Hi leute,
habe ein komisches problem mit meinen DIV-Containern, ich wollte verschiedene container über eine grafik legen damit ich einen solchen effeckt erzielen kann:
http://www.talklevel.de/test.php
mein code dazu sieht so aus:
<div style="background-image:url(http://www.talklevel.de/grafiken/kreissoest.png); width:364px; height:271px;" class="text_C30000"><b>
<div style="position:relative; top:30px; left:222px;">Lippstadt<br><? echo $lippstadt; ?> User</div>
<div style="position:relative; top:30px; left:95px;">Lippetal<br><? echo $lippetal; ?> User</div>
<div style="position:relative; top:5px; left:295px;">Geseke<br><? echo $geseke; ?> User</div>
<div style="position:relative; top:10px; left:205px;">Erwitte<br><? echo $erwitte; ?> User</div>
<div style="position:relative; top:5px; left:60px;">Welver<br><? echo $welver; ?> User</div>
<div style="position:relative; top:-27px; left:158px;">Bad<br>Sassen-<br>dorf<br><? echo $badsassendorf; ?> User</div>
<div style="position:relative; top:-15px; left:30px;">Werl<br><? echo $werl; ?> User</div>
<div style="position:relative; top:-50px; left:110px;">Soest<br><? echo $soest; ?> User</div>
<div style="position:relative; top:-80px; left:210px;">Anröchte<br><? echo $anroechte; ?> User</div>
<div style="position:relative; top:-80px; left:285px;">Rüthen<br><? echo $ruethen; ?> User</div>
<div style="position:relative; top:-60px; left:10px;">Wickede<br><? echo $wickede; ?> User</div>
<div style="position:relative; top:-100px; left:65px;">Ense<br><? echo $ense; ?> User</div>
<div style="position:relative; top:-120px; left:125px;">Möhnesee<br><? echo $moehnesee; ?> User</div>
<div style="position:relative; top:-130px; left:220px;">Warstein<br><? echo $warstein; ?> User</div>
</b></div>
Das Problem welches sich daraus ergibt ist das die Grafik unten zu lang wird ich kann mir das aber nicht erklären, WENN ich die letzten 4 einträge in der grafik also möhnesee, ense, warstein und wickede raus lasse klappt es, wodran kann das liegen?
mfg dani
-
Moin!
Das Problem welches sich daraus ergibt ist das die Grafik unten zu lang wird ich kann mir das aber nicht erklären, WENN ich die letzten 4 einträge in der grafik also möhnesee, ense, warstein und wickede raus lasse klappt es, wodran kann das liegen?
Mach dir klar, bzw. lies nach (in SELFHTML, Kapitel CSS), wie "position:relative" wirkt!
Dein Ergebnis teilst du hier wieder mit, und wir diskutieren dann Alternativen. (Schließlich sollst du noch was lernen)
- Sven Rautenberg
--
My sssignature, my preciousssss!-
relative
Relative Positionierung vom normalem Fluß. Die normale Position ist wie bei static im normalem Textfluß. Die Positionierungsangaben left, top, right, bottom verschieben das Element aus dieser Position. Die nachfolgenden Elemente verhalten sich so, als wäre das Element nicht verschoben-
Moin!
Die nachfolgenden Elemente verhalten sich so, als wäre das Element nicht verschoben
Das ist der entscheidende Satz!
Deine Grafik, die als Hintergrundbild des alle Zeilen umschließenden DIVs eingebaut ist, ist zu lang, weil deine Zeilen alle nur relativ positioniert sind, an ihrem Ursprungsort aber weiterhin Platz wegnehmen.
position:relative ist daher der falsche Weg für deine Texte. position:absolute wäre viel schlauer, da nehmen die Elemente am Ursprungsort keinen Platz mehr weg.
position:absolute richtet sich bei den Koordinaten für top und left nach dem umschließenden Element, welches eine von position:static (das ist der Normalfall, wenn keine Angabe erfolgt) verschiedene Positionierung hat. Siehe das Beispiel bei SELFHTML zu position: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position
position:relative wäre so eine Positionierung, die von static verschieden ist. Wenn du diese auf das DIV mit dem Hintergrundbild anwendest und keine Angaben zu top und left machst, bleibt das Bild an seinem Ort, bildet aber selbst einen Rahmen für die inneren Elemente, die mit position:absolute dann platziert werden können - die linke obere Ecke des DIVs ist dabei "top:0; left:0".
- Sven Rautenberg
--
My sssignature, my preciousssss!-
hi,
erstmal großes danke für die ganzen infos!
ich muss also für die einzelnen DIV Container position:absolute nutzen soviel habe ich verstanden!
Der zweite punkt der wichtig ist, ist das man diese divs an dem DIV ausrichtet welcher als rahmen gilt und die grafik fasst!
aber wie ich das mache verstehe ich noch nicht so ganz, also wie ich den anker quasi fest setze.... ich habe position:static oder position:fixed ausprobiert aber jedesmal richtet sich das ganze an body aus, ist also falsch könntest du mir da noch kurz hilfestellung geben?
mfg dani
-
Moin!
aber wie ich das mache verstehe ich noch nicht so ganz, also wie ich den anker quasi fest setze.... ich habe position:static oder position:fixed ausprobiert aber jedesmal richtet sich das ganze an body aus, ist also falsch könntest du mir da noch kurz hilfestellung geben?
position:static ist der Standardwert für alle Elemente. Wirkt also so, als wäre er nicht geschrieben in deinem CSS - kann nicht zum Erfolg führen.
position:fixed funktioniert auch nicht - der IE kann's sowieso nicht, und außerdem richten sich alle Positionsangaben dann nicht nach dem Dokument, sondern nach dem Browserfenster.
Ich schrieb, dass du dem Grafik-DIV position:relative geben solltest. Damit gehts. Die relative Positionierung ohne Angabe von top und left (was identisch ist mit top:0; left:0) verschiebt das Element nicht, ändert aber sein Verhalten gegenüber enthaltenen Elementen, die absolut positioniert werden.
- Sven Rautenberg
--
My sssignature, my preciousssss!-
ok dann benutze ich relative klappt auch! :-)
nochmal danke für die infos!
mfg dani
-
Moin!
ok dann benutze ich relative klappt auch! :-)
Absolut geht natürlich auch, aber dann mußt du dessen Position ja angeben. Und das kann schwierig werden, denn du weißt ja nicht, wie groß der umgebende Inhalt wird im aktuellen Browser. Ohne Positionsangabe würde das Bild links oben im Browserfenster landen.
- Sven Rautenberg
--
My sssignature, my preciousssss!
-
-
-
ohh nachdem ich dem ersten DIV auch absolute verpasst habe geht es!
danke für die hilfe!
mfg dani
-
-
-
-