Eine hr Line Global im Footer nur mit css über volle Browserbreite 
Autor: Klaus G.
Besucht 353,
Followers 1,
Geteilt 0
Hallöle Gemeinde,
ich suche eine Möglichkeit eine <hr> Linie über volle breite vom Browser ein zu fügen.
Also keine Bilder (Images).
Diese möglichkeit sollte unter Statistiken und Code -> Code als Script oder so eingefügt werden.
Gruß
KLAUS
Gepostet am
Unter Statistiken & code kannst du keine <hr> einfügen, denn die würde irgendwo auftauchen. Du musst schon explizit bestimmen wo du die Linie haben willst.
Theoretisch kannst du ein HTML-Objekt einfügen wo du willst und dieses auf die ganze Breite bringen und dort dann die hr designen...
<hr style="border-width:0; height: 2px; width: 100%; background-color: red;">
Der Code setzt ein <hr> maximal auf Inhaltsbreite und nicht auf Browserbreite.
Es ist ein spezieller Code erforderlich, wenn ein <hr> über die Inhaltsbreite hinaus gehen soll.
Hier sind wohl die CSS-Profis gefragt.
Wenn der Code vor dem </BODY> Tag gesetzt wird, dann geht das <hr> zwar über die gesamte Browserbreite, ist aber ganz am Ende nach dem Footer, was vermutlich nicht das Gewünschte ist.
<hr color ="red" style = "height:20px"/>
.
Autor
Hallo KolAsim,
dies wäre eine CSS die in der Auflösung 1200px funktioniert, aber wenn ich auf z.B. 960px umschalte ist sie weg ???
Wie bekomme ich es hin das diese Linie in jeder Auflösung an dieser Stelle fixiert bzw. vorhanden ist.
<style>#imFooterBg { background-image: linear-gradient( to right, #545454, 100%, transparent 0%); background-size: 100% 2px; background-position: center calc (78%); background-repeat: no-repeat;}</style>
Gruß
KLAUS
Autor
Gefunden :-) :-)
z-index: 999; noch dazu.
Also dann so:
<style>#imFooterBg { background-image: linear-gradient( to right, #545454, 100%, transparent 0%); background-size: 100% 2px; background-position: center calc(78%); background-repeat: no-repeat; z-index: 999;}</style>
Könnt es ja mal TESTEN :-) :-)
Gruß
KLAUS
Autor
Fußzeile mu dann transparent sein.
Autor
CSS Korrektur :-) ;-)
<style> #imFooterBg { background-image: linear-gradient( to right, #373737, 100%, transparent 0%); background-size: 100% 2px; background-position: center calc(78%); background-repeat: no-repeat; z-index: 99;}</style>
Irgendwie verstehen wir das falsch. Das ist jetzt eine Hintergrundgrafik und kein HR Strich!
Hier wird der Strich in der Mitte der Fußzeile angezeigt. Soll es aber vor oder nach dem Footer sein, müsste man es anders machen. Oder hast du ein HTML Objekt in den Inhalt des Footers eingefügt und langgezogen?
Autor
Hallo Andreas,
die CSS müsste je nach gestaltung etwas angepasst werden, aber es ist wie CSS oben, also KEIN GRAFIK (Image).
Kannst hier Prüfen. https://www.hundeleckerchen.ch/Test-Server-GB-Immobilien_17-02-2026/
Autor
In Einstellungen -> Statistiken und Code -> Code -> Vor dem </Head Tag>.
Autor
background-position: center calc(78%) gibt die Position an.
... Denselben Effekt erzielen Sie, wie bereits erwähnt, viel einfacher mit dieser Änderung:
<hr color="red" style="position:relative;top:-85px;height:2px;z-index:100">
.
.
Autor
Hallo KolAsim,
in meinem Projekt funktioniert mein obiger Code sehr gut.
Danke für eure Unterstützung.
Gruß
Klaus
.. Hallo ...OK... Gruß ... ciao...
.
.