Hallo Mitglieder und Helfer, ich hoffe, dass ich hier mit meinem Thema richtig bin. Ganz oben in meinem Shop ist doch ein Navigationsfeld in dem sich z.B. Logo, Suche, Warenkorb und Menu befindet. Siehe hier, Direktlink zum Shop: toppik-schnellversand.de Dieses Feld möchte ich gerne doppelt so hoch haben, siehe meine Kennzeichnung im Screen. Die inneren Teile sollten sich allerdings im unteren Bereich befinden (nicht mittig). d.h. über dem Logo und dem Warenkorb usw. würde dann viel weiße Fläche sein. Hier ein Screen: Wie mache ich dies innerhalb der Gambio Gestaltungsmöglichkeiten? Wenn es jemand ganz genau weiß, dann würde ich mich über eine Anleitung für (fast) Dummis freuen. Danke schon mal im Voraus! Meine Gambio Version : v4.4.0.5
Korrektur meiner Hilfe-Anfrage Ich habe in der Zwischenzeit selbst ein klein wenig im Gambio versucht. Also das was ich mir in #Post1 vorgestellt hatte, ist sicher zu kompliziert und wird auch wahrscheinlich so nicht funktionieren. Deshalb hier die Korrektur meiner Anfrage und meine neue Idee. Ich möchte jetzt gerne einen Abstand vom oberen Browser-Rand von z.B. 60px. Und zwar für den kompletten Shop durchgehend. Es soll einfach alles 60px vom oberen Rand entfernt anfangen. Über dem Menu/Headerbereich soll einfach nur 60px weiße Luft sein. Nun habe ich es selbst (wahrscheinlich sehr laienhaft) mit nachfolgenden Codierungen versucht. Diese funktionieren aber nicht so wie gewünscht. Beispiele (egal ob padding oder margin): body { margin-top:60px } body.page { padding-top: 60px; } Beide Codierungen im CSS haben zur Folge, dass sich nur der gesamte Bereich UNTER dem Menu/Header-Bereich nach unten verschiebt. Es verschiebt sich aber nichts vom oberen Rand nach UNTEN, also 60px ÜBER dem Menu/Header-Bereich. Der Header-Bereich verschiebt sich nicht mit. Die Einstellung unter Bereiche >Allgemein >Layout >Abstand oben hat genau den gleichen (nicht gewünschten) Effekt. Hat jemand dafür den richtige Code für Gambio parat? Schon mal hier ein Dankeschön!
So kompliziert ist der erste Wunsch nicht: Im Style Editor (Bereiche -> Header -> Deine Variante -> Allgemein) die Höhe für den Header ändern Anschließend die Höhe für Logo, Suche Freien Bereich und Warenkorb anpassen Danach kannst Du im eigenen css die Abstände der einzelnen Bereich eingeben. Könnte hiermit gehen: Logo Code: @media (min-width: 768px){ /*Logo*/ #navbar-brand a img { margin-top: 60px ; } /*Suche*/ .navbar-search.collapse { padding: 80px 15px 10px 15px; } /*freier Bereich*/ #header .custom-container { margin-top: 60px ; } /*Warenkorb*/ #cart-container.navbar-cart { margin-top: 60px ; } } Dann sollte das etwa so aussehen: Die Werte musst Du natürlich Deinen Wünschen anpassen Wenn etwas nicht so angenommen wird, dann ein !Important zwischen px und dem ; einfügen.
Es könnte auch so gehen: Code: @media (min-width: 768px){ #header .inside { margin-top: 60px; } div#wrapper { padding-top: 60px; } } beide Varianten sind ungetestet und ich hoffe ich habe keine falsche Klammer, oder eine vergessen Gerade gesehen: das geht nicht ganz, weil dann der Freie Bereich auch ein "Header.Inside" hat und dann nach unten rutscht. Um das zu beheben benötigt es diesen Code: Code: @media (min-width: 768px){ #header .custom-container .inside { margin-top: 0px; } } Und der Header (Höhe) muss dennoch geändert werden, da dier Hintergrund sonst transparent ist. Die Sticky-Leiste muss auch angepasst werden.
Hallo Barbara, Danke für die ausführliche Hilfe und Unterstützung. Dennoch ist meine "Korrekturanfrage" eher jetzt die richtige, wie schon in #Post2 angedeutet. Also so einen Gesamtabstand von ca. 60px vom oberen Rand, für den gesamten Inhalt, wäre eigentlich das im Moment Richtigere was ich suche. Steht alles in #2. Eine Zusatzproblematik gäbe es noch: Dieser Gesamtabstand muss auch auf dem Mobilphone sein. Vielleicht hast nochmal eine Idee dazu, denn ich komme nicht weiter. Dankeschön für alle Hilfe!
Nachtrag zu meinem Post #2 +#5: Damit man sich visuell vorstellen kann, was ich meine, hier ein Screen mit Kennzeichnung. Dieser gewünschte Abstand soll bei Darstellung auf PC und bei Darstellung auf Mobil sein.
Versuche es mit: Code: #topbar-container { margin-top: 60px; } .navbar-header { background-color: #fff; } body #wrapper { padding-top: 60px; }
Liebe Barbara, tausend Dank für diesen Code. Bingo! Volltreffer! Funktioniert auf PC und funktioniert auf Mobil. Ganz nach Wunsch. Ich verfolge nun seit sehr vielen Jahren dieses Forum, habe mich ebenfalls in diesem beteiligt und durchaus auch eingemischt. Ich habe je nach Zeit auch dich hier wissensbedingt "verfolgt", um hinzuzulernen und auch oft im Forum mit dir Fragen und meine Unwissenheit ausgetauscht. Was ich mich ernsthaft frage ist: Woher nimmst du dieses unendliche Wissen auf so viele und ganz unterschiedliche Themen immer wieder einen Lösungsansatz zu finden oder vorzuschlagen? Auch wenn du dir wahrscheinlich Vieles notierst, in Daten/Dateien abspeicherst, du dir jede Menge merken kannst oder hundertausend Zettel hast. Mir ist es fast schon "unheimlich", wie du auch zu vollkommen neuen Fragestellungen eine Idee und meist sogar noch eine funktionierende Lösung parat hast. Es ist bewundernswert und über diese lange Zeit deiner Forums-Hilfe-Tätigkeit außergewöhnlich (finde ich). Es wundert mich daher nicht, dass du schon soooooo oft G-Award Winner geworden bist. Manchmal denke ich (aus Spaß), du bist eine reale lebende "menschliche" KI (noch bevor es diese überhaupt auf dem Markt gab). Barbara, ich bin jedenfalls schon ziemlich lange froh, dass es so hilfsbereite Menschen wie dich gibt. Nehme mir dich als Vorbild und helfe ab und zu ebenfalls Gambio-Shop-Inhaber, wenn diese mich per Email anfragen, wie dieses und jenes in meinem Shop realisiert worden ist. So kann ich auf diesem Wege etwas zurückgeben, was ich hier im Forum an Wissen und Hilfe selbst erhalten habe. Kurz: Ich möchte mich hier an dieser Stelle einfach mal EXTRA bedanken! Eigentlich müsste ich dir heute für diesen Volltreffer-Code 6 Sternchen geben. Das geht hier technisch aber nicht. Also bekommst du diese von mir heute in dieser Form: ******
@DrGuu Danke für deinen Hinweis. Das habe ich tatsächlich im Eifer meiner Freude nicht bemerkt. Hoffentlich gibt es auch dafür eine Lösung?! Nachfolgend das Zitat: @barbara Entschuldigung, wenn ich dich auf diesem Wege ausnahmsweise anspreche (das ist sonst echt nicht mein Stil). DrGuu hat mich auf etwas hingewiesen (siehe oben Zitat), was tatsächlich die Bedienung des Shops etwas "unschön" aussehen lässt. Ich habe soeben selbst versucht in diesen Headerbereich die Farbe Weiß hinein zu codieren. Ist mir jedoch nicht gelungen. Hast du noch einmal einen Rat parat, wie dies gelingen kann, damit das insgesamt wieder "perfekt" aussieht? Vorab ein dickes Dankeschön!
Oder besser: erhöhe die Höhe für "Header Sticky" im Sryle Editor Bereiche -> Header -> Dein genutzter Header -> Allgemein Dann geht das weiterhin über die ganze Breite,
Zusammenfassung für das Thema: "Abstand des gesamten Shops von xxpx vom Browserrand. Funktionabel auf Monitor und Mobil." Warum das Ganze? Das hat mit Google Translate zu tun. Denn seit einiger Zeit wird bei Verwendung von Google Translate ganz oben am Browserrand ein typischer Google-Balken eingeblendet, den man nicht wegbekommt. Es geht um die Übersetzung aller Shop-Seiten ohne Unterbrechung. Google hat hier die Macht. Dieser Balken überdeckt im dümmsten Falle die Suche, den Warenkorb und auf Mobil das Menu. Das kommt natürlich beim Interessenten nicht gut und hindert während der Translate-Tätigkeit von Google z.B. die Verwendung des Menus auf Mobil. Das ist schlecht für den Interessenten, schlecht für eine gute Bedienung des Shops und schlecht für mich, weil es Umsätze verhindert. Konsequenz: Der ganze Shop muss mit allen Inhalten um ca. 50px vom oberen Rand weg. Bei Verwendung von Google Translate steht dann der Google-Balken schön für sich alleine oben im neu eingerichten Abstandsbereich. Dann ist jegliches Google-Problem beseitigt und der Shop im dauerhaften Translate-Modus wieder perfekt nutzbar. Leider ist die Lösung in einem Gambio-Shop nicht ganz so einfach, als bei einer ganz normalen Website. Deshalb habe ich hier wunderbare Hilfe von Barbara erhalten (Danke!). Hier die Zusammenfassung des gesamten Codes und der Einstellungen in Style Edit, um dies in Gambio Version v4.4.0.5 zu realisieren. Für den Fall, dass das jemand mit der gleichen Problematik mal benötigt und diese Hilfestellung zusammngefaßt benötigt. Code für CSS bearbeiten: Code: #topbar-container { margin-top: 50px; } .navbar-header { background-color: #fff; } body #wrapper { padding-top: 50px; } #header .inside { background-color: #fff; } Zusätzlich sollte folgende Einstellung/Änderungen vorgenommen werden, damit ein wichtiger Teil des Headers nicht durchsichtig bleibt. Beispiel der Header Veränderung (je nach dem, was der einzelne Shop für Werte hat: Template Einstellungen >Style Edit >Theme bearbeiten >Bereiche >Header >Standard >Allgemein z.B. : Höhe 150px Höhe Mobil 60 px Höhe Sticky 150px (hier ist die Änderung vorzunehmen: gleiche px-Höhe einrichten wie "Höhe") Für eine ideale Header-Darstellung bei dieser Google-Thematik werden beide Teile benötigt: die CSS-Codierung und die Höhe Sticky Veränderung. Zumindest ist dies bei meinem Shop von Wichtigkeit. Danke an alle, die an dieser ungewöhnlichen Problemlösung mitgewirkt haben oder Hinweise gegeben haben.