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

Liste horizontal, Elemente aber vertikal

G

gaplex

Mitglied
Hallo Leute,

ich beiß mir hier die Zähne aus und nach einer halbe Stunde googeln komme ich auch nicht weiter. Ich habe eine sehr lange Liste (UL), die ich an sich horizontal in mehreren Spalten darstellen will, jedoch sollen die einzelnen Listenelemente (LI) vertikal dargestellt werden.

Also nicht:
A B C
D E F

Sondern
A C E
B D F

Ist das mit reinem CSS möglich? An das HTML kann ich nicht dran. Danke für Eure Hilfe.
 
Werbung:
Hallo,

dazu müsste man den HTML- und CSS-Quellcode kennen. An sinnvollsten ist ein Link zu der Seite oder das Bereitstellen bei einem Freeware-Provider.

Gruss

MrMurphy
 
HTML: 
li {
float:left;
width:10px;
}

ul {
float:left;
list-style-type:none;
width:30px;
}

HTML: 
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
</ul>

Aktuelles Ergebnis dieses Codes ist die Liste

A B C
D E F

Ziel ist wie gesagt

A D
B E
C F

:-)
 
Werbung:
Einfach zwei Listen z. B.

HTML: 
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>
   
<ul>
  <li>D</li>
  <li>E</li>
  <li>F</li>
</ul>
 
Werbung:
@MrMurphy besten Dank für den Beispielcode. So ähnlich hatte ich mir das inzwischen auch zurecht gefrickelt, ist aber eher schlecht als recht die Lösung. Die Listen werden aus einem System generiert und können unterschiedlich lang sein. Da kann ich nicht bei jeder Änderung das CSS anpassen :(
 
Werbung:
Hallo,

Da kann ich nicht bei jeder Änderung das CSS anpassen
Zum Vergrößern anklicken....

Da wird dir nichts anderes übrig bleiben. CSS ist keine Programmiersprache und HTML / CSS gehen davon aus, das man auf den kompletten Quelltext Zugriff hat. Wenn das nicht gegeben ist kann man nur Krücken bauen.

P. S. Wenn du gleich mitgeteilt hättest, das die Liste mengenmäßig unterschiedliche Einträge haben kann hätte ich mir die Arbeit auch gleich sparen können. Es macht keinen Spaß an Aufgaben zu arbeiten, die man nicht lösen kann, weil einem wichtige Informationen fehlen.

Gruss

MrMurphy
 
Ich habe geschrieben, dass es sehr lange Liste ist. Ich kann schon ans HTML, ich will aber nicht. Wenn ich das übers HTML steuere habe ich ja das selbse Problem, bei jeder Änderung die die Länge der Liste beeinflusst auch den Quelltext anpassen zu müssen. Mit CSS funktioniert es ja eigentlich super, die Höhe flexibel die Breite fix und die Liste läuft schön in einer gewünschten Spaltigkeit rein und kann schön dynamisch bleiben. Nur halt doof, dass die Listen-Elemte neben- und nicht untereinander stehen. Hätte nicht gedacht, dass es nicht möglich ist das mittels CSS zu lösen.
 
hast du php aufem server?

dann kannst du mit php die tags erstellen lassen und das script könnte auch die länge der liste bestimmen.
 
Werbung:
noxTo schrieb:
hast du php aufem server?

dann kannst du mit php die tags erstellen lassen und das script könnte auch die länge der liste bestimmen.
Zum Vergrößern anklicken....
So kann er auch die Reihenfolge der Ausgabe bestimmen. Somit sind auch keine CSS-Tricks nötig.

EDIT:
Wenn die Listenelemente die untereinander stehen sollen im Zusammenhang stehen, kannst du deine Liste natürlich verschachteln, was am einfachsten ist.
Code: 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<head>
<title></title>
<style>
ul  {
margin:0;
padding:0;
list-style:none;

background:#dad;
}

li {
float:left;
background:#ada;
width:100px;
}

li ul li {
display:block;
background:#add;
}
</style>
</head>
<boy>
<ul>
<li>A<ul><li>B</li></ul></li>
<li>C<ul><li>D</li></ul></li>
<li>E<ul><li>F</li></ul></li>
</ul>
</body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben