nicht angemeldet
Lieber dontello,
ich poste mal meinen code.
mal sehen...
<body>
<div id="design1"></div>
<div id="design2"></div>
<a href="index.html" id="design3">xy</a>
<a href="about.html" id="design4">xy</a>
<a href="music.html" id="design5">xy</a>
<a href="turtle.html" id="design6">xy</a>
<a href="blog.html" id="design7"></a>
<a href="contact.html" id="design8"></a>
<div id="design9"></div>
Also bevor ich mir in einem solchen Fall das CSS überhaupt erst anschaue, müsste Dein Code sinnbehafteter ("semantischer") sein. Insbesondere die IDs sollten "sprechende" Namen tragen. "Design1" sagt mir so absolut überhaupt nichts. "Header" sagt mir dagegen wesentlich mehr. Ich mache einmal - <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=analog zu diesem SELFHTML-Kapitel> - folgenden Vorschlag:
~~~html
<div id="header"></div>
<div id="header2"></div>
<div id="navigation">
<h2>Navigation</h2>
<ul>
<li><a href="index.html" id="home-link">Startseite</a></li>
<li><a href="about.html" id="about-link">Über das Ganze hier</a></li>
<li><a href="music.html" id="music-link">Musik</a></li>
<li><a href="turtle.html" id="turtle-link">Turtle</a></li>
<li><a href="blog.html" id="blog-link">Mein Blog</a></li>
<li><a href="contact.html" id="contact-link">Kontakt / Impressum</a></li>
</ul>
</div>
<div id="footer"></div>
So. Jetzt hat der HTML-Code viel mehr Sinn. Das solltest Du unbedingt beherzigen! Und mit diesem Sinn im Hinterkopf fällt auch das Gestalten mittels CSS wesentlich leichter, da Du nun viel genauer im Stylesheet sehen kannst, wo da was wie warum aussehen soll.
Die Unterüberschrift für die Navi habe ich dazugeschrieben, da eine Suchmaschine oder ein Besucher ohne CSS dann trotzdem mit Deiner Seite spielend zurecht kommt, denn die Links (die fein säuberlich in einer Liste verpackt sind) stehen unter dieser Überschrift und werden dadurch als Deine Seitennavigation sofort erkenntlich. Sehen muss man die bei vorhandenem CSS natürlich nicht (#navigation h2 { display:none; }), aber sie sollte der Barrierearmut wegen unbedingt dort stehen.
css code:
a#design3 {
background-image:url("images/design3.png");
width: 56px;
height: 138px;
margin-left: 421px;
margin-top: 0px;
display:block;
text-indent: -1000px;
}
Tja, was will mir a#design3 wohl sagen? Würdest Du nach drei Monaten noch wissen, dass "design3" Dein Link zur Startseite ist? Vergleiche einmal:
~~~css
#navigation #home-link {
background-image:url("images/design3.png");
margin-left: 421px;
...
}
Da sieht man doch sofort, was da gemeint ist, oder? Das ist der Vorteil von sinnbehaftetem ("semantischem") Markup. Versuche doch einmal, diese Vorgehensweise beizubehalten!
Liebe Grüße aus Ellwangen,
Felix Riesterer.
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)