Guten Abend Leute Ich muss euch leider wegen einem kleinen, wohl via CSS lösbaren, Anliegen stören. Stehe in der Angelegenheit leider (mal wieder...) auf dem Schlauch ... Habe schon diverse Sachen probiert aber leider nicht annähernd die gewünschte Lösung erhalten. Ich würde gerne den weissen Hintergrund der Artikel Beschreibung in Malibu über die ganze Seite gehen lassen. (siehe Bild 1 mit Pfeilen und Bild 2 mit dem gewünschten Resultat - schnell mit dem Bildeditor gezaubert) Hat jemand eine Idee welchen CSS Code ich da verwenden müsste? Ich danke im Vorraus für eure Zeit und Hilfe und wünsche noch einen erholsamen Abend.
Nachtrag: Es soll nur der Hintergrund "gestreckt" werden. Der Inhalt (Text usw.) sollte in der gleichen Grösse bleiben.
Die Breite richtet sich nach der maximalen Shop-Breite. Du könntest den ganzen Bereich weiß machen, dann wären die Tabs aber auch weiß.
Danke für deine Antwort. Genau, das hatte ich so auch hinbekommen. Das möchte ich aber nicht weil dann eben wie du schon sagst auch die Tabs usw. weiß sind. Gibts es sonst keine Möglichkeit ? Oben wo Bild und Warenkorb Button sind geht es ja scheinbar auch, unabhängig von der Seitengröße.
Bitte mit Vorsicht genießen, hat keinen Anspruch, frei von unerwünschten Nebeneffekten zu sein… Code: .product-info-content div.clearfix[style^="background"]{ background-color: #fff !important; overflow-x: hidden; } .product-info .product-info-description .nav-tabs-container > .nav.nav-tabs{ background: #eee; margin: 0 -100%; }
Guten Abend Herr Späte Besten Dank für Ihre Hilfe! Ich habe das mal im Testshop probiert aber mit dem unbearbeiteten Code oben in Ihrem Beitrag kam ich leider nicht auf das gewünschte Ergebnis. Habe das komplette eigene CSS auch vorher bereinigt um wirklich nur diesen Code zu haben. Nach etwas rumprobieren habe ich das Resultat dann so erzeugen können: Code: .product-info-content div.clearfix { background-color: #fff !important; overflow-x: hidden; } .product-info .product-info-description .nav-tabs-container > .nav.nav-tabs{ background: #eee; margin: 0 -100%; } Ich musste also nur diesen Part entfernen und es funktioniert: Code: "[style^="background"]" Leider fehlt dadurch aber dann unten auf der Seite der Übergang wo die "Zu diesem Produkt empfehlen wir Ihnen:" Slider anfangen. (siehe Bilder) Ohne den Code ist dort noch eine schöne graue Abtrennung, nach dem der Code eingefügt wurde ist es alles weiss.
Da ist der komplette Bereich im Hintergrund weiß. Du hast 3 Blöcke: einmal einen mit weißem Hintergrund und weißer Mitte, einmal einen mit grauem Hintergrund und weißer Mitte und noch mal einen mit weißem Hintergrund und weißer Mitte. Texte, Produkte und so weiter sind alles in dem Bereich, der als Shopbreite eingestellt ist. Man könnte jetzt z.B. einen border-top / border-bottom mit ...px oder so einfügen, um eine Trennlilie, bzw. einen Trennbalken zu bekommen. und jetzt die Tabs mit margin-top: - ...px nach oben schieben. wäre ann so wie hier: (Link nur für registrierte Nutzer sichtbar.) Border-bottom geht aber nur, wenn man überall Cross-Selling hat, sonst verschiebt sich der Footer-Header: siehe hier:
Ah okay, ich hatte mich am Demo-Shop orientiert. Da ist der graue Hintergrund via Inline-CSS (style="background-color: #eee") hinterlegt und die Regel greift. Hintergrund Teilen-Links über die gesamte Breite: Code: .product-info-share .shariff{ background: #eee; margin: 0 -100%; padding: 20px 0; } Nochmal der Disclaimer: Das ist echt wacklig mit dem negativen Außenabstand. Die umgebenden Elemente sind halt schmaler als die Reiter-Navigation und die Teilen-Leiste. Sauberer wäre es, das HTML umzustrukturieren - aber halt auch deutlich aufwendiger.
Ja, das wäre die beste Lösung Mobil sieht es übrigens auch nciht so toll aus, da müsste man also auch noch die Bildschirmgrößen mit beachten.