Html/ css geordnete Liste in zweiSpalten?

Überblickstechnisch ist mir meine Liste zu lang, daher hätte ich sie gern in 2 Spalten. Geht das? Vielleicht li in td einer Tabelle? Oder irgendwie mit css? Am besten wäre eine Lösung wo z.B. links ungerade, rechts die geraden Nummer stehen.

2 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, CSS

05.02.2022, 02:09

Du kannst für die Aufzählungsliste ein zweispaltiges Gridlayout verwenden.

HTML:

<ol>
  <li>Eintrag</li>
  <li>Eintrag</li>
  <li>Eintrag</li>
  <li>Eintrag</li>
  <li>Eintrag</li>
</ol>

CSS:

ol {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Limearts

04.02.2022, 23:32

Ich spar mir mal die jahrzehnte alte Belehrung für Tabellen als Layout-Werkzeug.

Prinzipiell ja. Eine Tabelle mit zwei Zellen oder zwei nebeneinander positionierte Container mit je einer Liste funktioniert in der Darstellung. Im Code und aus Sicht der Suchmaschinen hat man hier allerdings zwei Listen und nicht eine gemeinsame. Ein kleiner Unterschied aber im Detail nicht unbedeutend.

Alternativ dazu könnte man der Liste eine Klasse/ID zuweisen und über diese die Listenpunkte so formatieren, dass sie nur 50% der Breite einehmen und mittels Ausrichtung durch die Eigenschaften float oder flex nachfolgende Listenpunkte in den freien Raum schieben.

Ähnliche Fragen

Html, CSS und JS Liste?

Guten Tag,

Wir müssen eine Einkaufsliste mit HTML, CSS und JS machen. Es soll in einer Liste aufgezählt werden, wenn man auf Hinzufügen drückt. Man soll es links eingeben können und das was man dort schreibt wird dann aufgelistet. Sobald man Hinzufügen gedrückt hat soll das Feld auf der linken Seite wieder geleert werden.

<ul >
 <li></li>
 <li></li>
</ul>

Es wäre top, wenn mir jemand helfen könnte :)

...zur Frage

Tabelle in html mit CSS verschieben?

Habe eine Tabelle:

<table class="anker"

<tr>

<td>Anker 1</td>

</tr>

wollte die tabelle dann mit css:

table.anker{

margin-top: 50px;}

verschieben, aber wenn verschoben wird verschwinden die rahmen von der Tabelle

...zur Frage

Tabelle HTML/CSS größer machen?

Ich wollte meine Tabelle etwas größer haben. Jetzt geht sie komplett von Links nach Rechts über den Bildschirm (width: 100%). D.h. nach Links/Rechts ist sie mir groß genug, aber nach unten müsste mir die Tabelle noch etwas größer sein. Was muss ich dafür eingeben in das format.css?

...zur Frage

CSS: Warum werden bei meiner ul-Liste die Bullet-Points nicht angezeigt?

Hallöchen,

wie schon im Titel steht, werden bei meiner ul-Liste die Bullet-Points nicht angezeigt. Höchstwahrscheinlich liegt es an der CSS-Datei, da ohne sie die Punkte sichtbar sind.

In anderen Foren habe ich meistens gelesen, dass man das Problem mit padding-left oder margin-left lösen kann. Hat aber bei mir nicht funktioniert.

Woran liegt es dann?

Falls ihr den kompletten Quelltext sehen wollt hier die URL:

https://meisterbetrieb-mathias-schiller.de/

Ansonsten hier die relevanten Quellcode-Ausschnitte:

Übrigens: Ich hatte auch die Einstellung "list-style-position: inside;" ausprobiert, da konnte man die Punkte sehen. Allerdings sieht das aber nicht schön aus.

In der HTML-Datei:
<section>
  <ul>
    <li>1. Punkt</li>
    <li>2. Punkt</li>
  </ul>  

</section>

In der CSS-Datei: section ul { padding-left: 3em; }

section li { padding-bottom: 0.5em; width: 95%; }

...zur Frage

HTML: Eingebundene CSS-Datei funktioniert nicht?

Hallo Leute,

ich habe seit heute mit dem Erstellen von Webseiten angefangen. Ich habe mir schon sehr viel dazu angeschaut und bin auch der Meinung, dass ich das meiste schon weiß.

Ich habe also eine HTML-Datei erstellt und wie es auch sein muss in den

<head>...</head>

einen Link zur entsprechenden CSS-Datei eingeführt. Der Link ist auch zu 100% korrekt, sowohl vom Aufbau als auch von der Rechtschreibung (insbesondere der Dateipfad).

Das HTML-Dokument lässt sich auch ganz normal im Internet abrufen, jedoch wird die CSS-Datei nicht ausgeführt (da die Farbe sich nicht verändert).

Es muss also etwas mit dem Link nicht stimmen, da die CSS-Datei auch keine Fehler enthält. Ich habe auch verschiedene Browser probiert.

Fakt ist: Ich habe schon alles probiert, tausendmal über alles drüber geschaut und auch im Internet nach ähnlichen Fehlern gesucht. Jedoch hat alles nicht geholfen.

Hier mein Code:

HTML:

<!DOCTYPE HTML>
<html>
  <head>
    <link href= "style.css" rel= "stylesheet" type= "css/txt" >
    <title>Regenwasser</title>
  </head>
  <body>
    <p><h1>Regenwasser</h1></p>
    <ul>
      <li>s</li>
      <li>l</li>
      <li>o</li>
      <li>l </li>
      <li>p-</li>
      <li>u</li>
      <li>P</li>
      <li>Fi</li>
      <li>Wass</li>
      <li>AQUA</li>
      <li>PLURAF</li>
      <li>AQ</li>
    </ul>
  </body>
</html>

CSS:

p {
  color: red;
}

ul li {
  color: green;
  height: 500px
}

Ich bin daran echt am Verzweifeln und sitze schon locker über zwei Stunden daran.

...zur Frage

Sudoku-Feld mit CSS und HTML?

Ich bin gerade dabei ein Sudoku in PHP zu programmieren.

Meine Frage: Ist es möglich, dass ich die 81 Felder nicht alle, wie hier -->(<td><input id="cell-0" type="text"></td>) erstellen muss? Sprich, wie schaffe ich es, dass ich 81 Felder habe, die ich einstellen kann, ohne dass ich sie 81 mal erstellen muss und sie in CSS verändern kann?

Ich freue mich über jede Antwort! :)

...zur Frage

Einzelne Schriften in HTML Bearbeiten?

Hallo,

ich habe vor kurzem begonnen eine Website mit HTML zu programmieren, dazu nutze ich Visual Studio Code, aber ich mache das ganz noch nicht so lange, also kenne ich mich noch nicht so gut aus. Zurzeit versuche ich eine Tabelle mit verschiedenen Raritäten zu erstellen. Dazu soll z.B. "Rare" einen blauen Rahmen bekommen, so ähnlich wie in Bild 1 zusehen.

Ich habe schon versucht es zu schaffen, dennoch habe ich bisher nur hinbekommen um alles einen Rahmen zu kreieren.

Meine Frage ist nun, wie man das individuell anpassen kann. So brauche ich die Rahmen nur bei den Namen der Raritäten und diese sollen jeweils eine eigene Farbe haben (z.B. "Rare" = blau, "Epic" = Violett usw.). Außerdem soll der Rahmen genau passen. So ist es bei mir oben so, dass es für "Uncommon" passt, aber für "Epic" viel zu groß ist. Meine Skills in HTML reichen bisher nur die Rahmen für alle zu machen. Ich habe den Style so gemacht:

CSS:

table tr td
{
  font-size: 1.2em;
  background: #fff;
  color: black;
  border-radius: 20px;
  padding: 4px 10px;
}

Vermutlich nicht besonders gut, aber da hoffe ich auf eure Hilfe 😅 Falls es euch etwas hilft, schreib' ich hier noch ein Beispiel hin, wie ich die Tabelle gemacht habe (das Richtige ist natürlich länger)

HTML:

<table>
  <thead>
    <tr>
      <th>Eyes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Normal</td>
      <td>23.99%</td>
      <td>Common</td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>

...zur Frage

Html Tabelle In die mitte?

Weiß jemand Wie ich in html(css) eine Tabelle in die Mitte Tun kann

Danke im voraus

...zur Frage

Element aus unsortierter Liste mit CSS nach rechts verschieben?

Hallo Leute, wie kann ich das ,,ausloggen" mit CSS ganz nach rechts verschieben. Das soll das einzige Element sein.

...zur Frage

Hover Effekt funktioniert nicht, warum?

Also ich habe folgendes Problem. Ich möchte, dass ein Listenelement sichtbar wird, wenn man über die komplette Liste mit dem Mauszeiger fährt. Allerdings funktioniert das einfach nicht und ich weiß nicht warum. Habe es auch schon mit display probiert und ohne der ul eine Klasse zuzuordnen. Hier mal der html-Code:

<li>Badeanzug</li>

<li>Handtuch</li>

<li>essen und trinken</li>

<li id="info2">Und natürlich Freude :D</li>

</ul>

Und das wäre jetzt der css-Code:

.effekt2:hover + #info2{

visibility: visible;

}

#info2{

visibility: hidden;

}

Ich weiß leider nicht genau was ich ändern soll und bin ziemlich planlos. Vielen Dank im Voraus für eure Hilfe^^

...zur Frage

HTML Tabelle im Handy/Tabletmodus zu breit?

Hallo,

ich habe eine Tabelle in meiner HTML-Webseite gemacht. Leider wenn ich das Fenster kleiner mache bzw. Handy/Tabletmodus öffne, ist die Tabelle zu weit, damit ich immer nach rechts scrollen muss. Bootstrap ist importiert, aber was muss ich noch im Code anderd schreiben? Die Tabelle hat vier Spalten und eine Reihe. Danke im Voraus!

...zur Frage

Border-Radius in Tabellen ohne CSS?

Hi zusammen,

die Frage ist mir zwar etwas peinlich, aber ich bekomme es nicht gelöst und brauche mal eure Hilfe.

Weiß jemand wir man die Ecken einer Tabelle abgerundet bekommt, ohne dafür css zu verwenden?

Ich habe nämlich folgendes Problem:

Ich versuche, ein neues Email-Template zu bauen. Leider werden je nach E-Mailprogramm einige CSS Befehle nicht erkannt (Outlook). Da ich nicht mit Bildern arbeiten möchte, suche ich hierzu eine „reine HTML-Lösung“.

oder:

Wenn jemand, weiß wie man Outlook dazu bringen kann auf Border-Radius (css) zu reagieren, nehme ich auch gerne jeden anderen Vorschlag an ^^

Lieben Dank schon mal 😊

<table class="emailTable">
    <tr class="firstTR">
        <td>1</td>
        <td>2</td>
     </tr>
</table>

...zur Frage

CSS-Table zentrieren?

Hallo!

Ich möchte dieses Diagramm und diese Tabelle zentrieren? Doch wie geht das?



<div id="curve_chart" style="width: 900px; height: 500px"></div>

<table class="center">
    <thead>
        <tr>
            <th>ID</th>
            <th>Temperatur</th>
            <th>Zeitpunkt</th>
        </tr>
    </thead>
    <tbody>
        {% for temp in temps %}
        <tr>
            <td>{{temp.id }}</td>
            <td>{{temp.temperatur }}</td>
            <td>{{temp.zeitpunkt }}</td>
        </tr>
        
        {% endfor %}
        
    </tbody>
</table>


{% endblock %}

...zur Frage

HTML Tabelle zweifarbig?

Hallo allerseits,

wie kann ich in einer html Tabelle jeder Zelle die Farbe zuweisen z.B habe ich zwei Reihen, Rechts und Links, wie kann ich alle linken blau machen und alle rechten rot?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen