Antwort an „Matthias Scharwies“ verfassen

Tabelle mit CSS

Matthias Scharwies E-Mail-Adresse des Autors 03.03.2024 12:57 (Versionen)

Hallo erst einmal.

Hallo Darelius,

Ich habe zwar keine Probleme, mit html und Co eine Tabelle zu machen, aber für meine Homepage habe ich immer frames benutzt. Da das "verpöhnt" ist, versuche ich das jetzt mit CSS hinzukriegen, scheitere aber sang und klanglos.

Zuerst: Für Tabelle und Frames hast du HTML benutzt, das solltest du auch jetzt tun!

Hier mein Problem:

Ich habe 2 Blöcke: oben linkes ein Logo (120 px x 100 px) oben rechts eine Navigationsleiste (* x 100 px) unten links eine zweite Navigationsleiste (120 px x *) unten rechts der "Inhalt" mit dem Bildschirlrest.

So weit kein Problem, da brauche ich nciht einmal CSS.

Genau!

Mein HTML würde so aussehen:

<!doctype html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Unbenanntes Dokument</title>
</head>

<body>
<header>
	<a href="/" titel="Zurück zur Startseite">
		<img src="images_logo/logo-cropped.png" width="120" alt="logo" >
		<p role="banner">Text</p>
	</a>
	<nav id="main-nav">
  </nav>
	<nav id="sub-nav">
  </nav>
</header>

<main id="content">

</main>

</body>
</html>

Das Grundgerüst habe ich aus dem entsprechenden Tutorial: HTML/Tutorials/Grundgerüst

header, nav und main werden im Folge-Kapitel erklärt.

ABER:

Ich möchte, daß außer dem Inhalt alle Blöcke immer "fest" verankert sind und wenn der Inhalt zum "scrollen" ist, daß der nicht unter oder über deas andere rollt, sondern nur "seinen" Bereich wirklich hat.

Das nennt sich sticky header und ist imho nichts für die ersten Schritte.

Schau erst mal in das von @Rolf B empfohlene Tutorial:

Aber bitte: verwende nicht <table>. Wie Matthias schrieb: Das ist das Gestaltungsmodell der Urzeit. Beschäftige Dich mit dem Grid-Layoutmodell, es ist für die Seitengestaltung deutlich besser geeignet.

Evtl. überzeugt dich dieses Beispiel: CSS/Tutorials/Grid/ Holy-Grail-Layout

Ich hatte letzte Woche zum ersten Mal einen Platten an einem Rennrad mit Scheibenbremse flicken dürfen.

Damit ich mich vor meinem Sohn nicht blamiere, hatte ich mir das schnell auf Youtube angeschaut. (Man muss die Scheibenbremse mit einem Keil sichern, damit sie nicht „zuklemmt“ - sonst kann man sie komplett auseinandernehmen.)

Bevor ich Holz in die Säge stecke und hinterher zu kurze Teile hab', mach ich mir einen Plan.

Auch benutze ich mehrere Tabellen und weiß nicht, wie ich untscheiedliche Tabellen unterschiedlich mit CSS ansteuern kann, da ich immer nur etwas finde, um alle tabellen zu beeinflussen.

Bitte mach jetzt einen Nachmittag Pause mit dem Tabellen erstellen und lies dich in die HTML-Entwicklung der letzten 20 Jahre ein. Das geht schnell.

Dann guck dir die CSS-Tutorials an. Ja, da wird's schnell ungewohnt - langfristig spart man aber Arbeit.

Die Tabellen müssen - außer wenn es um tabellarische Daten geht - weg!

Zu guter letzt eine Frage dazu: Ist CSS immer noch komplett Browserabhängig oder zeigen die das mittlerweile gleich an?

Gute Nachricht! Es sieht - bis auf Kleinigkeiten - ziemlich gleich aus! Browserweichen und -Hacks sind wirklich nicht mehr nötig!

(habe lange nicht mehr webseiten gemacht, zuletzt vor etwa 20 jahren oder so...)

Also mein Tipp:

einlesen
neue HTML-Struktur
Grid Layout

und dann

STICKY HEADER

Viel Erfolg!

Herzliche Grüße

Matthias Scharwies

--
Die Signatur findet sich auf der Rückseite des Beitrags.