website breder maken

Status
Niet open voor verdere reacties.
R

RonnieV1987

Gebruiker
Lid geworden
18 nov 2010
Berichten
206
Hallo,

ik gebruik voor mijn site prestashop.

maar vind mijn site te smal heel vaak overlappen afbeeldingen elkaar.
maar ik kan nergens in de css vinden hoe ik hem breeder moet maken.
de css is ook best onduidelijk :P

ik heb de footer ook al eens vergroot maar dan word ie alleen maar grooter naar rechts.
links blijft ie op de zelfde plek.

snap er geen fluit van.
normaal zoek je gewoon naar stukje container. meestal is dat het wel.


Code: 
/* CSS crunched with Crunch - http://crunchapp.net/ */

@import url(http://fonts.googleapis.com/css?family=Cabin+Condensed);
.block_head_border{border-bottom:2px solid #f15a23;}
.btn{-webkit-box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.2) inset;-moz-box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.2) inset;box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.2) inset;padding:0 5px 0px;font-size:16px;line-height:21px;margin-left:5px;font-weight:normal;background-color:#e5511a;background-image:-moz-linear-gradient(top, #f15a23, #d4420d);background-image:-ms-linear-gradient(top, #f15a23, #d4420d);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f15a23), to(#d4420d));background-image:-webkit-linear-gradient(top, #f15a23, #d4420d);background-image:-o-linear-gradient(top, #f15a23, #d4420d);background-image:linear-gradient(top, #f15a23, #d4420d);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f15a23', endColorstr='#d4420d', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@startColor', endColorstr='@endColor', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='@startColor', endColorstr='@endColor')";border:1px solid #a4330a;color:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25);-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=-1,Color=#40000000,Positive=true)";zoom:1;}.btn:hover,.btn:focus{color:#fff;text-decoration:none;background-position:0 0;border:1px solid #626C73;background-color:#f26632;background-image:-moz-linear-gradient(top, #f2612d, #f36c3b);background-image:-ms-linear-gradient(top, #f2612d, #f36c3b);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f2612d), to(#f36c3b));background-image:-webkit-linear-gradient(top, #f2612d, #f36c3b);background-image:-o-linear-gradient(top, #f2612d, #f36c3b);background-image:linear-gradient(top, #f2612d, #f36c3b);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2612d', endColorstr='#f36c3b', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@startColor', endColorstr='@endColor', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='@startColor', endColorstr='@endColor')";-webkit-transition:background-position 0.5s linear;-moz-transition:background-position 0.5s linear;-ms-transition:background-position 0.5s linear;-o-transition:background-position 0.5s linear;transition:background-position 0.5s linear;text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25);-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=-1,Color=#40000000,Positive=true)";zoom:1;}
.ellipsis{overflow:hidden;text-overflow:ellipsis;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;}
a:hover{color:#f15a23;text-decoration:none;}
body.cleantheme{background:#f8f8fa;color:#555555;padding:10px 0;font:12px/14px "PT Sans",Helvetica,Arial,sans-serif,Verdana,sans-serif;}body.cleantheme.pattern1{background:url(../img/patterns/pattern1.png) repeat transparent;}
body.cleantheme.pattern2{background:url(../img/patterns/pattern2.png) repeat transparent;}
body.cleantheme.pattern3{background:url(../img/patterns/pattern3.png) repeat transparent;}
body.cleantheme.pattern4{background:url(../img/patterns/pattern4.png) repeat transparent;}
body.cleantheme.pattern5{background:url(../img/patterns/pattern5.jpg) repeat transparent;}
body.cleantheme.pattern6{background:url(../img/patterns/pattern6.jpg) repeat transparent;}
body.cleantheme.pattern7{background:url(../img/patterns/pattern7.jpg) repeat transparent;}
body.cleantheme.pattern8{background:url(../img/patterns/pattern8.jpg) repeat transparent;}
.cleantheme input.button_mini,.cleantheme input.button_small,.cleantheme input.button,.cleantheme input.button_large,.cleantheme input.button_mini_disabled,.cleantheme input.button_small_disabled,.cleantheme input.button_disabled,.cleantheme input.button_large_disabled,.cleantheme input.exclusive_mini,.cleantheme input.exclusive_small,.cleantheme input.exclusive,.cleantheme input.exclusive_large,.cleantheme input.exclusive_mini_disabled,.cleantheme input.exclusive_small_disabled,.cleantheme input.exclusive_disabled,.cleantheme input.exclusive_large_disabled,.cleantheme a.button_mini,.cleantheme a.button_small,.cleantheme a.button,.cleantheme a.button_large,.cleantheme a.exclusive_mini,.cleantheme a.exclusive_small,.cleantheme a.exclusive,.cleantheme a.exclusive_large,.cleantheme span.button_mini,.cleantheme span.button_small,.cleantheme span.button,.cleantheme span.button_large,.cleantheme span.exclusive_mini,.cleantheme span.exclusive_small,.cleantheme span.exclusive,.cleantheme span.exclusive_large,.cleantheme span.exclusive_large_disabled{background:none;background-image:none;}
.cleantheme #availability_statut #availability_value{float:right;}
.cleantheme span.exclusive{display:none !important;}
.cleantheme #search_block_top .button{background:none;background-image:none;}
.cleantheme #page{padding:0 15px;background:none repeat scroll 0 0 #FFFFFF;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.08);-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.08);box-shadow:0 0 8px rgba(0, 0, 0, 0.08);}
.cleantheme #header{padding:10px 0 0;}
.cleantheme ul#header_links{margin-top:0;}.cleantheme ul#header_links li{border-left:0 none;}.cleantheme ul#header_links li a{font-size:14px;color:#666666;}.cleantheme ul#header_links li a:hover{color:#f15a23;text-decoration:none;-webkit-transition:0.5s ease;-moz-transition:0.5s ease;-ms-transition:0.5s ease;-o-transition:0.5s ease;transition:0.5s ease;}
.cleantheme #search_block_top #search_query_top{background:none repeat scroll 0 0 #FFFFFF;-webkit-border-radius:5px !important;-moz-border-radius:5px !important;border-radius:5px !important;border:1px solid #E4E4E4 !important;color:#333333;font-size:16px;height:32px;line-height:32px;outline:medium none;padding:0 10px;width:300px;}
.cleantheme #search_block_top{right:210px;position:absolute;top:20px;width:457px;}
.cleantheme #search_block_top .button{-webkit-box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.2) inset;-moz-box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.2) inset;box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.2) inset;padding:0 5px 0px;font-size:16px;line-height:21px;margin-left:5px;font-weight:normal;background-color:#e5511a;background-image:-moz-linear-gradient(top, #f15a23, #d4420d);background-image:-ms-linear-gradient(top, #f15a23, #d4420d);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f15a23), to(#d4420d));background-image:-webkit-linear-gradient(top, #f15a23, #d4420d);background-image:-o-linear-gradient(top, #f15a23, #d4420d);background-image:linear-gradient(top, #f15a23, #d4420d);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f15a23', endColorstr='#d4420d', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@startColor', endColorstr='@endColor', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='@startColor', endColorstr='@endColor')";border:1px solid #a4330a;color:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25);-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=-1,Color=#40000000,Positive=true)";zoom:1;height:33px;}.cleantheme #search_block_top .button:hover,.cleantheme #search_block_top .button:focus{color:#fff;text-decoration:none;background-position:0 0;border:1px solid #626C73;background-color:#f26632;background-image:-moz-linear-gradient(top, #f2612d, #f36c3b);background-image:-ms-linear-gradient(top, #f2612d, #f36c3b);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f2612d), to(#f36c3b));background-image:-webkit-linear-gradient(top, #f2612d, #f36c3b);background-image:-o-linear-gradient(top, #f2612d, #f36c3b);background-image:linear-gradient(top, #f2612d, #f36c3b);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2612d', endColorstr='#f36c3b', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@startColor', endColorstr='@endColor', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='@startColor', endColorstr='@endColor')";-webkit-transition:background-position 0.5s linear;-moz-transition:background-position 0.5s linear;-ms-transition:background-position 0.5s linear;-o-transition:background-position 0.5s linear;transition:background-position 0.5s linear;text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25);-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=-1,Color=#40000000,Positive=true)";zoom:1;}
.cleantheme #header_right #currencies_block_top{background:none repeat scroll 0 0 #FFFFFF;border-bottom-left-radius:3px;border-bottom-right-radius:3px;float:right;margin:-4px 0 0;padding:0;}
.cleantheme #header_right #currencies_block_top p{background:none;clear:left;color:#666666;font-family:"PT Sans",Helvetica,Arial,sans-serif;font-size:14px;padding-right:0px;text-align:right;}.cleantheme #header_right #currencies_block_top p:hover{color:#f15a23;-webkit-transition:0.5s ease;-moz-transition:0.5s ease;-ms-transition:0.5s ease;-o-transition:0.5s ease;transition:0.5s ease;}
.cleantheme #setCurrency .currencies_ul_hover{background:#f8f8fa;color:#555555;display:block;height:auto;padding:5px 10px;position:absolute;right:3px;text-align:center;width:auto;z-index:5000;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.cleantheme #setCurrency .currencies_ul_hover a{color:#555555;}
.cleantheme #shopping_cart a{background-color:#F8F8FA;border-radius:3px 3px 3px 3px;display:block;height:15px;min-width:130px;padding:15px 27px 10px 43px;}
.cleantheme #header #cart_block{background:none repeat scroll 0 0 #f8f8fa;-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.08);-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.08);box-shadow:0 0 8px rgba(0, 0, 0, 0.08);right:0;top:82px;width:277px;font-size:13px;}
.cleantheme #header_logo{display:block;float:left;margin-top:-10px;}
.cleantheme .sf-contener{margin-top:0px;}
.cleantheme .sf-menu{background:#444444;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;padding:0 10px;height:40px;width:960px;}.cleantheme .sf-menu a{color:#fff;text-shadow:none;padding:0 10px;line-height:40px;font-size:14px;}.cleantheme .sf-menu a:hover{color:#fff;}
.cleantheme .sf-menu a.sf-with-ul{min-width:1px;padding-right:2.25em;}
.cleantheme .sf-menu li{border-right:0 none;}
.cleantheme .sf-menu a:focus,.cleantheme .sf-menu a:hover,.cleantheme .sf-menu a:active{background:#f15a23;}
.cleantheme .sf-sub-indicator{top:16px ;}
.cleantheme .sf-shadow ul{background:#f15a23;padding:0 0px 0px 0;-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:1px 2px 3px rgba(0, 0, 0, 0.2);-moz-box-shadow:1px 2px 3px rgba(0, 0, 0, 0.2);box-shadow:1px 2px 3px rgba(0, 0, 0, 0.2);}.cleantheme .sf-shadow ul li ul{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.cleantheme .sf-menu ul li:hover,.cleantheme .sf-menu ul li.sfHover,.cleantheme .sf-menu ul li a:focus,.cleantheme .sf-menu ul li a:hover,.cleantheme .sf-menu ul li a:active{background:none;background:rgba(255, 255, 255, 0.03);outline:0 none;}
.cleantheme .sf-menu li:hover a{background:#f15a23;}
.cleantheme .sf-menu li li{background:none;}
.cleantheme .sf-menu li li a{line-height:30px;overflow:hidden;text-overflow:ellipsis;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;}
.cleantheme .sf-menu li:hover ul,.cleantheme .sf-menu li.sfHover ul{left:0;top:40px;z-index:99;width:auto;}
.cleantheme .sf-with-ul .sf-sub-indicator{top:16px ;}
.cleantheme .sf-menu ul li .sf-with-ul .sf-sub-indicator{top:7px ;}
.cleantheme ul.sf-menu li li:hover ul,.cleantheme ul.sf-menu li li.sfHover ul{left:99%;top:0;}
.cleantheme .sf-menu li li li{background:none repeat scroll 0 0 transparent;}
.cleantheme ul.sf-menu li li li:hover ul,.cleantheme ul.sf-menu li li li.sfHover ul,.cleantheme ul.sf-menu li li li li:hover ul,.cleantheme ul.sf-menu li li li li.sfHover ul{left:99% !important;top:0;}
.cleantheme .sf-menu li li{width:160px;}
.cleantheme .block .title_block,.cleantheme .block h4{background:transparent;color:#555555;font-size:16px;font-weight:normal;padding:0;line-height:30px;height:30px;text-align:left;text-shadow:none;text-transform:uppercase;border-bottom:2px solid #f15a23;display:block;}
.cleantheme .block .title_block a,.cleantheme .block h4 a{color:#555555;}
.cleantheme #contact_block .title_block,.cleantheme #contact_block h4,.cleantheme #new-products_block_right p.title_block,.cleantheme #new-products_block_right h4,.cleantheme #special_block_right p.title_block,.cleantheme #special_block_right h4{font-size:16px;padding:0;}
.cleantheme #left_column{padding:0 10px 0 0 ;margin-right:9px;border-right:1px solid #eeeeee;}
.cleantheme #column-left{border-right:1px solid #EEEEEE;float:left;padding:0 15px 0 0;width:220px;}
.cleantheme #newsletter_block_left .title_block,.cleantheme #newsletter_block_left h4{border-bottom:0 none;color:#666666;line-height:14px;padding:0 0 12px 28px;text-shadow:0 1px 0 #FFFFFF;width:auto;}
.cleantheme #new-products_block_right dd a.lnk_more{color:#f15a23;}
.cleantheme #footer .myaccount .title_block,.cleantheme #footer .myaccount h4{background:none repeat scroll 0 0 transparent;border-bottom:0 none;height:auto;line-height:14px;padding:0 0 10px;}
.cleantheme #footer{background:none repeat scroll 0 0 #333333;color:#FFFFFF;margin:0 0 0 -15px;width:1010px;}
.cleantheme #left_column .block li a{color:#555555;display:block;font-size:14px;line-height:20px;text-transform:uppercase;}.cleantheme #left_column .block li a:hover{color:#f15a23;-webkit-transition:0.5s ease;-moz-transition:0.5s ease;-ms-transition:0.5s ease;-o-transition:0.5s ease;transition:0.5s ease;}
.cleantheme #categories_block_left li a,.cleantheme .blocksupplier li a,.cleantheme .blockmanufacturer li a,.cleantheme .informations_block_left li a{background-position:10px 13px;}
.cleantheme #special_block_right .products span.price,.cleantheme #featured-products_block_center .price{color:#f15a23;}
.cleantheme #featured-products_block_center li{text-align:center;}.cleantheme #featured-products_block_center li .s_title_block a{overflow:hidden;text-overflow:ellipsis;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;}
.cleantheme .resumecat{background:none repeat scroll 0 0 transparent;border-bottom:2px solid #f15a23;color:#555555;margin:15px 0 10px;padding:8px 7px;}
.cleantheme #center_column .sortPagiBar{background:none;color:#555555;font-family:"PT Sans",Helvetica,Arial,sans-serif;padding:10px;border-bottom:2px solid #f15a23;}
.cleantheme #featured-products_block_center .s_title_block,.cleantheme #featured-products_block_center h5{font-size:14px;}
.cleantheme #product_list li .discount{background:#f15a23;}
.cleantheme #product_list li span.new{background-color:#f15a23;}
.cleantheme #product_list li .price{color:#f15a23;}
.cleantheme .our_price_display{color:#f15a23;}
.cleantheme .idTabs a{background:none repeat scroll 0 0 transparent;color:#444444;display:block;font-size:14px;padding:10px 10px 7px;text-decoration:none;}
.cleantheme .idTabs .selected{background:none;border:2px solid #f15a23;border-bottom:2px solid #fff;}
.cleantheme .idTabs{border-bottom:2px solid #f15a23;list-style-type:none;margin-top:20px;padding:0 5px;}
.cleantheme ul.idTabs li{float:left;margin-bottom:-2px;margin-right:1px;}
.cleantheme #footer li a,.cleantheme #footer .myaccount li a{color:#999999;}.cleantheme #footer li a:hover,.cleantheme #footer .myaccount li a:hover{color:#fafafa;-webkit-transition:0.5s ease;-moz-transition:0.5s ease;-ms-transition:0.5s ease;-o-transition:0.5s ease;transition:0.5s ease;}
.cleantheme #footer .title_block,.cleantheme #footer .title_block a{color:#ACACAC;}.cleantheme #footer .title_block:hover,.cleantheme #footer .title_block a:hover{color:#fafafa;-webkit-transition:0.5s ease;-moz-transition:0.5s ease;-ms-transition:0.5s ease;-o-transition:0.5s ease;transition:0.5s ease;}
.cleantheme #block_contact_infos li pre{color:#999;font-family:"PT Sans",Helvetica,Arial,sans-serif;}
.cleantheme #footer li{padding:3px 0;}
.cleantheme #footer{-webkit-border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;}
.cleantheme #create-account_form h3,.cleantheme #authentication #login_form h3{background:none;color:#555555;}
.cleantheme #account-creation_form fieldset,.cleantheme fieldset.account_creation,.cleantheme #add_address fieldset{border:0 none;}
.cleantheme #account-creation_form h3,.cleantheme #add_address h3,.cleantheme #contact h3{background:#444444;}
.cleantheme table#cart_summary th,.cleantheme table.std th,.cleantheme table.table_block th,.cleantheme .addresses ul.address .address_title,.cleantheme #order-list th{background:#444444;}
.cleantheme #product_list li .ajax_add_to_cart_button{padding-left:0px;color:#fff;}
.cleantheme #product_list li .ajax_add_to_cart_button span,.cleantheme .content_prices #add_to_cart span,.cleantheme #cart_block #cart-buttons #button_order_cart span{display:none;}
.cleantheme .ajax_add_to_cart_button span,.cleantheme .content_prices #add_to_cart span,.cleantheme #cart_block #cart-buttons #button_order_cart span{display:none;}
.cleantheme input.button_mini,.cleantheme input.button_small,.cleantheme input.button,.cleantheme input.button_large,.cleantheme input.button_mini_disabled,.cleantheme input.button_small_disabled,.cleantheme input.button_disabled,.cleantheme input.button_large_disabled,.cleantheme input.exclusive_mini,.cleantheme input.exclusive_small,.cleantheme input.exclusive,.cleantheme input.exclusive_large,.cleantheme input.exclusive_mini_disabled,.cleantheme input.exclusive_small_disabled,.cleantheme input.exclusive_disabled,.cleantheme input.exclusive_large_disabled{-webkit-box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.2) inset;-moz-box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.2) inset;box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.2) inset;padding:0 5px 0px;font-size:16px;line-height:21px;margin-left:5px;font-weight:normal;background-color:#e5511a;background-image:-moz-linear-gradient(top, #f15a23, #d4420d);background-image:-ms-linear-gradient(top, #f15a23, #d4420d);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f15a23), to(#d4420d));background-image:-webkit-linear-gradient(top, #f15a23, #d4420d);background-image:-o-linear-gradient(top, #f15a23, #d4420d);background-image:linear-gradient(top, #f15a23, #d4420d);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f15a23', endColorstr='#d4420d', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@startColor', endColorstr='@endColor', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='@startColor', endColorstr='@endColor')";border:1px solid #a4330a;color:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25);-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=-1,Color=#40000000,Positive=true)";zoom:1;padding:0 5px 3px!important;}.cleantheme input.button_mini:hover,.cleantheme input.button_small:hover,.cleantheme input.button:hover,.cleantheme input.button_large:hover,.cleantheme input.button_mini_disabled:hover,.cleantheme input.button_small_disabled:hover,.cleantheme input.button_disabled:hover,.cleantheme input.button_large_disabled:hover,.cleantheme input.exclusive_mini:hover,.cleantheme input.exclusive_small:hover,.cleantheme input.exclusive:hover,.cleantheme input.exclusive_large:hover,.cleantheme input.exclusive_mini_disabled:hover,.cleantheme input.exclusive_small_disabled:hover,.cleantheme input.exclusive_disabled:hover,.cleantheme input.exclusive_large_disabled:hover,.cleantheme input.button_mini:focus,.cleantheme input.button_small:focus,.cleantheme input.button:focus,.cleantheme input.button_large:focus,.cleantheme input.button_mini_disabled:focus,.cleantheme input.button_small_disabled:focus,.cleantheme input.button_disabled:focus,.cleantheme input.button_large_disabled:focus,.cleantheme input.exclusive_mini:focus,.cleantheme input.exclusive_small:focus,.cleantheme input.exclusive:focus,.cleantheme input.exclusive_large:focus,.cleantheme input.exclusive_mini_disabled:focus,.cleantheme input.exclusive_small_disabled:focus,.cleantheme input.exclusive_disabled:focus,.cleantheme input.exclusive_large_disabled:focus{color:#fff;text-decoration:none;background-position:0 0;border:1px solid #626C73;background-color:#f26632;background-image:-moz-linear-gradient(top, #f2612d, #f36c3b);background-image:-ms-linear-gradient(top, #f2612d, #f36c3b);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f2612d), to(#f36c3b));background-image:-webkit-linear-gradient(top, #f2612d, #f36c3b);background-image:-o-linear-gradient(top, #f2612d, #f36c3b);background-image:linear-gradient(top, #f2612d, #f36c3b);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2612d', endColorstr='#f36c3b', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@startColor', endColorstr='@endColor', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='@startColor', endColorstr='@endColor')";-webkit-transition:background-position 0.5s linear;-moz-transition:background-position 0.5s linear;-ms-transition:background-position 0.5s linear;-o-transition:background-position 0.5s linear;transition:background-position 0.5s linear;text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25);-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=-1,Color=#40000000,Positive=true)";zoom:1;}
.cleantheme a.button_mini,.cleantheme a.button_small,.cleantheme a.button,.cleantheme a.button_large,.cleantheme a.exclusive_mini,.cleantheme a.exclusive_small,.cleantheme a.exclusive,.cleantheme a.exclusive_large,.cleantheme span.button_mini,.cleantheme span.button_small,.cleantheme span.button,.cleantheme span.button_large,.cleantheme span.exclusive_mini,.cleantheme span.exclusive_small,.cleantheme span.exclusive,.cleantheme span.exclusive_large,.cleantheme span.exclusive_large_disabled{-webkit-box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.2) inset;-moz-box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.2) inset;box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.2) inset;padding:0 5px 0px;font-size:16px;line-height:21px;margin-left:5px;font-weight:normal;background-color:#e5511a;background-image:-moz-linear-gradient(top, #f15a23, #d4420d);background-image:-ms-linear-gradient(top, #f15a23, #d4420d);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f15a23), to(#d4420d));background-image:-webkit-linear-gradient(top, #f15a23, #d4420d);background-image:-o-linear-gradient(top, #f15a23, #d4420d);background-image:linear-gradient(top, #f15a23, #d4420d);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f15a23', endColorstr='#d4420d', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@startColor', endColorstr='@endColor', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='@startColor', endColorstr='@endColor')";border:1px solid #a4330a;color:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25);-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=-1,Color=#40000000,Positive=true)";zoom:1;padding:0 5px 0px!important;}.cleantheme a.button_mini:hover,.cleantheme a.button_small:hover,.cleantheme a.button:hover,.cleantheme a.button_large:hover,.cleantheme a.exclusive_mini:hover,.cleantheme a.exclusive_small:hover,.cleantheme a.exclusive:hover,.cleantheme a.exclusive_large:hover,.cleantheme span.button_mini:hover,.cleantheme span.button_small:hover,.cleantheme span.button:hover,.cleantheme span.button_large:hover,.cleantheme span.exclusive_mini:hover,.cleantheme span.exclusive_small:hover,.cleantheme span.exclusive:hover,.cleantheme span.exclusive_large:hover,.cleantheme span.exclusive_large_disabled:hover,.cleantheme a.button_mini:focus,.cleantheme a.button_small:focus,.cleantheme a.button:focus,.cleantheme a.button_large:focus,.cleantheme a.exclusive_mini:focus,.cleantheme a.exclusive_small:focus,.cleantheme a.exclusive:focus,.cleantheme a.exclusive_large:focus,.cleantheme span.button_mini:focus,.cleantheme span.button_small:focus,.cleantheme span.button:focus,.cleantheme span.button_large:focus,.cleantheme span.exclusive_mini:focus,.cleantheme span.exclusive_small:focus,.cleantheme span.exclusive:focus,.cleantheme span.exclusive_large:focus,.cleantheme span.exclusive_large_disabled:focus{color:#fff;text-decoration:none;background-position:0 0;border:1px solid #626C73;background-color:#f26632;background-image:-moz-linear-gradient(top, #f2612d, #f36c3b);background-image:-ms-linear-gradient(top, #f2612d, #f36c3b);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f2612d), to(#f36c3b));background-image:-webkit-linear-gradient(top, #f2612d, #f36c3b);background-image:-o-linear-gradient(top, #f2612d, #f36c3b);background-image:linear-gradient(top, #f2612d, #f36c3b);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2612d', endColorstr='#f36c3b', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@startColor', endColorstr='@endColor', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='@startColor', endColorstr='@endColor')";-webkit-transition:background-position 0.5s linear;-moz-transition:background-position 0.5s linear;-ms-transition:background-position 0.5s linear;-o-transition:background-position 0.5s linear;transition:background-position 0.5s linear;text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25);-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=-1,Color=#40000000,Positive=true)";zoom:1;}
.cleantheme .sortPagiBar #bt_compare{-webkit-box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.2) inset;-moz-box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.2) inset;box-shadow:0 1px 0 0 rgba(255, 255, 255, 0.2) inset;padding:0 5px 0px;font-size:16px;line-height:21px;margin-left:5px;font-weight:normal;background-color:#e5511a;background-image:-moz-linear-gradient(top, #f15a23, #d4420d);background-image:-ms-linear-gradient(top, #f15a23, #d4420d);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f15a23), to(#d4420d));background-image:-webkit-linear-gradient(top, #f15a23, #d4420d);background-image:-o-linear-gradient(top, #f15a23, #d4420d);background-image:linear-gradient(top, #f15a23, #d4420d);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f15a23', endColorstr='#d4420d', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@startColor', endColorstr='@endColor', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='@startColor', endColorstr='@endColor')";border:1px solid #a4330a;color:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25);-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=-1,Color=#40000000,Positive=true)";zoom:1;padding:0 5px 3px!important;}.cleantheme .sortPagiBar #bt_compare:hover,.cleantheme .sortPagiBar #bt_compare:focus{color:#fff;text-decoration:none;background-position:0 0;border:1px solid #626C73;background-color:#f26632;background-image:-moz-linear-gradient(top, #f2612d, #f36c3b);background-image:-ms-linear-gradient(top, #f2612d, #f36c3b);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f2612d), to(#f36c3b));background-image:-webkit-linear-gradient(top, #f2612d, #f36c3b);background-image:-o-linear-gradient(top, #f2612d, #f36c3b);background-image:linear-gradient(top, #f2612d, #f36c3b);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2612d', endColorstr='#f36c3b', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='@startColor', endColorstr='@endColor', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='@startColor', endColorstr='@endColor')";-webkit-transition:background-position 0.5s linear;-moz-transition:background-position 0.5s linear;-ms-transition:background-position 0.5s linear;-o-transition:background-position 0.5s linear;transition:background-position 0.5s linear;text-shadow:0px -1px 0px rgba(0, 0, 0, 0.25);-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=-1,Color=#40000000,Positive=true)";zoom:1;}
.cleantheme #product_list li .lnk_view{font-size:12px;line-height:14px;text-shadow:none;}
.cleantheme #cart_block #cart-buttons #button_order_cart{margin-bottom:10px;}
.cleantheme h2.productscategory_h2{border-bottom:1px solid #f15a23;color:#333333;font-size:18px;margin:40px 0 20px;padding:10px 0;}
.cleantheme #layered_block_left .layered_subtitle{display:inline-block;font-size:14px;font-weight:bold;border-bottom:1px solid #f15a23;line-height:20px;}
.cleantheme #layered_block_left div>form>div>div{margin-top:10px;}
.cleantheme #product_list li{border:1px solid transparent;border-radius:3px 3px 3px 3px;margin-bottom:14px;padding:12px 8px;}.cleantheme #product_list li:hover{border:1px solid #eeeeee;background:#fafafa;-webkit-box-shadow:0 0 6px rgba(0, 0, 0, 0.1);-moz-box-shadow:0 0 6px rgba(0, 0, 0, 0.1);box-shadow:0 0 6px rgba(0, 0, 0, 0.1);-webkit-transition:0.3s linear;-moz-transition:0.3s linear;-ms-transition:0.3s linear;-o-transition:0.3s linear;transition:0.3s linear;}
.cleantheme #featured-products_block_center .s_title_block{width:126px;overflow:hidden;text-overflow:ellipsis;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;}
.cleantheme #categories_block_left li .OPEN,.cleantheme #categories_block_left li .CLOSE{margin:12px 10px 0;}
.cleantheme #categories_block_left li ul{margin-left:29px;width:173px;}
.cleantheme #categories_block_left li ul li a{background:none repeat scroll 0 0 transparent;padding-left:0;padding-right:0;width:144px;overflow:hidden;text-overflow:ellipsis;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;}
.cleantheme #subcategories h3{background:#444444;border-radius:4px 4px 4px 4px;color:#FFFFFF;font-size:13px;padding:8px 12px;text-shadow:none;text-transform:uppercase;}
.cleantheme #newsletter_block_left input.button_mini{border:0 none;cursor:pointer;height:23px;left:-2px;margin:0;position:relative;text-indent:-5000px;top:1px;width:22px;}
.cleantheme #featured-products_block_center .product_image span.new{background-color:#f15a23;font-family:arial;}
.cleantheme #header_right #languages_block_top{background:none repeat scroll 0 0 transparent;margin:0 0 0 5px;padding:0;}
.cleantheme #header_right #languages_block_top p{background:none repeat scroll 0 0 transparent;padding-right:10px;}
.cleantheme #countries .countries_ul_hover{background:none repeat scroll 0 0 transparent;display:block;height:auto;padding:5px 10px;position:absolute;right:-4px;width:20px;z-index:5000;list-style:none outside none;}
.cleantheme.two_col #right_column{display:none;}
.cleantheme.two_col #center_column{width:757px;margin-right:0;}
.cleantheme.two_col #featured-products_block_center li.last_item_of_line{margin-right:25px;}
.cleantheme.two_col #featured-products_block_center li{margin-right:25px;}
.cleantheme.two_col #pb-left-column{float:left;margin-left:80px;width:350px;}
.cleantheme.two_col #pb-left-column #buy_block label{display:inline-block;font-size:12px;font-weight:700;margin-right:10px;text-align:right;width:160px;}
.cleantheme.two_col #availability_statut span#availability_label,.cleantheme.two_col #availability_date_label{display:inline-block;font-size:12px;font-weight:700;margin-right:10px;text-align:right;width:160px;}
.cleantheme.two_col #product_list li .center_block{border-right:1px dotted #CCCCCC;float:left;padding:0 7px;width:563px;}
#order.two_col #center_column,#order-confirmation.two_col #center_column{margin:0 111px;width:1000px;}
.cleantheme.grid ul#product_list{list-style-type:none;margin:0 -5px;overflow:hidden;}
.cleantheme.grid #product_list li{float:left;margin:5px;padding:8px 8px;width:244px;position:relative;height:196px;border:1px solid #eeeeee;}
.cleantheme.grid #product_list li .left_block{bottom:5px;float:none;left:8px;padding-top:0;position:absolute;width:14px;z-index:2;}.cleantheme.grid #product_list li .left_block p{padding-bottom:0px;}
.cleantheme.grid #product_list li .left_block .compare label{display:block;left:130%;position:absolute;top:1px;width:190px;}
.cleantheme.grid #product_list li .center_block{border-right:0px dotted #CCCCCC;float:left;padding:0;width:244px;height:126px;}
.cleantheme.grid #product_list li p.product_desc,.cleantheme.grid #product_list li p.product_desc a{color:#666666;height:101px;overflow:hidden;text-overflow:ellipsis;width:103px;}
.cleantheme.grid #product_list li .right_block{float:left;position:relative;text-align:left;width:100%;}
.cleantheme.grid #product_list li .content_price{float:left;margin:26px 0 0;}
.cleantheme.grid #product_list li .ajax_add_to_cart_button{color:#FFFFFF;float:right;margin:24px 0 0;padding-left:0;}
.cleantheme.grid #product_list li .lnk_view{clear:both;float:right;font-size:12px;line-height:14px;margin:0;text-shadow:none;}
.cleantheme.grid #product_list li h3{color:#000000;float:left;font-size:13px;padding:0 0 10px;width:103px;}
.cleantheme.grid #product_list li .discount,.cleantheme.grid ul#product_list li .on_sale,.cleantheme.grid ul#product_list li .online_only{display:none;}
.cleantheme.grid #product_list .right_block .exclusive{margin:24px 0 0;float:right;}
.cleantheme.two_col.grid #product_list li{width:227px;}
.cleantheme.two_col.grid #product_list li .center_block{width:228px;}
.cleantheme.two_col.grid #product_list li p.product_desc,.cleantheme.two_col.grid .grid #product_list li p.product_desc a{width:87px;height:99px;}
.cleantheme.two_col.grid #product_list li h3{color:#000000;float:left;font-size:13px;padding:0 0 10px;width:88px;overflow:hidden;text-overflow:ellipsis;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;}
 
hij is toch breed zat? als je hem breder maakt is de website onduidelijk voor mensen met een beeldscherm resolutie van 1024 of lager
 
zo te zien word een gebruik gemaakt van een grid. Een grid is ervoor bedoeld dat je op elk soort beeldscherm de website goed krijgt te zien. Deze hoor je dan ook niet zelf aan te passen. Wil je dat toch doen, dan moet je in grid_prestashop.css zijn
 
Source.less

PHP: 
//button
.btn {
  .box-shadow(0 1px 0 0 rgba(255, 255, 255, 0.2) inset );
  padding: 0 5px 0px;
  font-size: 16px;
  line-height: 21px;
  margin-left: 5px;
  font-weight: normal;
  #gradient > .vertical(@colorbtn, darken(@colorbtn, 10%));
  border: 1px solid darken(@colorbtn, 20%);
  color: #fff;
  .border-radius(4px);
  text-shadow:0px -1px 0px rgba(0,0,0,0.25);
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=-1,Color=#40000000,Positive=true)";zoom:1;
    
  &:hover,
  &:focus {
      color: #fff;
    text-decoration: none;
    background-position: 0 0;
    border: 1px solid #626C73;
     #gradient > .vertical(lighten(@colorbtn,2%), lighten(@colorbtn,5%));
    .transition(background-position 0.5s linear);
    text-shadow:0px -1px 0px rgba(0,0,0,0.25);
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=-1,Color=#40000000,Positive=true)";zoom:1;
    
  }
    
}


// CSS3 PROPERTIES
// --------------------------------------------------

// Border Radius
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

// Drop shadows
.box-shadow(@shadow: 0 0 8px rgba(0, 0, 0, 0.08)) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;


}

// Gradients
#gradient {
  .horizontal(@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(left, @startColor, @endColor); // Le standard
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
  }
  .vertical(@startColor: #555, @endColor: #333) {
    background-color: mix(@startColor, @endColor, 60%);
    background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(top, @startColor, @endColor); // The standard
    background-repeat: repeat-x;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@startColor', endColorstr='@endColor', GradientType=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='@startColor', endColorstr='@endColor')"; /* IE8 */

  }
  .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
    background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
    background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
  }
  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
    background-color: mix(@midColor, @endColor, 80%);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
    background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
    background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
    background-repeat: no-repeat;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
  }
  .radial(@innerColor: #555, @outerColor: #333)  {
    background-color: @outerColor;
    background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
    background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
    background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
    background-image: -ms-radial-gradient(circle, @innerColor, @outerColor);
    background-repeat: no-repeat;
    // Opera cannot do radial gradients yet
  }
  .striped(@color, @angle: -45deg) {
    background-color: @color;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  }
}
.ellipsis{ 
overflow: hidden; text-overflow: ellipsis;-ms-text-overflow: ellipsis; -o-text-overflow: ellipsis;  white-space: nowrap;
    }
// Transitions
.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
      -ms-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
 
           }


//overrides
a:hover {
    color: @color2;text-decoration: none;
}
body.cleantheme {
    background: @bgcolor;
    color: @textcolor;
    padding: 10px 0;
    font: 12px/14px @fontfamily,Verdana,sans-serif;
    &.pattern1{
     background: url(../img/patterns/pattern1.png) repeat transparent;   
    }
    &.pattern2{
     background: url(../img/patterns/pattern2.png) repeat transparent;   
    }
    &.pattern3{
     background: url(../img/patterns/pattern3.png) repeat transparent;   
    }
    &.pattern4{
     background: url(../img/patterns/pattern4.png) repeat transparent;   
    }
    &.pattern5{
     background: url(../img/patterns/pattern5.jpg) repeat transparent;   
    }
    &.pattern6{
     background: url(../img/patterns/pattern6.jpg) repeat transparent;   
    }
    &.pattern7{
     background: url(../img/patterns/pattern7.jpg) repeat transparent;   
    }
    &.pattern8{
     background: url(../img/patterns/pattern8.jpg) repeat transparent;   
    }


}
.cleantheme {
    
   
input.button_mini, input.button_small, input.button, input.button_large, input.button_mini_disabled, input.button_small_disabled, input.button_disabled, input.button_large_disabled, input.exclusive_mini, input.exclusive_small, input.exclusive, input.exclusive_large, input.exclusive_mini_disabled, input.exclusive_small_disabled, input.exclusive_disabled, input.exclusive_large_disabled, a.button_mini, a.button_small, a.button, a.button_large, a.exclusive_mini, a.exclusive_small, a.exclusive, a.exclusive_large, span.button_mini, span.button_small, span.button, span.button_large, span.exclusive_mini, span.exclusive_small, span.exclusive, span.exclusive_large, span.exclusive_large_disabled {
 background: none;
 background-image: none;
}
   
   
   
#availability_statut #availability_value {
 float: right;   
}

span.exclusive {
display: none !important;  
}
#search_block_top .button {
 background: none;
 background-image: none;
}    
    
#page {
    padding: 0 15px;
    background: none repeat scroll 0 0 #FFFFFF;
    .border-radius(5px);
    .box-shadow();
}
#header {
    padding: 10px 0 0;
}

ul#header_links {
    margin-top: 0;
    
    li { border-left: 0 none;
      a { font-size: 14px; color: @textcolor2;
      &:hover {
          color: @color2;text-decoration: none;.transition(0.5s ease);
        }
      }   
    }
}

#search_block_top #search_query_top {
    background: none repeat scroll 0 0 #FFFFFF;
  -webkit-border-radius: 5px !important;
     -moz-border-radius: 5px !important;
          border-radius: 5px !important;
           border: 1px solid #E4E4E4 !important;
    color: #333333;
    font-size: 16px;
    height: 32px;
    line-height: 32px;
    outline: medium none;
    padding: 0 10px;
    width: 300px;
}



#search_block_top {
right: 210px;
position: absolute;
top: 20px;
width: 457px;
}


#search_block_top .button {
 .btn;
 height: 33px;
}

#header_right #currencies_block_top {
    background: none repeat scroll 0 0 #FFFFFF;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    float: right;
    margin: -4px 0 0;
    padding: 0;
}
#header_right #currencies_block_top p {
    background: none;
    clear: left;
    color: @textcolor2;
   font-family: @fontfamily;
   font-size: 14px;
    padding-right: 0px;
    text-align: right;
    &:hover {color: @color2;.transition(0.5s ease);}
}
#setCurrency .currencies_ul_hover {
    background: @bgcolor;
    color: @textcolor;
    display: block;
    height: auto;
    padding: 5px 10px;
    position: absolute;
    right: 3px;
    text-align: center;
    width: auto;
    z-index: 5000;
    .border-radius(3px);
    
}

#setCurrency .currencies_ul_hover a {
    color: @textcolor;
}
#shopping_cart a {
    background-color: #F8F8FA;
    border-radius: 3px 3px 3px 3px;
    display: block;
    height: 15px;
    min-width: 130px;
    padding: 15px 27px 10px 43px;

}
#header #cart_block {
    background: none repeat scroll 0 0 #f8f8fa;
    .box-shadow();
    right: 0;
    top: 82px;
    width: 277px;
    font-size: 13px;
}
#header_logo {
    display: block;
    float: left;
margin-top: @logo-margin-top;
}

//menu
.sf-contener {
margin-top: @menu-margin;
}
.sf-menu {
 background: @color1;
 .border-radius (5px);
 padding: 0 10px;
 height: 40px;
 width: 960px;
 a {
     color: #fff;text-shadow: none;padding: 0 10px;line-height: 40px;font-size: 14px; 
     &:hover {color: #fff;}
 }
 a.sf-with-ul {
    min-width: 1px;
    padding-right: 2.25em;
}
 li {
  border-right: 0 none;   
 }
}
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
      background: @color2;
}

.sf-sub-indicator {
    top: 16px ;
}
.sf-shadow ul {
    background: @color2;
    padding: 0 0px 0px 0;
    .border-radius (0 0 5px 5px);
    .box-shadow ( 1px 2px 3px rgba(0, 0, 0, 0.2));
    li{
      ul {.border-radius (5px);}   
    }
}
.sf-menu ul li:hover, .sf-menu ul li.sfHover, .sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {
    background: none;
    background: rgba(255,255,255,0.03);
    outline: 0 none;
}
.sf-menu li:hover {
    a{
      background: @color2;
    } 
}
.sf-menu li li {
    background: none;
}

.sf-menu li li {
    
    a {
     line-height: 30px;   .ellipsis;
    }
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left:    		0;
	top:			40px; /* match top ul list item height */
	z-index:		99;
	width:auto
}

.sf-with-ul {
   .sf-sub-indicator { top: 16px ;}

    }
.sf-menu{
    ul{
        li{
            .sf-with-ul {
               .sf-sub-indicator { top: 7px ;}
            
                }
        }
    }
}

ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {
    left: 99%;
    top: 0;
}
.sf-menu li li li {
    background: none repeat scroll 0 0 transparent;
}
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul, ul.sf-menu li li li li:hover ul, ul.sf-menu li li li li.sfHover ul  {
    left: 99% !important;
    top: 0;
}

.sf-menu li li {
    width: @submenuwidth;
}
.block .title_block, .block h4 {
    background: @block_head_background;
    color: @textcolor;
    font-size: 16px;
    font-weight: normal;
    padding: 0;
    line-height: 30px;
    height: 30px;
    text-align: left;
    text-shadow: none;
    text-transform: uppercase;
    .block_head_border;   
    display: block;

    
}

.block .title_block a, .block h4 a {
    color:@textcolor;
}
#contact_block .title_block, #contact_block h4, #new-products_block_right p.title_block, #new-products_block_right h4, #special_block_right p.title_block, #special_block_right h4 {
      font-size: 16px;
    padding: 0;

}
#left_column{

 padding: 0 10px 0 0 ;
 margin-right: 9px;
 border-right: 1px solid @color3;
}


#column-left {
    border-right: 1px solid #EEEEEE;
    float: left;
    padding: 0 15px 0 0;
    width: 220px;
}


#newsletter_block_left .title_block, #newsletter_block_left h4 {
    border-bottom: 0 none;
    color: #666666;
    line-height: 14px;
    padding: 0 0 12px 28px;
    text-shadow: 0 1px 0 #FFFFFF;
    width: auto;
}
#new-products_block_right dd a.lnk_more {
    color:@color2;

}
#footer .myaccount .title_block, #footer .myaccount h4 {
    background: none repeat scroll 0 0 transparent;
    border-bottom: 0 none;
    height: auto;
    line-height: 14px;
    padding: 0 0 10px;
}
#footer {
    background: none repeat scroll 0 0 #333333;
    color: #FFFFFF;
    margin: 0 0 0 -15px;
    width: 1010px;
}
#left_column .block li a {
    color: @textcolor ;
    display: block;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    &:hover {
     color: @color2;   .transition(0.5s ease);
    }
}
#categories_block_left li a, .blocksupplier li a, .blockmanufacturer li a, .informations_block_left li a {
    background-position: 10px 13px;
}
#special_block_right .products span.price, #featured-products_block_center .price {
 color: @color2;   
}
#featured-products_block_center li {
 text-align: center;   
 .s_title_block {
     a {.ellipsis;}
 }
}
.resumecat {
    background: none repeat scroll 0 0 transparent;
    border-bottom: 2px solid @color2;
    color: @textcolor;
    margin: 15px 0 10px;
    padding: 8px 7px;
}
#center_column .sortPagiBar {
    background: none;
    color: @textcolor;
    font-family: @fontfamily;
    padding: 10px;
    border-bottom: 2px solid @color2;
}



#featured-products_block_center .s_title_block, #featured-products_block_center h5 {
 font-size: 14px;   
}
#product_list li .discount {
 background: @color2;   
}
#product_list li span.new {
 background-color: @color2;   
}
#product_list li .price {
 color: @color2;   
}
.our_price_display {
    color: @color2;  
}

.idTabs a {
    background: none repeat scroll 0 0 transparent;
    color: #444444;
    display: block;
    font-size: 14px;
    padding: 10px 10px 7px;
    text-decoration: none;
}

.idTabs .selected {
    background: none;
    border: 2px solid @color2;
    border-bottom: 2px solid #fff;
    
}
.idTabs {
    border-bottom: 2px solid @color2;
    list-style-type: none;
    margin-top: 20px;
    padding: 0 5px;
}

ul.idTabs li {
    float: left;
    margin-bottom: -2px;
    margin-right: 1px;
}

#footer li a, #footer .myaccount li a {
    color: #999999;
    &:hover{color: #fafafa;.transition(0.5s ease);}
}

#footer .title_block, #footer .title_block a {
    color: #ACACAC;
    &:hover{color: #fafafa;.transition(0.5s ease);}
}
#block_contact_infos li pre {
    color: #999;
    font-family: @fontfamily;
   
}

#footer li {
    padding: 3px 0;
}
#footer {
 .border-radius(0 0 5px 5px);   
}

#create-account_form h3, #authentication #login_form h3 {
 background: none;
 color: @textcolor;
    
}

#account-creation_form fieldset, fieldset.account_creation, #add_address fieldset {
 border: 0 none;   
}
#account-creation_form h3, #add_address h3, #contact h3 {
 background: @color1;   
}
table#cart_summary th, table.std th, table.table_block th, .addresses ul.address .address_title, #order-list th {
     background: @color1; 
}


#product_list li .ajax_add_to_cart_button {
    padding-left: 0px;
    color: #fff;
}
#product_list li .ajax_add_to_cart_button span,.content_prices #add_to_cart span, #cart_block #cart-buttons #button_order_cart span {
 display: none;   
}
 .ajax_add_to_cart_button span,.content_prices #add_to_cart span, #cart_block #cart-buttons #button_order_cart span {
 display: none;   
}
input.button_mini, input.button_small, input.button, input.button_large, input.button_mini_disabled, input.button_small_disabled, input.button_disabled, input.button_large_disabled, input.exclusive_mini, input.exclusive_small, input.exclusive, input.exclusive_large, input.exclusive_mini_disabled, input.exclusive_small_disabled, input.exclusive_disabled, input.exclusive_large_disabled, {
 .btn;   
    padding: 0 5px 3px!important;  
}
a.button_mini, a.button_small, a.button, a.button_large, a.exclusive_mini, a.exclusive_small, a.exclusive, a.exclusive_large, span.button_mini, span.button_small, span.button, span.button_large, span.exclusive_mini, span.exclusive_small, span.exclusive, span.exclusive_large, span.exclusive_large_disabled  {
    .btn;
    padding: 0 5px 0px!important;  
}

.sortPagiBar #bt_compare {
 .btn;   
    padding: 0 5px 3px!important;  
}


#product_list li .lnk_view {
    font-size: 12px;
    line-height: 14px;
    text-shadow: none;
}

#cart_block #cart-buttons #button_order_cart {
 margin-bottom: 10px;   
}

h2.productscategory_h2 {
    border-bottom: 1px solid @color2;
    color: #333333;
    font-size: 18px;
    margin: 40px 0 20px;
    padding: 10px 0;
}

#layered_block_left .layered_subtitle {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid @color2;
    line-height: 20px;
}
#layered_block_left div > form > div > div {
    margin-top: 10px;
}

#product_list li {
    border: 1px solid transparent;
    border-radius: 3px 3px 3px 3px;
    margin-bottom: 14px;
    padding: 12px 8px;
    &:hover { border: 1px solid @color3;background: #fafafa; .box-shadow ( 0 0 6px rgba(0, 0, 0, 0.1));.transition(0.3s linear);}
}


#featured-products_block_center .s_title_block {
 width: 126px; .ellipsis;   
}
#categories_block_left li .OPEN, #categories_block_left li .CLOSE {
    margin: 12px 10px 0;
}
#categories_block_left li ul {
    margin-left: 29px;
    width: 173px;
}
#categories_block_left li ul li a {
    background: none repeat scroll 0 0 transparent;
    padding-left: 0;
    padding-right: 0;
    width: 144px;.ellipsis; 
}
#subcategories h3 {
    background: @color1;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    font-size: 13px;
    padding: 8px 12px;
    text-shadow: none;
    text-transform: uppercase;
}

#newsletter_block_left input.button_mini {
    border: 0 none;
    cursor: pointer;
    height: 23px;
    left: -2px;
    margin: 0;
    position: relative;
    text-indent: -5000px;
    top: 1px;
    width: 22px;
}


#featured-products_block_center .product_image span.new {
    background-color: @color2;
    font-family: arial;
}

#header_right #languages_block_top {
    background: none repeat scroll 0 0 transparent;
    margin: 0 0 0 5px;
    padding: 0;
}
#header_right #languages_block_top p {
    background: none repeat scroll 0 0 transparent;
    padding-right: 10px;
}

#countries .countries_ul_hover {
    background: none repeat scroll 0 0 transparent;
    display: block;
    height: auto;
    padding: 5px 10px;
    position: absolute;
    right: -4px;
    width: 20px;
    z-index: 5000;
    list-style: none outside none;
}

}

.cleantheme.two_col {
    #right_column {display: none;}
    #center_column { width: 757px; margin-right: 0;}
    
#featured-products_block_center li.last_item_of_line {
    margin-right: 25px;
}
#featured-products_block_center li {
    margin-right: 25px;
}

#pb-left-column {
    float: left;
    margin-left: 80px;
    width: 350px;
}
#pb-left-column #buy_block label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    margin-right: 10px;
    text-align: right;
    width: 160px;
}
#availability_statut span#availability_label, #availability_date_label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    margin-right: 10px;
    text-align: right;
    width: 160px;
}

#product_list li .center_block {
    border-right: 1px dotted #CCCCCC;
    float: left;
    padding: 0 7px;
    width: 563px;
}

}
#order.two_col #center_column, #order-confirmation.two_col #center_column {
    margin: 0 111px;
    width: 757px; 
}



.cleantheme.grid {
    ul#product_list {
    list-style-type: none;
    margin: 0 -5px;
    overflow: hidden;
    }
    #product_list li {
        float: left;
        margin: 5px;
        padding: 8px 8px;
        width: 244px;
        position: relative;
        height: 196px;
            border: 1px solid @color3;

    }    
    #product_list li .left_block {
    bottom: 5px;
    float: none;
    left: 8px;
    padding-top: 0;
    position: absolute;
    width: 14px;
    z-index: 2;
    
                    p {
                padding-bottom: 0px;
            }
    }



#product_list li .left_block .compare label {
    display: block;
    left: 130%;
    position: absolute;
    top: 1px;
    width: 190px;
}


    #product_list li .center_block {
        border-right: 0px dotted #CCCCCC;
        float: left;
        padding: 0;
        width: 244px;
        height: 126px;
    }
        
    #product_list li p.product_desc, #product_list li p.product_desc a {
    color: #666666;
    height: 101px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 103px;
    }
    
    #product_list li .right_block {
        float: left;
        position: relative;
        text-align: left;
        width: 100%;
    }

    #product_list li .content_price {
        float: left;
        margin: 26px 0 0;
    }    
    
    #product_list li .ajax_add_to_cart_button {
        color: #FFFFFF;
        float: right;
        margin: 24px 0 0;
        padding-left: 0;
    }
    #product_list li .lnk_view {
        clear: both;
        float: right;
        font-size: 12px;
        line-height: 14px;
        margin: 0;
        text-shadow: none;
    }
    #product_list li h3 {
    color: #000000;
    float: left;
    font-size: 13px;
    padding: 0 0 10px;
    width: 103px;
    }
    #product_list li .discount, ul#product_list li .on_sale, ul#product_list li .online_only
    { display: none;}
    
    #product_list .right_block .exclusive{
        margin: 24px 0 0;
        float:right;
    }
}
.cleantheme.two_col.grid {
    #product_list li{
        width: 227px;
    }
    #product_list li .center_block {
    width: 228px;
    }
    #product_list li p.product_desc, .grid #product_list li p.product_desc a{
        width: 87px;
        height: 99px;
    }
    #product_list li h3 {
    color: #000000;
    float: left;
    font-size: 13px;
    padding: 0 0 10px;
    width: 88px;
    .ellipsis;
}
    
}
 
ik was er al achter dat het met die grid moest.

ik vind het middelste geldeelte te klein.
de fotos van de moederborden overlappen het logo van post nl.
 
PHP: 
/*
	Variable Grid System.
	Learn more ~ http://www.spry-soft.com/grids/
	Based on 960 Grid System - http://960.gs/

	Licensed under GPL and MIT.
*/

/* Containers
----------------------------------------------------------------------------------------------------*/
.container_9 {
	margin:0 auto;
	width: 980px;
}


/* Grid >> Global
----------------------------------------------------------------------------------------------------*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9 {
	display:inline;
	float: left;
	position: relative;
	margin-right: 20px;
}


/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha {margin-left: 0;}
.omega {margin-right: 0;}


/* Grid >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .grid_1 {width:91px;}
.container_9 .grid_2 {width:202px;}
.container_9 .grid_3 {width:313px;}
.container_9 .grid_4 {width:424px;}
.container_9 .grid_5 {width:535px;}
.container_9 .grid_6 {width:646px;}
.container_9 .grid_7 {width:757px;}
.container_9 .grid_8 {width:868px;}
.container_9 .grid_9 {width:980px;}


/* Prefix Extra Space >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .prefix_1 {padding-left:111px;}
.container_9 .prefix_2 {padding-left:222px;}
.container_9 .prefix_3 {padding-left:333px;}
.container_9 .prefix_4 {padding-left:444px;}
.container_9 .prefix_5 {padding-left:555px;}
.container_9 .prefix_6 {padding-left:666px;}
.container_9 .prefix_7 {padding-left:777px;}
.container_9 .prefix_8 {padding-left:888px;}


/* Suffix Extra Space >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .suffix_1 {padding-right:111px;}
.container_9 .suffix_2 {padding-right:222px;}
.container_9 .suffix_3 {padding-right:333px;}
.container_9 .suffix_4 {padding-right:444px;}
.container_9 .suffix_5 {padding-right:555px;}
.container_9 .suffix_6 {padding-right:666px;}
.container_9 .suffix_7 {padding-right:777px;}
.container_9 .suffix_8 {padding-right:888px;}


/* Push Space >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .push_1 {left:111px;}
.container_9 .push_2 {left:222px;}
.container_9 .push_3 {left:333px;}
.container_9 .push_4 {left:444px;}
.container_9 .push_5 {left:555px;}
.container_9 .push_6 {left:666px;}
.container_9 .push_7 {left:777px;}
.container_9 .push_8 {left:888px;}


/* Pull Space >> 9 Columns
----------------------------------------------------------------------------------------------------*/
.container_9 .pull_1 {left:-111px;}
.container_9 .pull_2 {left:-222px;}
.container_9 .pull_3 {left:-333px;}
.container_9 .pull_4 {left:-444px;}
.container_9 .pull_5 {left:-555px;}
.container_9 .pull_6 {left:-666px;}
.container_9 .pull_7 {left:-777px;}
.container_9 .pull_8 {left:-888px;}


/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */
.clear {
	/*clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;*/
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}
 */
 
ik had de grid al aangepast.

breede 90% nu is ie 980px.

als ik dat doe word gewoon een gedeelte wit en blijft ie zio breed als nu. alleen aan de rechterkant heb je dan een wit vlak.
die moet ik dan weer aanpassen in andre css. maar die kan ik juist niet vinden.
 
Als je firefox of chrome gebruikt kun je dit erg gemakkelijk zien. Linkermuisknop op het element, "element inspecteren" en zoek naar de style
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan