Link-Adresse mit CSS ändern

[Detlef Boesang]

Hallo zusammen, ich möchte gern aus folgendem Link:

... <a href="seite.html">Seite</a>... mittels CSS ändern in

... <a href="seite.html#anker">Seite</a>... Geht soetwas überhaupt?

:before{content:#anker;} fügt den Text ja "Nur nach dem schließenden ">" ein. Oder?

Hintergrund: In der Desktopansicht möchte ich "nur" zur Seite springen. In der Handyansicht (über @media screen and (max-width: 610px) ) möchte ich zur Seite aber an die Stelle vom Anker springen.

Klar ginge dass über HTML, doch da würde ich den Quellcode unnötig aufblähen.

Danke für Eure Gedanken!

[Tabellenkalk]

Hallo,

CSS ist für die Gestaltung da. Du willst Änderung des Verhaltens, dafür ist Javascript da.

Gruß
Kalk

[beatovich]

hallo

Hallo,

CSS ist für die Gestaltung da. Du willst Änderung des Verhaltens, dafür ist Javascript da.

Gruß
Kalk

Wir haben es mit einer geänderten Präsentation zu tun, also CSS

@media screen and ( width < 500 px ){
   *.widescreen {display: none}
}
@media screen and ( width >= 500 px ){
   *.mobile {display: none}
}

[Rolf b]

Jein.

Man kann zwei Links erzeugen, einen sichtbar für Desktop, einen unsichtbar für Mobil, und in der Mobilansicht blendest Du den einen aus und den anderen ein.

Unter Berücksichtigung des Mobile-First Ansatzes machst Du aber eher die Media-Query für die Desktopansicht und zeigst per Default den Mobil-Link an.

Rolf

[Detlef Boesang]

Also dann doch ein quasi doppelter HTML-Tag. Mit dem Ein- und Ausblenden war soweit ja klar, doch finde ich diese Lösung dann nicht so prima, da sie ja den Quellcode nicht sinnvoll anreichert, sondern nur doppelt.

Schade! Aber danke für Eure Ideen!

[Camping_RIDER]

Aloha ;)

ich möchte gern aus folgendem Link:

... <a href="seite.html">Seite</a>... mittels CSS ändern in

... <a href="seite.html#anker">Seite</a>... Geht soetwas überhaupt?

:before{content:#anker;} fügt den Text ja "Nur nach dem schließenden ">" ein. Oder?

Vielleicht denkst du, dass du das möchtest, aber ich bin mal so frei zu behaupten, dass du das nicht möchtest.

Eigentlich möchtest du das hier:

In der Desktopansicht möchte ich "nur" zur Seite springen. In der Handyansicht (über @media screen and (max-width: 610px) ) möchte ich zur Seite aber an die Stelle vom Anker springen.

Dafür ist keine Manipulation des Links notwendig (und auch nicht sinnvoll). Stell dir vor, ich komm mit meinem Tablet an und drehe es von Hochkant auf Quer, nachdem ich auf den Link geklickt habe. Dann lande ich trotz nun breitem Bildschirm auf dem Anker. Oder stell dir vor, ich käme gar nicht von deinem Link, sondern aus meiner History, die mein intelligenter Browser zwischen meinen verschieden breiten Geräten teilt.

Du möchtest nicht den Link verändern, sondern du möchtest auf der Seite seite.html nach dem Laden zu einem Anker springen falls die Bildschirmbreite kleinergleich 610px ist.

Dazu baust du auf seite.html ein JavaScript ein, welches beim load-Event des window die Seitenbreite prüft und bei <= 610px das window zum Anker scrollt.

Und voila - du hast was du ursprünglich eigentlich wolltest und es ist auch noch hinreichend ausfallsicher.

Grüße,

RIDER

P.S.: Wenn etwas in einer bestimmten Sprache nicht machbar ist, dann liegt das in wenigen Fällen an Designschwächen der jeweiligen Sprache und in den meisten Fällen daran, dass der Entwickler entweder das falsche Werkzeug benutzt oder an der falschen Stelle ansetzt.