nicht angemeldet
Tabellenansicht mit CSS
Hallo Leute,
früher habe ich Elemente gern mit Tabellen auf meiner Website ausgerichtet, allerdings ist mir zu Ohren gekommen, dass man das nicht mehr macht (Barrierefreiheit usw.), sondern dies von CSS-Tags übernommen wird. Ich habe vor so etwas zu erstellen:
Punkt1: Eintrag 1 Foto
Punkt2: Eintrag 2 "
Punkt3: Eintrag 3 "
Die Einträge sollen also auf einer vertikalen Linie ausgerichtet sein. Das Foto soll sich über alle drei Einträge erstrecken. Wie mache ich so etwas ohne HTML Tabellen-Tags, also nur mit CSS - gibt es dazu Beispiele im Netz bzw. habt ihr für mein Beispiel einen Minimalcode?
Danke!
-
früher habe ich Elemente gern mit Tabellen auf meiner Website ausgerichtet, allerdings ist mir zu Ohren gekommen, dass man das nicht mehr macht (Barrierefreiheit usw.), sondern dies von CSS-Tags übernommen wird. Ich habe vor so etwas zu erstellen:
Tabellen nicht zu verwenden ist der Barrierearmut nicht zuträglich, wenn du tabellarische Daten hast, nutze Tabellen :).
CSS kennt übrigens keine Tags, CSS kennt Deklarationen (genauer gesagt Selektoren, Eigenschaften und Werte).
Punkt1: Eintrag 1 Foto
Punkt2: Eintrag 2 "
Punkt3: Eintrag 3 "Die Einträge sollen also auf einer vertikalen Linie ausgerichtet sein. Das Foto soll sich über alle drei Einträge erstrecken. Wie mache ich so etwas ohne HTML Tabellen-Tags, also nur mit CSS - gibt es dazu Beispiele im Netz bzw. habt ihr für mein Beispiel einen Minimalcode?
ist das obrige eine Tabelle? Sprich _was_ stellt dieses Konstrukt inhaltlich dar?
-
ist das obrige eine Tabelle? Sprich _was_ stellt dieses Konstrukt inhaltlich dar?
Es handelt sich um eine Beschreibung, die schon existiert und nur um ein Bild- und die genannte vertikale Ausrichtung erweitert werden soll. So siehts momentan aus:
Punkt1: Eintrag 1
Punkt20: Eintrag 2
Punkt300: Eintrag 3(Die Zahlen 1, 20 und 300 sollen nur zu Ausdruck bringen, dass die Wörter nicht alle gleich lang sind.)
-
» ist das obrige eine Tabelle? Sprich _was_ stellt dieses Konstrukt inhaltlich dar?
Es handelt sich um eine Beschreibung, die schon existiert und nur um ein Bild- und die genannte vertikale Ausrichtung erweitert werden soll. So siehts momentan aus:
Punkt1: Eintrag 1
Punkt20: Eintrag 2
Punkt300: Eintrag 3Es ist immernoch unklar was für eine Art von Daten "Beschreibung" denn sein mag.
Grundsätzliche Lösung dürfte sein die Punkte und Einträge in einem (oder mehr) Blockelementen zu bauen und gemeinsam zu floaten um anschließend das Bild daneben zu setzen.
Es könnte sich z.B. um eine Tabelle handeln, dann bastle eine Tabelle, floate diese und schreibe das Bild daneben.
Es könnte sich auch um eine Definitionsliste handeln, dann bastle eine Definitionsliste, floate diese und schreibe das Bild daneben.
Es könnte sich auch im Absätze und Überschriften handeln (erstens: (...) Punkt 2: (...)) Dann verwende Überschriften und Textabsätze, fasse diese ggf. in einem Div-Container zusammen, floate diesen und schribe das Bild daneben.
Diese Liste ist erweiterbar, bei deinen Daten könnte es sich um eine Liste handeln, um Beschriftungen, um... ach was weiß ich. Die Frage ist einfach: Was für eine Art von Daten ist "Punkt1: Eintrag 1"?--
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(-
Ihr seid aber auch neugierig ;-) Na gut:
Vorname: Hans HansWurstspassbild.jpg
Nachname: Wurst "
Alter: 100 "So soll das aussehen. Klar ist das mit einer Tabelle schnell zu machen, da aber eine bereits fertige Formatierung (Abstände zu den Seiten, Zeilenhöhe, usw.) in CSS existiert, wäre es schöner, wenn man das Bild und die vertikale Ausrichtung auch in CSS machen könnte.
-
Ihr seid aber auch neugierig ;-) Na gut:
Vorname: Hans HansWurstspassbild.jpg
Nachname: Wurst "
Alter: 100 "In diesem Fall dürfte dich das hCard-Microformat interessieren.
-
In diesem Fall dürfte dich das hCard-Microformat interessieren.
Was genau macht man damit? Die Seite ist irgendwie so unübersichtlich!
-
»» In diesem Fall dürfte dich das hCard-Microformat interessieren.
Was genau macht man damit?
Mit Text? Lesen?
Mit dem beschriebenen Zeug? Seine Inhalte auszeichnen?Die Seite ist irgendwie so unübersichtlich!
Nein, sie hat Gliederungsüberschriften und ist sauber strukturiert. Was genau ist unübersichtlich, was verstehst du nicht?
-
Mit dem beschriebenen Zeug? Seine Inhalte auszeichnen?
was verstehst du nicht?Mir ist nicht klar, wofür ich eine hcard brauche? Ich möchte doch einfach nur ein Seitenelement formatieren und mich dazu nicht erst in irgendeine spezielle Formatierung einarbeiten - dafür fehlt mir die Zeit. Geht es nicht etwas einfacher?
-
Mir ist nicht klar, wofür ich eine hcard brauche?
Um deinen Inhalt auszuzeichnen?
Ich möchte doch einfach nur ein Seitenelement formatieren und mich dazu nicht erst in irgendeine spezielle Formatierung einarbeiten - dafür fehlt mir die Zeit. Geht es nicht etwas einfacher?
Diese spezielle "Formatierung" nennt sich CSS - diese ist in jedem Fall notwendig, egal wie der Inhalt ausgezeichnet wurde.
Wenn man seinen Inhalt schlau auszeichnet (eben unter Zuhilfenahme von vernünftigem Markup oder eben Mikroformaten, wenn kein entsprechedes Markup-Element existiert), spart man sich im vergleich zu anderen Methoden eine Menge Zeit.
Ich kann immer noch nicht nachvollziehen, was an dem hCard-Format so kompliziert sein soll:
<div class="vcard"> <div class="n"> <span class="given-name">Max</span> <span class="family-name">Mustermann</span> <img class="fn photo" src="foo.png" alt="Mustermann, Max" /> <span class="bday">1970-01-01</span> </div> </div>Das vCard-Format sieht übrigens kein "Alter" als Feld vor, hier kannst du entweder das Geburtsdatum verwenden und daraus das Alter errechnen oder du definierst ein einges Feld, welches dann von vCard/hCard-Parsern nicht gelesen werden kann. Das ist für dich wahrscheinlich ohnehin belanglos.
-
Ich kann immer noch nicht nachvollziehen, was an dem hCard-Format so kompliziert sein soll:
<div class="vcard">
<div class="n">
<span class="given-name">Max</span>
<span class="family-name">Mustermann</span>
<img class="fn photo" src="foo.png" alt="Mustermann, Max" />
<span class="bday">1970-01-01</span>
</div>
</div>> Das vCard-Format sieht übrigens kein "Alter" als Feld vor, hier kannst du entweder das Geburtsdatum verwenden und daraus das Alter errechnen oder du definierst ein einges Feld, welches dann von vCard/hCard-Parsern nicht gelesen werden kann. Das ist für dich wahrscheinlich ohnehin belanglos. vcard ist Maschinen-Syntax. Für Menschen ist es immer noch besser, wenn das Label eines Definitionslisteneintrags lesbar ist. mfg Beat -- ><o(((°> ><o(((°> <°)))o>< ><o(((°>o
-
-
-
-
-
-
-
-
-