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

html.de-Forum HTML, XHTML & CSS
1

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

[ATTACH type=„full“]6214[/ATTACH]

2

Guten Morgen Lisa und willkommen im Forum!
Das liegt daran, dass ein

    standardmäßig ein margin-top hat. Setzt Du das auf 0 verschwindet der Abstand.

3

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.

4

Das reicht nicht.

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

5

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

6

Also hier ist der Quelltext:

[TABLE]
[TR]
[TD] [/TD]
[TD][/TD]
[/TR]
[TR]
[TD][/TD]

[TD]

[/TD]
[/TR]
[TR]
[TD][/TD]

[TD]

[/TD]
[/TR]
[TR]
[TD][/TD]

[TD][/TD]
[/TR]
[TR]
[TD][/TD]

[TD][/TD]
[/TR]
[TR]
[TD][/TD]

[TD][/TD]
[/TR]
[TR]
[TD][/TD]

[TD] [/TD]
[/TR]
[TR]
[TD][/TD]

[TD]

[/TD]
[/TR]
[TR]
[TD][/TD]

[TD] [/TD]
[/TR]
[TR]
[TD][/TD]

[TD] [/TD]
[/TR]
[TR]
[TD][/TD]

[TD] [/TD]
[/TR]
[TR]
[TD][/TD]

[TD] [/TD]
[/TR]
[TR]
[TD][/TD]

[TD]

    [/TD]
    [/TR]
    [TR]
    [TD][/TD]

    [TD]

  • Website von Grund auf neu erstellen (WordPress oder anderes CMS wie z.B. Wix)
    • [/TD]
    [/TR]
    [TR]
    [TD][/TD]

    [TD]

  • HTML und CSS
    • [/TD]
    [/TR]
    [TR]
    [TD][/TD]

    [TD]

  • Bilder optimieren, damit die Seiten optimal in der Geschwindigkeit laufen (Pagespeed)
    • [/TD]
    [/TR]
    [TR]
    [TD][/TD]

    [TD]

  • bestehende Webseiten runderneuern und optimieren
    • [/TD]
    [/TR]
    [TR]
    [TD][/TD]

    [TD]

  • Landingpages erstellen
    • [/TD]
    [/TR]
    [TR]
    [TD][/TD]

    [TD]

  • Pflegen von Webseiten (neue Bilder und Texte einpflegen, Plugins aktualisieren und neue Plugins installieren, neue Module einfügen, usw.)
    • [/TD]
    [/TR]
    [TR]
    [TD][/TD]

    [TD]

  • SEO-Beratung und -Optimierung,(Search-Engine-Optimization) damit Ihre Seite von den Suchmaschinen gefunden wird
    • [/TD]
    [/TR]
    [TR]
    [TD][/TD]

    [TD]

  • Analyse 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?)
    • [/TD]
    [/TR]
    [TR]
    [TD][/TD]

    [TD]

  • Auf Wunsch Einführung, damit Sie Ihre Website selbst pflegen können
    • [/TD]
    [/TR]
    [TR]
    [TD][/TD]

    [TD]

[/TD]
[/TR]
[TR]
[TD][/TD]

[TD]

[/TD]
[/TR]
[TR]
[TD][/TD]

[TD]

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;
}
[/TD]
[/TR]
[/TABLE]

7

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

8

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

9

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; }

10

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