Pfeil hinter h1 bringen

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

martinatina

Neues Mitglied
26 August 2020
16
0
1
19
Hallo :)

Folgendes: Ich habe einen Pfeil hinter die Überschrift h1 gesetzt <.i> heißt das Element
Das musste ich aber absolute machen weil es nicht über meinen Wrapper ging :D
Wie löse ich diese kleine Katastrophe denn nun am besten :(

Der Wrapper soll am besten auch responsive werden, so dass margin gleich bleibt egal auf welche Größe ich das Fenster re-size

Kann mir da wer weiterhelfen :D bin schon am verzweifeln

 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Dafür, dass der Pfeil hinter die Überschrift h1 soll, hast Du ihn im HTML aber denkbar ungünstig platziert :-)
Einfach an den Platz setzen, wo er angezeigt werden soll und die absolute Positionierung löschen:
Code:
<h1>DER PFEIL IST HIER DRAUF&nbsp;<a href="projekte.html">
    <i class="fas fa-chevron-left"></i>
    </a></h1>
        <h2> Ich will aber das er dahinter bleibt
           </h2>
 

martinatina

Neues Mitglied
26 August 2020
16
0
1
19
Als
Dafür, dass der Pfeil hinter die Überschrift h1 soll, hast Du ihn im HTML aber denkbar ungünstig platziert :-)
Einfach an den Platz setzen, wo er angezeigt werden soll und die absolute Positionierung löschen:
Code:
<h1>DER PFEIL IST HIER DRAUF&nbsp;<a href="projekte.html">
    <i class="fas fa-chevron-left"></i>
    </a></h1>
        <h2> Ich will aber das er dahinter bleibt
           </h2>


Das Problem ist die Überschriften sollen untereinander an der Position bleiben wo sie jetzt sind, nur der Pfeil soll hinter die erste Überschrift :D aaber da hab ich ja den Wrapper dahinter :((
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Du schreibst zwar, der Pfeil solle hinter die Überschrift, aber auf deiner Skizze markierst Du die Position vor der Überschrift. Das hatten wir doch schon Mal.

So geht es:

Dieses CSS ist das entscheidende:
Code:
h1 {
  position: relative;
}
i{
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-120%, -0.1em)
}