nicht angemeldet
float (Bilder)
Hi,
ich quäle mich seit 2 Tagen mit einem Problem herum:
Ich hatte früher in einer Tabelle Grafiken positioniert: links, mittig und rechts (hier 2 Grafiken direkt übereinander). Nun (ver-)suche ich eine Lösung ohne Tabelle mit Hilfe von CSS, aber das rechte untere Bild ist immer umgebrochen in einer neuen Spalte - wie kann man das verhindern?
Hier mein Quelltext:
<div style="float: left"><img src="img/links.gif" width="173" height="60" border="0" alt="links" /></div>
<div style="display:inline;text-align: center;"><img src="img/mitte.gif" width="390" align="top" height="60" border="0" alt="mitte" /></div>
<div style="text-align: right;"><img src="img/rechts_oben.gif" width="190" height="28" border="0" alt="rechts_oben" /><br /><img src="img/rechts_unten.gif" width="190" height="40" border="0" alt="rechts_unten" /></div>
Für jeden Tipp ein herzliches Dankeschön und viel Sonne im voraus.
Dieter
-
hi!
<div style="float: left"><img src="img/links.gif" width="173" height="60" border="0" alt="links" /></div>
kurze frage... warum packst du das bild in ein div rein? du kannst float ja gleich über style="..." beim bild anfügen. außerdem width und height bzw. border sollten gleich in CSS gemacht werden, so:
<img src="img/links.gif" style="width:173px; height:60px; border:none;" alt="links" />
... ist ja dann auch wohl mehr xhtml standard - oder nicht?
lg
azok(=freak) -
Moin,
entschuldige, aber der Code ist ja schlecht bis zum geht fast nicht mehr...
Wozu sind da divs? Was gruppierst Du? Ich dachte, Du wolltest die Bilder floaten lassen? Warum holst Du Dir dann divs dazu um diese floaten zu lassen?<img ... style="float:left;">
<img ... style="float:right;">
<img ... style="margin:auto;">Fertig. Das ist alles.
Wenn genügend Platz ist, sind die drei Bilder jetzt nebeneinander zu sehen, das eine am linken Rand, das andere am rechten Rand, das andere zentriert in der Mitte.Gruß,
-Efchen--
Selfcode: ie:% fl:( br:^ va:{ ls:& fo:) rl:? n4:& ss:) de:> js:| ch:? sh:) mo:) zu:}
Encode: http://forum.de.selfhtml.org/cgi-bin/selfcode.pl
Decode: http://peter.in-berlin.de/projekte/selfcode/ -
Hallo,
... aber das rechte untere Bild ist immer umgebrochen in einer neuen Spalte - wie kann man das verhindern?
Kann ich bei mir nicht nachvollziehen. Die beiden Bilder rechts sind untereinander.
Allerdings werden die beiden rechten Bilder unterhalb des linken und mittleren Bilds angezeigt (neue Zeile, vielleicht meinst Du das?), da durch das letzte DIV ein neuer Absatz erzeugt wird. Wenn Du diesen "Umbruch" vermeiden willst, lasse das letzte DIV nach rechts floaten und verschiebe es im Code zwischen die beiden anderen DIVs.
Du kannst die Styles aber auch direkt auf die Bilder anwenden und so auf die DIVs verzichten.
Viele Grüße
Frank-
Du kannst die Styles aber auch direkt auf die Bilder anwenden und so auf die DIVs verzichten.
Korrektur:
Ein DIV ist trotzem notwendig, um "rechts oben" und "rechts unten" zu gruppieren ...
Viele Grüße
Frank
-
-
Hi,
Danke für die Antworten und entschuldigt den schlechten Code - ich hätte ihn noch in den xhtml-Standard konvertiert, aber alles auf die Schnelle aud der alten Tabelle kopiert ...Habe Eure Lösungsvorschläge umgesetzt, aber es bleibt 1 Problem:
Das Bild mitte ist nicht mittig und wenn ich das Browserfenster verkleinere hängt es ganz unten - kann man so etwas berhindern?
---New Code ---
<img src="img/links.gif" style="float:left;width:173px; height:60px; border:none;" alt="links" />
<div style="float:right;">
<img src="img/rechts_oben.gif" style="float:right;width:190px; height:28px; border:none;"alt="rechts_oben" /><br />
<img src="img/rechts_unten.gif" style="float:right; width:190px; height:40px; border:none;"alt="rechts_unten" />
</div><img src="img/mitte.gif" style="margin:auto;width:390px; height:60px; border:none;" alt="mitte" />
-
Hallo,
Habe Eure Lösungsvorschläge umgesetzt, aber es bleibt 1 Problem:
Das Bild mitte ist nicht mittig und wenn ich das Browserfenster verkleinere hängt es ganz unten - kann man so etwas berhindern?
Wandle das letzte IMG in ein Block-Element um und setzte margin-left und margin-right auf auto.
Dass das Bild bei zu schmalem Browserfenster nach unten rutscht, hängt mit dem Floating zusammen.
Viele Grüße
Frank-
Danke Frank!
Genauso soll es sein - jetzt funzt alles!!!
Nochmals danke
-
Hi,
leider gibt es doch noch ein kleines Problem:
beim Firefox schiebt sich das Bild "mitte" zu einem Drittel über die Bilder "rechts" - im Explorer und Opera ist alles super!
Es gibt es noch einen kleinen Trick, das zu beheben?
-
-