Zarovnání divů na střed

19. 2. 2015 18:04:47

Dobrý večer,

potřebuji dát na střed všechny divy, v první řádku má být pouze ten jeden, v druhém dva, ve třetím tři a pak v posledním řádku ten jeden, bude to tvořit takovou pyramidu s jedním divem pod ní. Mezi jednotlivými divy v řádku musí být mezera 1,5 cm. A ještě k tomu potřebuji, aby vytáhnuté hodnoty z DB jsem měl ve středu na výšku toho divu (obdélníku). Kódy josu níže.

Nyní to vypadá takto: http://nahraj-obrazek.cz/?di=014243646207

CSS:

.pricetab{

width:20%;

min-width:220px;

background: linear-gradient(#30F804, #31c312);

float: left;

margin-top:.2%;

box-shadow:1px 1px 5px rgba(0, 0, 0, .5);

}

.priceheader{

width:100%;

height:60px;

box-shadow:0 2px 12px rgba(0, 0, 0, .5);

}

.price{

width:160px;

height:90px;

border-radius:0%;

border:1px solid black;

margin:1% auto 0 auto;

text-align:center;

}

.infos{

margin-top:10%;

}

.pricefooter{

width:100%;

height:50px;

margin-top:10%;

background:#333;

}

.pricefootermid{

width:100%;

height:50px;

margin-top:10%;

background:#fe9040;

}

PHP:

Nultá úroveň

Kč

První úroveň

Kč

Druhá úroveň

Kč

Třetí úroveň

Kč

Čtvrtá úroveň

Kč

Pátá úroveň

Kč

Provize celkem

Kč

Děkuji všem za nějaké rady, už nad tím sedím hodiny a výsledek je nulový.

19. 2. 2015 18:04:47

https://webtrh.cz/diskuse/zarovnani-divu-na-stred/#reply1092499

Patrik

(18 hodnocení)

19. 2. 2015 18:58:34

margin: auto; ?

19. 2. 2015 18:58:34

https://webtrh.cz/diskuse/zarovnani-divu-na-stred/#reply1092498

expe

19. 2. 2015 20:20:08

Zkoušel jsem, margin auto místo float left to celé rozhodí, je to na středu, ale jsou tam velké mezery mez jednotlivými řádky a divy nejsou ve stejném řádku tak, jak bych potřeboval, aby to tvořilo pyramidu.

---------- Příspěvek doplněn 19.02.2015 v 20:27 ----------

http://vvcap.net/db/7F5RVGRCY9kYSaM_7vqp.htp - toto je výsledek margin: auto, nefunguje to

19. 2. 2015 20:20:08

https://webtrh.cz/diskuse/zarovnani-divu-na-stred/#reply1092497

SEOguy

19. 2. 2015 21:12:24

Si umaž BR a nebudou tak velké řádky :-D. Máš to celé nějaké divoké - má být v CSS, margin:1% auto 0 auto; - je blbost

width:20% a min-width:220px; - je pokus o responzivitu? :-D

19. 2. 2015 21:12:24

https://webtrh.cz/diskuse/zarovnani-divu-na-stred/#reply1092496

expe

19. 2. 2015 21:24:46

Tento kód je programátora, já vycházím z toho, co udělal, ale nedodělal. BR nemá vliv na to, co potřebuji, zarovnání na střed ani zarovnání textu horizontálně neovlivní BR, ty tam jsou jen prozatím než vyřeším to, co potřebuji a pak udělám to, abych tam neměl BR, ale něco jiného. Jinak jestli nechcete poradit, tak tu nepište raději nic, jelikož příspěvky ve kterých se vysmíváte, ale nic jste nenavrhl jsou skutečně ubohé.

Děkuji za rady

19. 2. 2015 21:24:46

https://webtrh.cz/diskuse/zarovnani-divu-na-stred/#reply1092495

SEOguy

19. 2. 2015 21:30:04

prvky na středu máš. to, aby se ti řadili do pyramidy v CSS neuděláš - prostě je dej do divu ve skupině. umaž BR, font (náchapu, jak to může programátor vůbec přídávat do kodu)

První úroveň

Kč

Druhá úroveň

Kč

19. 2. 2015 21:30:04

https://webtrh.cz/diskuse/zarovnani-divu-na-stred/#reply1092494

expe

19. 2. 2015 21:37:45

Já potřebuji, aby byla nultá úroveň na prvním řádku, na dalším první a druhá úroveň, na třetím bude třetí, čtvrtá a pátá úroveň, toto bude zarovnané na středu, bude to tedy ve výsledku tvořit pyramidu, jelikož vše bude na středu a bude 1, dále 2 a pak 3, pod tím bude celkem, to taky na střed. Takže jak to mám udělat? To co píšete je dobré, ovšem to nebude tak, že to bude pod sebou tak, jak bych potřeboval.

19. 2. 2015 21:37:45

https://webtrh.cz/diskuse/zarovnani-divu-na-stred/#reply1092493

SEOguy

19. 2. 2015 21:59:23

<html><head><style type="text/css">.pricetab{  width:20%;  min-width:220px;  background: linear-gradient(#30F804, #31c312);  float: left;  margin-top:.2%;  box-shadow:1px 1px 5px rgba(0, 0, 0, .5);}.priceradek{  width:100%;}.priceheader{  width:100%;  height:60px;  background-image: -o-linear-gradient(bottom ,#444 , #555);   background-image: -webkit-linear-gradient(bottom ,#444 , #555);  background-image: -o-linear-gradient(bottom ,#444 , #555);   background-image: -moz-linear-gradient(bottom ,#444 , #555);   background-image: linear-gradient(to bottom , #444 , #555);   box-shadow:0 2px 12px rgba(0, 0, 0, .5);}.price{  width:160px;  height:90px;  border-radius:0%;  border:1px solid black;  margin:1% auto 0 auto;  text-align:center;}.price h3{}.price {font-size: ..px; color:#...;}.infos{  margin-top:10%;}.pricefooter{  width:100%;  height:50px;  margin-top:10%;  background:#333; }.pricefootermid{  width:100%;  height:50px;  margin-top:10%;  background:#fe9040; } </style></head><body><div class="pricetab">   	<div class="priceradek">     	      	<div class="price">      	<h3>Nultá úroveň</h3>        <?php echo number_format($user_moje_provize, 0, ',', '.') ?> Kč      	</div>    </div>      <div class="priceradek">    	<div class="price">      	<h3>První úroveň</h3>     	       	<?php echo number_format($user_prvni_uroven, 0, ',', '.') ?> Kč      	</div>      			<div class="price">      	<h3>Druhá úroveň</h3>     	      	<?php echo number_format($user_druha_uroven, 0, ',', '.') ?> Kč      	</div>    </div>        <div class="priceradek">    	<div class="price">      	<h3>Třetí úroveň</h3>     	         <?php echo number_format($user_treti_uroven, 0, ',', '.') ?> Kč      	</div>      			<div class="price">       	<h3>Čtvrtá úroveň</h3>               <?php echo number_format($user_ctvrta_uroven, 0, ',', '.') ?> Kč	        </div>	              	<div class="price">       	<h3>Pátá úroveň</h3>		<?php echo number_format($user_pata_uroven, 0, ',', '.') ?> Kč       	</div>    </div></body></html>

19. 2. 2015 21:59:23

https://webtrh.cz/diskuse/zarovnani-divu-na-stred/#reply1092492

expe

19. 2. 2015 22:08:26

Zkusím, ale to CSS bude v externím souboru css, nikoli v souboru dané stránky, jelikož CSS je pro všechny stránky jeden, takže otestuji a dám vědět, zda to funguje tak, jak bych si přál, dděkuji

19. 2. 2015 22:08:26

https://webtrh.cz/diskuse/zarovnani-divu-na-stred/#reply1092491

SEOguy

19. 2. 2015 22:09:25

jéééé. si to zkopiruj obsah STYLE do externího souboru

19. 2. 2015 22:09:25

https://webtrh.cz/diskuse/zarovnani-divu-na-stred/#reply1092490

expe

20. 2. 2015 15:34:21

Takže tak to vypadá:

Tak jsem to nechtěl, chtěl jsem, aby prostě byl na první řádku jeden div, na ddruhém dva apod., ne takový sloupec, to jsem nechtěl, prostě když to zarovnám na střed a udělám to tak, že bude jeden, dva a tři, tak prostě vznikne pyramida, víte jak to tedy dát vedle sebe a hlavně, aby to vypadalo tak, jak jsem uváděl ten obrázek, tak to musí zůstat, nemůžeme měnit design apod., pouze zarovnat na střed a dát jeden, na další řádek dva apod. Děkuji

20. 2. 2015 15:34:21

https://webtrh.cz/diskuse/zarovnani-divu-na-stred/#reply1092489

Ondrej Vertat

(48 hodnocení)

20. 2. 2015 15:58:04

Chcete něco jako je toto nebo něco jiného?

20. 2. 2015 15:58:04

https://webtrh.cz/diskuse/zarovnani-divu-na-stred/#reply1092488

Raketka

20. 2. 2015 16:02:30

Já to mam na jednom webu udělaný takhle...

20. 2. 2015 16:02:30

https://webtrh.cz/diskuse/zarovnani-divu-na-stred/#reply1092487

expe

20. 2. 2015 16:15:53

Ondřej Veřtát - ano přesně toto bych potřeboval, akorát to udělat na ten design mých divů i obsahem, jinak to je ono, co bych potřeboval. S tím, že potřebuji ještě nastavit ten můj text v tom jednom divu na střed na výšku, aby to nebyo nahoe v tom divu, ale prostě uprostřed. Můžete sem hodit ten kód, jelikož to potřebuji zakomponovat do mého kódu? Děkuji

20. 2. 2015 16:15:53

https://webtrh.cz/diskuse/zarovnani-divu-na-stred/#reply1092486

Ondrej Vertat

(48 hodnocení)

20. 2. 2015 19:14:17

https://webtrh.cz/diskuse/zarovnani-divu-na-stred/#reply1092485