• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Absatz zusammenhalten

M

manya-57

Neues Mitglied
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:

<link rel="stylesheet" type="text/css" href="../style.css" media="screen">

<style type="text/css">

p {

}

</style>

</head>

<body>

<h2>eine Überschrift</h2>

<img src="bild.jpg" alt=""
style="float: left; height:300px; min-width:300px; max-width:60%; margin-right: 20px; border: 3px solid green">


<p>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.</p>

<p>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.</p>

<p>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.</p>

<br style="clear:both">
 
Werbung:
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.

<style type="text/css">

p { display: flex; }

</style>

</head>
<body>


<h2>eine Überschrift</h2>

<img src="bild.jpg" alt=""
style="float: left; height:300px; min-width:300px; max-width:60%; margin-right: 20px; border: 3px solid green">


<p>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</p>

<p>Absatz-2: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod </p>

<p>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.</p>

<br style="clear:both">

<div class="dort">bla bla bla blabla Fließtext unter dem Bild bla bla bla</div>
 
Werbung:
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.
 
Werbung:
Guten Morgen :wink:

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?

<style type="text/css">

p { display: flex; }

</style>

</head>
<body>


<h2>eine Überschrift </h2>

<img src="Olympia.jpg" alt=""
style="height:300px; min-width:300px; max-width:60%; margin-right: 20px; border: 3px solid green">


<p>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</p>

<p>Absatz-2: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod </p>

<p style="disssplay: table-cell; disssplay: inline-block;">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. <strong>Lorem ipsum dolor</strong> 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.</p>

<br style="clear:both">

<div class="dort">bla bla bla blabla Fließtext unter dem Bild bla bla bla</div>
 
Zuletzt bearbeitet:
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
Zum Vergrößern anklicken....
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?
Zum Vergrößern anklicken....
Indem Du darauf verzichtest, Flex einem p-Element zuzuweisen. Macht dort i. allg. keinen Sinn.
Was wolltest Du denn damit erreichen?
 
Werbung:
Heißt das, CSS2 wird vollständig durch ein komfortableres CSS3 ersetzt oder nur ergänzt?
Zum Vergrößern anklicken....

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.
 
Werbung:
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.
 
MrMurphy schrieb:
Mit "disssplay" wirst du nur wenig ausrichten.

Zudem wird bei mehreren display-Angaben hintereinander gemäß den CSS-Regeln nur die letzte berücksichtigt.
Zum Vergrößern anklicken....
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.
 
Werbung:
@ 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.
 
Werbung:
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.
 

Anhänge

  • Screenshot 2024-08-14 104304.png
    Screenshot 2024-08-14 104304.png
    115,4 KB · Aufrufe: 3
  • Screenshot 2024-08-14 104707.png
    Screenshot 2024-08-14 104707.png
    123,1 KB · Aufrufe: 3
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben