nicht angemeldet
Lieber Florian,
bei allem ersten optischen guten Eindruck, Deine Seite verdient ein anständiges _semantisches_ Markup!
<!-- HIER BEGINNT DER BANNER -->
Wen bannt _der_ Banner denn? *SCNR*
<div class="banner">
Gibt es so viele Banner auf Deiner Seite, dass Du anstatt einer ID lieber eine ganze Klasse definierst?
<div class="banner_brk">
Wir es mehrere brk_Banner geben?
<img class="brklogo" src="brklogo.gif">
Diesem Bild fehlt ein alt-Attribut. Wenn jemand keine Bilder anzeigen kann/will, dann sieht er nix gescheites. Überhaupt ist es gerade hier sinnvoller, das Bild als Hintergrundbild einzubinden.
Und wenn Du schon den ganzen Header in ein <div> mit der Klasse "banner" einschließt, dann verwende doch CSS-Selektoren, um die jeweiligen Bestandteile des Headers zu "greifen", anstatt alles in ein eigenes <div> mit eigener Klasse weiterzuverpacken! Das macht das HTML noch pflegeleichter!
</div>
<div class="banner_text">
BRK Bereitschaft Feucht - Schwarzenbruck
</div>
Warum sitzt dieser Text (bedeutungslos) in einem <div>, anstatt in einem (bedeutungshaften) <h1>-Element, Textabsatz oder ähnlichem?
<div class="termine">
<font color="#3366CC"><b><img src="info_symbol.png"></b></font>
<marquee class="news" direction="up" scrollamount="1">
<hr color="#FF0000" size="0.2px">
<font color="#FF8000">05.03.2006</font>
Aha, hier mischt sich modernes CSS-Design mit mittelalterlichen <font>-Tags.
Wozu muss eigentlich dieses Marquee sein? Als ich den Link gerade anklicken wollte rutschte er unter dem oberen Rahmen weg.
Es wäre - meiner Meinung nach - sinnvoller, dem Ganzen mit weniger <div>-Suppe und Klassen-Gemüse ein wirklich semantisches Markup zu geben. Den Header mit "Banner" kannst Du sinnvoller auf eine größere Hintergrundgrafik reduzieren (das große Rotes-Kreuz-Symbol kann Bestandteil des großen Hintergrundbildes sein!), die Du einem sinnvollen HTML-Element (keinem <div>!) mit passender ID geeigneten padding- und margin-Werten verpasst.
Was das Menü links am Rande angeht:
<div class="links">
<a class="navi" href="index.htm">Home</a>
<a class="navi" href="gliederung.htm">Gliederung</a>
(usw.)
<a class="navi" href="http://www.bereitschaften.brk.de/nuernberger-land/feucht/gaestebuch.php">Gästebuch</a>
<a class="navi" href="externelinks.htm">Links</a>
<br>
<br>
<img class="rd" src="rd.gif">
</div>
Wie man das besser macht, steht in SelfHTML im Kapitel der CSS-basierten Navigationsleisten. Selbstverständlich sollte die Navi auch eine feste ID anstatt einer Klasse haben, oder hast Du wirklich vor, mehrere Navis mit diesem CSS anzubringen?
Diese viele HTMl-Code-Kritik mag jetzt vielleicht etwas verärgern, aber nach meiner eigenen schmerzvollen Erfahrung ist das gerade bei dynamischen Seiten enorm wichtig, den HTML-Teil so schlank und übersichtlich wie möglich zu halten, weil dann die Pflege bzw. Erweiterung der Seite wesentlich besser gelingt. Auch mit dem CSS tut man sich dann leichter, weil man dann schöne Kontext-Blöcke bilden kann.
Ein fiktives Beispiel, das Deiner Seite entnommen sein könnte:
#header { background: url(mein/bild.png) no-repeat top left; margin: 0; padding: 0; width: 345px; height: 123px; }
#header h1 { color: #123456; font-family: Helvetica, Verdana, sans-serif; font-size: 5em; margin: 60px auto 0 200px; padding: 0; }
#header div { background: url(mein/rahmen.png) top left no-repeat; }
#header div marquee { font-size: 0.7em; color: #987654; width: 100px; height: 100px; margin: 0; padding: 0; }
Dadurch gewinnt man schneller im CSS einen Überblick, da man die Nchfahrenelemente mit dem Nachfahrenselektor sinnvollerweise unter das Vorfahrenelement schreibt. Dadurch nutzt man auch automatisch eine der Stärken von CSS und erspart sich ne Menge Klassen, die zu pflegen wesentlich aufwendiger wäre.
Im HTML-Teil stünde dann nur noch knapper Code (wiederum fiktiv):
<body>
<div id="header">
<h1>BRK Bereitschaft Feucht - Schwarzenbruck</h1>
<div>
<marquee>blablabla</marquee>
</div>
</div>
<div id="content">
<h2>Überschrift</h2>
<p>Das ist noch nicht die Homepage...</p>
</div>
<div id="navi">
<h2>Navigation</h2>
<ul>
<li><a class="navi" href="index.htm">Home</a></li>
<li><a class="navi" href="externelinks.htm">Links</a></li>
</ul>
</div>
Liebe Grüße aus Ellwangen,
Felix Riesterer.
MudGuard