CSS 2-spaltiger überlaufender Text mit Liste oben bündig abschließen

[Lisa K.]

Hallo zusammen!

Mein Problem ist folgendes:

ich habe einen zwei-spaltigen Text auf meiner Seite erstellt – also der praktisch in die zweite Spalte überfließt. Hier der Code, den ich eingegeben habe, falls er relevant sein sollte:

/* Text zweispaltig anlegen */
.zweispaltig {text-align: justify;
columns: 2;
column-gap: 40px;
-webkit-columns: 2;
column-gap: 40px;
-moz-columns: 2;
column-gap: 40px;
}

Das Ganze ist, dass es bei normalem Text ausgezeichnet funktioniert. Wenn da jedoch Aufzählungszeichen am Anfang vorkommen, dann fängt der Text oben nicht bündig mit der zweiten Spalte an. (siehe Bild!) Anscheinend spielt es dabei keine Rolle, ob die Aufzählungszeichen, wie bei meinem Text Icons sind, oder ob es sich um eine ganz normale Liste dreht. Das hab' ich ausprobiert.

Das sieht nicht schön aus und ich möchte das gerne ändern und hoffen nun hier die Antwort zu finden.

Ich freue mich, wenn hier jemand eine Lösung für mich hat.

Lieben Dank schon mal!

Lisa

 

[Sempervivum]

Guten Morgen Lisa und willkommen im Forum!
Das liegt daran, dass ein <ul> standardmäßig ein margin-top hat. Setzt Du das auf 0 verschwindet der Abstand.

 

[MrMurphy]

Hallo

Für eine konkrete Lösung müssten wir deinen kompletten Quelltext (HTML und CSS) kennen.

Deshalb kann ich dir nur allgemein antworten.

Deine Beobachtung stimmt zwar grundsätzlich, deine Schlussfolgerungen stimmen aber nicht.

Beim Spaltensatz (columns) wird das erste Element in der linken Spalte immer nach unten verschoben. Das hat nichts mit den Listen zu tun, sondern eher mit den sogenannten collapsing-margins.

Bei Listen (ol, ul) wird das Abstandsproblem nur noch mal vergrößert, da die zugehörgen Elemente (ol, ul, li) für sich noch mal zusätzliche Abstände haben (können). Das hängt halt von deinen sonstigen CSS-Angaben ab, die wir, wie schon geschrieben, nicht kennen.

Du musst also für die ersten Elemente die Abstände nach oben auf Null setzen.

Setzt Du das auf 0 verschwindet der Abstand.

Das reicht nicht. Der obere Abstand für das li-Element muss auch auf Null gesetzt werden.

 

[Sempervivum]

Das reicht nicht.

?? Im Seiteninspektor getestet und hat einwandfrei funktioniert. Beim li erkenne ich keinen oberen Abstand, jedenfalls nicht in meinem Browser Opera.

 

[Lisa K.]

Guten Morgen Lisa und willkommen im Forum!
Das liegt daran, dass ein <ul> standardmäßig ein margin-top hat. Setzt Du das auf 0 verschwindet der Abstand.

Hallo Sempervivum,
Das hat leider nicht geklappt. Aber trotzdem vielen Dank für Deine Antwort!

 

[Lisa K.]

Also hier ist der Quelltext:

	</div><div class="et_pb_row et_pb_row_3">
	<div class="et_pb_column et_pb_column_4_4 et_pb_column_6 et_pb_css_mix_blend_mode_passthrough et-last-child">
	<div class="et_pb_module et_pb_text et_pb_text_11 liste-mit-haken zweispaltig et_pb_text_align_left et_pb_bg_layout_light">
	<div class="et_pb_text_inner"><ul>
	<li><strong>Website</strong> von Grund auf <strong>neu erstellen</strong> (WordPress oder anderes CMS wie z.B. Wix)</li>
	<li><strong>HTML</strong> und <strong>CSS</strong></li>
	<li><strong>Bilder optimieren</strong>, damit die Seiten optimal in der Geschwindigkeit laufen (Pagespeed)</li>
	<li><strong>bestehende Webseiten</strong> runderneuern und <strong>optimieren</strong></li>
	<li><strong>Landingpages</strong> erstellen</li>
	<li><strong>Pflegen von Webseiten</strong> (neue Bilder und Texte einpflegen, Plugins aktualisieren und neue Plugins installieren, neue Module einfügen, usw.)</li>
	<li><strong>SEO-Beratung</strong> und <strong>-Optimierung</strong>,(Search-Engine-Optimization) damit Ihre Seite von den Suchmaschinen gefunden wird</li>
	<li><strong>Analyse</strong> einer bestehenden Website auf Benutzerfreundlichkeit, Funktionalität, Pagespeed (Wie schnell läuft die Seite, wo kann man bei langsamen Seiten Daten einsparen?), SEO (Sind Texte und Bilder Suchmaschinen optimiert?)</li>
	<li>Auf Wunsch Einführung, damit Sie Ihre <strong>Website selbst pflegen</strong> können</li>
	</ul></div>
	</div>
	</div> Und hier der CSS-Code für die Liste und den 2-spaltigen Text: /* Liste mit eigenen Icons OK-Haken */ .liste-mit-haken ul { padding-left: 0; padding-bottom: 0; padding-top: 0; margin-top: 0; text-indent: -30px; list-style-position: outside; line-height: 1.2em; } .liste-mit-haken ul li:before { list-style:none; list-style-position: outside; content: '\5a'; font-family: ETmodules; color: #1eff22; font-size: 20px; margin-right: 10px; font-weight: bold; } /* Text zweispaltig anlegen */ .zweispaltig {text-align: justify; columns: 2; column-gap: 40px; -webkit-columns: 2; column-gap: 40px; -moz-columns: 2; column-gap: 40px; }

 

[Lisa K.]

?? Im Seiteninspektor getestet und hat einwandfrei funktioniert. Beim li erkenne ich keinen oberen Abstand, jedenfalls nicht in meinem Browser Opera.

Welchen Code und wo müsste ich den denn genau eingeben?

 

[Lisa K.]

Hallo

Für eine konkrete Lösung müssten wir deinen kompletten Quelltext (HTML und CSS) kennen.

Deshalb kann ich dir nur allgemein antworten.

Deine Beobachtung stimmt zwar grundsätzlich, deine Schlussfolgerungen stimmen aber nicht.

Beim Spaltensatz (columns) wird das erste Element in der linken Spalte immer nach unten verschoben. Das hat nichts mit den Listen zu tun, sondern eher mit den sogenannten collapsing-margins.

Bei Listen (ol, ul) wird das Abstandsproblem nur noch mal vergrößert, da die zugehörgen Elemente (ol, ul, li) für sich noch mal zusätzliche Abstände haben (können). Das hängt halt von deinen sonstigen CSS-Angaben ab, die wir, wie schon geschrieben, nicht kennen.

Du musst also für die ersten Elemente die Abstände nach oben auf Null setzen.



Das reicht nicht. Der obere Abstand für das li-Element muss auch auf Null gesetzt werden.

Dankeschön!
Den Quellcode habe ich in einer Nachricht weiter unten eingegeben.

 

[MrMurphy]

Das ul-Element hat ja bereits einen oberen Abstand von Null.

Hinter

      /* Text zweispaltig anlegen */
      .zweispaltig {
         text-align: justify;
         ...
      }

könntest du folgendes einfügen:

      .zweispaltig li:nth-of-type(1) {
         margin-top: 0;
      }

 

[Lisa K.]

Das ul-Element hat ja bereits einen oberen Abstand von Null.

Hinter

      /* Text zweispaltig anlegen */
      .zweispaltig {
         text-align: justify;
         ...
      }

könntest du folgendes einfügen:

      .zweispaltig li:nth-of-type(1) {
         margin-top: 0;
      }

WOW! Super, das hat geklappt!!!
Danke! Danke! Danke vielmals!