[HaBo]

Cyberm@ster

Anzeige

Mit den CSS-Grundlagen kenn ich mich einigermaßen aus, habe CSS aber bisher nur als Ergänzung zu den HTML-Formatierungen verwendet. Nun möchte ich meine Website aber mit CSS neu layouten und dann mit PHP aufbauen, da Frames ja [understatement]ziemlich[/understatement] veraltet sind. Was mich zu meiner Frage führt (die so hoffentlich noch nicht behandelt wurde):

Wie erstellt man am besten CSS? Macht ihr das manuell oder habt ihr da nützliche Tools bzw. Tipps?

LX

Manuell. Aber das entscheidende ist, die Seite nicht nach dem CSS aufzubauen, sondern das CSS nach der Seite. Wenn du also eine vernünftige Trennung zwischen Inhalt und Style haben willst, dann erstelle deine Webseite so, dass zusammengehörige Bereiche in entsprechende DIV-Container gepackt werden.

Z.B. könntest du eine Seite in verschiedene Inhaltsbereiche aufteilen... einen Kopf, die Navigation links und den eigentlichen Content rechts. Alle 3 Bereiche sind jeweils DIVs auf der gleichen Ebene, mit einer ID eindeutig gekennzeichnet. Die Bereiche lannst du dann getrennt befüllen, den Kopf mit 'ner Grafik oder so, die Navigation mit einer Liste der Navigationselemente und den Inhalt wiederum mit einzelnen Abschnitten.

Dann kannst du mittels CSS innerhalb deiner angelegten Bereiche die entsprechenden, darin vorkommenden Seitenelemente ansprechen, beispielsweise also Listen in der linken Spalte so formatieren, wie eben die Navigation aussehen soll, in der rechten Spalte aber so, wie eben eine Liste im Inhalt aussehen soll. Und wenn du dein Markup möglichst universell machst, kannst du mit verschiedensten Stylesheets aus dem gleichen HTML-Code völlig verschieden aussehende Seiten basteln.

__________________
"Ever tried. Ever failed. No matter.
Try again. Fail again. Fail better."
- Samuel Beckett

JS BB LX UP

Cyberm@ster

Ok das hat mir schon geholfen, danke.

Wenn ich richtig verstanden habe, soll ich zuerst die Struktur aufbauen, dann die nötigen IDs und CLASSes definieren und dann die CSS erstellen, nach den verschiedenen Elementen wie Header, Footer, Content, Navigation gegliedert?

Was ist eigentlich der Unterschied zwischen IDs und CLASSes, bzw. was sind die Vor- und Nachteile?

vis.p

Also für mich war selfhtml ein guter startpunkt um meine css-kenntnisse zu vertiefen. Und mal ehrlich ausser für Werbung auf Freehostingseiten braucht man heutzutage wirklich keine Frames mehr. Das geht mit CSS logischer und konsequenter.

http://de.selfhtml.org/css/layouts/index.htm
oder auch:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm

viel spass beim layouts erstellen

visp

Cyberm@ster

Ja SelfHTML ist genial, auf dessen Basis hab ich damals HTML (und etwas CSS) gelernt. Aber danke für die direkten Links, sieht interessant aus. Dass man keine Frames mehr braucht, ganz im Gegenteil, brauchst du mir nicht zu sagen, ich weiss schon warum ich meine Website überarbeiten möchte ...

LX

Eine bestimmte ID darf es nur einmal auf der Seite geben, Klassen wiederum können sooft verwendet werden, wie du willst. Es bietet sich daher an, die Inhaltsbereiche selbst (Kopf, Navigation, Content, Footer usw.) mit einer ID eindeutig zu bestimmen, deren Inhalte dann mit Klassen (wo sinnvoll).

Du kannst natürlich auch alles mit Klassen machen, aber auf diese Weise hättest du im Stylesheet auch noch eine Unterscheidung zwischen Inhaltsbereichen (#header) und einfachen Elementen (.navigationslink).

__________________
"Ever tried. Ever failed. No matter.
Try again. Fail again. Fail better."
- Samuel Beckett

JS BB LX UP

Cyberm@ster

Ok danke, ich glaube ich hab verstanden. Ich werde mir SelfHTML dann noch einmal gut durchlesen. Und Gratulation zum Source Code deiner Website, der ist echte Qualitätsarbeit