zweispaltiges Layout vierspaltig machen

[Linuchs]

Hallo,

auf einem Inhaltsverzeichnis (Deckblatt) reicht die A4-Höhe nicht mehr aus.

Der bisher zweispaltige Text (links) und Seitenzahl (rechts) soll per CSS vierspaltig werden:

HTML:

<div class=inhalt>  
  <h3>Feiern</h3>  
  <p><a href="hofbraeuhaus.htm">In München steht ein Hofbräuhaus</a></p><p><a href="#lied_25">25</a></p>  
  <p><a href="so_ein_tag_so_wunderschoen.htm">So ein Tag, so wunderschön wie heute</a></p><p><a href="#lied_29">29</a></p>  
</div>  
  
<div class=inhalt>  
  <h3>Im Hafen und auf See</h3>  
  <p><a href="auf_der_reeperbahn.htm">Auf der Reeperbahn</a></p><p><a href="#lied_26">26</a></p>  
  <p><a href="heut_geht_es_an_bord.htm">Heut geht es an Bord (hell die Gläser klingen)</a></p><p><a href="#lied_29">29</a></p>  
  <p><a href="schoen_ist_die_liebe_im_hafen.htm">Schön ist die Liebe im Hafen</a></p><p><a class=neu href="#lied_27">27</a></p>  
  <p><a href="ueber_uns_der_blaue_himmel.htm">Über uns der blaue Himmel</a></p><p><a class=neu href="#lied_28">28</a></p>  
  <p><a href="wir_lagen_vor_madagaskar.htm">Wir lagen vor Madagaskar</a></p><p><a href="#lied_24">24</a></p>  
</div>  

zugehöriges CSS (schon auf 50% Seitenbreite reduziert):

div.inhalt p:nth-of-type(2n+1) { /* Spalte 1/4 */  
  margin-bottom: 0;  
  float: left;  
}  
div.inhalt p:nth-of-type(2n+2) { /* Spalte 2/2 */  
  width: 49%;  
  margin-bottom: 0.2em;  
  text-align: right;  
  border-bottom: 1px dotted #0a0;  
}  

so sieht es aus:

neues CSS:

  
div.inhalt p:nth-of-type(4n+1) { /* Spalte 1/4 */  
  margin-bottom: 0;  
  float: left;  
}  
div.inhalt p:nth-of-type(4n+2) { /* Spalte 2/4 */  
  width: 49%;  
  margin-bottom: 0.2em;  
  text-align: right;  
  border-bottom: 1px dotted #0a0;  
}  
div.inhalt p:nth-of-type(4n+3) { /* Spalte 3/4 */  
  margin-left: 51%;  
  margin-bottom: 0;  
  float: left;  
}  
div.inhalt p:nth-of-type(4n+4) { /* Spalte 4/4 */  
  margin-left: 51%;  
  width: 49%;  
  margin-bottom: 0.2em;  
  text-align: right;  
  border-bottom: 1px dotted #0a0;  
}  

so sieht es aus:

Der "richtige" Übergang von Spalte 2 zu 3 ist mir nicht klar. So geht's nicht: Spalte 2 mit width:49%; float:right.

Linuchs

[Linuchs]

bei Spalte 3/4 und 4/4 habe ich CSS eingefügt:

margin-top: -1.5em;

ob das "sauber" ist, weiss ich nicht. Ich möchte Hefte drucken und der Firefox macht das.

Linuchs

[M.]

Mahlzeit,

ob das "sauber" ist, weiss ich nicht. Ich möchte Hefte drucken und der Firefox macht das.

Meine grundsätzliche Erfahrung: Druckvorlagen in HTML sind immer gefrickel ;)
Ich bin auf PDF umgestiegen (per tcpdf), damit wird HTML und CSS einigermassen in PDF umgesetzt (falls man es nicht direkt erzeugen will) und die Ausgabe ist optimal.

[1UnitedPower]

Meine Herren!

Ich bin auf PDF umgestiegen (per tcpdf), damit wird HTML und CSS einigermassen in PDF umgesetzt (falls man es nicht direkt erzeugen will) und die Ausgabe ist optimal.

Die HTML- und CSS-Kapazitäten von solchen Bibliotheken sind naturgemäß eine Katastrophe. Wenn man programmatisch aus HTML- und CSS eine PDF erzeugen will, dann greift man besser zu einer Bibliothek, die eine echte HTML-Rendering-Engine im Hintergrund anschmeißt. wkhtmltopdf ist eine C-Bibliothek für diesen Fall (wk für WebKit). Und snappy ist ein PHP-Wrapper dafür.

[M.]

Mahlzeit,

Die HTML- und CSS-Kapazitäten von solchen Bibliotheken sind naturgemäß eine Katastrophe.

ACK. Das ist nur rudimentär für einfache Sachen.

Wenn man programmatisch aus HTML- und CSS eine PDF erzeugen will, dann greift man besser zu einer Bibliothek, die eine echte HTML-Rendering-Engine im Hintergrund anschmeißt. wkhtmltopdf ist eine C-Bibliothek für diesen Fall (wk für WebKit). Und snappy ist ein PHP-Wrapper dafür.

Den Wrapper kannte ich bisher noch nicht, danke für die Info. Schau ich mir heute Abend mal an :)

[MudGuard]

Hi,

auf einem Inhaltsverzeichnis (Deckblatt) reicht die A4-Höhe nicht mehr aus.

Das klingt nach Drucksache. Da wäre PDF vielleicht besser geeignet.

Der bisher zweispaltige Text (links) und Seitenzahl (rechts) soll per CSS vierspaltig werden:

Dann sollte man auch
mehrspaltiges Layout (in Deinem Fall 2 Spalten, in denen jeweils links die Überschrift und rechts die Seitenzahl steht)
benutzen.

(Browserunterstützung weiß ich nicht, selber probieren - aber da das ja eher ne Drucksache ist, reicht's ja vermutlich, wenn Dein Browser das kann ...)

cu,
Andreas

[Gunnar Bittersmann]

@@MudGuard:

nuqneH

Dann sollte man auch
mehrspaltiges Layout (in Deinem Fall 2 Spalten, in denen jeweils links die Überschrift und rechts die Seitenzahl steht)
benutzen.

s.a. Tabellen mehrspaltig gestalten

Browserunterstützung weiß ich nicht, selber probieren

Ja, das spart Zeit. ;-) Oder doch nachlesen.

Qapla'

[Linuchs]

Das klingt nach Drucksache. Da wäre PDF vielleicht besser geeignet.

Naja, meine Randbedingungen sind:

1. jedes Lied ist eine Seite
2. Ein Liederbuch ist eine temporäre Zusammenstellung von Seiten, z.B. 30 von 100.
3. Ein anderes Liederbuch hat eine andere Teilmenge der vorhandenen Seiten
4. Alle Seiten gehören in einen Druckauftrag wg. Duplex-Druck
5. Die Seiten eines Liederbuchs sind numeriert
6. Die Seiten sollen skalierbar sein A4, A5, A6

Das habe ich mit Firefox, HTML und einer wechselnden basis.css ganz gut im Griff.

Linuchs

[quincunx]

Hallo Linuchs,

anderer Ansatz

gruesse qx