Problem mit der Positionierung eines Containers

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

Granus64

Neues Mitglied
20 April 2021
2
0
1
56
Hallo zusammen,

ich bin dabei, unserer Vereinswebsite barrierefrei zu machen und will dafür auf allen Seiten eine Vorlesefunktion einbauen. Das habe ich mit einem Mediaplayer-Plugin recht elegant gelöst. Nun soll der Player in die obere rechte Ecke der Seite eingebaut werden.

Dafür habe ich ihn in einen DIV-Container (.vorlesen) gepackt. Dem ich per CSS die passende Formatierung zugewiesen habe:

.vorlesen {
float: right !important;
width: 100px !important;
}

Diesen Container füge ich nun oberhalb des Seiteninhalts ein. Passt alles, aber…

nur, solange ich die Überschrift der Seite manuell formatiere:

<div class=“vorlesen“>[sc_embed_player fileurl=“https://kinderengel-rheinmain.de/wp-content/uploads/2021/04/Vorlesetest.mp3″%5D</div&gt;
<span style=“font-size: 24px;“>Dies ist die 1. Testseite!</span>
TEXT TEXT TEXT

Testseite 1.png

Sobald ich jedoch die Überschrift mit h1 formatiere, rutscht der gesamte Seiteninhalt nach unten und beginnt erst unterhalb des DIV-Containers.

<div class=“vorlesen“>[sc_embed_player fileurl=“https://kinderengel-rheinmain.de/wp-content/uploads/2021/04/Vorlesetest.mp3″%5D</div&gt;
<h1>Dies ist die 2. Testseite!</h1>
TEXT TEXT TEXT

Testseite 2.png

Ist wahrscheinlich nur eine Kleinigkeit, aber als blutiger HTML-Anfänger…


Wäre klasse, wenn mir hier jemand weiterhelfen könnte!

PS: Beispielseite = https://kinderengel-rheinmain.de/vorlesen/
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Das liegt daran, dass ein h-Element per Default mit display: block; ausgestattet ist und daher eine ganze Zeile einnimmt, Gibst Du der Überschrift ein display: inline-block; ist das nicht mehr der Fall und die Überschrift wird so positioniert, wie Du es möchtest.
 
  • Like
Reaktionen: Runshak und Granus64
Werbung:
Werbung: