Změna velikosti písma

Drobečková navigace

CSS blog > Stylování katalogu - kategorie, položky

Stylování katalogu - kategorie, položky



Na základě proběhlého školení přikládám stylování katalogu, které připravil Sváťa Čech. Jedná se o stylování přehledu kategorií do dlaždic, zarovnání položek na stejnou výšku a zarovnání obrázků u položek k dolnímu okraji. 

CSS

 /* ---------- kategorie katalogu do dlazdic --------- */
.catalog .categories {
float: left;
padding: 10px;
margin: 0;
position: relative;
overflow: hidden;
}

.catalog.view-default .categories {
width: 47%;
float: left;
}

.catalog .categories .category {
width: 100%;
float: none;
}

.catalog .categories > li {
margin: 0;
padding: 0;
background-color: transparent;
background-size: cover;
background-repeat: no-repeat;
padding: 20px;
overflow: hidden;
box-shadow: 0 0 10px -4px rgba(0, 0, 0, 0.5);
border: 1px solid #ccc;
}

.catalog .categories .category .subcategory {
padding: 0;
list-style: none;
width: 100%;
display: none;
}

.catalog .categories .category .subcategory li {
float: none;
margin-bottom: 5px;
}
/* definovani table-cell a vysky je nutne pro delsi retezce v nazvu */

.catalog .categories .category h2 {
margin-bottom: 0.5rem;
font-size: 1.25em;
height: 70px;
display: table-cell;
vertical-align: middle;
}

.catalog.view-detail .categories .category h2 {
margin-bottom: 0.5rem;
font-size: 1em;
height: auto;
}

.catalog.view-detail .categories .category h2 a:hover {
background: #f3f3f3;
color: #f58220;
}

.catalog.view-detail .price-without-vat {
display: none;
}

.catalog .categories .category h2 a {
margin: -2000em;
padding: 2000em;
display: block;
background: #fff;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}

.catalog .categories .category h2 a:hover {
background-color: #ccc;
}
/* ------------------------------------------------------------------------------------------------------ */



/* -------- zarovnání obrázků k dolnímu okraji položky a aby byly obrázky stejně velké -------------*/
.matrix li {
border: 1px solid #ccc;
background: #fff;
margin: 15px 0;
box-shadow: 0 0 10px -4px rgba(0, 0, 0, 0.5);
margin: 10px 15px;
width: 31%;
}

.catalog .matrix .attributes .attributes-cell {
text-align: center;
}

/* reset odkazu pres cely prvek, kvuli zarovnani obrazku */

.catalog .matrix div > a {
margin: 0;
padding: 0;
}

.matrix li > div {
overflow: hidden;
min-height: 0 !important
}
/* sjednoceni vysky obrazku */

.catalog .matrix li div > a img {
max-height: 180px;
width: auto;
}
/* reset minimalni vysky polozky */

.matrix li > div {
min-height: auto;
}
/* ------------------------------------------------------------------------------------------------------ */


/* -------- zarovnání položek na stejnou výšku, řešeno přes flexbox, kvůli možným rozdílům v délce názvů ------------- */
.same-height-per-row {
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
/* ------------------------------------------------------------------------------------------------------ */

Pozn. CSS fungují tak jak jsou zde vložené, případně podle potřeby s malou úpravou výšek/šířek apod.

Ukázky

http://ukazky.antee.cz


Kalendář akcí

Po Út St Čt So Ne
30 31 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 1 2