nicht angemeldet
ein- oder mehrspaltig per CSS möglich?
0 0 0 gelöst
0 ohne Fragen keine Inhalte
Robert R.
1 
Gunnar Bittersmann
ein- oder mehrspaltig per CSS möglich?
Matthias Apsel
JürgenB
Der MartinHallo,
es ist ja eine Frage des Layouts und nicht des Inhalts, ob ein Text ein- oder mehrspaltig ist. Nach dieser Philosophie muss das über CSS zu steuern sein.
Ich habe hier das A4 Inhaltsverzeichnis eines Liederbuchs (Ausschnitt):
Das HTML dazu sieht z.Z. so aus:
<div class=inhalt>
<h3>UVWXYZ</h3>
<div>
<p>Up she goes</p><p><a href="#lied_04">4</a></p>
<p>Wir fahren über's weite Meer</p><p><a href="#lied_03">3</a></p>
<p>What shall we do</p><p><a href="#lied_14">14</a></p>
<p>Whiskey in the Jar</p><p><a class=neu href="#lied_65">65</a></p>
</div>
<div>
<p>Whisky Jonny</p><p><a href="#lied_36">36</a></p>
<p>Whoop Jamboree</p><p><a href="#lied_16">16</a></p>
<p>Windjammer</p><p><a href="#lied_17">17</a></p>
<p>Wir lagen vor Madagaskar</p><p><a href="#lied_19">19</a></p>
</div>
</div>
Da steckt also der Spaltenwechsel im HTML (dazu auch dieser Faden vom gestern).
Wie kann CSS die Anzahl der Einräge erkennen und nach der Hälfte in die zweite Spalte wechseln?
Linuchs
-
probier mal:
Zeilen -> feste breite -> float leftViele Grüße aus LA
--
ralphi -
Hi,
es ist ja eine Frage des Layouts und nicht des Inhalts, ob ein Text ein- oder mehrspaltig ist. Nach dieser Philosophie muss das über CSS zu steuern sein.
Und nach der Philosophie von Foren und des Internets müsste man auch in der Lage sein, danach erst mal selber zu suchen, bevor man fragt.
https://www.google.de/search?q=css+columns
MfG ChrisB
-
Und nach der Philosophie von Foren und des Internets müsste man auch in der Lage sein, danach erst mal selber zu suchen, bevor man fragt.
Hallo ChrisB,
ja, du hast Recht, da gibt es was:
.zweispaltig { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }Und der Firefox tut auch was. Nun muss ich noch sehen, wie ich die beiden Absätze für den Titel und die Seitenzahl wieder nebeneinander bekommme, die sind jetzt erstmal untereinander.
Danke.
Linuchs
-
Om nah hoo pez nyeetz, Linuchs!
Und der Firefox tut auch was. Nun muss ich noch sehen, wie ich die beiden Absätze für den Titel und die Seitenzahl wieder nebeneinander bekommme, die sind jetzt erstmal untereinander.
Das sollten keine Absätze sein.
<nav> Inhaltsverzeichnis <ul> <!-- oder ol --> <li>Titel <a href="">Seite</a></li> … </ul> </nav>Matthias
-
Das sollten keine Absätze sein.
<nav>
Inhaltsverzeichnis
<ul> <!-- oder ol -->
<li>Titel <a href="">Seite</a></li>
…
</ul>
</nav>Okay, hat Charme. Das Beispiel setze hier noch rein, jetzt bin ich erstmal ausser Haus. Linuchs
-
-
So geht es beim FF und der Opera. Im zweispaltigen Layout habe ich in jeder Spalte wieder zwei Spalten. Titel linksbündig, Seitenzahl rechtsbündig.
So sieht's aus:
(Bild für das Archiv bitte auf den Self-Server kopieren)
Und so ist's codiert:
.zweispaltig { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } .zweispaltig p { margin: 0 0 0.2em 0; line-height: 110%; } .zweispaltig p:nth-of-type(2n+2) { margin-top: -1.2em; text-align: right; padding-right: 0.2em; border-bottom: 1px dotted #0a0; }<h3>UVWXYZ</h3> <div class="zweispaltig"> <p>Up she goes</p><p><a href="#lied_04">4</a></p> <p>Wir fahren über's weite Meer</p><p><a href="#lied_03">3</a></p> <p>What shall we do</p><p><a href="#lied_14">14</a></p> <p>Whiskey in the Jar</p><p><a class=neu href="#lied_65">65</a></p> <p>Whisky Jonny</p><p><a href="#lied_36">36</a></p> <p>Whoop Jamboree</p><p><a href="#lied_16">16</a></p> <p>Windjammer</p><p><a href="#lied_17">17</a></p> <p>Wir lagen vor Madagaskar</p><p><a href="#lied_19">19</a></p> </div>Und der hat's gemacht:
Linuchs
-
Om nah hoo pez nyeetz, Linuchs!
<!doctype html> <html> <head> <meta charset="utf-8"> <title>zweispaltig</title> <style> nav ul { list-style: none inside none; margin: 0; padding: 0; } nav li { margin: .1em 2em .1em; padding: 0; border-bottom: 2px dotted green; } nav a { float: right; } @media (min-width: 50em) { nav ul { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; -moz-column-gap: 4em; -webkit-column-gap: 4em; column-gap: 4em; } } </style> </head> <body> <nav> <h2>Inhaltsverzeichnis</h2> <ul> <li>Up she goes<a href="#lied_04">4</a></li> <li>Wir fahren über's weite Meer<a href="#lied_03">3</a></li> <li>What shall we do<a href="#lied_14">14</a></li> <li>Whiskey in the Jar<a class=neu href="#lied_65">65</a></li> <li>Whisky Jonny<a href="#lied_36">36</a></li> <li>Whoop Jamboree<a href="#lied_16">16</a></li> <li>Windjammer<a href="#lied_17">17</a></li> <li>Wir lagen vor Madagaskar<a href="#lied_19">19</a></li> </ul> </nav> </body> </html>eine weitere Alternative folgt.
Matthias
-
Om nah hoo pez nyeetz, Matthias Apsel!
<!doctype html> <html> <head> <meta charset="utf-8"> <title>zweispaltig</title> <style> nav ul { list-style: none inside none; margin: 0; padding: 0; } nav li { margin: .1em 2em .1em; padding: 0; border-bottom: 2px dotted green; } nav a { display: block; text-align: right; } nav .title { float: left; } @media (min-width: 50em) { nav ul { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; -moz-column-gap: 4em; -webkit-column-gap: 4em; column-gap: 4em; } } </style> </head> <body> <nav> <h2>Inhaltsverzeichnis</h2> <ul> <li><a href="#lied_04"><span class="title">Up she goes</span>4</a></li> <li><a href="#lied_03"><span class="title">Wir fahren über's weite Meer</span>3</a></li> <li><a href="#lied_14"><span class="title">What shall we do1</span>4</a></li> <li><a class=neu href="#lied_65"><span class="title">Whiskey in the Jar</span>65</a></li> <li><a href="#lied_36"><span class="title">Whisky Jonny</span>36</a></li> <li><a href="#lied_16"><span class="title">Whoop Jamboree</span>16</a></li> <li><a href="#lied_17"><span class="title">Windjammer</span>17</a></li> <li><a href="#lied_19"><span class="title">Wir lagen vor Madagaskar</span>19</a></li> </ul> </nav> </body> </html>Diese Lösung hat den Vorteil, dass die gesamte Zeile verlinkt ist und nicht bloß die Seitenzahl.
Matthias
-
Diese Lösung hat den Vorteil, dass die gesamte Zeile verlinkt ist und nicht bloß die Seitenzahl.
Den Titel benötige ich auch als Verlinkung. Er führt zum Dokument mit dem Lied, während die Seiten-Nr. "nur" auf die Seite mit dem iframe zeigt.
Für Hersteller von Liederbüchern, Katalogen, Angeboten ...:
Jedes Lied (Artikel, ...) ist eine eigene HTML-Datei, die bei mir genau eine gedruckte Seite groß ist. Oft enthält sie eine mp3-Datei, damit Chöre hören und ihre Stimme proben können. Oft auch das passende Video.
Die Datei liederbuch.htm besteht aus dem hier diskutierten Inhaltsverzeichnis (Titelseite) und beliebig vielen Seiten, die im iframe das jeweilie HTML-Dokument zeigen.
Bei mir passt jedes Lied auf eine Seite, kürzere Texte haben seniorengerecht größere Buchstaben.
So kann ich mit vorhandenen Liedern (= Textbausteinen) verschiedene Liederbücher drucken. Sie kommen fertig aus dem Duplex-Drucker und müssen nur noch gebunden oder geheftet werden.
Leider kann ich z.Z. immer nur ein Exemplar drucken. Bei 10 Exemplaren kommt 10mal das Blatt 1, dann 10mal Blatt 2 und ich muss von Hand zusammentragen. Hier wäre eine Lösung schön, ist beim FF unter Ubuntu aber wohl nicht möglich.
Gerne schicke ich euch einen Link zu so einem Liederbuch. Ich poste den Link hier bewusst nicht, wer weiss, wiviel arbeitslose Anwälte auf diese Gelegenheit warten.
Linuchs
-
Hallo,
Gerne schicke ich euch einen Link zu so einem Liederbuch. Ich poste den Link hier bewusst nicht, wer weiss, wiviel arbeitslose Anwälte auf diese Gelegenheit warten.
Ist die Legalität eines Angebots davon abhängig, ob es einen Link darauf gibt?
Gruß
Kalk-
@@Tabellenkalk:
nuqneH
Ist die Legalität eines Angebots davon abhängig, ob es einen Link darauf gibt?
Wo kein Kläger, da kein Richter.
*undweg*
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) -
Ist die Legalität eines Angebots davon abhängig, ob es einen Link darauf gibt?
Ich denke ja. Wenn niemand die Seite finden kann, ist sie nicht öffentlich. Die Verschärfung wäre, sie nur per Passwort zugänglich zu machen. Aber auch ein Passwort kann unbefugt weitergegeben werden.
Ich stelle mir gerade eine Situation vor Gericht vor:
Gema: "Sie haben Texte ins Internet gestellt, die womöglich unter Urheberrecht stehen. Deshalb unsere Forderung von ..."
Ich: "Von welchen Texten sprechen Sie denn?"
Gema: "Das wissen wir doch nicht, Sie haben sie ja nicht verlinkt."
Linuchs
-
Hallo Linuchs,
Ist die Legalität eines Angebots davon abhängig, ob es einen Link darauf gibt?
Ich denke ja. Wenn niemand die Seite finden kann, ist sie nicht öffentlich. Die Verschärfung wäre, sie nur per Passwort zugänglich zu machen. Aber auch ein Passwort kann unbefugt weitergegeben werden.
Ich stelle mir gerade eine Situation vor Gericht vor:
Gema: "Sie haben Texte ins Internet gestellt, die womöglich unter Urheberrecht stehen. Deshalb unsere Forderung von ..."
Ich: "Von welchen Texten sprechen Sie denn?"
Gema: "Das wissen wir doch nicht, Sie haben sie ja nicht verlinkt."
ein Hehlerladen wird nicht dadurch legal, dass es keinen Wegweiser gibt. Außerdem gibt es Mundpropaganda.
Gruß, Jürgen
-
ein Hehlerladen wird nicht dadurch legal, dass es keinen Wegweiser gibt. Außerdem gibt es Mundpropaganda.
Wo man singt, lass dich ruhig nieder. Anwälte haben keine Lieder.
Also das Singen an sich ist ja schon eine Grauzone. Wer weiss denn immer, ob Komponist und Texter 70 Jahre tot sind?
Erfraulicherweise bewege ich mich im "alten" Liedgut, sprich Volkslieder, Shanties, Seemannslieder. Dennoch können Arrangements wieder geschützt sein. Aber die Texte wohl kaum.
Und soweit ich weiss, ist nicht der Besitz von Noten und Texten kostenpflichtig, sondern die Veröffentlichung, also die "Weitergabe". Deshalb vorsichtshalber nicht singen, wenn jemand Unbekanntes zuhören kann.
Linuchs
-
-
Hallo,
Ist die Legalität eines Angebots davon abhängig, ob es einen Link darauf gibt?
Ich denke ja.ich denke nein. Warum sollte das Vorhandensein eines Wegweisers etwas an der Legalität eines Angebots ändern?
Wenn niemand die Seite finden kann, ist sie nicht öffentlich.
Dieser Satz enthält zwei Irrtümer.
Erstens kann man die Seite auch finden, wenn sie nirgends verlinkt ist - es gibt, wie Jürgen schon erwähnt, Flüsterpropaganda, es gibt möglicherweise Hinweise über Printmedien (Flyer), es gibt sogar rein theoretisch die Möglichkeit, eine nirgends verlinkte Seite durch stures Probieren, durch einen zufälligen Fipptehler oder eine technische Panne zu finden.
Zweitens hat die Frage, ob ein Angebot öffentlich ist, nichts damit zu tun, wie leicht es zu finden ist. Offentlich heißt, für jeden zugänglich. Wie man von der Existenz oder dem genauen Ort Kenntnis erlangt, ist unerheblich.
Gema: "Sie haben Texte ins Internet gestellt, die womöglich unter Urheberrecht stehen. Deshalb unsere Forderung von ..."
Ich: "Von welchen Texten sprechen Sie denn?"
Gema: "Das wissen wir doch nicht, Sie haben sie ja nicht verlinkt."Witzig, aber äußerst realitätsfremd.
Ciao,
Martin--
Die letzten Worte des Privatdetektivs:
Jetzt wird es mir klar: SIE sind der Mörder!
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
-
-
Hallo Matthias,
danke für deine Lösung, funktioniert auf dem Display großartig.
Wieso funktioniert dieses, ein a ist doch kein Blockelement, das man ausrichten kann:
nav a { float: right; }Und was bedeutet dieses (ich habe nur einen zulässigen Wert gefunden):
list-style: none inside none;Deine Weiche
@media (min-width: 50em) {wirkt nicht beim Drucken, das erfolgt nur 1-spaltig auf A4 hoch. Druckproblem wird auch so nicht behoben:
@media (min-width: 50em), @media print {Linuchs
-
Hallo,
Wieso funktioniert dieses, ein a ist doch kein Blockelement, das man ausrichten kann:
nav a {
float: right;
}von Haus aus ist a kein Blockelement, das ist richtig. Aber in dem Moment, wo du es floatest, wird es implizit zu einem solchen. > Und was bedeutet dieses (ich habe nur einen zulässigen Wert gefunden): > > ` list-style: none inside none;`{:.language-css} Hier ist [list-style](http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Listenformatierung/list-style) eine Zusammenfassung (shorthand) für die Eigenschaften list-style-type, list-style-position und list-style-image. Ciao, Martin -- Computer funktionieren grundsätzlich nicht richtig. Wenn doch, hast du etwas falsch gemacht. Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( -
Om nah hoo pez nyeetz, Linuchs!
@media (min-width: 50em) {wirkt nicht beim Drucken, das erfolgt nur 1-spaltig auf A4 hoch. Druckproblem wird auch so nicht behoben:
Gerade getestet:
A4-Hochformat: einspaltig
A4-Querformat: zweispaltigMatthias
-
Gerade getestet:
A4-Hochformat: einspaltig
A4-Querformat: zweispaltigIch drucke auch auf A4 hoch zweispaltig, allerdings muss ich das dem Drucker extra sagen:
@media (min-width: 50em) { nav ul { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; -moz-column-gap: 1.5em; -webkit-column-gap: 1.5em; column-gap: 1.5em; } } @media print { nav ul { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; -moz-column-gap: 1.5em; -webkit-column-gap: 1.5em; column-gap: 1.5em; } }Hatte mich gewundert, dass @media offenbar nur für den Bildschirm gilt. Denkfehler. Ich habe zwar die Breite der Anzeige begrenzt, sodass Display und Papier recht gut übereinstimmen. Aber die Angabe (min-width: 50em) gilt ja für die Gesamtbreite des Displays. Deshalb hat es unwissend geklappt ;-)
Linuchs
-
Om nah hoo pez nyeetz, Linuchs!
Ich drucke auch auf A4 hoch zweispaltig, allerdings muss ich das dem Drucker extra sagen:
@media (min-width: 50em) {
nav ul {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
}
}
@media print {
nav ul {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
}
}> > Hatte mich gewundert, dass @media offenbar nur für den Bildschirm gilt. Denkfehler. Ich habe zwar die Breite der Anzeige begrenzt, sodass Display und Papier recht gut übereinstimmen. Aber die Angabe (min-width: 50em) gilt ja für die Gesamtbreite des Displays. Deshalb hat es unwissend geklappt ;-) @media gilt grundsätzlich für alle Medientypen, wenn nicht ausdrücklich etwas anderes festgelegt ist. Offensichtlich ist das A4-Papier nicht mindestens 50em breit. Auch eine Doppelung des CSS-Codes sollte nicht notwendig sein. Bei mir funktioniert ~~~css @media (min-width: 50em), print { … }problemlos.
Siehe auch [wiki/MQ](http://wiki.selfhtml.org/wiki/CSS/Media Queries)
Matthias
-
-
-
-
-
-
-
Liebe Mitdenker,
liebe Wissende,
liebe Neugierige,ja!
Das ist mMn gesamtheitlich betrachtet unsinnig.
Wenn keiner mehr fragt und keiner mehr vernünftig antwortet, woher sollen dann die Inhalte kommen, nach denen man suchen kann?Und nach der Philosophie von Foren und des Internets müsste man auch in der Lage sein, danach erst mal selber zu suchen, bevor man fragt.
Spirituelle Grüße
Euer Robert--
Möge der Forumsgeist wiederbelebt werden!-
Hi,
Wenn keiner mehr fragt und keiner mehr vernünftig antwortet, woher sollen dann die Inhalte kommen, nach denen man suchen kann?
Die sind in vielen Fällen bereits vorhanden.
MfG ChrisB
--
Kids these days just don’t get ASCII art any more – it’s all UTF-this and Unicode-that with those youngsters …-
Die sind in vielen Fällen bereits vorhanden.
Und in vielen Fällen einfach falsch oder überholt.
Ich suchte danach, per CSS einen float aufzuheben. Da wird ein dutzend Lösungen mit :after konstruiert, die allesamt nicht funktionieren.
Linuchs
-
Hi,
Ich suchte danach, per CSS einen float aufzuheben. Da wird ein dutzend Lösungen mit :after konstruiert, die allesamt nicht funktionieren.
Du wurdest doch schon auf CSS 3 Columns aufmerksame gemacht – wieso hast du dann noch float im Sinn?
MfG ChrisB
--
Kids these days just don’t get ASCII art any more – it’s all UTF-this and Unicode-that with those youngsters …-
Ich suchte danach, per CSS einen float aufzuheben. Da wird ein dutzend Lösungen mit :after konstruiert, die allesamt nicht funktionieren.
Du wurdest doch schon auf CSS 3 Columns aufmerksame gemacht – wieso hast du dann noch float im Sinn?
Dank SelHTML habe ich dazugelernt und verwende
column-count: 2;. Der HTML Code ist deutlich übersichtlicher damit.Dennoch darf ich bermerken, dass die vor der Anfrage hier von ChrisB verlangte Suche so manches Mal in die Irre führt.
Linuchs
-
Hi,
Dennoch darf ich bermerken, dass die vor der Anfrage hier von ChrisB verlangte Suche so manches Mal in die Irre führt.
Ich weiß nicht welche Suchergebnisse dir konkret präsentiert wurden, aber mein zweiter war https://css-tricks.com/guide-responsive-friendly-css-columns/.
MfG ChrisB
--
Kids these days just don’t get ASCII art any more – it’s all UTF-this and Unicode-that with those youngsters …-
Liebe Mitdenker,
liebe Wissende,
liebe Neugierige,ja!
Dennoch darf ich bermerken, dass die vor der Anfrage hier von ChrisB verlangte Suche so manches Mal in die Irre führt.
Ich weiß nicht welche Suchergebnisse dir konkret präsentiert wurden, aber mein zweiter war https://css-tricks.com/guide-responsive-friendly-css-columns/.
Und weil Du schon wusstest, wie es geht, konntest Du auch entscheiden, welcher Tipp richtig™ ist :-P
Spirituelle Grüße
Euer Robert--
Möge der Forumsgeist wiederbelebt werden!
-
-
-
-
-
-
-
-
@@Linuchs:
nuqneH
Da steckt also der Spaltenwechsel im HTML (dazu auch dieser Faden vom gestern).
Genau dort habe ich dich auch schon auf
columnsaufmerksam gemacht.Wie kann CSS die Anzahl der Einräge erkennen und nach der Hälfte in die zweite Spalte wechseln?
Gar nicht. Der Inhalt wird so auf die Spalten verteilt, dass diese möglichst gleich hoch sind.
Bei gerader (bzw. durch n teilbarer) Anzahl von gleich hohen Items hast du dann dieselbe Anzahl von Items in jeder der beiden (bzw. n) Spalten.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Gar nicht. Der Inhalt wird so auf die Spalten verteilt, dass diese möglichst gleich hoch sind.
Lässt sich bei Bedarf ausschalten:
column-fill: autounglücklich gewählte Wertbezeichnung, imho.Matthias
-
