Einrücken innerhalb einer Zeile mit gleichem Abstand links
0 0 
at
0 
Gunnar Bittersmann
0 at
Einrücken innerhalb einer Zeile mit gleichem Abstand links
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
-
Hallo Josch.
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: MusterhausenIch sehe hier eindeutig tabellarische Daten. Alternativ bietet sich eine Definitionsliste an. Währen bei der Tabelle die optische Strukturierung bereits gegeben ist, musst du bei der Liste mit float und clear nachhelfen.
Einen schönen Mittwoch noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]-
Hallo.
Ich sehe hier eindeutig tabellarische Daten.
Bei diesen Temperaturen solltest du mehr trinken, um Halluzinationen vorzubeugen.
MfG, at-
Hello out there!
Ich sehe hier eindeutig tabellarische Daten.
Bei diesen Temperaturen solltest du mehr trinken, um Halluzinationen vorzubeugen.
learn.to/quote!!1
Du meintest sicher:
Alternativ bietet sich eine Definitionsliste an.
Bei diesen Temperaturen solltest du mehr trinken, um Halluzinationen vorzubeugen.
½SCNR.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hallo.
learn.to/quote!!1
"Der Link ist kaputt!"
Du meintest sicher:
Alternativ bietet sich eine Definitionsliste an.
Bei diesen Temperaturen solltest du mehr trinken, um Halluzinationen vorzubeugen.
Das natürlich auch. Denn wie könnte eine Definitionsliste eine Alternative zu einer Definitionsliste darstellen?
½SCNR.
Bitte keine halben Sachen.
MfG, at
-
-
-