Abschnitts-Anker korrekt gestalten

[hobix]

Moinmoin,

mein Kumpel steht auf allerlei Funtions-Schnick-Schnack.

Seine letzte Idee:
Beim überfahren jeder Überschrift soll ein Link erscheinen, so in der Art "Diesen Abschnitt linken".

Wird ein Absatz nun gelinkt, also angesprungen soll vor der Überschrift, ohne diese in ihrem normalen Textfluss und ihrer Poistion zu verändern ein Pfeil davor erscheinen, i.S.v. "Hierher sind Sie gesprungen ->"

Ich würde das ganze gerne mit CSS umsetzen.

Ok beim Hovern der Überschrift einen Link einblenden sollte ich mit CSS hinbekomen. Doch wie setze ich das Semantisch korrekt um. Dachte eigtl diesem Link eher ein Symbol als einen Text zuzuordnen, aber verlinktes Bild ... hm.

Angesprungene Elemente kann ich zumindest in CSS3 ansprechen, und davor etwas anzuzeigen dürfte auch kein Problem sein. Doch wie bekomme ich es hin, dass der Pfeil z.B. vor der Überschrift angezeig wird, aber praktisch außerhalb des Textrahmens liegt?

Puh..

Dank und Gruß

P.S.: Wer weitere Ideen für so Funktions-Schnickschnack hat ... damit mein Kumpel endlich mal zufrieden ist ...

[1827]

Schönen guten Tag,

Beim überfahren jeder Überschrift soll ein Link erscheinen, so in der Art "Diesen Abschnitt linken".

Du suchst wahrscheinlich nach einem Tooltip.
http://de.selfhtml.org/html/attribute/allgemeine.htm

[hobix]

Nein. In den Tooltip kann ich ja keinen Anker-Link packen...

[1827]

Nein. In den Tooltip kann ich ja keinen Anker-Link packen...

Natürlich ... oder ich verstehe deine Frage falsch.
Du möchtest, das wenn man über eine Überschrift fährt ein Link daneben auftaucht mit einem Link zu einem Anker. Klickt man den Anker an soll vor der Überschrift ein Hinweis stehen wohin gerade gesprungen wurde. Seh ich das richtig?

[hobix]

Ja. Aber wie soll ich denn bitte in den Tooltip mit title="" einen Link packen?

[1827]

Ja. Aber wie soll ich denn bitte in den Tooltip mit title="" einen Link packen?

Den Tooltip umbauen. Zum Beispiel so.

[hobix]

Aha und was hat das mit dem von dir ausgangs geposteten Link und title="" zu tun?

[1827]

Aha und was hat das mit dem von dir ausgangs geposteten Link und title="" zu tun?

Das hat etwas mit Deiner meiner Meinung nach dürftigen Fragestellung zu tun.

[Auge]

Hallo

»» Nein. In den Tooltip kann ich ja keinen Anker-Link packen...
Natürlich ... oder ich verstehe deine Frage falsch.
Du möchtest, das wenn man über eine Überschrift fährt ein Link daneben auftaucht mit einem Link zu einem Anker. Klickt man den Anker an soll vor der Überschrift ein Hinweis stehen wohin gerade gesprungen wurde.

Hmm ...

»» »» »» Wird ein Absatz nun gelinkt, also angesprungen soll vor der Überschrift, ohne diese in ihrem normalen Textfluss und ihrer Poistion zu verändern ein Pfeil davor erscheinen, i.S.v. "Hierher sind Sie gesprungen ->"

... sagt *mir*, dass ein Abschnitt angesprungen werden soll (<a name="sprungziel"> oder <hx id="sprungziel">) und, wenn dies geschehen ist (im Gegensatz zum scrollen zu dieser Position), soll vor dem angesprungenen Ziel etwas angezeigt (hier: Graphik) werden.

Seh ich das richtig?

Was sagt hobix dazu?

Tschö, Auge

[MudGuard]

Hi,

»» »» »» »» Wird ein Absatz nun gelinkt, also angesprungen soll vor der Überschrift, ohne diese in ihrem normalen Textfluss und ihrer Poistion zu verändern ein Pfeil davor erscheinen, i.S.v. "Hierher sind Sie gesprungen ->"

Das wäre also sowas

<h2 id="bla">blubb</h2>

kombiniert mit

#bla:target:before { content: url(pfeil.png); }

Das sollte nach Anspringen des Ankers #bla das pfeil.png vor dem blubb (Inhalt des h2) anzeigen.

cu,
Andreas

[Gunnar Bittersmann]

@@hobix:

nuqneH

Angesprungene Elemente kann ich zumindest in CSS3 ansprechen

Ja, mit der ':target'-Pseudoklasse.

Doch wie bekomme ich es hin, dass der Pfeil z.B. vor der Überschrift angezeig wird, aber praktisch außerhalb des Textrahmens liegt?

Mit „außerhalb des Textrahmens“ meinst du links des Inhaltsbereichs (content)? (Bild in [CSS2 §8.1])

Der Hintergrund eines Elements erstreckt sich über den Inhaltsbereich (content), die Polsterung (padding) und den Rahmen (border). [ibid.]

Also dem Element genügend 'padding-left' geben, dass der Pfeil als Hintergrundbild (no-repeat) dort Platz hat; dafür ggfs. weniger 'margin-left'.

Qapla'

[hobix]

Hi,

Mit „außerhalb des Textrahmens“ meinst du links des Inhaltsbereichs (content)? (Bild in [CSS2 §8.1])

Mein das in etwa so, dass der Text mit Überschrift:
   Überschrift
   Lorem ipsum dolor sit amet, consetetur
   sadipscing elitr, sed diam nonumy eirmod
   tempor invidunt ut labore et dolore magna
   aliquyam erat, sed diam voluptua. At vero
   eos et accusam et justo duo dolores et ea
   rebum. Stet clita kasd gubergren, no sea
   takimata sanctus est Lorem ipsum dolor ...

Im angesprungenen Zustand so aussieht:
-> Überschrift
   Lorem ipsum dolor sit amet, consetetur
   sadipscing elitr, sed diam nonumy eirmod
   tempor invidunt ut labore et dolore magna
   aliquyam erat, sed diam voluptua. At vero
   eos et accusam et justo duo dolores et ea
   rebum. Stet clita kasd gubergren, no sea
   takimata sanctus est Lorem ipsum dolor ...

Wie ich das mit sinnvollem padding und margin hinbekomme verstehe ich nicht ganz.

Des Weiteren frage ich mich noch, wie ich hinter der Überschrift den jeweiligen Ankerlink semantisch korrekt "einbaue" und wie ich ihn, wie man sollte, nicht nur mit einem Bild oder Symbol trotzdem kurz und knackig repräsentieren könnte.

Im gehoverdten Zustand:
   Überschrift ¶
   Lorem ipsum dolor sit amet, consetetur
   sadipscing elitr, sed diam nonumy eirmod
   tempor invidunt ut labore et dolore ...

Wobei das ¶-Zeichen der Anker-Link zu Überschrift sein könnte?

Grüße

[Auge]

Hallo

Des Weiteren frage ich mich noch, wie ich hinter der Überschrift den jeweiligen Ankerlink semantisch korrekt "einbaue" und wie ich ihn, wie man sollte, nicht nur mit einem Bild oder Symbol trotzdem kurz und knackig repräsentieren könnte.

Im gehoverdten Zustand:
   Überschrift ¶
   ...

Wobei das ¶-Zeichen der Anker-Link zu Überschrift sein könnte?

Wobei ich mich frage, warum ich, wenn ich schon am entsprechenden Abschnitt angekommen bin, diesen Abschnitt noch einmal per Link anspringen soll.

Tschö, Auge

[hobix]

Weil ich jemand den Link so schicken möchte.

Ich lese den Artikel, denke "ah das wär was für XYZ", springe zu dem Absatz, es wird mit einem Pfeil angezeigt wo der besagte Abschnitt beginnt und ich kann den Link verschicken.

[MudGuard]

Hi,

Ich lese den Artikel, denke "ah das wär was für XYZ", springe zu dem Absatz, es wird mit einem Pfeil angezeigt wo der besagte Abschnitt beginnt und ich kann den Link verschicken.

Zu dem Zeitpunkt befindet sich (wenn Du nicht so was Schreckliches wie Frames benutzt) die URL samt Anker in der Adreßzeile.

cu,
Andreas

[hobix]

Nur wenn ich gerade an dem Absatz angekommen bin mit lesen steht doch in der Adresszeile nicht die URL + Anker. Brauche doch ein "Link" zu der aktuellen Überschrift-id, dann steht das in der Adresszeile?

Nein Frames verwende ich nicht!

[Auge]

Hallo

Nur wenn ich gerade an dem Absatz angekommen bin mit lesen steht doch in der Adresszeile nicht die URL + Anker.

nein

Brauche doch ein "Link" zu der aktuellen Überschrift-id, dann steht das in der Adresszeile?

ja

Wie wär's einfach mal mit ausprobieren?

Tschö, Auge

[Gunnar Bittersmann]

@@hobix:

nuqneH

Mein das in etwa so, dass der Text mit Überschrift:
   Überschrift

⇤─⇥
Wo kommt dieser Abstand her? Hast du den explizit angegeben oder kommt er aus dem browserinternen Stylesheet?

Nehmen wir an, es gilt (aus welcher Quelle auch immer)

h2  
{  
  margin-left: 20px;  
  padding-left: 0;  
}

Das überschreibst du mit

h2  
{  
  margin-left: 0;  
  padding-left: 20px;  
}

Nun hat du links von dem Text der Überschrift 20 Pixel (abzüglich etwas Zwischenraum) für das Pfeilbild:

Im angesprungenen Zustand so aussieht:
-> Überschrift

h2:target  
{  
  background: url(pfeilbild) no-repeat;  
}

Des Weiteren frage ich mich noch, wie ich hinter der Überschrift den jeweiligen Ankerlink semantisch korrekt "einbaue"

<h2 id="foo"><a href="#foo" title="Diesen Abschnitt linken">Überschrift</a></h2>

und wie ich ihn, wie man sollte, nicht nur mit einem Bild oder Symbol trotzdem kurz und knackig repräsentieren könnte.
--8<--
Wobei das ¶-Zeichen der Anker-Link zu Überschrift sein könnte?

?? Ich verstehe nicht, worauf du hinauswillst.

Qapla'