Wie füge ich einen Pfeil als <a> in/über den Wrapper hinter h1 hinzu?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

martinatina

Neues Mitglied
26 August 2020
16
0
1
19
Ich möchte einen Pfeil hinter die Überschrift einfügen der auf eine andere Seite verlinkt
Dabei soll die Überschrift ihre Position nicht verändern:


ich habe es schon so versucht:

<a class="pfeile" href="projekte.html"><img class="pfeilschwarz" src="Bilder/pfeilschwarz.png"/></a>
über
<h1>

und dann im CSS:
.pfeile{margin-left: -25px}

Dies hat jedoch dazu geführt das die Überschrift nach unten verschoben wird, sie soll aber auf der selben Position bleiben, da sie auf der Seite wo drauf verlinkt wird ebenfalls auf der Position ist (Ich hoffe es ist einigermaßen verständlich beschrieben)

Kann mir da vielleicht jemand weiterhelfen?
 

basti1012

Senior HTML'ler
26 November 2017
1.475
157
63
39
Minden
sebastian1012.bplaced.net
Es soll ein "zurück" Pfeil werden
Dann nutze bei mein Beispiel rotate(180deg) ,
Das sieht dann so aus wie Sempervivum es gezeigt hat.

die Überschrift soll exakt auf der selben Position bleiben wie sie jetzt ist
Wie du auf den Bild sehen kannst ist das kein Problem.
Du brauchst da eigentlich nicht viel ändern.
Versuche doch mal meinen Code auf dein Beispiel anzuwenden.

Ich weiß auch nicht, ob mein Code der optimalste weg ist.?
Man könnte auch noch mit h1:before arbeiten.
Wenn Sempervivum auf seinen Bild einen anderen Weg hat, wäre das auch mal interessant zu sehen.

Es ist ja nix großartiges, doch wenn man Validen Code haben will ,muss man auf einiges achten,
zb,
h1 erlaubt kein div als Child,
span aber ja .
Deswegen hatte mein erstes Beispiel ein span Element und kein div.( Hatte aber erst div benutzt, und mich dann bei w3 gewundert das es doch nicht erlaubt ist )
 
Zuletzt bearbeitet:

MrMurphy

Senior HTML'ler
28 Juli 2009
1.567
232
63
Auch wenn es nicht leicht zu verstehen ist: Der Pfeil enthält keinerlei Informationen und ist damit nur ein gestalterisches Element. Deshalb ist es sachlich falsch ihn im Quelltext unterzubringen, weder als Bild noch als Text.

Damit muss er nach den HTML- und CSS-Regeln von HTML5 mittels CSS eingefügt werden. In diesem Fall am sinnvollsten über die Möglichkeit des before.

Im Zug der Datenarmut sollten solche Zeichen möglichst nicht als Bild eingefügt werden, sodern als Zeichen. In der Unicode-Zeichentabelle gibt es viele unterschiedliche Pfeile, die zudem per CSS noch gestaltet werden können, zum Beispiel auch farblich. Oder in der Höhe. Oder der Abstand zum Text. Oder ... Eine Auflistung findet sich beispielsweise unter

https://unicode-table.com/de/sets/arrow-symbols/

Ich gehe mit der Maus auf das von mir gewünschte Zeichen, wählte im sich öffnenden PopUp-Fenster "Kopieren" und füge es mittels der Tastenkombination Strg+V direkt in den CSS-Quelltext ein.

Nebenbei: Auch wenn einige neuere Zeichen im Editor als Fragezeichen angezeigt werden, werden sie vom Browser korrekt angezeigt. Mein Beispielpfeil wird hingegen direkt angezeigt.

Zu dem HTML-Quelltext

Code:
<h1><a href="https://www.google.de/">Projektname</a></h1>

reicht dann folgendes CSS

Code:
h1 a::before{
   content: "←";
   color: red;
   margin-right: 1rem;
}

Die Farbe (color) ist nur als Beispiel für eine Gestaltung mittels CSS eingefügt.

Das erscheint mir auch am einfachsten, da zum Beispiel die Bildpfade wegfallen, die sich erfahrungsgemäß immer wieder mal ändern.
 
Zuletzt bearbeitet:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Mein Bild war zunächst nur ein Bild, weil ich sicher gegen wollte, ob ich den TO richtig verstehe. Anschließend habe ich es dann so umgesetzt:
CSS:
        h1.left-arrow {
            margin-left: -1em;
        }

        h1.left-arrow a {
            font-size: 1.2em;
            color: white;
        }
HTML:
        <h1 class="left-arrow"><a href="index.html">&#8678;</a>PROJEKTNAME</h1>