Blockquote läuft hinter gefloatetem Bild weiter

Webdesign & Technik HTML & CSS
1

servus zusammen.

ich habe zur zeit ein kleines stylesheet-problem:
ich habe einen text, in dem einige passagen “geblock-quoted” sind (erkennbar am border).
zusätzlich sind im text einige bilder, die ich links/rechts umherfloate. mein problem besteht darin, dass die blockquotes hinter dem bild weiterlaufen: der text geht am bild vorbei, aber das eigentliche element läuft weiter (siehe screenshot).

wieso ist das so?

mfg
emil

2

Das ist so, weil float nur inline-Elemente verschiebt.

3

Das ist so, weil float so definiert ist, daß es umflossen wird und das
im Wesentlichen auch so implementiert ist.

Bei dem Beispiel könnte es auch knifflig werden, das anders zu
machen, probieren könnte man mit weiteren Verschachtelungen
von Blockelementen etwas zu erreichen. Wie ja aber unschwer
zu erkennen ist, liegt der Block eben auch unter dem Bild, nur
der Inhalt vom Block fließt um das Bild herum, nicht der Block
selbst.

Wenn niemals Text über oder unter den Bildern erscheinen soll,
könnte man auch ein margin versuchen, wenn aber ein Bild links
ist und eines rechts, ist das vermutlich nicht das Ziel. Da müßte
man dann allenfalls weiter strukturieren und jedem Bild einen
Block zuordnen, der daneben sein soll und bei solch einem Block
dann individuell ein margin angeben.

Statt float kann man auch versuchen, in einem relativ positionierten
Element Bild und Text absolut zu positionieren…

Gibt also einige Sachen, die man ausprobieren soll, was am besten
geht, hängt davon ab, was jetzt genau passieren oder eben nicht
passieren soll.

4

Etwas einfaches, was du probieren kannst ist ein Konstrukt wie dies hier:

<p class="float_wrapper"><div>Dein Text kommt hier</div></p>

CSS:

p.float_wrapper {
  margin: 0;
}

p.float_wrapper > div {
  display: inline-block;
  padding: 4px;
  border: 1px solid black;
}
5

[quote=“michi7x7”]Etwas einfaches, was du probieren kannst ist ein Konstrukt wie dies hier:

[code]

Dein Text kommt hier
[/code][/quote] Das ist nicht mal valides HTML. Davon abgesehen sehe ich auch nicht, was dieses Konstrukt in Verbindung mit dem gezeigten CSS bewirken soll.

Was helfen sollte, wäre ein einfaches overflow:hidden für das blockquote-Element.
Das gefloatete Element bekommt ein margin-right bzw. -left (entgegen seiner float-„Richtung“), um sowohl den normalen Text als auch das Zitat mit seinem Rahmen auf entsprechendem Abstand zu halten.

So könnte es gehen, vorausgesetzt der gezeigte Screenshot basiert auf halbwegs sinnvollem Markup und CSS - was wir nicht wissen können, weil es eben nur ein Screenshot ist. Leute, tut euch doch den Gefallen, uns die Adresse einer Testseite zu nennen - dann kann idR. auch viel gezielter geantwortet werden.

6

Wieso sollte das nicht valides HTML sein? das

ist hier ein inline-block-Element und darf daher in

vorkommen :p

… Eigentlich wollte ich einfach kein verwenden…

Aber dass es Funktioniert kann man hier relativ problemlos erkennen: michi7x7.bplaced.net/test.html

7

Weil DIV ein block level element ist, und P als Nachfahren aber nur inline content haben darf.

8

danke erstmal,
ich werde die verschiedenen möglichkeiten heute abend mal ausprobieren.

mach ich in 90% meiner anfragen, aber ich habe das gefühl dass es dir nicht allzu viel nützen wird wenn ich hier einen link zu l0calh0st/ posten werde :smiley:
/*

  • wtf? wenn ich localhost mit o statt 0 schreibe macht er blockedcontent/ draus oO
    */
    ich stells heut abend aber online sobald es funktioniert, und werde den link hier anschließend gerne noch ergänzen.

mfg
emil

9

[quote=“chrisb”]
Dann

  • gib mal BODY eine Breite von ca. 30em (BODY ist ja bei dir das „Container“-Element, in der Praxis wär das ggf. auch einfach ein DIV), oder
  • mach den Inhalt des „Zitates“ (dein SPAN-Element) mal länger, so dass er nicht mehr „in einer Zeile“ neben das float-DIV passt

und schau, wie toll das funktioniert - das komplette Zitat wandert unter das Bild (daneben: gähnende Leere), obwohl es gut daneben Platz hätte, wenn der Text umgebrochen würde.[/quote]
Das kann man umgehen, in dem man dem Absatz das Recht umzubrechen entzieht (white-space: nowrap;). Lustigerweise führt das im Chrome dazu, dass er ugf. 200px Rechts vom Bildschirmrand umbricht…

Außerdem würde ich an deiner Stelle wirklich auf deinen Umgangston achten

10

Wenn ich das bei deinem Beispiel ergänze, dann ragt der Absatz bei längerem Inhalt seitlich aus dem Containerelement heraus - vermutlich auch nicht das, was man im Umfeld des restlichen Layouts gerne haben möchte.

11

Also bei mir sieht das so aus, die rote Linie markiert .
Scheint wohl eine Fehler im Chrome zu sein

12

Nein, sieht im Firefox vergleichbar ist. Darauf bezog sich ja auch meine Anmerkung gerade, wenn ich die genannte Formatierung bei deinem Beispiel ergänze.

Probiere es doch an deinem Beispiel mal aus, wie ich es vorschlug:
Das SPAN-Element entfällt komplett, P bekommt nur den reinen „Zitat“-Text als Inhalt, und wird mit folgenden Eigenschaften formatiert:

overflow: hidden; margin: 0 1em; padding:.25em; border:1px solid #000;
und das gefloatete Element bekommt noch ein margin-right:1em.

Das verhält sich doch m.E. um einiges „günstiger“ unter den geschilderten Bedingungen (schmales Container-Element oder längerer Inhalt im „Zitat“).

13

Zumindest der HTML-Markierungssuppen-parser sollte vor der
Anfangsmarkierung des div das p automatisch schließen, weil der
ja weiß, daß das p kein Blockelement enthalten kann - hat bei
einigen Autoren schon für viel Spaß gesorgt, die versuchen wollten,
eine Tabelle in einem Absatz unterzubringen ;o)

Dem XML-parser ist das natürlich egal. Der wird eigenmächtig
nichts schließen, auch wenn XHTML bekannt ist.
Weil HTML einiges impliziert und XHTML daher nicht, kann auch das
bei einigen Autoren für Verwirrung sorgen ;o)

14

okay, alles in allem war einfach blockquote {overflow: hidden;} gefragt, den rest hatte ich ähnlich…