Problem z kolumnami na liscie produktów...

monk

Avatar: monk

2014-11-17 17:10

Witam,

Mam kolejny problem i nie mogę znaleźć dziury. Na liście produktów dodaję kolejne produkty. chciałem aby proodukty wyświetlały sie dwóch kolumnach. Lecz nie moge sobie poradzić z poprawnym wyswietleniem jednego zdjęcia.
Szerokość strony to razem 980 px
Prawa columna to 800 px
i dwie kolumny w liscie produktów po 400.
i tak zdjęcia nie układają sie równo.

Tutaj zrzut ekranu: http://www.lestech.nazwa.pl/zrzut.jpg


Kod css (oczywiście fragment potrzebny):

/* PRODUCTS LIST */
#products{clear:both;width:800px;margin-bottom:10px;list-style:none;}
#products ul.list{ clear:both; width:100%;list-style:none;}
#products .list li{float:left;width:398px; clear:both;}
#products li .photo{clear:both; font-size:0px;line-height:0px;}
#products li h2{padding:5px 0 5px 0;font-weight:bold;font-size:1.083em;}
#products li h3{padding:5px 0 9px;text-align:left;font-weight:normal;font-size:0.917em;}
#products li h3 em{padding:0 5px;}
#products li .price, #products li .noPrice{ display:none; margin:5px 0 5px 0;background-color:inherit;color:#000;font-weight:bold;text-decoration:none;}
#products li .price em{display:none;padding:0 6px 0 0;font-style:normal;font-weight:normal;}
#products li .price strong{display:none;font-size:1.167em;}
#products li .noPrice strong{display:none;font-size:1.083em;}
#products li .price span{display:none;padding-left:4px;font-size:1.083em;font-weight:normal;}
#products li .basket{display:none;font-size:0.917em;padding-left:3px;}
#products li .basket a{display:none;font-weight:bold;text-align:center;padding:5px;color:#fff;background:#888;}

/* PRODUCTS LIST - COLUMNS TEMPLATE */
#products{clear:both;margin-top:10px;}
#products .list li{ clear:none;width:400px;margin-left:0px;padding:15px 0;text-align:center;}
#products li.column1{ display:block; margin-left:0;}
#products li h3{text-align:center;}
#products li div.description{margin:10px 0 0;text-align:justify;}
#products li .basket{width:400px;margin:10px auto 0;}
#products li.pages#pagesAfter{clear:both;}
#products .list li li{ clear:none; width:auto;margin-left:0px;padding:0;border-top:0px;text-align:left;}

#products .pages{float:right;width:100%;margin:0;padding:9px 0;border:0;background:none;text-align:right;font-size:1em;}
#products .pages li{margin:0;padding:0 2px;border:0;background:none;}
#products .pages a, #products li.pages strong{padding:0 1px;font-size:1em;}
#products .pages .viewAll{padding-right:8px;border-right:1px solid #666;}
#products .pages .title{padding-left:8px;border:none;}
#products .pages#pagesBefore{clear:none;width:auto;}

#products .sort{float:left;width:auto;margin:0 10px 0 0;padding:10px 0;border:0;background:none;text-align:left;}
#products .sort ul{display:inline;list-style:none;}
#products .sort li{display:inline;padding:0 6px;font-weight:bold;border-right:1px solid #666;}
#products .sort li:last-child{border:none;padding-right:0;}
#products .sort li a{font-weight:normal;}

» Quick.Cart v6.x

Monk

selekcjoner

Avatar: selekcjoner

2014-11-17 17:14

Widocznie pierwsze zdjęcie ma większą wysokość ( i inne proporcje) .. Przy pomocy pozycji daj go jako drugi produkt
Ewentualnie ustaw minimalną wysokość na #products .list li

monk

Avatar: monk

2014-11-17 17:17

Dzięki :):) Hula

Monk

Do góry
o nas | kontakt