Układ kategorii

[kaczor18]

Witam serdecznie mam problem z kategoriami tzn.

Gdy w jednym dziale jest duzo podkategorii strona strasznie rozciaga sie do dołu.

tak jak na tym obrazku "kat1" a chciałbym aby one się układały tak jak na obrazku kat2.

Jednak z zastrzezeniem żeby to układało się ładnie w lini pionowej tak jak jest to na obrazku.

 

 

Pozdrawiam

 

 

[vekia]

grid - subkategorie

po drobnych modyfikacjach tj. zwiększenie width dla elementu li:

.inline_list li {
  text-align: center;
  float: left;
  display: inline-block;
  width: 96px;
  height: 100px;
  border: 1px dotted #ccc;
  margin: 4px;
}

np. do 160px;

 

oraz ustawienie .cat_name jako display:inline z float:left; powinno utworzyć podobny rozkład subkategorii  

[kaczor18]

nie rozumiem gdzie mam wkleić to ?

 

 

{if $subcategory.id_image}

    <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')|escape:'html'}" alt="{if $subcategory.description}{$subcategory.description}{/if}" width="{$mediumSize.width}" height="{$mediumSize.height}" />

{else}

    <img src="{$img_cat_dir}default-medium_default.jpg" alt="{if $subcategory.description}{$subcategory.description}{/if}" width="{$mediumSize.width}" height="{$mediumSize.height}" />

{/if}

[kaczor18]

Teraz jest problem ze zjeciami i z podpisami tych zdjęć :

Jak ostawić aby były one na środku?

[vekia]

nie wiem jak chcesz je ustawić, tak aby były wycentrowane, czy tak aby były jak na zdjęciu które wklejono na początku, tj.

[kaczor18]

w sumie to chcę tak jak ty wkleiłeś teraz i tym samym ja na początku

[vekia]

sprawdziłem sklep.

 

zabrakło zwiększenia szerokości dla li, wspominałem o tym powyżej

 

po wszystkim powinno być ok

 

 

 

btw. taki układ też jest fajny:

[kaczor18]

Nie czaję tego zmieniam ale nadal obrazek jest po prawej podaj mi co mam dokładnie wkleić bo dopiero zaczynam wszytsko czaić powoli:)

[vekia]

category.css linia 55

.inline_list li {
text-align: center;
float: left;
display: inline-block;
width: 90px;
height: 100px;
border: 1px dotted #ccc;
margin: 4px;
}

width:90px; na with:168px;

 

 

następnie w category.css linia 72

do:

.inline_list li .cat_name {
font-weight: bold;
font-size: 13px;
} 

dodaj:

padding-top: 20px;
display: inline-block;

[kaczor18]

sprawdziłem sklep.

 

zabrakło zwiększenia szerokości dla li, wspominałem o tym powyżej

 

po wszystkim powinno być ok

 

 

 

btw. taki układ też jest fajny:

chciałembym taki układ ostatecznie:) bo tamten jakis lipny trochę.

[vekia]

no to kod który zamieściłem nie będize działać, trzeba było tak od razu  

 

oto rozwiązanie:

 

category.css linia 64

.inline_list li .img {
display: block;
float: left;
margin-top: 20px;
}

usuwamy float: left;

i będzie ok

[kaczor18]

nadal to samo;)

[vekia]

ctrl+f5