Ertes Layout komplett in CSS, wie ist es?

[Gohan]

http://www.seijin.de/csstest/test2.htm

Habe mich heute zum ersten mal durchgerungen ein Design in CSS und nicht in html mit Tabellen zu schreiben. Wie findet ihr es?

Da ich nun in der Homepage AG meiner Schule bin, wollte ich, als einzigster der auch nur einen Funken Ahnung hat, das Design etwas umkrempeln (besser gesagt, totaler Neubau, da es der leitende Lehrer es sich auch so gewünscht hat.

[Nase]

Sieht schon nicht schlecht aus. Zwar schlicht und einfach, hat aber was. Was ich allerdings noch verändern würde, ist die Schrift. So würde ich die Zeilenhöhe deutlich erhöhen (line-height) und auch den Abstand zum Foto vergrößern. Für die Überschrift hätte ich eine andere Schriftart und -farbe gewählt. Vielleicht auch noch ein Stück größer. Beim Menü kannst du die Abstände zwischen den Links auch per CSS machen (margin oder padding) und nicht durch non-breakable-spaces. Den Container um das Logo kannst du dir vermutlich sparen.

P.S.: Und du hast echt kein HTML für die Seite verwendet? Respekt :D.

[Gohan]

Sieht schon nicht schlecht aus. Zwar schlicht und einfach, hat aber was. Was ich allerdings noch verändern würde, ist die Schrift. So würde ich die Zeilenhöhe deutlich erhöhen (line-height) und auch den Abstand zum Foto vergrößern. Für die Überschrift hätte ich eine andere Schriftart und -farbe gewählt. Vielleicht auch noch ein Stück größer. Beim Menü kannst du die Abstände zwischen den Links auch per CSS machen (margin oder padding) und nicht durch non-breakable-spaces. Den Container um das Logo kannst du dir vermutlich sparen.

P.S.: Und du hast echt kein HTML für die Seite verwendet? Respekt :D.

Also etwas html schon, aber keine einzige Tabelle oder Font-Tag ;) Das mit deinen Vorschlägen werde ich mal gleich ausprobieren. Wobei ich keine Ahnung habe, wie ich mit Padding die Abstände zwischen den Wörtern vergrößern kann :confused:

Edit:
So, bis auf den Absteand im Menü, Änderungen übernommen und für gut befunden :D

[Nase]

Also etwas html schon, aber keine einzige Tabelle oder Font-Tag ;) Das mit deinen Vorschlägen werde ich mal gleich ausprobieren. Wobei ich keine Ahnung habe, wie ich mit Padding die Abstände zwischen den Wörtern vergrößern kann :confused:

Edit:
So, bis auf den Absteand im Menü, Änderungen übernommen und für gut befunden :DJa, gefällt mir schon viel mehr. Was mir gerade nur noch auffällt: Vor und nach einem Schrägstrich kommt kein Leerzeichen. Mein ich wenigstens.

Zu den Links: Einfach bei a.menu noch ein padding: 0 2px oder so eintragen. Wie groß du den Abstand machst, musst du gucken. So gibts dann jedenfalls links und rechts neben einem Link einen Abstand von 2px. Kannst aber auch einfach padding-right: 4px machen.

[Gohan]

Ah, geschafft, danke dir vielmals! Dann warte ich mal auf weitere Kritik! :)

[Nase]

Ah, geschafft, danke dir vielmals! Dann warte ich mal auf weitere Kritik! :)
Bitte ;). Du musst aber noch die nbsp;s aus dem Quelltext löschen, sonst machts keinen Sinn ;).

Und den Code kannst du zudem auch noch optimieren. Ich zähl mal ein paar Sachen auf, die man machen kann, aber weder muß noch braucht.

- Bei dem Menü kannst du dir in den Link das class="menu" sparen. Dafür musst du aber aus a.menu ein #menu a machen. Spart ein paar Zeichen im Quellcode.
- In der CSS-Datei würde ich nicht alles, was zu einer Klasse gehört, nebeneinander schreiben. Das wird sehr schnell sehr unübersichtlich.
- Gib den Bilder einen alternativen Text (eventuell sogar noch einen Titel).
- Hier steht noch class ="foot". Da ist ein Leerzeichen zuviel.
- Beim Foto im Text steht width="320 height="179". Anführungszeichen fehlt nach width.
- Du kannst mit dem Doctype auch direkt auf Strict gehen. Sollte kein Problem darstellen.

[Flipper]

Ich würd das "hover" bei den Links etwas deutlicher machen. Nur die Unterstreichung ist etwas wenig finde ich, probiers mal mit dem Verändern der Farbe. Die Links selbst würd ich etwas hmm hervorheben oder "voneinander trennen". Die sehen imho etwas "wie in einer Wurst dahingeschrieben" aus.

Ansonsten wie schon gesagt: Schlicht und gut (auf den ersten Blick). Ich persönlich würd probieren, ob ich in den Banner oben vielleicht noch ein zweites Bild einarbeiten kann (und es gut aussieht).

[Gohan]

Danke, ja der Banner ist noch nicht fertig, da wird noch das offiziele Schul-Logo rein kommen.

Zu den Links, da werde ich mal gleich was probieren :)

[astanoth]

Es gibt da noch einge Sachen, die man verbessern kann, aber nicht zwingend muss.

1. Auch Textbrowsern die volle Navigation bieten. Also z.B. nicht nur durch ein Bild zeigen, was das überhaupt für eine Seite ist. Zum testen einfach mal Stylesheet und/oder Bilder deaktivieren. Ich würde erstmal alle Bilder über das Stylesheet definieren (background: url(image.jpg) no-repeat;) und alle wichtigen Navigationsmenus in eine Liste schreiben (<ul><li><a href="#">Home</a></li></ul>). Biete doch auch z.B. ein <h1>, um zu zeigen, was das überheupt für eine Seite ist.

2. Man kann viel mittels CSS verschönern. Wie schon genannt evtl. erstmal die Schriftart und dann z.B. p:first-letter{ font-size: 110%;}. Probier in der Richtung einfach mal ein paar Dinge aus.
Auch fällt auf, dass du die CSS-Datei nur marginal gliederst. Alle Attribute in eine reihe schreiben kann nerven und unübersichtlich werden, sollte die Datei länger werden.

3. Designtechnisch stört der große Abstand und der starke Kontrast zwischen Logo und menu. Auch der orange Footer stört etwas. Bilder kann man auch aufwerten, indem man sie über die CSS-Datei verschönert.
Simplizismus ist zwar häufig besser als überladenheit, aber in dem Fall sind die Kontraste etwas sehr hart.

Das fiel mir nur so spontan ein.

[geforce]

Um das Bild bzw. um alle Bilder würde ich einen 1px-Rand in Schwarz machen, wirkt meiner Meinung nach viel edler ... und am Text musste auch noch was machen, der Blocksatz wirkt irgendwie komisch ...

MfG Richard ;)