kurze Info:
Der Standard der Sucheingrenzung sieht vor, dass die Überschrift oberhalb der Dropdowns steht. Beispiel:
Es gibt mittlerweile immer mehr Shops, die rechts keine Shopfenster mehr haben und damit in der Shopmitte mehr Platz in der Breite zu Verfügung steht.
Somit wäre auch eine Anordnung nebeneinander möglich, sofern man nicht zu viele Dropdowns aufblendet:
Dazu muss einfach nur ein CSS wie dieses:
über Layout > Schriften/CSS > ROOT eingefügt werden.
Per Klasse .tab_see (welche den gesamten Bereich umschließt) wurde hier eine graue Hintergrundfarbe eingesetzt. die Klassen .see_ueberschrift und .see_alle_dd sind <div> , welche man über "float:left;" nebeneinander bekommt.
Wer es lieber rund und evtl. mit sogenannten Gradients (Farbverläufen) mag, dann ist das eine Variante der Klasse .tab_see:
Ergebnis:
Link für Konfiguration von Gradients : www.colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+24,ced8db+57,d2d9db+100;Custom />
Wollte das nur mal im Forum festhalten, falls dies auch andere Shopbetreiber interessiert.
Der Standard der Sucheingrenzung sieht vor, dass die Überschrift oberhalb der Dropdowns steht. Beispiel:
Es gibt mittlerweile immer mehr Shops, die rechts keine Shopfenster mehr haben und damit in der Shopmitte mehr Platz in der Breite zu Verfügung steht.
Somit wäre auch eine Anordnung nebeneinander möglich, sofern man nicht zu viele Dropdowns aufblendet:
Dazu muss einfach nur ein CSS wie dieses:
.tab_see {background-color: #EAEAEA;width:774px;margin-top:5px;margin-left:4px;height:53px;height:53px!important;}
.see_ueberschrift{float:left;width:170px;margin-top:20px!important;margin-top:20px;margin-left:12px;height:30px;}
.see_alle_dd{float:left;margin-top:15px!important;margin-top:10px;}
.see_ueberschrift{float:left;width:170px;margin-top:20px!important;margin-top:20px;margin-left:12px;height:30px;}
.see_alle_dd{float:left;margin-top:15px!important;margin-top:10px;}
über Layout > Schriften/CSS > ROOT eingefügt werden.
Per Klasse .tab_see (welche den gesamten Bereich umschließt) wurde hier eine graue Hintergrundfarbe eingesetzt. die Klassen .see_ueberschrift und .see_alle_dd sind <div> , welche man über "float:left;" nebeneinander bekommt.
Wer es lieber rund und evtl. mit sogenannten Gradients (Farbverläufen) mag, dann ist das eine Variante der Klasse .tab_see:
.tab_see {width:774px;margin-top:5px;margin-left:4px;height:53px;height:53px!important;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #f2f5f6; /* Old browsers */
background: -moz-linear-gradient(-45deg, #f2f5f6 0%, #e3eaed 24%, #ced8db 57%, #d2d9db 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f2f5f6), color-stop(24%,#e3eaed), color-stop(57%,#ced8db), color-stop(100%,#d2d9db)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #f2f5f6 0%,#e3eaed 24%,#ced8db 57%,#d2d9db 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #f2f5f6 0%,#e3eaed 24%,#ced8db 57%,#d2d9db 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #f2f5f6 0%,#e3eaed 24%,#ced8db 57%,#d2d9db 100%); /* IE10+ */
background: linear-gradient(135deg, #f2f5f6 0%,#e3eaed 24%,#ced8db 57%,#d2d9db 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#d2d9db',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border: 1px solid #B6D1D8;
}
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #f2f5f6; /* Old browsers */
background: -moz-linear-gradient(-45deg, #f2f5f6 0%, #e3eaed 24%, #ced8db 57%, #d2d9db 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f2f5f6), color-stop(24%,#e3eaed), color-stop(57%,#ced8db), color-stop(100%,#d2d9db)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #f2f5f6 0%,#e3eaed 24%,#ced8db 57%,#d2d9db 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #f2f5f6 0%,#e3eaed 24%,#ced8db 57%,#d2d9db 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #f2f5f6 0%,#e3eaed 24%,#ced8db 57%,#d2d9db 100%); /* IE10+ */
background: linear-gradient(135deg, #f2f5f6 0%,#e3eaed 24%,#ced8db 57%,#d2d9db 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#d2d9db',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border: 1px solid #B6D1D8;
}
Ergebnis:
Link für Konfiguration von Gradients : www.colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+24,ced8db+57,d2d9db+100;Custom
Wollte das nur mal im Forum festhalten, falls dies auch andere Shopbetreiber interessiert.