nicht angemeldet
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;
}