WebSite X5Help Center

 
Klaus G.
Klaus G.
User

Eine hr Line Global im Footer nur mit css über volle Browserbreite  de

Autore: Klaus G.
Visite 355, Followers 1, Condiviso 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

Postato il
15 RISPOSTE
Andreas S.
Andreas S.
Moderator

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;">

Leggi di più
Postato il da Andreas S.
Daniel W.
Daniel W.
User
Utente del mese DEUtente del mese EN

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.

Leggi di più
Postato il da Daniel W.
Daniel W.
Daniel W.
User
Utente del mese DEUtente del mese EN

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.

Leggi di più
Postato il da Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese ES

<hr color ="red"  style = "height:20px"/>

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Klaus G.
Klaus G.
User
Autore

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

Leggi di più
Postato il da Klaus G.
Klaus G.
Klaus G.
User
Autore

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

Leggi di più
Postato il da Klaus G.
Klaus G.
Klaus G.
User
Autore

Fußzeile mu dann transparent sein.

Leggi di più
Postato il da Klaus G.
Klaus G.
Klaus G.
User
Autore

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>

Leggi di più
Postato il da Klaus G.
Andreas S.
Andreas S.
Moderator

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?

Leggi di più
Postato il da Andreas S.
Klaus G.
Klaus G.
User
Autore

In Einstellungen -> Statistiken und Code -> Code -> Vor dem </Head Tag>.

Leggi di più
Postato il da Klaus G.
Klaus G.
Klaus G.
User
Autore

background-position: center calc(78%) gibt die Position an.

Leggi di più
Postato il da Klaus G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese ES

... 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">

.

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Klaus G.
Klaus G.
User
Autore

Hallo KolAsim,

in meinem Projekt funktioniert mein obiger Code sehr gut.

Danke für eure Unterstützung.

Gruß

Klaus

Leggi di più
Postato il da Klaus G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese ES

.. Hallo ...OK... Gruß ... ciao...

.

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪