Zeilenabstand bei versch. Schriftgrößen und mehreren Spalten auf eine Linie setzen

[SamuelBender]

Hallo,

ich habe 4 nebeneinander liegende div-Spalten erzeugt, die jeweils unterschiedliche Schriften bzw. unterschiedliche Schriftgrößen enthalten. Die Schriften jeder Spalte sollen nun aber genau nebeneinander/auf der selben Höhe liegen.

Die Zeilenzählung auf der linken Seite soll z.B. immer auf der selben Höhe wie der Haupttext sein, ebenso die Korrekturen in der linken Spalte. In der rechten Spalte habe ich beispielhaft die selbe Schriftformatierung wie für die Mittelspalte gewählt, um zu zeigen, wie es sein sollte.

Habe es mit line-height und festen Werten (px) versucht aber keinen Erfolg gehabt. Ebenso mit vertical-align. Ich glaube, ich brauche einen völlig neuen Ansatz, aber leider sind mir die Ideen ausgegangen.

Nietzsche, Ecce Homo -- Transkription der Druckfahnen K-16

bzw. WebCite query result für spätere Zugriffe (hier fehlen einige Formatierungsangaben, da die Seite nur zitiert wird, aber das Problem ist dennoch erkennbar)

P.S. Ich hoffe, das wird kein Doppelpost, hatte vor zwei Stunden schonmal versucht nen Thread zu öffnen, hat aber scheinbar nicht geklappt.

Gruß Samuel

 

[threadi]

Such mal nach "faux columns" - darunter versteht man eine CSS-"Technik" mit der man Blockelemente, die nebeneinander liegen, auf eine Höhe bringen kann.

 

[SamuelBender]

hallo threadi,

danke für deine Antwort. Die Spalten habe ich bereits mit faux columns optisch auf eine Höhe gebracht.

Mein Problem betrifft die Texte innerhalb der Spalten. Die Zeilenzählung (ganz links) ist z.B. zwei px kleiner als der Haupttext (etwa in der Mitte).
Das soll auch so sein. Aber durch die Verkleinerung der Schrift ist sie nicht mehr auf einer Höhe mit dem Haupttext.
So soll z.B. die Zahl 29 genau auf der gleichen Linie wie der letzte Satz des Haupttextes liegen ("erräth Heilmittel gegen Schädigungen, er nützt"). Wenn ich die gleiche Schrift und Schriftgröße verwenden würde wäre das kein Problem (wie z.b. bei der mittleren und rechten Spalte), aber ich muss andere Schriften bzw. Schriftgrößen verwenden und trotzdem alles auf einer Linie haben. Mit line-height kann ich zwar die Zeilenhöhe für die kleinere Schrift verändern und damit eine Annäherung an den Haupttext erreichen, aber die Annäherung ist erstens nicht ausreichend und bei mehreren Schriftarten in einer Box wird es noch problematischer.

Am liebsten wäre mir eine Lösung in der Art "Mache für jeden Absatz einen Abstand von 10 px und orientiere dich bei der Bestimmung von Ober und Unterlinie immer an der Schriftart X oder auch an der Höhe des Buchstaben X und nicht an der Schriftart für welche die Absatzhöhe gebraucht wird."

Gruß
Samuel

 

[threadi]

Dann könntest Du auch mal die CSS-Tabelleneigenschaften verwenden. Also "display" mit den Werten "table", "table-cell" etc.pp. Das klappt auch prima in allen modernen Browsern, ich denke auch im IE9 - nur eben nicht (ohne Hilfsmittel) in IE8 und älter. Unterteile die Texte in Blöcke denen Du jeweils "display: table-cell" gibst, dadurch ordnen sie sich wie eine Tabelle an - die Zeilen sollten somit auf der selben Höhe liegen und die Blöcke auch gleich hoch sein.

 

[SamuelBender]

Hallo threadi,

danke für deine zweite Antwort. Das mit der display Eigenschaft hat mich jetzt auf die richtige Fährte geleitet. Zwar kann ich diese nicht direkt verwenden, weil sie vom IE 7 tatsächlich noch nicht ausreichend interpretiert wird, aber ich hab mir jetzt damit beholfen Zellen mit div-Boxen zu erstellen.

Das klappt nun auch sehr gut, ich weiß nur nicht, ob ich mir damit noch irgendwelche Nachteile einkaufe, von denen ich jetzt noch nichts ahne bzw. ob solch eine solche Lösung grundsätzlich als "schlechter Stil" einzustufen ist.

Nietzsche, Ecce Homo -- Transkription der Druckfahnen K-16
WebCite query result (archiviert)

Vielen Dank schonmal an dieser Stelle.

 

[threadi]

Ich würde sagen, dass ist der Weg zum Ziel. Dass es im IE7 nicht geht muss man verschmerzen. Deren Anteil ist ja inzwischen auch am Sinken.