funktionierende und nicht funktionierende Ankerverweise

[Justus]

Hallo.

Ich benötige Hilfe bei einem Sachverhalt, bei dem ich nicht weiter weiß. Ich möchte gerne auf einer Website springen können. Dazu nutze ich [ref:self812;html/verweise/projektintern.htm#anker@title=Anker]. Ich habe eine bestehende funktionierende Lösung gefunden (1. Methode) nur wollte ich diese optimieren und entsprechend habe ich die Methoden 2 und 3 geschrieben. Die dritte Methode funktioniert leider nicht so wie gewünscht.

Unten sind die drei Methoden dargestellt.

Danke für eure Unterstützung. Justus

1. Methode - FUNKTIONIERT

<a id> //wird noch nicht benutzt    <a mit anker und verweis zu anker-zurück> //verweist auf den vorherigen b-Anker        <img>    </a>    <img>    <a mit anker und verweis zu anker-weiter> //verweist auf den nächsten n-Anker        <img>    </a> </a>

<a id="img000"><a name="b000"             ><img border="0" src="../adds/empty.jpg"></a ><img src="000.jpg"></img><a name="n000" href="#n001"><img border="0" src="../adds/next.jpg"></a></a> <a id="img001"><a name="b001" href="#b000"><img border="0" src="../adds/back.jpg"></a ><img src="001.jpg"></img><a name="n001" href="#n002"><img border="0" src="../adds/next.jpg"></a></a> <a id="img002"><a name="b002" href="#b001"><img border="0" src="../adds/back.jpg"></a ><img src="002.jpg"></img><a name="n002" href="#n003"><img border="0" src="../adds/next.jpg"></a></a> <a id="img003"><a name="b003" href="#b002"><img border="0" src="../adds/back.jpg"></a ><img src="003.jpg"></img><a name="n003" href="#n004"><img border="0" src="../adds/next.jpg"></a></a> <a id="img004"><a name="b004" href="#b003"><img border="0" src="../adds/back.jpg"></a ><img src="004.jpg"></img><a name="n004" href="#n005"><img border="0" src="../adds/next.jpg"></a></a> <a id="img005"><a name="b005" href="#b004"><img border="0" src="../adds/back.jpg"></a ><img src="005.jpg"></img><a name="n005" href="#n006"><img border="0" src="../adds/next.jpg"></a></a> <a id="img006"><a name="b006" href="#b005"><img border="0" src="../adds/back.jpg"></a ><img src="006.jpg"></img><a name="n006" href="#n007"><img border="0" src="../adds/next.jpg"></a></a> <a id="img007"><a name="b007" href="#b006"><img border="0" src="../adds/back.jpg"></a ><img src="007.jpg"></img><a name="n007" href="#n008"><img border="0" src="../adds/next.jpg"></a></a> <a id="img008"><a name="b008" href="#b007"><img border="0" src="../adds/back.jpg"></a ><img src="008.jpg"></img><a name="n008" href="#n009"><img border="0" src="../adds/next.jpg"></a></a> <a id="img009"><a name="b009" href="#b008"><img border="0" src="../adds/back.jpg"></a ><img src="009.jpg"></img><a name="n009" href="#n010"><img border="0" src="../adds/next.jpg"></a></a> <a id="img010"><a name="b010" href="#b009"><img border="0" src="../adds/back.jpg"></a ><img src="010.jpg"></img><a name="n010"             ><img border="0" src="../adds/empty.jpg"></a></a

2. Methode - FUNKTIONIERT

<a id> //image-anker in Benutzung    <a mit anker und verweis zu anker-zurück> //verweist auf den vorherigen image-anker        <img>    </a>    <img>    <a mit anker und verweis zu anker-weiter> //verweist auf den nächsten n-Anker        <img>    </a> </a>

<a id="img000"><a               ><img border="0" src="../adds/empty.jpg"></a><img src="000.jpg"></img><a name="n000" href="#n001"><img border="0" src="../adds/next.jpg"></a></a> <a id="img001"><a href="#img000"><img border="0" src="../adds/back.jpg"></a ><img src="001.jpg"></img><a name="n001" href="#n002"><img border="0" src="../adds/next.jpg"></a></a> <a id="img002"><a href="#img001"><img border="0" src="../adds/back.jpg"></a ><img src="002.jpg"></img><a name="n002" href="#n003"><img border="0" src="../adds/next.jpg"></a></a> <a id="img003"><a href="#img002"><img border="0" src="../adds/back.jpg"></a ><img src="003.jpg"></img><a name="n003" href="#n004"><img border="0" src="../adds/next.jpg"></a></a> <a id="img004"><a href="#img003"><img border="0" src="../adds/back.jpg"></a ><img src="004.jpg"></img><a name="n004" href="#n005"><img border="0" src="../adds/next.jpg"></a></a> <a id="img005"><a href="#img004"><img border="0" src="../adds/back.jpg"></a ><img src="005.jpg"></img><a name="n005" href="#n006"><img border="0" src="../adds/next.jpg"></a></a> <a id="img006"><a href="#img005"><img border="0" src="../adds/back.jpg"></a ><img src="006.jpg"></img><a name="n006" href="#n007"><img border="0" src="../adds/next.jpg"></a></a> <a id="img007"><a href="#img006"><img border="0" src="../adds/back.jpg"></a ><img src="007.jpg"></img><a name="n007" href="#n008"><img border="0" src="../adds/next.jpg"></a></a> <a id="img008"><a href="#img007"><img border="0" src="../adds/back.jpg"></a ><img src="008.jpg"></img><a name="n008" href="#n009"><img border="0" src="../adds/next.jpg"></a></a> <a id="img009"><a href="#img008"><img border="0" src="../adds/back.jpg"></a ><img src="009.jpg"></img><a name="n009" href="#n010"><img border="0" src="../adds/next.jpg"></a></a> <a id="img010"><a href="#img009"><img border="0" src="../adds/back.jpg"></a ><img src="010.jpg"></img><a name="n010"             ><img border="0" src="../adds/empty.jpg"></a></a

3. Methode - FUNKTIONIERT NICHT

<a id> //image-anker in Benutzung    <a mit anker und verweis zu anker-zurück> //verweist auf den vorherigen image-anker        <img>    </a>    <img>    <a mit anker und verweis zu anker-weiter> //verweist auf den nächsten image-anker (funktioniert nicht)        <img>    </a> </a>

<a id="img000"><a               ><img border="0" src="../adds/empty.jpg"></a><img src="000.jpg"></img><a href="#img001"><img border="0" src="../adds/next.jpg"></a></a> <a id="img001"><a href="#img000"><img border="0" src="../adds/back.jpg"></a ><img src="001.jpg"></img><a href="#img002"><img border="0" src="../adds/next.jpg"></a></a> <a id="img002"><a href="#img001"><img border="0" src="../adds/back.jpg"></a ><img src="002.jpg"></img><a href="#img003"><img border="0" src="../adds/next.jpg"></a></a> <a id="img003"><a href="#img002"><img border="0" src="../adds/back.jpg"></a ><img src="003.jpg"></img><a href="#img004"><img border="0" src="../adds/next.jpg"></a></a> <a id="img004"><a href="#img003"><img border="0" src="../adds/back.jpg"></a ><img src="004.jpg"></img><a href="#img005"><img border="0" src="../adds/next.jpg"></a></a> <a id="img005"><a href="#img004"><img border="0" src="../adds/back.jpg"></a ><img src="005.jpg"></img><a href="#img006"><img border="0" src="../adds/next.jpg"></a></a> <a id="img006"><a href="#img005"><img border="0" src="../adds/back.jpg"></a ><img src="006.jpg"></img><a href="#img007"><img border="0" src="../adds/next.jpg"></a></a> <a id="img007"><a href="#img006"><img border="0" src="../adds/back.jpg"></a ><img src="007.jpg"></img><a href="#img008"><img border="0" src="../adds/next.jpg"></a></a> <a id="img008"><a href="#img007"><img border="0" src="../adds/back.jpg"></a ><img src="008.jpg"></img><a href="#img009"><img border="0" src="../adds/next.jpg"></a></a> <a id="img009"><a href="#img008"><img border="0" src="../adds/back.jpg"></a ><img src="009.jpg"></img><a href="#img010"><img border="0" src="../adds/next.jpg"></a></a> <a id="img010"><a href="#img009"><img border="0" src="../adds/back.jpg"></a ><img src="010.jpg"></img><a               ><img border="0" src="../adds/empty.jpg"></a></a

[Beat]

Unten sind die drei Methoden dargestellt.

Verwende kein <a name="...">. Nutze id.
<img></img> ist äusserst mutwillig.
<img name=""> ist nicht erlaubt.

Nutze Listen für Listenartiges

<ol>
  <li id="n001">
    <a href="#n000">zurück</a>
    <img src="bild.png" alt="Beschreibung">
    <a href="#n002">weiter</a>
  </li>
  ...
</ol>

mfg Beat

[justus]

Unten sind die drei Methoden dargestellt.

Verwende kein <a name="...">. Nutze id.

Geändert.

<img></img> ist äusserst mutwillig.

Geändert.

<img name=""> ist nicht erlaubt.

Habe ich nicht eingesetzt.

Nutze Listen für Listenartiges

Liste ist nicht Ziel der Sache.

<ol>
  <li id="n001">
    <a href="#n000">zurück</a>
    <img src="bild.png" alt="Beschreibung">
    <a href="#n002">weiter</a>
  </li>
  ...
</ol>

mfg Beat

Danke für deine Hilfe. Hat nur leider mir nicht weitergeholfen.

MfGruß
justus

[Der Martin]

Hallo,

Ich möchte gerne auf einer Website springen können. Dazu nutze ich http://de.selfhtml.org/html/verweise/projektintern.htm#anker@title=Anker.

das ist in Ordnung.
Allerdings hast du da wohl ein paar Dinge missverstanden.

Ich habe eine bestehende funktionierende Lösung gefunden (1. Methode) nur wollte ich diese optimieren und entsprechend habe ich die Methoden 2 und 3 geschrieben. Die dritte Methode funktioniert leider nicht so wie gewünscht.

Alle drei Methoden sind syntaktsich falsch - sie stellen fehlerhaftes HTML dar. Kurz: a-Elemente dürfen nicht verschachtelt werden; ein a-Element darf kein weiteres a-Element enthalten.

Aber dein Code ist so konfus, dass du vielleicht erst einmal beschreiben solltest, was er leisten *soll*.

<a id="img001"><a name="b001" href="#b000"><img border="0" src="../adds/back.jpg"></a ><img src="001.jpg"></img><a name="n001" href="#n002"><img border="0" src="../adds/next.jpg"></a></a>

Mir scheint, du möchtest in Wirklichkeit sowas:

~~~html <a href="#previous"><img src="back-symbol" alt="back"></a>
 <img src="..." alt="...">
 <a href="#next"><img src="next-symbol" alt="back"></a>

  
Also ein Bild, davor ein Link zum vorhergehenden, dahinter ein Link zum nachfolgenden. Wozu dann die verschachtelten a-Elemente?  
  
Semantisch betrachtet ist das Ganze ja eigentlich eine Liste von Bildern (mit den vor/zurück-Links). Also wäre es naheliegend, das auch als Liste auszuzeichnen. Dann kann das Listenelement, also das li, gleichzeitig Sprungziel für die Vor/Zurück-Navigation sein:  
  
~~~html
<ol>  
 ...  
 <li id="pic004">  
  <a href="#pic003"><img src="back-symbol" alt="back"></a>  
  <img src="..." alt="...">  
  <a href="#pic005"><img src="next-symbol" alt="back"></a>  
 </li>  
 <li id="pic005">  
  <a href="#pic004"><img src="back-symbol" alt="back"></a>  
  <img src="..." alt="...">  
  <a href="#pic003"><img src="next-symbol" alt="back"></a>  
 </li>  
 ...  
</ul>

Die ... sollen dabei die vorhergehenden bzw. nachfolgenden Listeneinträge andeuten. Übrigens hast du auch bei allen img-Elementen das vorgeschriebene alt-Attribut vergessen.

So long,
 Martin

[justus]

Hi Martin.

Hallo,

Ich möchte gerne auf einer Website springen können. Dazu nutze ich http://de.selfhtml.org/html/verweise/projektintern.htm#anker@title=Anker.

das ist in Ordnung.
Allerdings hast du da wohl ein paar Dinge missverstanden.

Ich habe eine bestehende funktionierende Lösung gefunden (1. Methode) nur wollte ich diese optimieren und entsprechend habe ich die Methoden 2 und 3 geschrieben. Die dritte Methode funktioniert leider nicht so wie gewünscht.

Alle drei Methoden sind syntaktsich falsch - sie stellen fehlerhaftes HTML dar. Kurz: a-Elemente dürfen nicht verschachtelt werden; ein a-Element darf kein weiteres a-Element enthalten.

Dürfen? Es funktioniert. Wieso soll man es dann nicht dürfen. Leider können es vllt. "Ausnahme-Browser" nicht ordentlich interpretieren.

Aber dein Code ist so konfus, dass du vielleicht erst einmal beschreiben solltest, was er leisten *soll*.

Konfus? Gallerie-Funktion.

<a id="img001"><a name="b001" href="#b000"><img border="0" src="../adds/back.jpg"></a ><img src="001.jpg"></img><a name="n001" href="#n002"><img border="0" src="../adds/next.jpg"></a></a>

Mir scheint, du möchtest in Wirklichkeit sowas:

<a href="#previous"><img src="back-symbol" alt="back"></a>

<img src="..." alt="...">
<a href="#next"><img src="next-symbol" alt="back"></a>

>   
> Also ein Bild, davor ein Link zum vorhergehenden, dahinter ein Link zum nachfolgenden. Wozu dann die verschachtelten a-Elemente?  
>   
> Semantisch betrachtet ist das Ganze ja eigentlich eine Liste von Bildern (mit den vor/zurück-Links). Also wäre es naheliegend, das auch als Liste auszuzeichnen. Dann kann das Listenelement, also das li, gleichzeitig Sprungziel für die Vor/Zurück-Navigation sein:  
>   
  
Schematisch betrachtet ist es keine Liste.  
unsortierte Liste:  
-Alpha  
-Bravo  
-Charlie  
  
sortierte Liste:  
1\.) Alpha  
2\.) Bravo  
3\.) Charlie  
  
Das ist nicht Ziel. Auch mit dem "list-style-type:none" habe ich neue Einzüge und diese "verhunzen" das gesamte Layout.  
  
  

> ~~~html

<ol>  

>  ...  
>  <li id="pic004">  
>   <a href="#pic003"><img src="back-symbol" alt="back"></a>  
>   <img src="..." alt="...">  
>   <a href="#pic005"><img src="next-symbol" alt="back"></a>  
>  </li>  
>  <li id="pic005">  
>   <a href="#pic004"><img src="back-symbol" alt="back"></a>  
>   <img src="..." alt="...">  
>   <a href="#pic003"><img src="next-symbol" alt="back"></a>  
>  </li>  
>  ...  
> </ul>

Die ... sollen dabei die vorhergehenden bzw. nachfolgenden Listeneinträge andeuten. Übrigens hast du auch bei allen img-Elementen das vorgeschriebene alt-Attribut vergessen.

Alt-Attribut nicht zwingend erforderlich. Funktionen/Auswirkungen des Alternativtextes sind nicht erwünscht.

So long,
Martin

Danke für deine Mühe. Leider habe ich durch deine Antwort noch keine optimale Lösung.

MfGruß
justus

[thebach]

Namaste,

Dürfen? Es funktioniert. Wieso soll man es dann nicht dürfen. Leider können es vllt. "Ausnahme-Browser" nicht ordentlich interpretieren.

Nein, anders herum: Einige Browser können das was du geschrieben hast so interpretieren (eher erraten), dass das herauskommt was du denkst was herauskommen soll. Das kann aber mit der nächsten Version des Browsers schon ganz anders sein. Validiere stets deinen Code, nur so kann sinnvolle Fehlerbeseitigung funktionieren.

Aber dein Code ist so konfus, dass du vielleicht erst einmal beschreiben solltest, was er leisten *soll*.

Konfus? Gallerie-Funktion.

Tipps für Fragende

Das ist nicht Ziel. Auch mit dem "list-style-type:none" habe ich neue Einzüge und diese "verhunzen" das gesamte Layout.

Auf Listen lassen sich noch eine Menge andere CSS-Eigenschaften anwenden.

Alt-Attribut nicht zwingend erforderlich. Funktionen/Auswirkungen des Alternativtextes sind nicht erwünscht.

Doch, es ist http://de.selfhtml.org/html/grafiken/einbinden.htm#referenz@title=Pflichtangabe.

thebach

[Der Martin]

Moin,

Alle drei Methoden sind syntaktsich falsch - sie stellen fehlerhaftes HTML dar. Kurz: a-Elemente dürfen nicht verschachtelt werden; ein a-Element darf kein weiteres a-Element enthalten.
Dürfen? Es funktioniert.

ja, mag sein - zufällig, aber nicht zuverlässig. Ein korrekt arbeitender Browser darf die Anzeige solcher Konstruktionen komplett verweigern, und wenn er Mist anzeigt, könnte man es ihm nicht einmal übelnehmen.

Wieso soll man es dann nicht dürfen. Leider können es vllt. "Ausnahme-Browser" nicht ordentlich interpretieren.

Unsinn. Was meinst du, wozu es in HTML Regeln gibt?
Wenn du dich über sie hinwegsetzen willst, dann tu das, bitte - aber erwarte keine Hilfe dabei.

Aber dein Code ist so konfus, dass du vielleicht erst einmal beschreiben solltest, was er leisten *soll*.
Konfus? Gallerie-Funktion.

Nein. Meintest du vielleicht "Galerie"? Aber selbst das hättest du ja wenigstens erwähnen können, anstatt uns einen unkommentierten, unübersichtlichen Wust an Code ohne jegliche Formatierung (Zeilenumbrüche, Einrückungen) hier hinzuwerfen.

Semantisch betrachtet ist das Ganze ja eigentlich eine Liste von Bildern (mit den vor/zurück-Links). Also wäre es naheliegend, das auch als Liste auszuzeichnen. Dann kann das Listenelement, also das li, gleichzeitig Sprungziel für die Vor/Zurück-Navigation sein:
Das ist nicht Ziel. Auch mit dem "list-style-type:none" habe ich neue Einzüge und diese "verhunzen" das gesamte Layout.

Layout ist Sache von CSS, Struktur ist Sache von HTML. Eine Abfolge von mehreren gleichartigen Einträgen *ist* eine Liste. Mit CSS kannst du sie nach Belieben formen und formatieren. list-style-type hast du schon erkannt, margin-left und padding-left (sowohl von ol als auch von li) wären die nächsten offensichtlichen Kandidaten.

Übrigens hast du auch bei allen img-Elementen das vorgeschriebene alt-Attribut vergessen.
Alt-Attribut nicht zwingend erforderlich.

Unsinn. Was meinst du, wozu es in HTML Regeln gibt?
Wenn du dich über sie hinwegsetzen willst, dann tu das, bitte - aber erwarte keine Hilfe dabei.

Funktionen/Auswirkungen des Alternativtextes sind nicht erwünscht.

Welche Auswirkungen? Die Auswirkung, dass dieser Text ersatzweise angezeigt wird, wenn das Bild nicht dargestellt werden kann, dürfte wohl erwünscht sein. Dass ein verunglückter Browser den Alternativtext gleichzeitig als Tooltip darstellt, ist keine Ausrede; dieses Fehlverhalten kann man ihm außerdem abgewöhnen, indem man title="" zusätzlich angibt.

Danke für deine Mühe. Leider habe ich durch deine Antwort noch keine optimale Lösung.

Wenn du gutgemeinte Ratschläge und Hilfestellungen nicht annehmen willst, kann ich dir leider auch nicht helfen.

Und tschüss,
 Martin

[ChrisB]

Hi,

Alle drei Methoden sind syntaktsich falsch - sie stellen fehlerhaftes HTML dar. Kurz: a-Elemente dürfen nicht verschachtelt werden; ein a-Element darf kein weiteres a-Element enthalten.

Dürfen? Es funktioniert. Wieso soll man es dann nicht dürfen. Leider können es vllt. "Ausnahme-Browser" nicht ordentlich interpretieren.

Du bist hier, weil du ein allgemeines *Problem* hast, oder? (Davon, dass dein Versuch nur in "Ausnahmebrowsern" nicht funktioniert, hast du jedenfalls nichts gesagt.)

Wie kommst du dann auf die lustige Idee, zu behaupten, es "funktioniere"?
Wie blödsinnig das ist, muss dir doch eigentlich selber auffallen.

MfG ChrisB