Tabellenfreie zweispaltige Absatzformatierung. Geht das?
Andi
- css
Hallo Leute,
es geht um die obige Seite. Mir gefallen die orangenen Boxen in der Mitte auf der Startseite sehr gut. Aber die sind leider mit Tabellen umgesetzt, was mir widerstrebt. Habe jetzt auch schon einige Versuche gemacht, das möglichst einfaches CSS umzuschreiben, aber es ist nichts brauchbares herausgekommen.
Ich habe noch die zusätzliche Anforderung, dass ich es am liebsten so hätte, dass es nur ein Absatz ist, der mit CSS dann so formatiert wird, also:
<p class="box">##Datum##: Inhalt</p>
Hat jemand eine tolle Idee dazu? Aber ich wäre auch froh, wenn es etwas umständlicher ist!
Grüße! Andi
Om nah hoo pez nyeetz, Andi!
<p class="box">##Datum##: Inhalt</p>
Hat jemand eine tolle Idee dazu? Aber ich wäre auch froh, wenn es etwas umständlicher ist!
Als Absatz geht es IMHO nicht. Verwende eine Definitionsliste.
Matthias
@@apsel:
nuqneH
Als Absatz geht es IMHO nicht. Verwende eine Definitionsliste.
Als Definitionsliste geht es IMHO nicht. Verwende eine Liste oder eine Tabelle.
Wegen unsinniger HTML-Spec wird das Layout mit 'dl' nicht umsetzbar sein; es fehlt das 'dt' und 'dd' gruppierende Element 'di'.
Qapla'
Als Definitionsliste geht es IMHO nicht.
Doch, man muss nur etwas tricksen - das geht schon sofern das Layout nicht zu komplex wird.
Wegen unsinniger HTML-Spec wird das Layout mit 'dl' nicht umsetzbar sein; es fehlt das 'dt' und 'dd' gruppierende Element 'di'.
Ja, damit wäre es einfacher.
@@suit:
nuqneH
Als Definitionsliste geht es IMHO nicht.
Doch, man muss nur etwas tricksen - das geht schon sofern das Layout nicht zu komplex wird.
Da bin ich gespannt, wie du das hinbekommen willst.
Variabel viel Inhalt von 'dt' und 'dt' sollet noch nicht unter „Layout zu komplex“ fallen.
Qapla'
Om nah hoo pez nyeetz, Gunnar Bittersmann!
was spricht gegen
<dl> // Hier ein Rahmen
<dt>foo</dt> // Border-bottom
<dd>bar</dd> // Border-bottom
</dl>
und last-of-type kein border-unten,
abgesehen von der etwas komplizierteren Positionierung der <dd>s?
Matthias
@@apsel:
nuqneH
was spricht gegen
<dl> // Hier ein Rahmen
<dt>foo</dt> // Border-bottom
<dd>bar</dd> // Border-bottom
</dl>
Unerlaubte Vereinfachung.
~~~html
<dl>
<dt>foo</dt>
<dd>bar</dd>
<dt>baz</dt>
<dd>quz</dd>
</dl>
Wie willst du einen Rahmen um foo und bar und einen anderen um bar und baz hinbekommen?
Und nein,
<dl>
<dt>foo</dt>
<dd>bar</dd>
</dl>
<dl>
<dt>baz</dt>
<dd>quz</dd>
</dl>
ist kein sinnvolles Markup.
Qapla'
Om nah hoo pez nyeetz, Gunnar Bittersmann!
@@apsel:
nuqneH
was spricht gegen
<dl> // Hier ein Rahmen
> > <dt>foo</dt> // Border-bottom
> > <dd>bar</dd> // Border-bottom
> > </dl>
Unerlaubte Vereinfachung.
<dl>
> <dt>foo</dt>
> <dd>bar</dd>
> <dt>baz</dt>
> <dd>quz</dd>
> </dl>
Wie willst du einen Rahmen um foo und bar und einen anderen um bar und baz hinbekommen?
Und nein,
<dl>
> <dt>foo</dt>
> <dd>bar</dd>
> </dl>
> <dl>
> <dt>baz</dt>
> <dd>quz</dd>
> </dl>
ist kein sinnvolles Markup. Qapla'
zugegeben, das nicht sinnvolle Markup ist mir zuerst eingefallen.
dl bekommt den Border,
dd und dt bekommen Border-bottom
last-of-type von dd und dt bekommen kein Border-bottom
Matthias
@@apsel:
nuqneH
zugegeben, das nicht sinnvolle Markup ist mir zuerst eingefallen.
Das zählt nicht. Es ist EINE Liste, also ein 'dl'-Element.
Qapla'
Om nah hoo pez nyeetz, Gunnar Bittersmann!
...
<head>
<style>
dl {border: 5px solid red;}
dt {border-bottom: 5px solid blue; margin: auto 5px; text-indent: 10px;}
dd {margin-top: -1.55em; margin-left: 25em;}
</style>
</head>
<body>
<dl>
<dt>foo</dt>
<dd>bar</dd>
<dt>noch foo</dt>
<dd>barer</dd>
</dl>
...
leistet das Verlangte.
Matthias
@@apsel:
nuqneH
...[/code]
leistet das Verlangte.
Mitnichten.
Qapla'
Hi,
Aber die sind leider mit Tabellen umgesetzt, was mir widerstrebt.
warum? Mindestens dort, wo Ereignisse Terminen zugeordnet sind, handelt es sich um tabellarische Daten. Dass die Struktur an sich noch immer dämlich ist (einzelne Tabellen für jeden Datensatz, leere Absätze dazwischen), steht auf einem anderen Blatt.
Hat jemand eine tolle Idee dazu?
Siehe apsels Vorschlag.
Cheatah