Border soll kurzen Text und Bild umrahmen
0 0 
Felix Riesterer
0 
Gunnar Bittersmann
Border soll kurzen Text und Bild umrahmen
Hallo!
Ich habe folgendes Problem:
<div style="border: 1px solid #000000">
<p>
<img src = "bild.jpg"
width = "100"
height = "100"
alt = "ich bin eine bildbeschreibung"
style = "float: right;"
>
Ich bin noch eine etwas längere oder
weniger längerer Text
</p>
</div>
Wenn nun der Text kürzer als das Bild ist, wird der Rahmen direkt unter dem Text beendet, udn nicht erst unter dem Bild.
Habe mir jetzt geholfen, in dem ich nach dem </p>-Tag ein "<div style="clear: both;"></div>" gesetzt habe.
Diese Lösung finde ich jedoch sehr schlecht, da der IE dann einen abstand zum Rahmen wiederum macht.
Für Lösungsvorschläge/-ansätze und -hilfe bin ich dankbar.
Viele Grüße
Marco Krings
-
Hallo Marco.
Wenn nun der Text kürzer als das Bild ist, wird der Rahmen direkt unter dem Text beendet, udn nicht erst unter dem Bild.
Natürlich, schließlich hast du das Bild aus dem Dokumentenfluss genommen, das heißt, dass es keine anderen Elemente mehr beeinflussen kann.
Für Lösungsvorschläge/-ansätze und -hilfe bin ich dankbar.
Warum verpasst du den Rahmen nicht dem p-Element und lässt es ebenfalls (links oder rechts) floaten?
Einen schönen Mittwoch noch.
Gruß, Ashura
-
Moin Ashura!
Natürlich, schließlich hast du das Bild aus dem Dokumentenfluss
genommen, das heißt, dass es keine anderen Elemente mehr
beeinflussen kann.Danke für die (plausible) Erklärung.
Warum verpasst du den Rahmen nicht dem p-Element und lässt es
ebenfalls (links oder rechts) floaten?Danke für den Tipp.
Habe elider vergessen, dass in einem DIV auch mehrere P mit Bild vorkommen könnten.Habe jetzt folgendes ergänzt (und es funktioniert!):
Der DIV-TAG wird mit den Style-Angaben "float: left" und "width: 100%" ergänzt. Die P-Tags erhalten ein Style-Attribut mit den Eigenschaften "clear: both;" (nur der Firefox macht einen Abstand zum oberen Rand beim ersten P-Tag. Dort kann amn dias Attribut aber weglassen.)
Viele Grüße und vielen Dank für den Tipp!
Marco
-
-
Lieber Marco,
<div style="border: 1px solid #000000">
<p>
...
</p>
</div>Wozu das DIV? die Style-Angaben kannst Du doch dem <p> geben!
Habe mir jetzt geholfen, in dem ich nach dem </p>-Tag ein "<div style="clear: both;"></div>" gesetzt habe.
Diese Lösung finde ich jedoch sehr schlecht, da der IE dann einen abstand zum Rahmen wiederum macht.Und wenn Du dem Folge-Element ein clear verpasst? Dem <p> wird doch irgendetwas folgen, oder? Ohne dieses DIV befänden sich dann das <p> und sein Folgeelement innerhalb desselben Elternelements, so dass das clear greifen sollte.
Was der IE daraus macht, ist nunmal eine Tragödie. :-( Aber wann wenn nicht jetzt wollen wir denn endlich auf die Standards komplett umsteigen, wenn der IE7 schon mit guten Versprechen in den Startlöchern steht?
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Moin!
Wozu das DIV? die Style-Angaben kannst Du doch dem <p> geben!
In einem DIV-Block könnten auch mehrere "P-Blöcke" stehen (hätte ich besser direkt dazu schreiben sollen).
Und wenn Du dem Folge-Element ein clear verpasst?
In dem Fall dem Nachflgenden Element nach dem </div> ein style="clear: both;" verpassen?
Der Nachfolgende Absatz fängt zwar dann unterhalb des Bildes an, jedoch schlißt der Rahemn das Bild eben nicht komplett mit ein.Viele Grüße
Marco Krings-
Lieber Marco,
Und wenn Du dem Folge-Element ein clear verpasst?
In dem Fall dem Nachflgenden Element nach dem </div> ein style="clear: both;" verpassen?NEIN! Das dem <p> folgende Element (wenn Du ein DIV verwendest, dann ist das Folgeelement auch innerhalb des DIVs!) muss auf gleicher Verschachtelungsebene sein. Deshalb schrieb ich ja "folgen" und nicht "umschließen"...
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
-
-
<div style="border: 1px solid #000000">
<p>[snip]
</p>
</div>Marco,
Wozu das div? Warum gibst du dem p nicht den Rahmen? Das div ist überflüssig, du gruppierst ja damit nichts.Wenn nun der Text kürzer als das Bild ist, wird der Rahmen direkt unter dem Text beendet, udn nicht erst unter dem Bild.
Ja, weil du das Bild mit float aus dem normalen Fluss nimmst.
Du kannst es ja mit align="right" ausrichten. >;-> OK, vergiss es.
Gib dem Absatz min-height mit dem Wert der Höhe des Bildes. Für IE height, das er wie min-height interpretiert; die Angabe aber vor den anderen Browsern verstecken.
Live long and prosper,
Gunnar--
„Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)