Hallo zusammen,
Ich bin kein totaler Anfänger, aber nach ca 10 Jahren Abstinenz habe ich leider viel vergessen und brauche Hilfe.
Mein letzte Stand ist CSS-2.:frown:
Das Problem:
Ich habe rechts neben einem Bild mehrere Absätze, die aber nur in ihrer Gesamtheit unter das Bild rutschen sollen, wenn ich den Bildschirm verkleinere. Mit „absatz zusammenhalten“ habe ich schon gegoogelt aber keine Lösung gefunden.
Wie muss ich die Absätze formatieren?
Gruß
manya
Mein Code:
p {
}
eine Überschrift
![]()
Absatz-1: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Absatz-2: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Absatz-3: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
wrappe Image und zusammen alle Absätze in einem wrap und pack alles nochmal in einem Wrap und lege display:flex drauf mit den entsprechenden Parametern kannst du googlen (Flex-Layout)
Danke schonmal, einen Schritt bin ich schon weiter.
Ich glaube, ich hab mein Problem ungenau erklärt.
Die Absätze, die noch vollständig neben das Bild passen, sollen auch da stehen.
Jetzt ist es so, daß bei einer bestimmten kleinem Fenstergröße Absatz-3 ewig lang rechts neben dem Bild-Ende herunterhängt. Der Absatz soll aber schon vorher unter das Bild rutschen, wenn er nicht mehr komplett neben das Bild passt.
p { display: flex; }
eine Überschrift
![]()
Absatz-1: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
Absatz-2: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
Absatz-3: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.At vero eos et accusam et justo duo dolores et ea rebum.
bla bla bla blabla Fließtext unter dem Bild bla bla bla
Für deine Vorstellung gibt es keine Lösung mit HTML und CSS.
Technischer Hintergrund: Mit float werden nur optisch zwei Spalten erzeugt, nicht aber sachlich. Deshalb können Absätze nicht zusammengehalten werden, falls ein Teil von ihnen unter das Bild rutscht.
Je nach Inhalt der Webseite bieten sich unterschiedliche Lösungen an, die ein ähnliches Ergebnis ermöglichen. Den Inhalt kennen wir aber nicht.
Danke für deine Antwort.
Ich habe gerade gemerkt, daß ich für das Bild gar kein float brauche.
text-align:left hat in meinem Beispiel die gleiche Auswirkung.
Und ohne float spare ich mir auch das clear.
Ich habs nun so gemacht, daß ich den langen Absatz-3 in 2 einzelne Absätze unterteilt habe. Dann sieht es nicht ganz so furchtbar aus.
Guten Morgen 
Heißt das, CSS2 wird vollständig durch ein komfortableres CSS3 ersetzt oder nur ergänzt?
Ein anderes Problem ist aufgetaucht.
Ich glaube display: flex hat in Edge einen Bug.
Wenn ich innerhalb eines Absatztes einige Wörter fett schreibe, macht display: flex daraus 3 nebeneinaderliegende Spalten. o_O
Wie umgeht man dieses Problem?
p { display: flex; }
eine Überschrift
![]()
Absatz-1: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
Absatz-2: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
Absatz-3: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.At vero eos et accusam et justo duo dolores et ea rebum.
bla bla bla blabla Fließtext unter dem Bild bla bla bla
CSS 2 Hat natürlich noch seine Gültigkeit, CSS 3 bringt halt viele Feautures.
Hab mal ein Beispiel:
https://codepen.io/Oliver7777/pen/dyBZNYK
Ich glaube display: flex hat in Edge einen Bug.
Wenn ich innerhalb eines Absatztes einige Wörter fett schreibe, macht display: flex daraus 3 nebeneinaderliegende Spalten. o_O
Mein Opera macht das genau so und es ist kein Bug sondern genau das richtige Verhalten von Flex: Es ordnet die Elemente nebeneinander an. Dadurch dass Du einen Teil des Textes in ein strong-Tag gelegt hast, entstehen drei Elemente: Text davor, strong und Text danach.
Wie umgeht man dieses Problem?
Indem Du darauf verzichtest, Flex einem p-Element zuzuweisen. Macht dort i. allg. keinen Sinn.
Was wolltest Du denn damit erreichen?
Heißt das, CSS2 wird vollständig durch ein komfortableres CSS3 ersetzt oder nur ergänzt?
Weder noch. CSS3 ist eine Weiterentwicklung von CSS2. Gleichzeitig wurde mit CSS3 festgelegt, das weitere Entwicklungen von CSS keine Versionsstufen mehr erhalten. Dabei wird darauf geachtet, das CSS abwärtskompatibel bleibt.
Für neue CSS-Anweisungen gibt es deshalb auch keine Freigaben zu einem bestmmten Zeitpunkt mehr. Sofern sie in die gebräuchlichen Browser integriert sind können und sollten sie auch benutzt werden, wenn sie für ein aktuelles Problem sinnvoll sind.
float ist keineswegs veraltet. Früher wurde es häufig für das Grundlayout mißbraucht weil es keine besseren Lösungen gab. Dabei musste dabei viel rumgedoktort werden ohne wirklich befriedigende Ergebnisse zu erhalten. Stichwort damals zum Beispiel: Gleichhohe Spalten.
Dies hat sich mit flex, grid, columns, … geändert, so das flex nur noch für seine ursprüngliche Aufgabe verwendet werden sollte: Text soll andere Elemente, meist Bilder, umfließen.
Oliver und Sempervivum, danke für eure Antworten!
Was ich mit flex erreichen wollte:
Ich habe links ein Bild, neben dem rechts einige Absätze mit Text stehen.
Nun sollen bei kleiner werdendem Fenster die Absätze nicht auseinandergerissen werden, also daß ein Teil noch neben dem Bild steht, und der andere Teil des Absatzes unter dem Bild.
Mit dem Tip von Oliver hat es ja auch geklappt, bis ich jetzt ein strong eingefügt habe.
Mit „disssplay“ wirst du nur wenig ausrichten.
Zudem wird bei mehreren display-Angaben hintereinander gemäß den CSS-Regeln nur die letzte berücksichtigt.
Ich habe nun dem letzten langen Absatz ein display: table-cell statt display: flex gegeben. Naja, ideal ist das nicht, aber wenn es eh keine Lösung für mein Vorhaben gibt, ist display: table-cell besser als nix.
<p style="display: table-cell; display: inline-block;">
In dem Beispiel hast du inline-block angegeben.
Ohh, tut mir leid, das war Faulheit meinerseits beim Testen. Mit der Schreibweise wollte ich nur schnell mal eine Eigenschaft „unschädlich“ machen und mit der nächsten testen. In Zukunft werde ich beim Posten aufpassen, daß nicht mehr solche Sachen im Code sind.
Sorry nochmal.
@ Oliver
vielen Dank für deinen Beispiel-Code, aber es ist nicht ganz das Richtige.
Die Absätze, die noch neben das Bild passen, sollen dort auch stehen.
Hmm, und für dein img mit width: 100% sollten da nicht auch alle übergeordneten Elemente ebenfalls eine Breite zugewiesen bekommen?
bis auf
img {
width:100%;
height:auto;
}
ist mir dein CSS total unbekannt.
Da muss ich mich nochmal ziemlich einarbeiten.
liebe Grüße und vielen Dank euch allen nochmal
manya
Ich bin mir jetzt nicht ganz sicher, was hier ursprünglich gemeint war. Soll der Text das Foto nun umschließen oder einfach nur daneben stehen?
Hallo Lupus,
schau mal in Posting Nr .3 und Nr.11
in Nr.3 ist auch ein Code, der das Problem anschaulich zeigt.
Ich habs jetzt mit display: table-cell im letzten Absatz gelöst.
Dann ist das ja O.K. Was ich meinte sieht so aus, wie in den angehängten Screenshots. Der Text umschließt das Foto und passt sich dabei dynamisch der jeweiligen Bildschirmgröße an.