Kritik an neuem Seitenlayout erwünscht!

[Christoph Müller]

Hallo,

ich bin gerade dabei, meine nunmehr 8 Jahre alte Seite http://www.abfaelligedanken.de/, die selbstgeschriebene Gedichte und Musik von mir beinhaltet, komplett neu zu gestalten. Meine alte Seite baut noch auf Tabellen und Javascript etc. auf, bei meiner neuen Seite wollte ich - auch im Zuge der Barrierefreiheit - ausschließlich CSS zum Einsatz kommen lassen.
Zum Erstellen der Seite habe ich Kompozer verwendet, mich aber hauptsächlich im Quelltext bewegt, um einen möglichst sauberen Code zu erzeugen. Von CSS hatte ich Anfangs gar keine Ahnung; da ich vor Kurzem zwei Wochen Urlaub hatte, habe ich ein paar Tage genutzt, um mir zumindest - auch mit Hilde von SELFHTML (vielen Dank!) ein Grundwissen anzueignen.
Mittlerweile steht das Layout fast komplett; ich habe mich bewusst für eine starre Breite von 760 px entschieden, in der noch einmal ein zentrierter, 520 px großer Container für die Gedichte und Kurzgeschichten steckt, um eine lesefreundliche Zeilenlänge zu bekommen. Das Ganze soll ein wenig Buchcharakter bekommen.
Für das Inhaltsverzeichnis habe ich ein zweispaltiges Layout angelegt. Meine horizontale Navigation habe ich bewusst linksbündig ausgerichtet, weil gut layoutete Gedichtbände meist auch linksbündig angelegt sind (viele Leute neigen gerade bei Gedichten ja schnell dazu, alles zu zentrieren, was dann aber typographisch recht langweilig wirkt) und ich das einfach optisch interessanter finde. Das Menu ist eine unsortierte Liste, die ich über CSS ist Form gebracht habe.
Als Einheit für die Schrift habe ich em verwendet, damit auch der letzte IE 5.5. Benutzer mit schlechten Augen die Schriftgröße erhöhen kann ;-). Bei den CSS-Boxen meines Layouts habe ich deshalb entsprechend darauf geachtet, die Schriftgröße erst in der jeweils "untersten" Ebene zu definieren, damit die Schrift nicht im verschachtelten Layout immer kleiner wird (bis ich das erstmal geschnallt hatte ;)).
Ich bin vorerst zufrieden, aber mein Kopf raucht aufgrund der vielen Informationen, die ich mir in den letzten Tagen angelesen habe, und ich wäre dankbar, wenn der ein oder andere sich mal meine Seite und deren CSS/HTML ansehen könnte, da ich - wie gesagt - absoluter Einsteiger bin und es bestimmt noch Fehler und Tücken gibt, von denen ich gar nichts ahne ;)!

Hier ist eine Demoseite:
http://www.abfaelligedanken.de/neu/

Besten Dank und viele Grüße,
Christoph

Hier mein CSS-Code:
body {
  background-color: #333333;
  padding-top: 2%;
  padding-bottom: 2%;
  font-family: Arial,Helvetica,sans-serif;
}
h2 {
  margin-top: 0px;
  margin-bottom: 25px;
}
h4 {
  margin-top: 0px;
  margin-bottom: 25px;
}
a {
  color: #ff9900;
  text-decoration: none;
}
a:hover {
  color: white;
  text-decoration: underline;
}
#page-container {
  border: 3px solid white;
  margin: auto;
  width: 760px;
  background-color: black;
}
#header {
  height: 150px;
  background-image: url(images/header.jpg);
}
#navigation {
  width: 100%;
  float: left;
  background-color: #333333;
}
#navigation ul {
  margin: 0px;
  padding: 0px;
  letter-spacing: 2px;
  font-size: 0.8em;
}
#navigation ul li {
  display: inline;
}
#navigation ul li a {
  border-right: 1px solid white;
  padding: 3px 10px;
  text-decoration: none;
  color: white;
  float: left;
}
#navigation ul li a:hover {
  background-color: #ff9900;
  color: black;
}
#content {
  margin-right: auto;
  margin-left: auto;
  color: white;
  padding-top: 25px;
  line-height: 1.3em;
  font-size: 0.9em;
  clear: both;
  width: 520px;
}
#left {
  float: left;
  width: 49%;
}
#right {
  float: right;
  width: 49%;
}
#subnav {
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 25px;
  clear: both;
  width: 520px;
  padding-top: 25px;
}
#footer {
  padding: 3px;
  background-color: #ff9900;
  text-align: right;
  clear: both;
  font-size: 0.7em;
}
a.button {
  border-style: solid;
  border-width: 1px;
  padding: 3px 10px;
  color: white;
  text-decoration: none;
  letter-spacing: 2px;
  background-color: #333333;
  margin-right: 5px;
  font-size: 0.8em;
}
a.button:hover {
  border: 1px solid white;
  background-color: #ff9900;
  color: black;
  text-decoration: none;
}
.box {
  border: 1px solid #333333;
  padding: 5px;
  display: block;
}

[Stefan]

Hallo,
wenn Du möchtest, sage ich Dir meinen ersten Eindruck: Viel zu
düster, hat in etwa den Flair eines Leichenbestatters.
Gruß

[Christoph Müller]

Hallo,
wenn Du möchtest, sage ich Dir meinen ersten Eindruck: Viel zu
düster, hat in etwa den Flair eines Leichenbestatters.
Gruß

Hallo Stefan,

damit kann ich gut leben, es soll nämlich - zumindest ein wenig - düster sein ;-)!

Gruß,
Christoph

[3vi1]

Hallo,

als mir gefällt deine neue Seite ganz gut, das einzige was ich nichts so mag sind die sehr viele untereinander gestapelten Links. Ich fände es besser wenn es nicht gar so viele auf einer Seite wären oder zumindest ab und zu mal ein Absatz oder eine andere Form der Strukturierung um dem Auge mal eine Pause zu gönnen.

Gruß

Markus

[Christoph Müller]

Hallo Markus,

danke, freut mich, wenn Dir die Seite gefällt!
Die vielen Links sind echt nicht so toll, ist halt eine ziemlich lange Liste. Ich hatte sie zuerst - so wie auf der alten Seite - komplett über Absätze formatiert, was dann aber wirklich elend lang wurde.
Vielleicht ist es gar keine schlechte Idee, alle 10 Links oder so mal einen Absatz reinzubringen!

Viele Grüße,
Christoph

Hallo,

als mir gefällt deine neue Seite ganz gut, das einzige was ich nichts so mag sind die sehr viele untereinander gestapelten Links. Ich fände es besser wenn es nicht gar so viele auf einer Seite wären oder zumindest ab und zu mal ein Absatz oder eine andere Form der Strukturierung um dem Auge mal eine Pause zu gönnen.

Gruß

Markus