WebSite X5Help Center

 
Anja J.
Anja J.
User

Header fixieren  de

Auteur : Anja J.
Visité 3324, Followers 1, Partagé 0  

Hallo und schönen guten Abend.

Ich habe eine Frage an die Experten hier. Und zwar möcht ich den Header fixiert haben. Aufgrund meiner Recherche hier bin ich auf einen HTML Code gestossen, den ich eingesetzt habe. Jetzt ist zwar der Header fixiert und scrollt nicht mehr weg, dafür sieht man aber, wenn ich die Seite nun scrolle, teileweise den Content an der rechten Seite des Headers. Allerdings auch nicht immer. Je nach dem wie ich den Bildschirm an meinem Laptop zoome sieht man es oder eben nicht. Aber nur auf der rechten Seite und das verstehe ich nicht.

Wenn ich die Seite jetzt kleiner zoome, dann verändert sich der Header unverhältnismäßig zum Content. Ich könnte es nachvollziehen, wenn der dann mittig wäre, ist er aber nicht.

Der Haken ist für die ganze Browserbreite gesetzt.

Meine Webseite findet man unter www.tierheilpraktikerin-jacob.de

Ich habe den Header, damit man es besser sehen kann, Pink gemacht (sonst ist er weiß).

Danke schon mal und viele Grüße

Anja

Posté le
28 RéPONSES - 2 UTILE
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Du hast die Seite nicht responsive geschaltet!  Unter "2" Vorlage "responsives Design" musst du dies umschalten.

Lire plus
Posté le de Andreas S.
Anja J.
Anja J.
User
Auteur

Hallo Andreas,

danke für deine schnelle Antwort. Habe gerade umgeschaltet auf responisve und hochgeladen. Leider ändert das aber nichts an dem Problem.

Lire plus
Posté le de Anja J.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Das ist eine NEbenwirkung vom Code. Fixierungen setzen meistens gewisse positionieren außer Kraft. Der Code müsste angepasst werden und natürlich bei jedem Breakpoint die Objekte auch.

Lire plus
Posté le de Andreas S.
Thomas M.
Thomas M.
User

Ich weiss nicht, welchen Code Sie hatten, bei mir hat es mit diesem von Martin H. funktioniert!

<style>#imHeader {position: fixed; z-index: 1000; width: 100%}</style>

Den Code unter: "Sitemap" -> "Eigenschaften" -> "Erweiter" -> "Vor dem </Head> Tag" eingeben.

Unter "Vorlage" -> "Struktur der Vorlage" -> "Header" die passende Farbe bzw. Grafik einstellen.

Lire plus
Posté le de Thomas M.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Das ist der gleiche Code was sie eingefügt hat.  Nein, man müsste diesen anpassen und auch responsive anpassen, sonst nützt diese nichts.

Ich weis nicht ob die Stickybar in der EVO auch vorhanden ist, denn mit dieser Leiste ist es einfacher zu lösen.

Lire plus
Posté le de Andreas S.
Martin H.
Martin H.
User

Für die 16er Version brauchst Du diesen Code:

<style> #imHeader {position: fixed; z-index: 1000;} </style>

Den Code unter "Sitemap" -> "Eigenschaften" -> "Erweitert" -> "Vor dem </Head> Tag" eingeben.

Den Header auf die Breite des Browserfenster erweitern anklicken (unter Vorlage - > Struktur der Vorlage -> Header)

Lire plus
Posté le de Martin H.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Anja J.
... ... ... Meine Webseite findet man unter www.tierheilpraktikerin-jacob.de Ich habe den Header, damit man es besser sehen kann, Pink gemacht (sonst ist er weiß). ... ... ... 

(It > De) ... HEADER ist ein bisschen durcheinander ...
... Sie bemerken zwei gekreuzte Menüs und andere schlecht positionierte Objekte ...
... Bevor Sie EXTRA-Codes ausprobieren, was nicht helfen würde, sollten Sie Fehler beheben und einen regulären Header erstellen ...

ciao

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Anja J.
Anja J.
User
Auteur

Hallo und vielen Dank für Eure Antworten.

Also, genau den Code von Martin habe ich auch benutzt. Habe mal ein Screenshot von der Sitemap--> Eigenschaften --> Erweitert gemacht. Ich hoffe, es ist lesbar. Und der Header ist auch auf die Browserweite des Fensters angeklickt. Das hab ich ja alles schon gemacht und trotzdem begrenzt sich der Header aus irgendeinem Grund, wenn ich den Bildschirm zoome.

@KolAsim

Der Header war, bevor ich ihn auf Empfehlung von Andreas auf responsive gestellt hatte nicht durcheinander und es war auch nichts schlecht positioniert. Das kam erst nach der Umstellung auf responisve, was ich genau aus dem Grund eigentlich auch (noch) nicht mache wollte, weil nämlich die Ansicht bei responsive überhaupt nicht mit dem übereinstimmt, was mir in der Vorschau angezeigt wird. Mir ist da noch nicht wirklich schlüssig, in welcher Sicht ich was angezeigt bekomme. Aber das ist ein anderes Thema.

Hier geht es ja um die Breite des Headers, die eben bei Fixierung nicht über das ganze Browserfenster geht. Und ich frage mich, warum es eben bei mir nicht funktioniert.

Liebe Grüße

Anja

Lire plus
Posté le de Anja J.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Willst du nur für Desktop-User die Seite gestalten?  Wenn ja dann brauchst du nur den Code hinzufügen zu dem von MArtin (zwischen den style Klammern)

#imHeaderObjects { width: 2000px!important;}

Allerdings ist es durch die fixe Positionierung nicht responsive und bei den mobilen Geräten wirst du ein Problem bekommen.

...und der Code funktioniert deshalb nicht mehr, weil der für die alten Version gedacht war und beim neuen GRID System nicht mehr passt.

Lire plus
Posté le de Andreas S.
Martin H.
Martin H.
User

Ich sehe das Du die 17er Version verwendest, von daher muss dieser Code funktionierten:

<style> #imHeader {position: fixed; z-index: 1000; width: 100%}</style>

Den Code unter "Sitemap" -> "Eigenschaften" -> "Erweitert" -> "Vor dem </Head> Tag" eingeben.

Bei mir in Website 17 funktioniert der Header bei allen Breakpoints.

Lire plus
Posté le de Martin H.
Anja J.
Anja J.
User
Auteur

Grundsätzlich möchte ich das schon responsive machen. Aber ganz ehrlich, da verzweifel ich (noch) dran. Daher wollte ich das jetzt erst einmal als Desktop-Version hochladen und mich anschließend auf das responsive konzentrieren.

Ich versuche die Codes und schaue, ob es funktioniert. Wenn ja, wäre da ja schon mal ein Schritt nach vorne :-).

Lire plus
Posté le de Anja J.
Anja J.
Anja J.
User
Auteur

Bingo, ihr Lieben, der Code von Martin passt. Hab es auch schon hochgeladen. Der Header geht jetzt über die ganze Browserseite. Juchhu. Vielen vielen Dank!!!

Kannst du mir auch noch einen Tipp geben, welchen HTML Code ich nehmen kann, wenn ich das ganze responsive gestalten möchte und den Brief- bzw. das Telefonsymbol dann kleiner mache. Also nicht falsch verstehen, dafür hab ich jeweils einen Code aber ich habe ja Mailadresse und Telefonnummer dahinter stehen und wenn ich die Symbole verkleinere, dann bleiben Adresse und Nummer trotzdem groß. Ich habe zwar einen HTML Code im I-net gefunden, in den ich die Nummer und Adresse einbette aber das funzt nicht.

Lire plus
Posté le de Anja J.
Martin H.
Martin H.
User

Einen besonderen Code brauchst Du für responsiv nicht. Du musst halt responsiv aktivieren und bei jeden Breakpoint den Inhalt im Header entsprechend anpassen.

Lire plus
Posté le de Martin H.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Anja J.
Grundsätzlich möchte ich das schon responsive machen. Aber ganz ehrlich, da verzweifel ich (noch) dran. Daher wollte ich das jetzt erst einmal als Desktop-Version hochladen und mich anschließend auf das responsive konzentrieren. Ich versuche die Codes und schaue, ob es funktioniert. Wenn ja, wäre da ja schon mal ein Schritt nach vorne :-).

... hallo, ... zuerst sollten Sie, wie bereits erwähnt, eine Website erstellen ...!... >> gültig ...!... (*)
... dann, wenn es nötig wäre, dann nehmen Sie EXTRA-Änderungen vor ...
... in Ihrem Fall wäre es zusätzlich zum Erstellen der Site in responsive  (*) vielleicht direkter und einfacher, den > Sticky Bar zu verwenden, zusätzlich eleganter und weniger invasiv zu sein; (vom Google-Übersetzer) ...

(*) ... sonst ist alles verloren ...

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Anja J.
Anja J.
User
Auteur

Hallo Martin,

ja, wenn das so einfach wäre, aber genau das funktioniert eben nicht. Ich habe das doch richtig verstanden, dass ich mit der größtmöglichen Auflösung beginne und wenn ich zum nächsten breakpoint gehe, muss ich doch dann das, was dann größenmäßig nicht passt, ausblenden und neu mit der richtigen Schriftgröße einsetzen, oder?

Lire plus
Posté le de Anja J.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Wieso neu? Mit einem Titel-Objekt müsste es beim Zusammenschieben des OBjekts die Schrift auch verkleinern.

Lire plus
Posté le de Andreas S.
Anja J.
Anja J.
User
Auteur

Danke Andreas, den Tipp hab ich noch gebraucht. Mir war nicht klar, dass, wenn ich das Titel-Objekt zusammenschiebe, sich der Text in den verschiedenen Ansichten verkleinert.

Ganz herzlichen Dank für Eure Hilfe. Meine Seite ist jetzt auf responsive gestellt und ich finde, dass es jetzt einigermaßen ansehnlich ist. Würde mich sehr über eure Kommentare freuen, bzw. wenn ihr noch irgendwo Punkte zum Verbessern seht, gerne her damit. Auf meinem kleinen Lappi sieht es ganz OK aus und auf meinem Handy auch.

Lire plus
Posté le de Anja J.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Die ganzen Telefonnummern würde ich verlinken mit dem Telefon und auch die Email Adressen verlinken und dafür den Schutz aktivieren.  Vielleicht den Text von @  auf [at] ausbessern.  Im Header und Footer aufpassen, dass keine Objekte außerhalb des sichtbaren Bereichs sind.

Im Content schauen, dass keine leeren Reihen und Spalten vorhanden sind und wenn nicht anders möglich mit HTML-Objekten befüllen.

Die LINK Stile unter "2" Stile würde ich mit anderen Farben machen.

Lire plus
Posté le de Andreas S.
Martin H.
Martin H.
User

Ich würde nochmals die Positionen von der Telefonnummer und Email überdenken, da diese - je nach Bildschirmbreite - außerhalb liegen. Auch würde ich unter "Mein Angebot" einen frühren Breakpoint nehmen, damit die Listen breiter dargestellt werden.

Lire plus
Posté le de Martin H.
Anja J.
Anja J.
User
Auteur

@Andreas

Ich verstehe jetzt nicht so ganz wie du das meinst, dass ich die Telefonnummern mit dem Telefon verlinken soll. In allen Sichten habe ich alles im sichtbaren Bereich in der Vorschau. Und wenn ich mir die hochgeladene Webseite anschaue, dann hab ich das ebenfalls sowohl auf meinem kleinen Laptop, als auch auf meinem großen Bildschirm in der Firma. Deswegen verstehe ich auch nicht, dass das bei der Ansicht, die Martin gepostet hat, anders ist.

Wie kann das sein?

@Martin

Die Listen sind keine Listen, ich habe dies tatsächlich, weil ich keine andere Idee dazu hatte, jedesmal eine neue Textzeile eingefügt und habe damit natürlich auch "leeren" Content und deshalb werden diese "Listen" nicht anders angezeigt, weil in der Reihe mit den 3 "Listen" insgesamt 7 Textfelder sind, davon sind 4 nicht befüllt. Siehe Anhang.

Kann ich das besser lösen, so dass ich aber trotzdem gleiche Ansicht habe?

Lire plus
Posté le de Anja J.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Wenn man auf deiner Seite ist und man will die Telefonnummer gleich antippen um gleich mit dir verbunden zu werden, muss man diese Nummer verlinken und als Telefonnummer einstellen im LINK.

Lire plus
Posté le de Andreas S.
Anja J.
Anja J.
User
Auteur

Ah, OK, jetzt verstehe ich, was du meinst. Das kann ich ändern. 

Wieso erscheint aber auf den Screenshot von Martin, die Mailadresse nur halb. In der Vorschau wird mir das in keiner Ansicht angezeigt, dass ich das nicht korrekt platziert habe.

Lire plus
Posté le de Anja J.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Möglicherweise hängt das mit den Breakpoint bzw. Umbruchpunktbreiten zusammen. Hast du spezielle Breiten genommen die nicht der Norm entsprechen?

Vielleicht sind auch die Objekte im Header außerhalb des sichtbaren Bereichs platziert.

Lire plus
Posté le de Andreas S.
Anja J.
Anja J.
User
Auteur

Ich habe das noch einmal kontrolliert. Ich habe die Breakpoints so übernommen, wie sie mir vorgeschlagen wurden. Habe das aber noch mal etwas verschoben, nur leider kann ich in der Vorschau nicht sehen, ob es jetzt stimmt, weil es ja vorher schon gestimmt hat und auf dem Tablet und dem Smartphone wurde dies bei mir korrekt angezeigt.

Aber ich habe jetzt noch ein anderes Problem und das kann ich mir auch nicht erklären. Wie gesagt, es wird soweit alles gut angezeigt, aber auf dem Tablet habe ich zwischen dem Header und dem darunter liegenden Bild eine ziemlich große freie Fläche, von der ich nicht weiß, wo sie herkommt. In der Vorschau wird, wie erwähnt, alles korrekt angezeigt. Das habe ich auf jeder Seite, wo ich vor dem Text eine Textzeile eingestellt habe, die aber nur ein Bild enthält, also unter Stil habe ich ein Hintergrundbild eingefügt. Eigentlich sollte das ja dann direkt unter dem Header angezeigt werden, in der Vorschau und auf dem Smartphone macht es das auch, auf meinem Laptop, wenn ich mit Firefox oder Explorer aufrufe, ebenfalls. Rufe ich in der Firma mit meinem PC und großem Bildschirm die Seite auf, dann hab ich unter Firefox die gleiche Ansicht wie auf dem Tablet - nämlich responsive, was ja eigentlich nicht sein sollte und auch mit dieser freien Fläche unter dem Header. Öffne ich die Seite mit dem Explorer wird alles super angezeigt. Ach ja, einen Blog hab ich auch eingefügt, den ich auf dem Tablet nicht angezeigt bekomme, weil alles (wegen der freien Fläche) in die Fußzeile gerutscht ist und ich den Beitrag nicht anklicken kann. Die gleiche Ansicht oder Problem habe ich auch auf dem PC in der Firma (aber nur unter Firefox). Ich lade dazu mal Bilder hoch.

Das Bild zu dem Blogbeitrag muss ich noch verkleinern. Offensichtlich wird das nicht automatisch verkleinert, bzw. nur ein kleiner Ausschnitt angezeigt. Oder gibt es dafür auch einen Trick, wie das responsive angezeigt wird?

Lire plus
Posté le de Anja J.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Also auf meinem PC mit einem 28 Zoll Monitor unter Firefox wird es ohne Rand oben angezeigt. Das gleich auch im BLOG ganz normal.

Wenn es am IE oder einem anderen Browser am Arbeitsplatz (außer Firefox) richtig angezeigt wird, dann kann es folgende Ursachen haben.

1. Der Firefox Browser ist komplett veraltert und wird nicht updated!

2. Der Firefox Browser hat nicht die 100% Ansicht (Zoom) aktiviert und ist auf z.B. 50% oder 200% eingestellt.

3. der PC am Arbeitsplatz hat spezielle Sicherheitsvorkehrungen die das hervorrufen.

4. der Cache im Browser sollte mal gelöscht werden.

Lire plus
Posté le de Andreas S.
Anja J.
Anja J.
User
Auteur

Den Cache hab ich schon gelöscht, das hat aber keine Auswirkung gehabt. Und die Idee mit dem Zoom hab ich auch gehabt, aber das ist es auch nicht. Könnte also tatsächlich sein, dass der Firefox Browser veraltet ist.

Aber dann bleibt ja immer noch das Tablet. Ich habe, zugegebenermaßen, ein schon älteres Ipad. Aber hier werden updates regelmäßig durchgeführt. Oder kann das tatsächlich damit zusammenhängen und auf anderen Tablets wird es ordentlich angezeigt?

Lire plus
Posté le de Anja J.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
 ‪ KolAsim ‪ ‪
Anja J. ... ... [...]... ...  ... hallo, ... zuerst sollten Sie, wie bereits erwähnt, eine Website erstellen ...!... >> gültig ...!... (*)... ... ... 

... jetzt es ist richtig, okay ...wink... ciao

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Incomedia
Stefano G.
Incomedia

Hi Anja.

What version of iOS is your iPad running?

I must confirm that as of v17, the WebSiteX5 software makes use of a new technology called CSS Grid, which brings great improvement to general performance, but is unfortunately no longer supported by older browsers.

iOS version from 10.3.3 and older might experience issues when displaying Grid CSS based websites.

Verify this information and let me know here

Thank you

Stefano

GOOGLE TRANSLATE ---

Hallo Anja.

Welche iOS-Version läuft auf deinem iPad?

Ich muss bestätigen, dass die WebSiteX5-Software ab Version 17 eine neue Technologie namens CSS Grid verwendet, die die allgemeine Leistung erheblich verbessert, aber von älteren Browsern leider nicht mehr unterstützt wird.

Bei der iOS-Version von 10.3.3 und älter treten möglicherweise Probleme bei der Anzeige von CSS-basierten Websites auf.

Überprüfen Sie diese Informationen und lassen Sie mich es hier wissen

Vielen Dank

Stefano

Lire plus
Posté le de Stefano G.