Zarovnání produkt boxu

28. 6. 2012 19:17:05

Ahoj,

mám problém se zarovnáním produktových boxíku v eshopu. Každý má nastavený margin-top:20; a margin-right: 20px;. Problém je v tom, že bych potřeboval aby se poslední boxík na řádku zarovnal s margin-right: 20px;. Jednoduše nechci mít boxíky vycentrované ale první a poslední aby byl pod title (červené čárky na obrázku)

.product-box{

float: left;

width: 160px;

height: 220px;

margin: 20px 20px 0 0;

}

5791

28. 6. 2012 19:17:05

https://webtrh.cz/diskuse/zarovnani-produkt-boxu/#reply779814

skcolibri

(4 hodnocení)

28. 6. 2012 19:42:17

posli link na te eshop

28. 6. 2012 19:42:17

https://webtrh.cz/diskuse/zarovnani-produkt-boxu/#reply779813

Petr Zachrdla

(1 hodnocení)

28. 6. 2012 19:55:33

že by u posledního boxu nastavit třídu .product-box-right {margin-right:0px;} ? ;o)

28. 6. 2012 19:55:33

https://webtrh.cz/diskuse/zarovnani-produkt-boxu/#reply779812

Bc. Tomáš Jablonický

(2 hodnocení)

28. 6. 2012 20:05:51

@skcolibri ... zatim se to koduje na localhostu

@Bedříšek ... to nejde, muselo by se počítat, že každý 4 v cyklu musí mít tuto třídu a to je dost nečisté

28. 6. 2012 20:05:51

https://webtrh.cz/diskuse/zarovnani-produkt-boxu/#reply779811

David Musil

(68 hodnocení)

28. 6. 2012 20:09:34

Pokud vypisuješ cyklem v php, můžeš si vytvořit pomocnou proměnnou a na základě její hodnoty se bude přidělovat danému boxu css třída. Pokud bude hodnota prom např. 1, 2 nebo 3, tak tam bude margin right 20 a když bude prom 4, tak bude margin right 0.

Nebo by to slo s margin left opacne. 1 by bylo margin left 0 a 2,3 a 4 s margin left 20.

28. 6. 2012 20:09:34

https://webtrh.cz/diskuse/zarovnani-produkt-boxu/#reply779810

Bc. Tomáš Jablonický

(2 hodnocení)

28. 6. 2012 20:09:45

Z tohoto obrázku by to mělo být jasnější.

5792

28. 6. 2012 20:09:45

https://webtrh.cz/diskuse/zarovnani-produkt-boxu/#reply779809

Petr Zachrdla

(1 hodnocení)

28. 6. 2012 20:09:54

počítání je otázka 2min. kolik hodláš obětovat čistému řešení?

28. 6. 2012 20:09:54

https://webtrh.cz/diskuse/zarovnani-produkt-boxu/#reply779808

Bc. Tomáš Jablonický

(2 hodnocení)

28. 6. 2012 20:11:54

Nebo by to slo s margin left opacne. 1 by bylo margin left 0 a 2,3 a 4 s margin left 20.

To je ten samí problém. Zde .product-box:before (první v řadě) použít nejde stejně tak .product-box:after (poslední v řadě).

---------- Příspěvek doplněn 28.06.2012 v 20:14 ----------

@Bedříšek ... jde taky o to, že je to šablona pro Nette Framework kde product-box je control a vykresluje se přes třídu Multiplier ... to by bylo technicky velmi prasácky napsané. Chci to řešit na úrovni CSS max JS (ale to opravdu jenom kdyby to jinak nešlo).

28. 6. 2012 20:11:54

https://webtrh.cz/diskuse/zarovnani-produkt-boxu/#reply779807

Petr Zachrdla

(1 hodnocení)

28. 6. 2012 20:16:18

Napsal tomas86;813340
To je ten samí problém. Zde .product-box:before (první v řadě) použít nejde stejně tak .product-box:after (poslední v řadě).
---------- Příspěvek doplněn 28.06.2012 v 20:14 ----------
@Bedříšek ... jde taky o to, že je to šablona pro Nette Framework kde product-box je control a vykresluje se přes třídu Multiplier ... to by bylo technicky velmi prasácky napsané. Chci to řešit na úrovni CSS max JS (ale to opravdu jenom kdyby to jinak nešlo).

co je na tom prasáckého?

if (($counter++) % 4 == 0) ........;

28. 6. 2012 20:16:18

https://webtrh.cz/diskuse/zarovnani-produkt-boxu/#reply779806

Bc. Tomáš Jablonický

(2 hodnocení)

28. 6. 2012 20:18:04

Právě toto :-)

if (($counter++) % 4 == 0) ........;

28. 6. 2012 20:18:04

https://webtrh.cz/diskuse/zarovnani-produkt-boxu/#reply779805

Petr Zachrdla

(1 hodnocení)

28. 6. 2012 20:19:35

Napsal tomas86;813344
Právě toto :-)

pak přeji hezký večer

28. 6. 2012 20:19:35

https://webtrh.cz/diskuse/zarovnani-produkt-boxu/#reply779804

Bc. Tomáš Jablonický

(2 hodnocení)

28. 6. 2012 20:47:24

Nakonec jsem našel krásné řešení přes selector:

.product-box:nth-child(4n){
margin-right: 0;
}

28. 6. 2012 20:47:24

https://webtrh.cz/diskuse/zarovnani-produkt-boxu/#reply779803

Jan Stejskal

(7 hodnocení)

28. 6. 2012 21:05:47

Napsal tomas86;813348
Nakonec jsem našel krásné řešení přes selector:

krásné a nefunkční v IE8 a nižších a v Opeře

28. 6. 2012 21:05:47

https://webtrh.cz/diskuse/zarovnani-produkt-boxu/#reply779802

Bc. Tomáš Jablonický

(2 hodnocení)

28. 6. 2012 21:37:43

Napsal Jan Stejskal;813357
krásné a nefunkční v IE8 a nižších a v Opeře

http://ecsstender.org/extensions/css3-selectors/

http://selectivizr.com/

možná i PIE.js by tohle mělo odstranit. Pro HTML5 používám html5.js atd.

28. 6. 2012 21:37:43

https://webtrh.cz/diskuse/zarovnani-produkt-boxu/#reply779801

800XE

(8 hodnocení)

28. 6. 2012 21:59:46

Řešení přes selektor je v pohodě, taky pro rozšíření možností impotentích verzí IE používám PIE.htc. Na druhou stranu výpis určité třídy každému x-tému prvku je naprosto běžné řešení a taky na něm neshledávám nic "prasáckého".

28. 6. 2012 21:59:46

https://webtrh.cz/diskuse/zarovnani-produkt-boxu/#reply779800