Liebe Jenny,
Schau: neue Navi
da hast Du ja einen schönen Quark angerichtet! Warum hast Du keine Geduld? Jetzt hast Du ja schon wieder die zuvor beseitigten Sünden im Dokument!
Ich zitiere aus Deinem Quelltext:
<body topmargin="0" onload="JSFX_StartEffects()">
<div id="Seite">
<div id="Navigation">
<br />
<nav>
<h2 class="schriftrot">DEIN PFAD ZUM<br />
MOND AWARD
</h2>
<ul>
<li><a href="index.html">Startseite</a></li>
[...]
<li><a href="ACNnews.html">Award Community News</a></li>
</ul><br />
<h1 align="center" style="margin-top:10px"><br />
<a href="http://www.awardsites.com" target="_blank"><img src="bilder/nsb01.jpg" alt="Notable Service AwardSites!" width="120" height="60" border="0" /></a>
<br />
This award program has been rated<br />
by Award Sites! for at least five years . . . <br />
providing notable service through <br />
Bettering The Net by Striving for Excellence! <br />
</h1>
Gehen wir den Wahnsinn der Reihe nach durch:
<body topmargin="0" onload="JSFX_StartEffects()">
Was bezweckst Du mit dem Attribut "topmargin"? Etwa etwas, das das Aussehen steuert? Wolltest Du das nicht CSS erledigen lassen?? Und diese JavaScript-Effekte sind in dieser Form gemeingefährlich! Hör doch bitte mit den Dingen auf, die Du noch nicht wirklich vollkommen durchschaust! Du willst doch lernen, wie es "vernünftig" geht! Dann sei bitte so gut, und lass' den Quatsch weg, bis das Teil auf festen Füßen steht.
<div id="Seite">
Dieses Element wollen wir nicht. Es bietet eine Verschachtelungstiefe, die ausschließlich dazu dient, dass weniger Versierte mit CSS einen Darstellungseffekt erreichen, der ohne dieses zusätzliche <div> mit mehr know-how ebenso erreichbar gewesen wäre. In meinem Beispiel hatte es dieses Elements nicht bedurft. Wieso nun baust Du es wieder ein?
<div id="Navigation">
<br />
<nav>
<h2 class="schriftrot">DEIN PFAD ZUM<br />
MOND AWARD
</h2>
<ul>
<li><a href="index.html">Startseite</a></li>
[...]
<li><a href="ACNnews.html">Award Community News</a></li>
</ul><br />
<h1 align="center" style="margin-top:10px"><br />
<a href="http://www.awardsites.com" target="_blank"><img src="bilder/nsb01.jpg" alt="Notable Service AwardSites!" width="120" height="60" border="0" /></a>
<br />
This award program has been rated<br />
by Award Sites! for at least five years . . . <br />
providing notable service through <br />
Bettering The Net by Striving for Excellence! <br />
</h1>
Hier offenbart sich mir, dass Du mein Beispiel noch nicht genügend studiert hast, denn in Deiner Umsetzung sind diese Dinge sichtbar:
1. Du verwendest ein <div>-Element, um die Link-Liste der Navigation mit ihrer passenden Unterüberschrift ("DEIN PFAD ZUM NOMND AWARD") zu einem größeren Ganzen zu kapseln. Das wollten wir eigentlich mit dem <nav>-Element tun (siehe mein Beispiel). Welchen Sinn soll es übrigens haben, dass die Haupt-Überschrift ebenso im Navigationsteil steht, wenn sie doch zum eigentlichen Inhalt gerechnet werden muss??
2. Du notierst einen wilden Mix aus zum Teil sogar veralteten Attributen, deren einziger Zweck darin besteht, die Darstellung zu beeinflussen ("align", "style"), obwohl es dieser Attribute nicht bedarf, da man das mit CSS wesentlich(!!) eleganter machen könnte. Außerdem notierst Du <br>-Elemente, deren Sinn sich mir nicht erschließen will (versuchst Du zusätzliche Abstände zu erzeugen? -> CSS!!!).
3. Den Sinn und die wahre Macht von CSS hast Du noch nicht verinnerlicht. Daher missbrauchst Du CSS für Klassennamen wie "schriftrot". Die Namen von Klassen sollten die Bedeutung abbilden, keinesfalls das Aussehen! Außerdem kann man mit CSS auch einstellen, dass die Buchstaben alle in Großbuchstaben umgewandelt angezeigt werden sollen. Du aber notierst alles schon im Quelltext in Großbuchstaben... Und ausgerechnet hier hätte es eines Klassennamens überhaupt nicht bedurft, weil man hier in der Navi nur eine einzige Unterüberschrift hat, die sich mit CSS genau selektieren und in ihrer Darstellung steuern lässt (Stichwort: Nachfahrenselektor - siehe mein Beispiel)!
4. Dein Dokument trägt jetzt den Doctype für XHTML, obwohl wir in HTML5 geschrieben haben (siehe Dein erstes Beispiel und meinen darauf folgenden Vorschlag). Warum? Sollen wir uns zuerst über den Sinn und die Bedeutung der verschiedenen Dokumenttypen und HTML-Dialekte unterhalten? In XHTML gibt es kein <nav> und in HTML5 braucht es kein <div id="navi">... und was sonst noch zu den Unterschieden zu wissen wichtig ist.
Alles in allem habe ich das Gefühl, dass Du meinen Code-Vorschlag einfach wieder in Deinen Dreamweaver geladen und mit dem üblichen Müll aus Deiner bereits erstellten Seite verunreinigt hast, weil Du mit der Darstellung alleine arbeitest, anstatt Dich innerlich wirklich davon zu verabschieden, wie etwas aussieht. Du willst mir anscheinend noch immer nicht glauben, dass das Aussehen wirklich erst ganz viel später wichtig wird, und dass zuallererst die Struktur Deines Dokuments bzw. Deiner Dokumente zählt.
Mit meiner Beispielseite wollte ich Dir zeigen, dass das mit dem Aussehen schon noch werden wird, wenn Du nur die notwendige Geduld aufbringen kannst - auch wenn der "spärliche" Code in der HTML-Datei nicht unbedingt danach aussieht.
Ehrliche Frage: Willst Du doch lieber nicht weiterlernen und hier aufgeben, oder willst Du es "vernünftig" machen und saubere, zugängliche Dokumente erzeugen?
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
Felix Riesterer
Matthias Apsel
Gunnar Bittersmann
JürgenB
angeklickt wird, öffnet im iFrame in allen Browsern außer Google Chrome das dazugehörige Bild.
