Liste mehrspaltig ausgeben
pixewakb
- css
0 Gunnar Bittersmann0 pixewakb0 sonntag0 Matthias Apsel0 pixewakb0 Der Martin
0 Matthias Apsel
Hi zusammen,
ich habe eine Liste, die ich mehrspaltig ausgeben möchte, was ich auch mittels CSS hinbekommen habe. Allerdings ist das nicht ganz das, was ich haben wollte.
Ich bekomme:
Listenelement 1 Listenelement 2 Listenelement 3
Listenelement 4 Listenelement 5 Listenelement 6
Listenelement 7 Listenelement 8
Ich möchte aber:
Listenelement 1 Listenelement 4 Listenelement 7
Listenelement 2 Listenelement 5 Listenelement 8
Listenelement 3 Listenelement 6
Kann man das hinbekommen???
@@pixewakb:
nuqneH
Kann man das hinbekommen???
Qapla'
Danke, das half. Ich habe in dem mehrspaltigen Layout jetzt eine Leerzeile, die ich mir nicht erklären kann, aber im Kern läuft es.
Ich habe das CSS an den Anfang meiner HTML-Seite gepackt:
<style type="text/css">
ul {
list-style-type: square;
}
#meine\_liste {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
</style>
Und dann in dem Bereich sieht es etwa wie folgt aus:
<div id="meine_liste"><ul>
Listenelemente
</ul>
</div>
Im Ergebnis sieht es dann so aus:
Leerzeile Listenelement 3
Listenelement 1 Listenelement 4
Listenelement 2 usw. usf.
Kann ich einen Fehler gemacht haben, so dass die Leerzeile entsteht? Der Hinweis jedenfalls bislang war super und es ist genau das, was ich gesucht hatte...
@@pixewakb:
nuqneH
Kann man das hinbekommen???
Qapla'
hola,
versuch es einmal so...
ul {
list-style-type: square;
vertical-align: top;
}
gruß sonntag
Om nah hoo pez nyeetz, sonntag!
versuch es einmal so...
ul {
list-style-type: square;
vertical-align: top;
}
Möglicherweise handelt es sich auch um ordinären whitespace.
Matthias
--
1/z ist kein Blatt Papier.
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)
Ich poste mal den Quellcode meiner HTML-Seite:
<div id="meine_liste">
<ul>
<li><a href=TEXT>TEXT</a></li>
<li><a href=TEXT>TEXT</a></li>
<li><a href=TEXT>TEXT</a></li>
<li><a href=TEXT>TEXT</a></li>
</ul>
</div>
Die Liste wird von einem PHP-Skript erstellt und sieht genauso im Quelltext aus. Ich habe die Leerzeile immer noch drin, obwohl ich den CSS-Bereich jetzt nach
#meine_liste{
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
ul {
list-style-type: square;
vertical-align: top;
}
geändert habe. Ordinärer Whitespace sagt mir nichts, wäre für einen Hinweis durchaus dankbar.
Om nah hoo pez nyeetz, sonntag!
versuch es einmal so...
ul {
list-style-type: square;
vertical-align: top;
}
>
> Möglicherweise handelt es sich auch um ordinären whitespace.
>
> Matthias
Hallo,
Ich poste mal den Quellcode meiner HTML-Seite:
gute Idee.
<div id="meine_liste">
<ul>
<li><a href=TEXT>TEXT</a></li>
<li><a href=TEXT>TEXT</a></li>
<li><a href=TEXT>TEXT</a></li>
<li><a href=TEXT>TEXT</a></li>
</ul>
</div>
na also, genau was Matthias vermutet hat: Das erste Element innerhalb des div-Containers ist ein Textknoten, der nur Whitespace enthält, dann kommt das ul als Blockelement. Logisch also, dass die erste Spalte dann mit einer Leerzeile beginnt.
Das ändert nichts daran, dass das div-Element unnötig ist ("sinnlos" klingt so negativ), wenn es außer der Liste keine weiteren Kindelemente enthält.
> Ordinärer Whitespace sagt mir nichts, wäre für einen Hinweis durchaus dankbar.
Wie gesagt: Der Inhalt des div-Containers beginnt deinem Codeausschnitt zufolge mit einem Zeilenumbruch und einem Tab. Also Whitespace, der nach den Regeln von HTML als ein Leerzeichen interpretiert wird. Dieses Leerzeichen belegt die erste Zeile, bevor das ul mit seinen Kindelementen als Block kommt.
> > Om nah hoo pez nyeetz, sonntag!
> > [...]
> > Matthias
Und bitte zitiere sinnvoll, nicht im TOFU-Stil.
Ciao,
Martin
--
Vielseitigkeit: Von vielen Dingen keine Ahnung haben.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
Pest oder Cholera ;)
ul {
list-style-type: square;
vertical-align: top;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
Wenn ich es so mache und die div-Tags rausnehme, dann verschwindet die Leerzeile und es verschwinden auch die Aufzählungszeichen, was mich ärgert und blöd aussieht, weil alle Listenelemente eingerückt sind... Für eine Hilfe und eine Erklärung wäre ich dankbar. Ein CSS3-Buch liegt bereits auf meinem Schreibtisch und wird konsultiert, aber ich fange erst an, leider.
Hallo,
Ich poste mal den Quellcode meiner HTML-Seite:
gute Idee.
<div id="meine_liste">
<ul> <li><a href=TEXT>TEXT</a></li>
<li><a href=TEXT>TEXT</a></li>
<li><a href=TEXT>TEXT</a></li>
<li><a href=TEXT>TEXT</a></li>
</ul>
</div>
>
> na also, genau was Matthias vermutet hat: Das erste Element innerhalb des div-Containers ist ein Textknoten, der nur Whitespace enthält, dann kommt das ul als Blockelement. Logisch also, dass die erste Spalte dann mit einer Leerzeile beginnt.
>
> Das ändert nichts daran, dass das div-Element unnötig ist ("sinnlos" klingt so negativ), wenn es außer der Liste keine weiteren Kindelemente enthält.
>
> > Ordinärer Whitespace sagt mir nichts, wäre für einen Hinweis durchaus dankbar.
>
> Wie gesagt: Der Inhalt des div-Containers beginnt deinem Codeausschnitt zufolge mit einem Zeilenumbruch und einem Tab. Also Whitespace, der nach den Regeln von HTML als ein Leerzeichen interpretiert wird. Dieses Leerzeichen belegt die erste Zeile, bevor das ul mit seinen Kindelementen als Block kommt.
>
> > > Om nah hoo pez nyeetz, sonntag!
> > > [...]
> > > Matthias
>
> Und bitte zitiere sinnvoll, nicht im TOFU-Stil.
>
> Ciao,
> Martin
>
Om nah hoo pez nyeetz, pixewakb!
was hast du an
Und bitte zitiere sinnvoll, nicht im TOFU-Stil.
nicht verstanden?
Es ist weder notwendig noch erwünscht, das komplette Vorposting irgendwo in deiner Antwort unterzubringen.
Zu dem Problem lässt sich ohne die Kenntnis der konkreten Seite nichts sagen.
Matthias
TOFU-Stil sagt mir nichts, ergo weiß ich auch nicht, was ich da falsch machen könnte. Ich zitiere im Kern so, wie ich das von anderen Foren kenne, wie ich das in E-Mails machen würde und wie mir eure Software das vorschlägt!?
Auf der Seite habe ich sonst nur HTML und keine weiteren CSS-Anweisungen. Mein Eindruck ist, dass die Spalten-Anweisung die Listen-Eigenschaft überschreibt. Wenn ich das Listenelement normal habe, dann gibt es keine Punkte oder Bullets sondern nur eine Einrückung und wenn ich aufspalte einmal Spalten nach div und einmal Bullets nach ul-CSS-Eigenschaft, dann habe ich eine Leerzeile, aber die Bullets erscheinen. Ganz klar ist mir die Ursache hierfür nicht...
Om nah hoo pez nyeetz, pixewakb!
was hast du an
Und bitte zitiere sinnvoll, nicht im TOFU-Stil.
nicht verstanden?Es ist weder notwendig noch erwünscht, das komplette Vorposting irgendwo in deiner Antwort unterzubringen.
Zu dem Problem lässt sich ohne die Kenntnis der konkreten Seite nichts sagen.
Matthias
wo ist das Problem?
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>column</title>
<style type="text/css">
ol {
list-style-type: upper-roman;
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
li {
}
</style>
</head>
<body>
<ol>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
</ol>
</body>
</html>
hola,
für gooogle muss li noch ebbes formatiert werden...
ul {
list-style-type: square;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
margin: 0;
padding: 0;
}
li {
margin-left: 40px;
}
@Sonntag, danke dir, deine Lösung ist genau das, was ich gesucht hatte. Allerdings verstehe ich noch nicht, was jetzt den Fehler behebt - der Fehler war nämlich, dass die Bullets oder Zahlen nicht angezeigt wurden -???
für gooogle muss li noch ebbes formatiert werden...
ul {
list-style-type: square;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
margin: 0;
padding: 0;
}
li {
margin-left: 40px;
}
Über Tofu war ich jetzt inzwischen selbst gestolpert... Danke! In eurem Forum gibt es keine Benachrichtigung bei Antworten und man kann Beiträge nicht nachträglich editieren. Richtig?
ich bin auch nur Gast, der sich hier immer wieder aufhält und sich über die Fragen und Antworten so seine Gedanken macht. Von TOFU hatte ich auch keine Ahnung…
schöner sonntag noch
Lieber sonntag,
schöner sonntag noch
das war jetzt glasklar süddeutsch.
Liebe Grüße,
Felix Riesterer.
Om nah hoo pez nyeetz, pixewakb!
In eurem Forum gibt es keine Benachrichtigung bei Antworten und man kann Beiträge nicht nachträglich editieren. Richtig?
In Version 4 wird ersteres mit Sicherheit möglich sein; letzteres ist technisch auch vorgesehen, wie es umgesetzt wird, muss noch entschieden werden.
Matthias
@@pixewakb:
nuqneH
TOFU-Stil sagt mir nichts
http://de.wikipedia.org/wiki/TOFU
Ich zitiere im Kern so, wie ich das von anderen Foren kenne, wie ich das in E-Mails machen würde
Möge dich der Wikipedia-Artikel zum Umdenken bewegen.
Qapla'
Om nah hoo pez nyeetz, pixewakb!
TOFU-Stil sagt mir nichts.
Das ist grundsätzlich ja nicht schlimm, aber warum versuchst du nicht, dich zu informieren? Du sitzt doch vor einem PC mit Internetzugang.
Ich zitiere im Kern so, wie ich das von anderen Foren kenne,
Warum sollte derselbe Text immer und immer wieder in einer Forumsdiskussion zu lesen sein?
Wie lang würde wohl der letzte Beitrag sein, wenn das jeder so machte?
wie ich das in E-Mails machen würde
In geschäftlichen E-Mails kann ich das noch teilweise nachvollziehen.
und wie mir eure Software das vorschlägt
Die Software bietet dir das Vorposting als Zitat an, damit du deine Antwort an die Stelle schreiben kannst, wo sie thematisch hingehört.
Also bitte: Zitiere nur das, worauf du dich gerade konkret beziehst.
Matthias
Hallo,
Ich zitiere im Kern so, ...
... wie ich das in E-Mails machen würde
In geschäftlichen E-Mails kann ich das noch teilweise nachvollziehen.
ich nicht. Ich weiß, dass diese Unart bei manchen Nutzern "tief drinsteckt", finde sie aber überaus lästig und nicht hilfreich. Wenn ich wissen will, wie der ursprüngliche Satz lautete, auf den mein Kommunikationspartner da antwortet, möchte ich nicht zwei oder drei Bildschirmseiten nach unten scrollen, lesen, wieder hochscrollen und den Faden wieder aufnehmen.
Und wenn's mal mehr als zwei oder drei Zitatebenen zurückgeht (mehr sollte man IMO keinesfalls mitschleppen), dann muss ich halt ein paar Ballwechsel dieses Mail-Dialogs (der ebensogut natürlich auch ein Polylog sein kann) zurückgehen und die vorangegangenen Mails aus dem Posteingang holen.
Aber TOFU-Zitat finde ich in jedem Fall ärgerlich.
Ciao,
Martin
Lieber Der Martin,
In geschäftlichen E-Mails kann ich das [TOFU-Stil] noch teilweise nachvollziehen.
ich nicht. Ich weiß, dass diese Unart bei manchen Nutzern "tief drinsteckt", finde sie aber überaus lästig und nicht hilfreich.
wenn im geschäftlichen Umfeld (z.B. Support-System) der Empfänger einer Mail diese bearbeiten soll, wobei dieser Empfänger hinter den Kulissen aus ständig wechselnden Personen besteht, dann ist es schon sinnvoll, wenn die vorherige Korrespondenz in Form von Zitaten im TOFU-Stil nachlesbar ist. Diese Support-Person müsste dann die Mail quasi von hinten nach vorn lesen, hat damit aber lückenlos den gesamten Vorgang vor sich.
Gerne liest man soetwas sicherlich nicht, aber wir beide sitzen auch nicht in einem solchen Support-System drin.
Liebe Grüße,
Felix Riesterer.
Hallo Felix,
ich nicht. Ich weiß, dass diese Unart bei manchen Nutzern "tief drinsteckt", finde sie aber überaus lästig und nicht hilfreich.
wenn im geschäftlichen Umfeld (z.B. Support-System) der Empfänger einer Mail diese bearbeiten soll, wobei dieser Empfänger hinter den Kulissen aus ständig wechselnden Personen besteht, dann ist es schon sinnvoll, wenn die vorherige Korrespondenz in Form von Zitaten im TOFU-Stil nachlesbar ist. Diese Support-Person müsste dann die Mail quasi von hinten nach vorn lesen, ...
eben, das ist Murks. In so einem Fall gehört dann der jeweils letzte Beitrag hinten dran, damit man das Ganze in chronologischer Abfolge lesen kann. Ans Ende der nachricht springen (falls man die Vorgeschichte schon kennt) ist normalerweise eine Sache _eines_ Tastendrucks (bzw. einer Tastenkombination).
Gerne liest man soetwas sicherlich nicht, aber wir beide sitzen auch nicht in einem solchen Support-System drin.
Da bin ich auch froh drum. ;-)
Ciao,
Martin
Hi,
wenn im geschäftlichen Umfeld (z.B. Support-System) der Empfänger einer Mail diese bearbeiten soll, wobei dieser Empfänger hinter den Kulissen aus ständig wechselnden Personen besteht, dann ist es schon sinnvoll, wenn die vorherige Korrespondenz in Form von Zitaten im TOFU-Stil nachlesbar ist.
Nö - die vorherigen Mails sollten dann unter der passenden Ticket-Nummer (die auch im Mail-Subject steht) im Ticket-System für die Supportler nachlesbar sein.
cu,
Andreas
@@pixewakb:
nuqneH
Wenn ich es so mache und die div-Tags rausnehme, dann verschwindet die Leerzeile und es verschwinden auch die Aufzählungszeichen
Im Firefox nicht.
Spaß mit WebKit … Na bloß gut, dass die Fehler demnächst auch in Ihrem Opera zu haben sind.
Qapla'
@@Der Martin:
nuqneH
na also, genau was Matthias vermutet hat: Das erste Element innerhalb des div-Containers ist ein Textknoten, der nur Whitespace enthält, dann kommt das ul als Blockelement. Logisch also, dass die erste Spalte dann mit einer Leerzeile beginnt.
Überlass die Logik mal den grünblütigen Spitzohren! ;-)
AFAIK wird Whitespace zwischen Start-Tags von Blockelementen nicht gerendert.
AFAIS kommt der Abstand in der ersten Spalte vom von 0 verschiedenen Defaultwert für margin-top des ul-Elements.
Qapla'
Om nah hoo pez nyeetz, pixewakb!
Und dann in dem Bereich sieht es etwa wie folgt aus:
<div id="meine_liste"><ul>
Listenelemente
</ul>
</div>
Das div-Element ist an der Stelle überflüssig. Ein gruppierendes Element ist immer dann überflüssig, wenn es nur ein Kindelement besitzt. Vielleicht ist es ja im Original auch nicht der Fall, denn du schriebst "etwa".
Matthias
@@Matthias Apsel:
nuqneH
Das div-Element ist an der Stelle überflüssig.
Ja.
Ein gruppierendes Element ist immer dann überflüssig, wenn es nur ein Kindelement besitzt.
Hm, ein Element, das nur ein Kindelement besitzt, ist doch kein „gruppierendes“.
Auch in der Lesart „Ein Element ist immer dann überflüssig, wenn es nur ein Kindelement besitzt“ stimmt das nicht: bspw. nav/ul und
<q><i class="foreignphrase" lang="fr">Au contraire, mon capitaine!</i></q>
Qapla'
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Ein gruppierendes Element ist immer dann überflüssig, wenn es nur ein Kindelement besitzt.
Hm, ein Element, das nur ein Kindelement besitzt, ist doch kein „gruppierendes“.
eben.
Auch in der Lesart „Ein Element ist immer dann überflüssig, wenn es nur ein Kindelement besitzt“ stimmt das nicht: bspw. nav/ul und
<q><i class="foreignphrase" lang="fr">Au contraire, mon capitaine!</i></q>
Ja, da hast du wohl recht.
Matthias
Lieber Gunnar Bittersmann,
Auch in der Lesart „Ein Element ist immer dann überflüssig, wenn es nur ein Kindelement besitzt“ stimmt das nicht: bspw. nav/ul und
<q><i class="foreignphrase" lang="fr">Au contraire, mon capitaine!</i></q>
bei letzterem könnte man dahingehend argumentieren, dass man die Klasse so einsetzen könnte, dass das <i>-Element entsorgt werden kann:
<q class="foreignphrase" lang="fr">Au contraire, mon capitain!</q>
Übrigens sind meine Französisch-Kenntnisse nicht die besten, aber ist das "e" am Ende von "capitaine" nicht für eine weibliche Person? Und müsste es dann nicht folgerichtig "ma capitaine" lauten? Mir ist jetzt nicht geläufig wie die Figur Q in "Star Trek: Voyager" zu Captain Janeway gesprochen hat, aber zu Piccard in STNG muss das "e" in jedem Falle weg.
Liebe Grüße,
Felix Riesterer.
Hallo,
Übrigens sind meine Französisch-Kenntnisse nicht die besten, ...
das haben wir wohl gemeinsam. ;-)
aber ist das "e" am Ende von "capitaine" nicht für eine weibliche Person?
Nein. Ich hätte es zwar auch nicht gewusst, aber ich kann im Wörterbuch nachschlagen. Da ist aller Erwartung zum Trotz tatsächlich "le capitaine" die männliche Form.
A bientôt,
Martin
Om nah hoo pez nyeetz, Felix Riesterer!
<q><i class="foreignphrase" lang="fr">Au contraire, mon capitaine!</i></q>
bei letzterem könnte man dahingehend argumentieren, dass man die Klasse so einsetzen könnte, dass das <i>-Element entsorgt werden kann:
Aus semantischen Gründen sollte man das i-Element eher behalten. Es ist nicht zu vergleichen mit der Konstruktion
<font><b>...</b></font>
Matthias