Polskie wsparcie PrestaShop
PrestaShop => Wygląd => Wątek zaczęty przez: aegir w Marzec 17, 2009, 11:28:55 am
-
Witam, zmieniłem listę kategorii w taki sposób jak to podane w tym wątku
http://www.prestashop.com/forums/viewthread/11322/themes/products_layout_in_subcategories/
jest jeden poważny problem, jeśli produktów jest tyle, że nie zapełniają ostatniego wiersza rozjeżdzają się przyciski wcześniejsze / następne i blok ilości prodóktow wyświetlonych na stronie. Zależy mi na tym, te lementy były pod obrazkami na dole, jak to zrobić? Będę bardzo wdzięczny za pomoc...
(http://images39.fotosik.pl/82/16fa41e7a4159a55med.jpg)
/* pagination.tpl */
div.pagination { margin: 1em 0; }
ul.pagination {
list-style: none;
float: left;
}
ul.pagination li {
display: inline;
float: left;
margin-right: 0.3em;
}
ul.pagination li, ul.pagination a, ul.pagination span {
font-weight: bold;
color: #374853;
}
ul.pagination a, ul.pagination span {
border: 1px solid #888;
padding: 0em 0.4em;
display: block;
line-height: 17px;
background: #bdc2c9 url('../img/pagination_bg.gif') repeat-x top right;
}
ul.pagination a { text-decoration: none; }
ul.pagination li.current span {
background-color: #595a5e;
background-image: url('../img/pagination-bg-current.gif');
color: white;
border: 1px solid #595a5e;
}
ul.pagination li.truncate {
padding: 0.3em;
background: none;
}
#pagination_previous a, #pagination_previous span, #pagination_next a, #pagination_next span {
background-image: url('../img/pagination-prevnext-bg.gif');
border: none;
line-height: 19px;
border-color: #d0d1d5;
border-style: solid;
border-width: 0 1px;
}
#pagination_previous {
background: transparent url('../img/pagination-prev-border.gif') no-repeat top left;
padding-left: 6px;
}
#pagination_previous a, #pagination_previous span {
border-left: none;
}
#pagination_next {
background: transparent url('../img/pagination-next-border.gif') no-repeat top right;
padding-right: 6px;
}
#pagination_next a, #pagination_next span { border-right: none; }
li.disabled span {
color: #888;
background-color: #f1f2f4;
}
form.pagination { text-align: right; }
form.pagination label {
line-height: 1.4em;
vertical-align: bottom;
float:right;
margin-left: 0.3em;
}
form.pagination select { float:right; }
form.pagination select option{
font-size: 0.9em;
padding-right: 1em;
}
form.pagination input{ float:right; }
-
To sprawka float'a....
Pierwsza możliwość:
W kodzie css wstaw:
.poprawiacz{ clear:both; height:0px; font-size:1px; line-height:0px; }
A zastosowanie takie:
<div>
<p style="float:left">ble bel</p>
<p style="float:left">ble bel</p>
<p style="float:left">ble bel</p>
<p style="float:left">ble bel</p>
<div class="poprawiacz"></div>
</div>
Druga:
W kodzie css:
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
A zastosowanie takie:
<div class="clearfix">
<p style="float:left">ble bel</p>
<p style="float:left">ble bel</p>
<p style="float:left">ble bel</p>
<p style="float:left">ble bel</p>
</div>
-
Wielkie dzięki, działa pięknie! Serdecznie pozdrawiam ;D