Bild im Header und Navigationsmenü gestalten 
Author: Siegbert G.
Visited 2829,
Followers 1,
Shared 0
Ich soll diese Homepage mit Website X5 nachbauen: www.tradekam.de.
Eigentlich sieht diese Seite garnicht kompliziert aus. Nur der Header macht mir Kopfzerbrechen.
1. Bei dem jetzigen Aufbau wird das Headerbild mit der Landkarte bei jedem Gerät (responsive) in der Größe automatisch angepasst (skaliert).
Dieses Thema wurde hier schon behandelt. Gibt es in der Zwischenzeit eine andere Lösung als die Bildgröße dem Breakpoint anzupassen?
2. Das schwarze Navigationsmenü geht farblich über die ganze Breite.
3. Der Header bleibt beim Scrollen stehen.
Der Rest der Seite dürfte kein Problem sein.
Wenn es garnicht anders geht muss ich die Seite umgestalten.
Posted on the
1. Gib die Karte nicht in den Header, sondern binde diese in den Seitenhintergrund ein.
2. In der V14 kann man in der STruktur das MEnü auf die ganze Breite bringen.
3. Den Header kann man nicht fixieren (ohne Code) aber wenn du es die Karte in den Hintergrund gibst, müsste dieser zu fixieren sein. Das Menü könnte man mit der Stickybar machen, ansonsten ist auch hier Code angesagt.
Take a look at this post : https://helpcenter.websitex5.com/en/post/187589
I have made an example for you, here : http://www.bramminginfo.dk/brm05/
This is made the same way as I describe in my former post
Das Hintergrundbild im Header ist eine Bilddatei die sich horizontal Wiederholt. Dieses Bild würde im Hintergrund vom Header einbauen.
Mit diesem Code (unter "Sitemap" -> "Seite" -> "Eigenschaften" -> "Eigenschaften der Seite" -> "Erweitert" -> "vor dem /Head") müsste der Header fixiert werden: <style> #imHeader {position: fixed; z-index: 1000;} </style>
Author
Hallo Andreas, kannst du mir sagen auf welcher Seite vom Handbuch dieser Seitenhintergrund gemeint ist.
Es gibt ja verschiedene Möglichkeiten ein Bild in den Seitenhintergrund einzubinden.
Hallo John, dein Beitrag kam fast gleichzeitig mit meiner Anfrage.
Hallo Martin, das Bild braucht sich nicht unbedingt wiederholen. Ich weiß auch nicht wie sich das Bild in dem Homepage-Baukasten (Domainfactory - Duda) verhält. Ich habe nur gemerkt, dass es bei responsive skaliert wird.
Deshalb habe ich gestern abend für jeden Breakpoint in einem Bildbearbeitungsprogram ein separates Bild erstellt.
Mit den Breiten bin ich aber ganz schön ins Schwitzen gekommen weil sie nachher zu meinen Breakpoints garnicht gepasst haben. 720 x 200 p hat nachher im Header bei Breakpoint 720 x 200 p ganz anders ausgesehen.
Um 0.15 Uhr hab ich dann aufgegeben.
Den Code werde ich heute abend nochmals testen.
I have now removed my example
Author
Hallo Andreas, zu Punkt 2. Ich habe geade das Programm nicht vor mir aber im Handbuch habe ich bei der Struktur nichts gefunden.
Author
Bin gerade beim Suchen um das Navigationsmenü auf die ganze Breite zu bringen.
Vielleicht könnte ein Sreenshot helfen.
Author
Freue mich auf eine Antwort, die mir weiterhilft. Bei einem Template habe ich gesehen, dass ein Navigationsmenü durch eine Grafik hinterlegt wurde damit es auf die gesamte Seitenbreite kommt.
Kommt auf die Version an und das Template!
In deinem Fall ist es aber nicht möglich, das Menü auf die Seitenbreite zu bringen bzw. den Hintergrund. Dazu müssten man einigen CSS Code einfügen. In machen Beispielen ist der Header auf die Seitenbreite gebracht worden in der V14 und diesen dann eingefärbt. Wobei das MEnü zu im Header ist. Leider habe ich es verwechselt mit dem Header und nicht das Menü!
Guten Tag Siegbert,
das Menü können Sie auf die gesamte Seitenbreite einstellen, indem Sie auf Schritt 2 - Vorlage >Inhalt des Templates die Breite des Objekts Menü vergrößern.
Ich bleibe für Sie zur Verfügung. Mit freundlichen Grüßen.
@Elisa er will den Hintergrund des Menüs auf die ganze "Bildschirmbreite" bringen und nicht nur auf die Contentbreite. So wie er bei dem Beispiel www.tradekam.de geschrieben hat.
Author
Es geht mit Gefummel wenn man im "Inhalt des Templates" das Menü markiert und bei der Einstellung "Anordnen" das Menü über die Arbeitsfläche vergrößert. Das Blöde daran ist, dass die Position mit Minuswert angepasst werden muss sonst sind die Schaltflächen nicht in der Mitte. Vielleicht hat dies Elisa gemeint.
Hallo Siegbert
Ich bin wieder da. Ich hatte einer andere Testprojekt mit fixierte Menu. Dieser projekt ist Zerbrochen.
Ich wollte die "Responsive" Funktion Prüfen.
Ich habe nun "Deiner" Testprojekt gebraucht zu diesem zweck ( test ).
Ist hier : http://www.bramminginfo.dk/brm05/
Vielleicht kannst Du etwas von hier brauchen.
Hello Siegbert
I had another project, where I tested the responsive settings, when you had a fixed menu. This test-project I managed to make several crashes - it is now deleted. I then re-used what I had made for a demo for you, and tried to see if it could be made responsive. And it can.
I hope you could be inspired by this - it has the fixed header menu, it has the full-width menu, and it can be made responsive.
Kind regards
John S.
Author
Hallo John,
vielen Dank für deine Bemühungen!
Hast du den responsiven Header mit Website X5 gemacht? Wie hast du das hinbekommen?
Kannst du mir die Datei zukommen lassen?
Hello Siegbert
It is purely made in X5.
In this post you can see how it is made : https://helpcenter.websitex5.com/en/post/187589
Same princip used for "your" site.
It is made with 8 lines in the SEO/expert - 2 lines for every "view"
I use a different background-image for every "view" - same image but resized.
Kind regards
John S.
The 8 lines that do the trick :
<style>
#imHeader_imCell_1 {position:fixed; top: 0px; left:0px; background:black; height: 280px; width: 100%; z-index: 1000; background-image: url(http://www.bramminginfo.dk/brm05/images/tradekam.jpg); padding-top:0px; background-repeat: no-repeat;}
#imHeader_imMenuObject_01 {position:relative; top: 230px; left:100px; background:black; width: 1800px; z-index: 1000;}
#imHeader_imCell_2 {position:fixed; top: 0px; left:0px; background:black; height: 200px; width: 100%; z-index: 1000; background-image: url(http://www.bramminginfo.dk/brm05/images/tradekam02.jpg); padding-top:0px; background-repeat: no-repeat;}
#imHeader_imMenuObject_02 {position:relative; top: 135px; left:0px; background:black; width: 100%; z-index: 1000;}
#imHeader_imCell_4 {position:fixed; top: 0px; left:0px; background:black; height: 130px; width: 100%; z-index: 1000; background-image: url(http://www.bramminginfo.dk/brm05/images/tradekam03.jpg); padding-top:0px; background-repeat: no-repeat;}
#imHeader_imMenuObject_04 {position:relative; top: 90px; left:20px; background:yellow; width: 50px; z-index: 1000;}
#imHeader_imCell_5 {position:fixed; top: 0px; left:0px; background:black; height: 100px; width: 100%; z-index: 1000; background-image: url(http://www.bramminginfo.dk/brm05/images/tradekam04.jpg); padding-top:0px; background-repeat: no-repeat;}
#imHeader_imMenuObject_05 {position:relative; top: 60px; left:20px; background:yellow; width: 50px; z-index: 1000;}
</style>
I think it could have been made nicer - I just wanted to test how it would act regarding the responsive.
The "numbers" in the styling will depend on your actual project.
Hope you are helped by this.