unsichtbare links

[boo]

hallo zusammen

ich bin ein anfänger mit html und habe folgendes problem:
habe gerade an der webseite meines freundes gearbeitet und unsichtbare links eingebaut.
auf safari und firefox klappt alles prima. im internetexplorer können die links jedoch nicht angeklickt werden. nicht mal das händchen wird angezeigt.
an was könnte das liegen?

hier die seite: www.pascalmoehlmann.com

die sechs weissen schriften links sollten links sein...

wäre superfroh, wenn mir jemand helfen könnte, weiss echt nicht, an was das liegen könnte.

danke und liebe grüsse
boo

[Rouven]

Hello,

wäre superfroh, wenn mir jemand helfen könnte, weiss echt nicht, an was das liegen könnte.

ich schieß mal ins Blaue: die Fehler auf der Seite hindern den IE am korrekten Rendern - räum mal die groben Schwächen aus, insbesondere dieses kaputte Attribut mit dem ; nach dem ".

MfG
Rouven

[splinter]

Hallo

ich schieß mal ins Blaue: die Fehler auf der Seite hindern den IE am korrekten Rendern - räum mal die groben Schwächen aus, insbesondere dieses kaputte Attribut mit dem ; nach dem ".

Nach meinen Erfahrungen ist es sehr ungeschickt mit dem w3-Validator nach Fehlern zu suchen, da dieser welche Anzeigt die gar nicht vorhanden sind.

MfG

splinter

[Detlef G.]

Hallo splinter

Nach meinen Erfahrungen ist es sehr ungeschickt mit dem w3-Validator nach Fehlern zu suchen, da dieser welche Anzeigt die gar nicht vorhanden sind.

Welche denn?

Auf Wiederlesen
Detlef

[Cheatah]

Hi,

Nach meinen Erfahrungen ist es sehr ungeschickt mit dem w3-Validator nach Fehlern zu suchen, da dieser welche Anzeigt die gar nicht vorhanden sind.

der (eine!) Validator zeigt zwar manche Fehler, die welche sind, nicht an; aber ich wüsste von keinem Fehler, den er anzeigt, obwohl er keiner ist. Belege Deine Behauptung.

Cheatah

[wahsaga]

hi,

Nach meinen Erfahrungen ist es sehr ungeschickt mit dem w3-Validator nach Fehlern zu suchen, da dieser welche Anzeigt die gar nicht vorhanden sind.

Nach meiner Erfahrung kann das eigentlich nur an deiner Ungeschicklichkeit bei der richtigen Interpretation der ausgegebenen Meldungen liegen.

gruß,
wahsaga

[yeahns]

Hi,

ich bin da auch noch nicht soweit, aber ich nehme schwer an, dass das mit der Größe deiner transparenten Datei zu tun hat. Du hast zwar angegeben "height="ziemlich viel" und width="auchviel", aber wahrscheinlich nimmt der ie dass nur für den Fall, dass das Laden des Bildes nicht klappt.

Probier mal, ob du die Größe des umgebenden Div Containers ändern kannst, vll wird das Bild dann größer.
Oder lass gleich das Transparent weg, und lege eine Tabelle über die Stellen auf der Bild Datei (mit css positionieren).

Die Tabelle lässt sich dann mit Javascript (ziemlich sicher) als Link benutzen, stelle ich mir so vor:

<table height="500px" width="300px" onclick"location.href='url'">
<tr><td></td></tr>

Probiere das mal aus, und sage mir, obs geklappt hat!

[Felix Riesterer]

Liebe(r) yeahns,

Oder lass gleich das Transparent weg, und lege eine Tabelle über die Stellen auf der Bild Datei (mit css positionieren).

pfui! Tabellen sind für tabellarische Daten! Sie für die Darstellung zu "missbrauchen" führt oft zu weiteren Problemen, die vermeidbar sind!

Die Tabelle lässt sich dann mit Javascript (ziemlich sicher) als Link benutzen, stelle ich mir so vor:

Wir sprechen hier von der zentralen Navigation der Seite. Diese mittels Javascript zu realisieren halte ich für grob fahrlässig. Was machen denn Suchmaschinen, die kein Javascript interpretieren? Die finden die Unterseiten nicht! Ob sie durch diesen Kauderwelsch an "HTML"-Code die <a>-Tags als Links finden, wäre abzuwarten, aber man kann das Ziel auch gleich mit wesentlich sinnvolleren und standard-kompatibleren Mitteln erreichen!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[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.

[boo]

hallo felix
vielen dank für die ausführliche antwort. bin sehr positiv überrascht über die vielen antwortmails. du kannst dir sicher vorstellen, dass ich damit ziemlich überfordert bin, schon alleine vom durchlesen und all den neuen wörtern und tipps :-)
es ist nämlich so, dass diese webseite ursprünglich von jemand anderem geschrieben wurde und ich jetzt etwas abändern wollte.
habe praktisch keine html kentnisse...

das mit den imagemaps klingt sehr interessant, denn es ist wirklich so, dass ich einfach links über die schrift (welche ja alles ein bild ist) setzen möchte.
denke, das sollte im illustrator oder photoshop gehen? und mal schauen, wie ich dort die koordinaten finde. aber das wird schon gehen.
könntest du mir dazu noch etwas mehr erklären?

wäre das etwa so, wie es sein sollte? (siehe unten)

im voraus nochmals ganz lieben dank
maria/boo

<p>
<img src="images/index.jpg" width="1764" height"="423" border="0" alt="indexpascalmoehlmann" usemap="#index">
<map name="index">

<area shape "rect" coords="(coordinaten mit komma abgetrennt)"
href="http://www.pascalmoehlmann.com/galleryofidiots.htm" alt=galleryofidiots" title=galleryofidiots">

</map>

[Felix Riesterer]

Liebe(r) boo,

Dein Ansatz sieht schon vielversprechend aus. Du musst nur gewisse syntaktische Regeln beachten:

<area shape "rect" coords="(coordinaten mit komma abgetrennt)"

"shape" ist ein Attribut. Nach einem Sttribut steht (wir tun aus Kompatibilitätsgründen so, als ob das ohne Ausnahme gilt) immer ein Istgleichzeichen, gefolgt vom Attribut-Wert in Anführungszeichen.

shape="rect"

title=galleryofidiots">

Anführungszeichen nach dem = fehlt.

Korrektur:

<p>  
    <img src="images/index.jpg" alt="Einstiegsbild mit bildinternen Verweisen zu Unterseiten" usemap="#index" />  
    <map name="index">  
        <area shape="rect" coords="123, 321, 234, 432" href="galleryofidiots.htm" alt="Gallery Of Idiots" title="Gallery Of Idiots" />  
    </map>  
</p>

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[boo]

lieber felix

du bist mein held ;-) !!!
vielen lieben dank für deine hilfe. so wie du schreibst, ist es auch für eine total-frischling noch verständlich. merci!
also, ich hab die seiten jetzt so abgeändert, dass überall imagemaps eingebaut sind und es scheint zu funktionieren.
jetzt hab ich nur noch zwei probleme.

das "oilpaintings & drawings" ganz unten möchte ich positionieren. jetzt ist es so, dass es mit dem browserfenster mitgeht, doch ich möchte es unterhalb des fotos als fix hinsetzen. hier nochmals die seite: http://www.pascalmoehlmann.com/index.htm
wie mach ich das am besten?

und noch etwas graviererendes: auf allen seiten, welche im safari und firefox eigentlich einen horizontalen scrollbalken haben (siehe z.b.  http://www.pascalmoehlmann.com/paintings1998-2005.htm ) zeigt es den im IE nicht an.
muss ich da etwas speziell vermerken?

wäre superlieb, wenn du mir hier auch weiterhelfen könntest.
bin dir sehr sehr dankbar.

maria/boo

[Felix Riesterer]

Liebe maria,

also, ich hab die seiten jetzt so abgeändert, dass überall imagemaps eingebaut sind und es scheint zu funktionieren.

bitte überprüfe peinlichst genau Deine Syntax! Du hast an vielen Stellen die Anführungszeichen nicht korrekt stehen, und Du hast noch immer das fehlende Istgleichzeichen bei shape="rect" nicht ergänzt (bei _allen_ areas!).

jetzt hab ich nur noch zwei probleme.

Nein, Du hast noch mehr, aber dazu gleich. ;-)

das "oilpaintings & drawings" ganz unten möchte ich positionieren. [...] ich möchte es unterhalb des fotos als fix hinsetzen. [...] wie mach ich das am besten?

Warum ist es nicht Bestandteil der Grafik, in der Du die Imagemap einsetzt?

und noch etwas graviererendes: auf allen seiten, welche im safari und firefox eigentlich einen horizontalen scrollbalken haben (siehe z.b.  http://www.pascalmoehlmann.com/paintings1998-2005.htm ) zeigt es den im IE nicht an.

Du verwendest Frames, um die (Thumbnail-)Bildergalerien anzuzeigen. Das ist absolut ungut! Frames sind für Deine Zwecke weder elegant, noch sinnvoll. Außerdem fehlt auf jeder dieser Seiten der Link zurück zur Hauptseite (homepage), von der man dann auf die anderen Seiten gelangen könnte.

Ist es denn unbedingt notwendig, dass man von einer Galerie nicht direkt auf eine andere Galerie kommen kann, sondern über die Hauptseite zurück dort hin navigieren muss? Ich finde, dass diese zentralistische Form der Besucherführung nicht gerade sehr bequem ist...

Bitte schreibe die Seiten mit den Galerien neu, und zwar so, dass alles, was man im Browser sehen kann, in ein und derselben HTML-Datei steht. Wie das dann aussieht (also mit diesen fürchterlich unpraktischen Scrollbalken, oder besser gleich ohne) ist dann eine Sache, die man mit anderen Mitteln (CSS) besser löst, als mittels Frames - aber dazu mehr, wenn Du wieder soweit bist. Kleine Idee vorweg: Ich habe Galerien so gemacht.

Die Idee bei den Vorschaugrafiken nur durch ein Popup zur Vollansicht zu gelangen ist absolut ungut! Popup-Blocker könnten hier manchem Besucher das Leben schwerer machen, jenachdem wie er eingestellt ist. Diese besseren (weil barrierefreien) Lösungen gibt es:

* Lightbox
* Lightbox2
* js_popup (von mir)

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

* js_popup (von mir)

Der Link ist fehlerhaft. Er muss so lauten:

* js_popup (von mir)

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[boo]

hallo felix

ganz ganz lieben dank für deinen beitrag.
du hast recht. die ganze navigation fehlt.
ich werde jetzt jeweils das bild erweitern durch die wörter, welche ich dann auf gleiche weise verlinken werde (also mit imagemap). dann kommt die schrift "pascal möhlmann" gänzlich weg. ist sowieso unnötig.

das mit den shape="rect" habe ich jetzt (hoffentlich!) definitiv überall abgeändert. sorry, hatte ich übersehen.

was ist die grundsätzliche regel der anführungszeichen?

wow, die lightbox-versionen sehen super aus und das würde ich gern probieren anstelle der popups. aber erst mal befasse ich mich mit den navigationslinks und dann...

das mit den frames ist halt auch noch von dem typen, welcher die webseite vor jahren erstellt hat aber ich habe auch mal gehört, dass frames nicht so leicht zu handhaben sind. also dass sie nicht in allen browsern gleich angezeigt werden. wie gesagt, ich werde mich wohl sowieso besser damit befassen müssen, sobald die navigations-sache geregelt ist.

darf ich wieder auf dich zurückkommen, wenn ich fragen hab?

nochmals vielen dank für deine hilfe. vielleicht werde ich das ganze eines tages etwas besser verstehen... schritt für schritt. :-)

ganz liebe grüsse

maria

[Felix Riesterer]

Liebe maria,

darf ich wieder auf dich zurückkommen, wenn ich fragen hab?

das Forum ist rund um die Uhr geöffnet! Auch an Sonn- und Feiertagen. :-)

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[boo]

:-)
und jetzt ist es schon wieder soweit.
könntest du dir das mal anschauen?:

http://www.pascalmoehlmann.com/commissions.htm

wie du siehst habe ich unten das bild erweitert und links eingebaut.
die koordinaten stimmen, jedoch hat es bei den letzten zwei links irgend was komisches gemacht. der contactlink fängt viel zu früh an und hört zu früh auf.

hab ich da was übersehen?

liebe grüsse
maria

<p>

<img src="images/commissions.jpg" width="1754" height"="423" border="0" alt="commissions" usemap="#commissions">
<map name="commissions">

<area shape="rect" coords="27,16,285,65"
href="http://www.pascalmoehlmann.com/biography.htm" alt=education">

<area shape="rect" coords="27,83,304,131"
href="http://www.pascalmoehlmann.com/exhibitions.htm" alt=exhibitions">

<area shape="rect" coords="27,215,340,265"
href="http://www.pascalmoehlmann.com/publications.htm" alt=publications">

<area shape="rect" coords="24,439,80,455"
href="http://www.pascalmoehlmann.com/home.htm" alt=home">

<area shape="rect" coords="96,439,216,455"
href="http://www.pascalmoehlmann.com/galleryofidiots.htm" alt=galleryofidiots">

<area shape="rect" coords="233,439,398,455"
href="http://www.pascalmoehlmann.com/paintings2006-2007.htm" alt=paintings2006-2007">

<area shape="rect" coords="418,439,583,455"
href="http://www.pascalmoehlmann.com/paintings1998-2005.htm" alt=paintings1998-2005">

<area shape="rect" coords="602,439,679,455"
href="http://www.pascalmoehlmann.com/drawings.htm" alt=drawings">

<area shape="rect" coords="697,439,781,455"
href="http://www.pascalmoehlmann.com/biography.htm" alt=biography">

<area shape="rect" coords="796,439,681,455"
href="http://www.pascalmoehlmann.com/contact.htm" alt=contact">

</map>

[Felix Riesterer]

Liebe maria,

http://www.pascalmoehlmann.com/commissions.htm
[...]
die koordinaten stimmen

nein, tun sie nicht, jedenfalls bei der letzten Area nicht.

<img src="images/commissions.jpg" width="1754" height"="423" border="0" alt="commissions" usemap="#commissions">

Bei der height-Angabe steht noch immer der Syntaxfehler (in allen Deinen Dateien!) mit dem überzähligen Anführungszeichen!

Ich weiß nicht womit Du Deine Quelltexte schreibst, aber Du solltest schon prüfen (lassen), ob Deine Syntax korrekt ist. Ich verwende einen Texteditor, der mir den Code farblich unterlegt, sodass ich solche Fehler anhand der unpassenden Farben schnell sehen kann.

<area shape="rect" coords="697,439,781,455"
href="http://www.pascalmoehlmann.com/biography.htm" alt=biography">

<area shape="rect" coords="796,439,681,455"
href="http://www.pascalmoehlmann.com/contact.htm" alt=contact">

Überprüfe bitte die dritte Koordinatenangabe! Insgesamt ist 455 als untere Begrenzung etwas zu weit oben, sodass Unterlängen der Buchstaben nicht erfasst werden und nicht das ganze Wort anklickbar wird...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[boo]

hallo yeahns, hallo rouven, hallo splinter, hallo detlef
vielen dank für die infos. werde hoffentlich zu irgendeinem weg finden.
vielleicht mit image map.
ganz liebe grüsse und gute nacht.
boo

[Daniel]

Ahoi boo,

vielleicht mit image map.

Sehr hilfreich zum erstellen von Imagemaps ist: "Adobe ImageReady CS2" such dir die Photoshop CS2 Demo im Netz, auch noch ablauf der 30 Tage kannst du imageReady trotzdem weiterhin benutzen und deine imagemaps erstellen.

Wirst ne weile suchen müssen, musst ich leider auch :( Vielleicht gehts etwas schneller wenn du direkt nach PS9_Tryout_d.zip googlest

MfG