nicht angemeldet
verschachtelte Divs umfliessen lasse
Hallo zusammen,
ich habe ein Bild das aus zwei per css übereinandergelegte images besteht. Diese stehen in einem Div, daß sich per relativer Positionierung an den Elemnetnfluß hält. Das ganze sieht so aus:
<div style="position:relative; top: 0px; left: 0px;">
<div style="position:absolute; top: 0px; left: 0px;"><img src="bild1.gif" width="150" height="50" alt="1"></div>
<div style="position:absolute; top: 0px; left: 0px;"><img src="bild2.gif" width="150" height="50" alt="2"></div>
</div>
Zuerst, was ich bezweckte. Ich wollte rechts von diesem Bild einen in der Breite maximierten Text haben und beide "Spalten" wiederum zentriert wissen.
-----------
! ! text
! (bild) ! text
! ! text
! ! text
-----------
(hoffe, das Ascii-Bild haut hin ;-))
Erschwerend kommt dazu, daß das ganze auch noch mit dem NS4 funktionieren muß, allerdings bekomme ich noch nicht mal die reine css-float-left Variante hin.
Zuerst zur "NS4-Variante": der "bilderblock" richtet sich im großen und ganzen brav nach dem restlichen Inhalt der Seite. Nur packe ich das ganze in eine Tabelle (ja ja, ist grausig) um ein zwei-Spaltendesign hin zu bekommen, dann funktioniert es nicht mehr. Jeder Browser sucht sich eine eigene Lösung aus, um mir das optisch kund zu tun. Hat jemand eine Idee, wie ich das Endergebnis (links zwei Bilder übereinander, rechts davon Text, alles zentriert) NS4-tauglich hinbekommen kann?
Dann die reine CSS-version. Setze ich im "obersten" Div, das die beiden image-Divs umschliest) ein width und ein float:left rein, dann setzen mir die Browser das untereinander. Erst wenn ich bei dem ersten inneren image-Div die absolute Positionierung rausnehme klapts zumindest mit dem float:left.... Wobei natürlich die Bilder falsch stehen....
Ich gebe es zu, neben dem lernen von css ist mir nach 4 Stunden rumprobieren auch das Ergebnis meines eigendlichen Wunsches wichtig geworden, eine ns4 taugliche Version eines zwei Spaltenlayouts zu bekommen, links das zusammengeklebte Bild, rechts der Text.
Wer weiß Rat?
Chräcker
-
Moin, Moin
Also ehrlich gesagt, bin ich nicht so ganz schlau geworden, wie das Gesamtresultat schlußendlich aussehen soll.
Deshalb belasse ich es einfach mal bei einem Denkanstoß, in welche Richtung Du forschen könntest.<div style="position:relative; top: 0px; left: 0px;">
<div style="position:absolute; top: 0px; left: 0px;"><img src="bild1.gif" width="150" height="50" alt="1"></div>
<div style="position:absolute; top: 0px; left: 0px;"><img src="bild2.gif" width="150" height="50" alt="2"></div>
</div>Mein Vorschlag:
<span style="position:relative; top:0px; left:0px; width:150px; height:50px; float:left">
<img src="bild1.gif" width="150" height="50" alt="1"><img style="margin-left:-150px" src="bild2.gif" width="150" height="50" alt="2">
</span>Das ist jetzt zwar ungetestet, sollte aber funktionieren (vorausgesetzt ich habe Dein Problem richtig verstanden).
Thomas J.
-
Hallo,
Danke ;-) Ja, das funktioniert, zwar nicht im NS4, aber man kann ja nicht alles auf einmal haben. Dafür ist es schön um die Ecke gedacht..... allerdings (nur ein kleines) funktionierte es bisher(!) nur, wenn die Position des Sandwichbildes bei left=0px ist, aber das habe ich auch nur auf die schnelle getestet.... werde aber damit weiter "spielen" - Danke!
Chräcker
-
-
Hallo Cräcker!
Ähnlich wie Thomas bin ich mir zwar auch nicht sicher ob ich Dein Anliegen 100% richtig verstanden habe, aber ich probiere es trotzdem mal.
Meist Du es in etwa so: http://www.zimmerin.de/arbeitsproben/craecker.htm ?
Na dann mal viel Spaß! Wie Du aus den Quelltext sehen kannst ist das die reiste Browser-Anpassungs-Hölle. :)
Getestet und für lauffähig befunden mit IE 5.x, Opera 6.01, Mozilla 0.99 sowie Netscape 4.77. Wobei letzterer aber den Text neben dem Bild nicht mehr 100% richtig herum fliessen lassen kann. Schönheitsfehler hallt.
Viele Grüße,
Sönke-
Hallo und ach Du jeh,
auf Anhieb sehe ich zwei Dinge: erstens eine ganze Menge, daß ich nicht auf Anhieb verstehe (werde mich aber natürlich reinknien) und zweitens, was ja zu befürchten war, eine Seite, die genau das macht, was ich versuchte ;-) (Danke, kannst sie vom Server nehmen....) Na dann wünsche auch ich mir viel Spaß. Da ist man ja fast versucht, mal wieder was unverstandenes einfach zu übernehmen, weil es eben läuft, aber keine Angst, das ist mir dann auch zu "billig" ;-) Werde mich also reinsetzen in den "Berg der Fragen" ,-)
Danke Euch beiden!
Chräcker
-