Moin zusammen,
ich bin seit einer Weile auf der Suche nach einem CSS-Ersatz für Konstrukte der Art "Beschreibung links, Text rechts". Also ähnlich wie in Formularen, wo zum Beispiel "Name, Strasse, PLZ, Ort" etc. linksbündig stehen und die Formularfelder rechts davon, aber ebenfalls linksbündig ausgerichtet.
Letztlich wird so etwas ja oft mit einer Tabelle realisiert. nur hat das für mich mit einer semantisch korrekten Tabelle nichts zu tun.
Gibt es da irgendwelche Lösungsansätze?
Also so etwas:
Vorname: Max
Nachname: Mustermann
Straße: Musterstrasse
Ort: Musterhausen
"Max, Mustermann, Musterstrasse und Musterhausen" sollen linksbündig auf einer Linie ausgerichtet werden, also wie mit Tabulatoren.
Mein erster Ansatz sieht so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<meta name="generator" content="BBEdit 8.2" />
<style type="text/css" title="text/css" media="all">
/* <![CDATA[ */
/* der Punkt ist richtig: es folgt ein Klassenbezeichner */
ul#tabliste
{
padding: 0 0 0 0em;
}
/* li innerhalb von .meineklasse */
ul#tabliste li
{
list-style-type: none;
min-width: 10em;
}
ul#tabliste span.tab
{
padding: 0 0 0 20%;
margin: -1em 0 0 0;
display: block;
float: inherit;
}
/* ]]> */
</style>
</head>
<body>
<ul id="tabliste">
<li>eingerücktes Element <span class="tab">tiefer eingerücktes Element<br />blafasel</span></li>
<li>och eines <span class="tab">tiefer eingerücktes Element</span></li>
</ul>
</body>
</html>
Nur ein Beispiel, um zu verdeutlichen, wie ich das meine. Sozusagen als Arbeitsgrundlage ;-)
Ich bin gespannt auf Eure Ideen.
Danke im voraus und Gruß
Josch