Seitenaufbau mit CSS oder Tabellen?

[Mickes]

Also ich hab da mal eine Frage^^
Ich habe mal Angefangen eine Homepage zu erstellen. Dann habe ich überlegt ob ich die Seitenstruktur mittels HTML-Tabellen oder per CSS (also mit div Elementen) machen soll. Ich habe jetzt mal eine erste Version mit Tabellen gemacht und bin nur mässig zufrieden.
Was ich zum Beispiel als Vorteil für reine CSS basierende Seiten gelsen habe (und mir auch richtig erscheint) ist, das der Quellcode VIEl übersichtlicher ist und das man Seiten einfacher an versch. Auflösungen anpassen kann.

Aber jetzt wollte ich von euch wissen was ihr für besser haltet. Einen Seitenaufbau mit Tabellen oder mit CSS?

Danke schonmal für eure Ideen...

[Captain]

Ich würde dir raten das zu machen was dir besser gefällt. Ich persönlich mag Tabellen lieber, aber ich bin auch "oldschool". CSS hat seine Vorteile beim Aufbau der Seiten (Geschwindigkeit).

Mit dem heutigen Stand der Browser und der Technik ist es jedenfalls noch egal. In 5 Jahren dürfte CSS die Überhand haben.

[acid]

Wenn du komplett neu Anfängst dir das ganze Zeug anzuschauen würde ich definitiv nicht mehr auf Tabellen setzen. Wie KK schon sagt ist man mit CSS um einiges flexibler als mit einem Tabellenlayout, gerade auch was Accesability (z.B. Zugriff von Mobilgeräten, Ausgabe für Drucker, Gestaltung für Blinde und Suchmaschinen etc) hat man dadurch echte Vorteile. Ein weiterer großer Vorteil ist es, dass man das Layout komplett über eine Datei (dein Stylesheet) steuern kann. Dadurch kannst du auch bei statischen Seiten ohne Probleme schnell Elemente austauschen, ohne am HTML selbst was zu ändern.

Allerdings gibt es auch im tabellenlosen Design nicht nur divs, man sollte seinen Quelltext schon semantisch korrekt schreiben (heißt die nötigen HTML-Attribute für die verschiedenen Sachen verwenden, z.B. h1 - h6 für Headlines, strong für Fettschrift, p für Absätze usw).

Tabellenlayouts haben definitiv keine Zukunft mehr, mein letztes hab ich wohl vor ungefähr drei Jahren gebaut (und selbst das war schon arg CSS-lastig)...

[Mickes]

Ok Also das hört sich für mich eindeutig nach CSS an
Ich habe mich zwar schon eine Weile mit Tabellen beschäftigt, aber ich denke mal, das es noch nich zuspät ist um noch auf CSS umzusteigen...
Die Vorteile die ihr aufgezählt habt überzeugen mich nämlcih schon.

Also danke für eure Antworten^^
Zu gegebener Zeit werde ich dann hier mal die URL posten damit ihr auch mal das Ergebnis zu Gesicht bekommt (das kann aber noch dauern^^)

EDIT:
Also ich glaub ich muss mir das doch nochmal überlegen ob ich das wirklich mal mit einem CSS lastigen Layout teste - Vorteile hin oder her. Ich habe heute bestimmt 3 Stunden damit zugebracht mich durch dieverse Tutorials, Anleitungen, Beispiele, usw. zu lesen. Gebracht hat es nix^^ Ich bekomm nicht mal ein Header mit einem bestimmten Hintergrund hin. Dabei ist das ja theoretisch ganz einfach^^

Man muss doch eig nur auf der HTML-Seite zu der CSS Datei verlinken,

Code: Alles auswählen

 Text  

eingeben und dann in der externen style.css noch

Code: Alles auswählen

 #header {background-image:url(URL_DES BILDES; } 

eingeben. Dann müsste doch eig der Divabschnitt den entsprechenden Hintergrund bekommen! Oder liege ich da jetzt total falsch? Oder muss man da jetzt noch mit Größenangaben und so was rumbasteln? Egal was ich versucht habe es ging nich

Wäre nett wenn mir nochmal jemand helfen könnte oder wenn vll jemand noch eine Seite mit guten Tutorials kennt (möglichst Schritt-für-Schritt Anleitungen und auf deutsch^^)

[Captain]

Also...

Code: Alles auswählen

#header

gefällt mir gar nicht. Wieso versuchst du es nicht mal mit

Code: Alles auswählen

.header

?

[acid]

Nee, das ist schon ok. Es gibt einen gravierenden Unterschied zwischen IDs und Klassen in CSS. EIne ID darf nur einmal vorkommen und wird mit #blalba instanziiert. Eine Klasse mit .(Punkt).

Mögliche Lösung des Problems:

1. Hast du für deinen Header eine Höhe hinterlegt? Wenn da nix drin ist, hat es 0px Höhe und kann kein Hintergrundbild anzeigen.

2. Hast du das CSS in einem Unterordner? Wenn ja, musst von von diesem ausgehend den Pfad ermitteln, nicht von deinem HTML-Dokument aus.

3. Du musst das url auch mit ) schließen, also background-image: url(../pfad/zum/bild.jpg);

Poste einfach mal deinen Quelltext, kriegen wir schon hin. So schwer ist das nicht

Ausserdem musst du dein Stylesheet auch korrekt im HTML referenzieren, also folgendes im Header einfügen:

Code: Alles auswählen

Achte wie gesagt auf deine Pfade!

[Firesale]

Ganz schön kompliziert nur um ein Hintergrundbild einzufügen

[Rechtsteufel]

Also damals, als ich noch jung war, da wurde alles mit HTML gemacht. Das war nicht mal halb so kompliziert wie heute.

[Captain]

Lol. Ein wahres Wort. Also CSS mag eleganter sein, aber man braucht seine Zeit um sich einzudenken. GRDB jedenfalls mag Tabellen. Weil ich sie mag Aber ich bin ja "Ü30".

[acid]

Ganz schön kompliziert nur um ein Hintergrundbild einzufügen

Nein, nicht wirlich, warum auch? Woher soll denn der Container wissen, wie hoch dein Bild ist? Ist bei Tabellen auch nicht anders, wenn da nix drin ist wird kein Hintergrund angezeigt. Ausserdem ists wie gesagt leichter, wenn du das Hintergrundbild mal ändern willst. Oder versuch mal, pixelgenaues Padding (innenabstand) auf eine verschachtelte Tabelle anzuwenden... Viel Spaß damit

Tabellen waren nie für Layoutaufgaben gedacht, sondern wurden von anfang an nur dafür mißbraucht. Und ein komplexes Layout ist mit ein paar Elementen und ein bisschen CSS deutlich flexibler und leichter wartbar als ein Tabellenkonstrukt, dass sich mitunter auch noch schlecht auf Suchmaschinen auswirkt (vor allem wegen der Codegröße, fehlendem Zusammenhang im Quelltext etc...)

Alles in allem ist CSS die beste Lösung, um Webseiten zu schreiben. Dummerweise gibt es halt noch einige alte CM-Systeme und Forensysteme (phpBB), die extrem tabellenlastig sind. Die kriegt man nicht ganz so leicht tableless, leider. Aber wenn man die Wahl hat, immer CSS.

[Mickes]

Also erstmal danke für die vielen Tipps^^
Ich werde sie alle mal morgen ausprobieren, da ich heute nich mehr so viel zeit hab. Also ich schreib dann morgen mal obs mit dem header funzt und was ich sons noch so an problemen finde (werden bestimmt noch einige werden^^)

[acid]

Kein Thema, schreib einfach wenn du Fragen hast.