nicht angemeldet
Hallo, Jan,
http://www.mothertonguelives.de
(http://www.mothertonguelives.de/mtl.css)unter (alle für windows) opera 6.05, mozilla 1.2.1 und ie 6.0 gebastelt und getestet. heute hab ich mir testweise mal opera 7.1 installiert und der zerschiesst das layout, indem er die margin-top:145px zuweisung der tabelle (table.norm) auf die image-map (.menue) anwendet.
Das Stylesheet ist ziemlich vermurkst. Das position:absolute ist gänzlich unnötig und kann herausgenommen werden. Der Bogen, also das komplett div-Element mit class="bogen" kann auch entfernt werden zugunsten eines Hintergrundbildes von menue. Dann käme in etwa .menue {margin:0; height:148px; background-image:url('bogen000.gif'); background-position:525px 0; background-repeat:no-repeat;} heraus, besser wäre natürlich eine ID, also <div id="menue"> und #menue {...}, weil das Element nur einmal pro Dokument vorkommt. margin-top bei .norm kann dann verschwinden.
das ist meine erste webseite, die ich programmiert habe und würde mich natürlich auch freuen, wenn ihr andere unzulänglichkeiten oder besseren code finden bzw vorschlagen könntet. danke schon mal.
Wenn du CSS verwendest, kannst du auch das Tabellenlayout aufgeben und float/margin oder position:absolute (aber diesmal richtig) verwenden.
Die Validatoren (http://validator.w3.org//http://jigsaw.w3.org/css-validator/) kannst du selbst befragen.
Anstatt <meta name="language" content="de"> besser lang="de" für das html-Element. Der revisit-after-Metatag hat im Grunde keine Bedeutung, daran hält sich kein Spider.
Du könntest durchaus HTML 4.01 Strict schreiben.
.middlebox und .rightbox scheinen unnötig, wenn du weiter an den Tabellen festhältst, kannst du Innenabstände mittels padding(-top) für die Zellen vergeben.
Die Schrift in der Navigation oben erscheint mir sehr klein. Im Allgemeinen sind 10 Pixel für die Fließtextschrift natürlich auch zu klein, auch wenn Verdana es ein wenig rettet.
Benutze logisches Markup, also p-Elemente für Absätze anstatt <br><br>, h1, h2 usw. für Überschriften, ul für Listen etc. Momentan hebst du Überschriften nur mit dem b-Element hervor. Für Hervorhebungen, welche nicht mit Überschriften oder anders strukturiert werden können, ist das strong-Element besser als <b>.
Wenn du die Links in der Sekundärnavigation fett formatieren willst, dann zeichne die Links mit einer ul-Liste aus, fasse die zusammen mit dem gewählten Menüpunkt darüber in ein div-Element (das kannst du dann als linke Spalte positionieren) und formatiere alle Links darin fett (#nav a usw.).
In alt-Attribute von Bildern gehört eine Alternativbeschreibung des Inhalts, nicht der Dateiname, siehe auch http://www.bjoernsworld.de/html/alt-text.html. Du kannst das title-Attribut für einen Bildtitel verwenden, welcher zusätzlich zum Bild angezeigt wird. Style-Attribute kannst du durch Verwendung von Klassen vermeiden, so musst du nicht jedem floatenden Bild Inline-Styles verpassen.
In width-Attributen dürfen keine Einheiten vorkommen, also width="150" statt width="150px". Aber verwende wie gesagt besser CSS-Layout.
Ferner kannst du die Hinweise und Links auf http://www.dciwam.de/checkliste/ selbständig durcharbeiten.
Grüße,
Mathias