unsichtbare links

[Felix Riesterer]

Liebe(r) boo,

auf http://www.pascalmoehlmann.com finde ich (unter anderem) folgenden Code:

<table width="250" border="0" cellspacing="0" cellpadding="0" height="300"><div id="stuff" style="position:absolute; width:400px; height:45px; z-index:5; left: 20px; top: 140px"><a href="galleryofidiots.htm"><img src="images/transparent.gif" width="400" height="45" border="0"></a> </div>  
  
<div id="stuff" style="position:absolute; width:550px; height:45px; z-index:5; left: 20px; top: 205px"><a href="paintings2006-2007.htm"><img src="images/transparent.gif" width="550" height="45" border="0"></a> </div>  
  
<div id="stuff" style="position:absolute; width:550px; height:45px; z-index:5; left: 20px; top: 270px"><a href="paintings1998-2005.htm"><img src="images/transparent.gif" width="550" height="45" border="0"></a> </div>  
  
<div id="stuff" style="position:absolute; width:250px; height:45px; z-index:5; left: 20px; top: 335px"><a href="drawings.htm"><img src="images/transparent.gif" width="250" height="45" border="0"></a> </div>  
  
<div id="stuff" style="position:absolute; width:270px; height:45px; z-index:5; left: 20px; top: 400px"><a href="biography.htm"><img src="images/transparent.gif" width="270" height="45" border="0"></a> </div>  
  
<div id="stuff" style="position:absolute; width:220px; height:45px; z-index:5; left: 20px; top: 465px"><a href="contact.htm"><img src="images/transparent.gif" width="220" height="45" border="0"></a> </div></table>  

Dieser Code ist sowas von gegen die Regeln der Verschachtelung, dass jeder Browser nun raten darf, was er damit anstellen soll. Ein Wunder, dass Firefox Deine Seite überhaupt so darstellt, wie Du das beabsichtigt hast!

1.) Ein <table> Element enthält _nur_ Elemente wie <thead>, <tbody>, <tfoot>   oder <tr>. Bei Dir stehen da jede Menge <div>s...

2.) Eine ID darf innerhalb des gesamten Dokuments nur einmal verwendet werden. Bei Dir erscheint die id="stuff" mehrmals. Nimm bitte eine class anstelle der ID in Deinen Divs!

Soweit zu den "schlimmen" Sachen. Nun noch ein Hinweis:
4.) Wenn Du schon eine class verwendest (ich gehe jetzt davon aus, dass Du id="stuff" durch class="stuff" ersetzt), dann kannst Du auch diese inline-Styles mit den positions in ein externes Stylesheet schreiben und dort der Klasse geben, anstatt Dein HTML-Dokument damit zuzumüllen.

Je mehr ich darüber nachdenke, desto mehr komme ich zu einem völlig neuen Ansatz:

5.) Deine "stuff"-Teile sind ja eigentlich Deine Links... oder nicht? Damit möchte ich bei diesen Links von Deiner Navigation sprechen. Eine Navigation erstellt man üblicherweise mittels einer Liste (also <ul> oder <ol>).
Wenn ich das aber richtig sehe, möchtest Du lediglich die in der Grafik fest eingetragenen Wörter verlinken, stimmt's? Dazu nimmst Du dann bitte eine http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm#definieren@title=image-Map, der Du Deine "images/index.jpg" zugrunde legst. Mittels eines Grafikprogramms kannst Du dann die korrekten Koordinaten Deiner Links bestimmen und als area-Angaben eintragen. Vergiss aber um Himmels Willen nicht die alt-Angaben! Nicht nur Suchmaschinen sind darauf angewiesen...
Dann brauchst Du auch nicht mehr mit den transparenten Bildern herumzufuhrwerken oder gar auf Javascript bauen (was bei einer Navigation das Ungünstigste ist, was man tun kann!).

Liebe Grüße aus Ellwangen,

Felix Riesterer.