Hallo Christian,
Auch Kurios: auf meine ursprüngliche Anfrage, ob bei „class“ und „Tabelle“ die „td“ nicht (wie im Tutorial angekündigt) nebeneinander angeordnet werden sollten, gibt es eigentlich noch keine Antwort.
Ich verstehe grad nicht was Du meinst. In beiden Beispielen des Tutorials
werden die <div class="td">
bzw. <div class="spalte">
nebeneinander dargestellt, da das CSS dies so festlegt.
Nur im HTML-Markup stehen sie untereinander, damit es übersichtlicher ist.
Einziger Vorteil, bzw. Anwendungszweck gegenüber einer HTML-Tabelle wäre die Möglichkeit auf kleinen Viewports die Tabellenzellen, bzw. Spalten untereinander zu positionieren. Das zweite Beispiel würde man heute mit CSS-Grid realisieren.
@Matthias Apsel Ich wäre dafür, dieses Tutorial mit HTML/Tutorials/responsive_Webdesign/bestehende_Webseiten_umbauen zu verschmelzen, bloß wie?
Kuriosum: Viele Stellen in Tutorien haben mich veranlasst, meine ursprünglichen Tabellen in pro-re-publica.de/index.php und pro-re-publica.de/abcWortSachReg.php und crh-pp.de/sitemap.php mit div umzubauen. Riesenarbeit, die nach Euren Anmerkungen jedenfalls für zweispaltige Listeb überflüssig war.
Genau! Statt der Technologie für 1995 hast du jetzt den Stand von 2005.
Das Ergebnis ist wohl ziemlich monströs aber der validator findet alle 3 fehlerfrei. Auch den Gebrauch von „style“ beanstandet er nicht. (Mir ist ein monströser code, den ich verstehe, lieber als ein eleganter, den ich noch nicht begriffen habe. Bei vielen Seiten steht die Trennung von der Tabellenlösung noch an.)
Das ist ja auch alles richtig.
Einfacher ist es jedoch alle CSS-Formatierungen an einer Stelle zu haben. Dann sieht deine Webseite auch überall gleich aus!
Ich würde zuerst ein Layout entwickeln und in einer style-Datei abspeichern.
Dann binde ich dies im Grundgerüst ein:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="stylesheet.css">
<title>Titel der Seite | Name der Website</title>
</head>
<body>
...
</body>
</html>
Dann würde ich mir die Seiten mit Fließtext vornehmen und Überschrift in H1, h2 und h3 setzen, den Fließtext in p auszeichnen.
Einiges kanst du mit einem guten Editor erledigen, wenn du mehrere HTML-Dokumenten öffnest und dann in allen Dokumenten ersetzt. Trotzdem musst Du da noch mal drüberschauen.
Herzliche Grüße
Matthias Scharwies
Ήταν διασκεδαστικό όσο κράτησε.
Χρύσιππος ὁ Σολεύς, 220 π.Χ.