Hallo, hat es schon jemand von euch mal geschafft, einen 3D-Effekt als Hintergrund für die horizontale Kategorieleiste im Header einzurichten? Ich dachte da an ein Hintergrundbild das sich wiederholt, so in etwa: Ich kann das wohl in Styleedit unter Kategorien als Hintergrundbild hochladen, aber ich kann es nur als Hintergrundbild für die Kategorien einbinden. Links und rechts von den Kategorienamen hört das einfach auf. Gibt es eine andere Möglichkeit das hinzubekommen? Dass das Bild sich über die komplette Seitenbreite wiederholt? Hier das Problem: Hier meine Styleedit Einstellungen: Oder geht das mit dem Styleeditor nicht?
Für solche Effekte ist CSS besser geeignet Code: background: #7db9e8; background: -moz-linear-gradient(top, #7db9e8 0%, #2989d8 45%, #3486c9 50%, #2989d8 55%, #7db9e8 100%); background: -webkit-linear-gradient(top, #7db9e8 0%, #2989d8 45%, #3486c9 50%, #2989d8 55%, #7db9e8 100%); background: linear-gradient(to bottom, #7db9e8 0%, #2989d8 45%, #3486c9 50%, #2989d8 55%, #7db9e8 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db9e8', endColorstr='#7db9e8', GradientType=0); Such den passenden CSS-Selektor für den Bereich und füge den Schnippsel oben per CSS-Datei oder StyleEdit hinzu.
Hallo Sergej, kannst du mir noch einen Tipp geben? Habe probiert: #categories .navbar-default .navbar-categories Das ist es alles schonmal nicht...
Code: .navbar-default { background: #7db9e8; background: -moz-linear-gradient(top, #7db9e8 0%, #2989d8 45%, #3486c9 50%, #2989d8 55%, #7db9e8 100%); background: -webkit-linear-gradient(top, #7db9e8 0%, #2989d8 45%, #3486c9 50%, #2989d8 55%, #7db9e8 100%); background: linear-gradient(to bottom, #7db9e8 0%, #2989d8 45%, #3486c9 50%, #2989d8 55%, #7db9e8 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db9e8', endColorstr='#7db9e8', GradientType=0); } .navbar-collapse .navbar-categories ul.navbar-nav { background-color: transparent; } Pass die HEX-Werte deinen Wünschen an oder füge neue hinzu.
Und .navbar-collapse .navbar-categories ul.navbar-nav > li.custom.custom-entries > a für die Content-Einträge
Pfui Teufel, ein unendlicher breiter Header. Da sind Logo und Warenkorb nur 7km auseinander auf meinem Monitor Dazu auch mal ein Anhang wie der Footer hier dann aussieht. Soll das wirklich linksbündig bis zum Anschlag?
Ihr mit euren Riesen-Monitoren An den Header muss ich ohnehin nochmal dran. Der Footer: Du meinst die Brands, oder? Ich hätte die gerne zentriert, bin aber schon mehrfach gescheitert mit padding-left, margin-left und mit text-align:center; Bin nicht so der CSS-Mensch Vermutlich müsste man einen neuen Style dafür anlegen, oder? Hat das was mit float:left; zu tun, dass es nicht zentriert ist? oder mit der img-responisve Klasse? Geht nicht: Code: <div class="box box-information panel panel-default" style="padding-left:40px;"> <div class="panel-heading"> BRANDS </div> Unsere wichtigsten Surf & Funsport Brands:<br /> <a href="/manufacturerxxx.html"><img alt="xx" class="img-responsive" src="/images/logos/brand-thumbs/xxx.png" style="width: 75px; height: 75px; float: left; padding-right:5px; padding-top: 5px;" /></a> Geht nicht: Code: <div class="box box-information panel panel-default" style="text-align:center;"> <div class="panel-heading"> BRANDS </div> Unsere wichtigsten Surf & Funsport Brands:<br /> <a href="/manufacturerxxx.html"><img alt="xx" class="img-responsive" src="/images/logos/brand-thumbs/xxx.png" style="width: 75px; height: 75px; float: left; padding-right:5px; padding-top: 5px;" /></a> Geht nicht: Code: <div class="box box-information panel panel-default" style="margin-left:40px;"> <div class="panel-heading"> BRANDS </div> Unsere wichtigsten Surf & Funsport Brands:<br /> <a href="/manufacturerxxx.html"><img alt="xx" class="img-responsive" src="/images/logos/brand-thumbs/xxx.png" style="width: 75px; height: 75px; float: left; padding-right:5px; padding-top: 5px;" /></a>
Oft genügt es schon aus, wenn man der Mutter-Klasse (Container) die volle Breite angibt (also width: 100%) und der Kind-Klasse (Container) nur ein Teil der Breite zur Verfügung stellt, mit einer "margin"-Angabe von "0 auto", also zum Beispiel: Code: .mutti { width: 100%; } .kind { width: 50%; margin: 0 auto; } Falls Notgedrungen mit "position"-Angaben hantiert wird, frei nach dem Motto "Hautsache es passt...", muss man evtl. an den "position"-Angaben drehen, je nach Angabe mit "left oder right" bekommt man die Sachen auch zentriert. Wenn dich die Unterstützung von alten Browser nicht interessiert, wäre ein Ansatz über "flex" sehr praktisch.
Flex wird was, würde ich aktuell noch nicht nehmen. Das vergeben einer Breite wirkt aber Wunder, dann kann man viel tun...