Šachovnice v html

Od: Datum: 19.11.15 00:07 odpovědí: 15 změna: 19.11.15 22:23
avatar

Dobrý den,

Asi se sám už nekdy stalo, že máte problém, a nejste ho schopni, za žádnou cenu sami vyřešit. To se stalo právě i mně...Dostali jsme za úkol vytvořit v html šachovnici, která bude využívat absolutního pozicování (mně v tomto případě přijde absolutní pozic. jako blbost) a zároveň aby byl výsledný zdroják co nejmenší (což mi s absolut. pozic. nejde dohromady). Jde o to, že jsem už něco sesmolil, ale nevím proč, ale neche to vůbec fungovat, a už jsem z toho dost zoufalej (viz čas vložení otázky). Nevypadá to tak jak chci, a zároveň to nerespetuje to co tam nastavím, ale nevím proč. Šachovnici jsem rozdělil na jednotilvé, absolutně pozicované sloupce a v nichčerné čtverce, s marginem nahoru či dolu (v lichém či sudém sloupci), aby to vytářelo efekt bílých polí, z pozadí (zase kvůli zemnšení kódu) co je ale problém, že pozice sloupců se z neznámého důvodu stále snižuje (asi top), ale nevím proč, když všechny sloupce mají nastaveno top: 0px, a každý je předtím ještě vyresetován, aby náhodou nemohl přebrat hodnotu od jiného prvku v css, a stejně ten zmetek nefunguje, a já ho musím zítra odevzdat, a za toto pochopitelně nedostanu hezkou známku, a ještě budu učitelem veřejně ponížen, za to, že nevím jak to udělat... Proto vám moc prosím, zda.li by mi někdo nebyl schopen vysvětlit a případně opravit, co je tam špatně? Předem děkuji..

  1. </p>
  2. <p><!doctype html>
  3. <html>
  4. <head>
  5. <meta charset="UTF-8">
  6. <style>
  7. * {
  8. margin: 0px;
  9. padding: 0px;
  10. }
  11. div {
  12. background-color: yellow;
  13. width: 240px;
  14. height: 240px;
  15. position: relative;
  16. margin: 200px auto;
  17. }
  18. div div {
  19. margin: 0px;
  20. background-color: black;
  21. width: 30px;
  22. height:30px;
  23. }
  24. .s1 div, .s3 div, .s5 div, .s7 div {
  25. margin-top: 30px;
  26. }
  27. .s2 div, .s4 div, .s6 div, .s8 div {
  28. margin-bottom: 30px
  29. }
  30. .* {
  31. position: absolute;
  32. top: 0px;
  33. }
  34. .s1 {
  35. left: 0px;
  36. }
  37. .s2 {
  38. left: 30px;
  39. }
  40. .s3 {
  41. left: 60px;
  42. }
  43. .s4 {
  44. left: 90px;
  45. }
  46. .s5 {
  47. left: 120px;
  48. }
  49. .s6 {
  50. left: 150px;
  51. }
  52. .s7 {
  53. left: 180px;
  54. }
  55. .s8 {
  56. left: 210px;
  57. }
  58. </style>
  59. </head>
  60. <body>
  61.  
  62. <x class="s1">
  63.  
  64.  
  65.  
  66.  
  67.  
  68. <x class="s2">
  69.  
  70.  
  71.  
  72.  
  73.  
  74. <x class="s3">
  75.  
  76.  
  77.  
  78.  
  79.  
  80. <x class="s4">
  81.  
  82.  
  83.  
  84.  
  85.  
  86. <x class="s5">
  87.  
  88.  
  89.  
  90.  
  91.  
  92. <x class="s6">
  93.  
  94.  
  95.  
  96.  
  97.  
  98. <x class="s7">
  99.  
  100.  
  101.  
  102.  
  103.  
  104. <x class="s8">
  105.  
  106.  
  107.  
  108.  
  109. </p>
  110. <p>
  111. </body>
  112. </html></p>
  113. <p>

Snad se to vložilo dobře...


doplněno 19.11.15 00:11:

Hm.. Tak se to nevložilo dobře... ok.. Evidentně je vše proti mně... Tady je link: http://student.sps-prosek.cz/~blechvo15/sachovnice.html


Seznam odpovědí:
 
moment čekejte prosím, probíhá přenos dat...
Zobrazení struktury odpovědí v otázce
Skrytí struktury odpovědí v otázce
Zobrazení struktury odpovědí v otázce

 

Odpovědi na otázku:
Datum: 19.11.15 00:34
avatar

to je tak kdyz nekdo neumi css a za kazdou cenu tam cpe otevrene css tridy, ktere ovlivnuji uplne kazdy element :) take tam chybel float, ten jsem dopsal primo do html, aby bylo videt kam

http://jsfiddle.net/komz6bkf/

mimochodem zobrazovani kodu tady nikdy nefungovalo, je to zbytecne, lepsi je fiddle


doplněno 19.11.15 01:09:

tak jsem to jeste zkratil na minimum znaku http://jsfiddle.net/fLqr7jce/


doplněno 19.11.15 08:34:

idcka jsem pouzil jen proto, ze id= je kratsi nez class=, vy jste tam mel chyby v css a proto to nefungovalo, a zaroven chybel float... float musi byt vzdycky, na radcich o to vic (na kazdem) a na obal divu je pak clear:both... nicmene cele je to zvracene a jestli to neni ukol do skoly nebo ja nevim, tak takhle bych to nedelal

Ohodnoceno: 1x
 
Datum: 19.11.15 05:54
avatar

Mnohokrát děkuji... Takže jsem vlastně měl místo class použít idčka? (mně to napadlo, ale nedošlo :D) Jinak na float jsem si vzpoměl až když už jsem ležel v posteli, že by tam asi měl být *smich*. Ještě mne napadlo... Nešlo by to udělat z těch sloupců na řádky, a tak se zbavit floatu?

Datum: 19.11.15 16:09
avatar

Já bych taky takhle normálně nedělal, protože to není moc použitelný na cokoloiv dalšího. Jinak Mám problém se svým budoucím webem, a to sice, že mám menu s fixním pozicováním jako lištu nahoře, a pak mám dva divy (content a levej panel) a ty mám zabalený do divu page oby divy uvnitř mají float left, aby byly vedle sebe, co je ale problém, že ten div ve keterém jsou se zobrazoval stále v levém horním rohu, což jsem nepochopil, následně mi tam učitel do divu page, do styloposu připsal float left a už to funguje, akorát to není na středu, a já potřebuji, aby to bylo na středu, ale nevím co s tím, protože bez floatu to nefunguje, a nevím co s tím jinak udělat. Jinak ty dva divy jsou v divu page proto, aby mohla být dole patička, která se mi také nedaří nějak nastavit, aby byla po celé šířce (width: 100% prostě nechtělo fungovat) a pokud page neměl float, tak se patička nacpala pod menu. tady je link: http://www.blechta.cekuj.net

Datum: 19.11.15 16:58
avatar

div 0 auto

div clear both

div float left - div float left - div float left...div div div konec

div div konec

Ohodnoceno: 0x
 
Datum: 19.11.15 18:21
avatar

Heh nějak jsem vás nepochopil jak jste to myslel, že to takto funguje (s čistícími divy) to vím, ale nevím kam jste myslel, že to mám dát...jediné co teď potřebuji je vycentrovat obsah, to že to na mobilu dělá psí kusy mne zatím nezajímá... (tam mi nechce ani fungovat height 100%)


doplněno 19.11.15 18:43:

Tak na mobilu jsem to už opravil, šlo o to, že internet explorer, ani mobilní prohlížeče stále nepodporují display: flex...

Od: host
Datum: 19.11.15 16:19

Nedopovídám na otázku, omlouvám se, nemám tolik času, abych váš zdroják kontroloval. Absolutní pozicování chce učitel asi proto, aby čtvrce byly čtvercové i na monitoru 4:3 i na širokoúhlém 16:9. Někdo by šachovnici udělal jednoduše tabulkou table s definovanými rozměry buněk...

Ohodnoceno: 0x
 
Datum: 19.11.15 16:44
avatar

Ano, já bych taky použil tabulky...

Datum: 19.11.15 18:56
avatar
Stejnak by bylo nejlepsi udelat v php loop a nadefinovat pres css pouze jeden element, ono by se to pekne vyskladalo a kod by byl tak na 25-30 radku maximalne.
Ohodnoceno: 0x
 
Datum: 19.11.15 19:06
avatar

to je zbatečně složité, mně bohatě postačí, když mi řeknete, jak to vycentrovat, a zároveň aby ten obalovací div nebyl v levém horním rohu... toť vše...

Datum: 19.11.15 19:34
avatar

31 řádků a není zač. *smich*

$vyska = 8;
$sirka = 8;

for($y=$vyska; $y>0; $y--) {
for($x=0; $x<$sirka; $x++) {
echo (($x+$y)%2==0)? "" : "";
}
}
?>


doplněno 19.11.15 19:35:

Omlouvám se, zde: http://pastebin.com/jLudf4uq / poradte.cz smazalo část kódu.


doplněno 19.11.15 19:41:

Upraveno: http://pastebin.com/JvjAGMze
Přidáno značení polí.

Ohodnoceno: 0x
 
Datum: 19.11.15 19:42
avatar

to uz mi prijde zbytecne moc rozsypaneho caje, staci si jen urcit pocet kostek na danou velikost obalu :) cili 64 :)

Ohodnoceno: 0x
 
Datum: 19.11.15 21:18
avatar

heh, děkuji, určitě se nad tím zamyslím, ale já jsem měl na mysli docela něco úplně jiného - šachovnice už byla dořešena... jen jsem chtěl radu ohledně mého webu, jak vycentrovat obsah, tak, aby jejich obalovací div neutíkal kamsi do rohu... viz link na moje (budoucí) stránky, omlouvám se, že jste si s tím dal tolik práce, a moc se vám omlouvám za zmatení, já jen nechtěl kvůli takové maličkosti zakládat nové vlákno

Datum: 19.11.15 22:23
avatar

Ále, 5 minut práce mě nezabije a třeba to ještě někomu někdy pomůže. :)

Ohodnoceno: 0x
 
Datum: 19.11.15 19:31
avatar

tak by to samozrejme udelal kazdy, vcetne pocitani sudy lichy pro podbarveni divu :) cca 5 minut prace a neomezene mnozstvi divu ci velikost ctverce bez prace :) ...pro priklad blechte, jak je to zatracene slozite *smich* dostal bych to na 1 radek:

div obal
for(i vetsi nez 0 a mensi nez x) if(i == sudý) echo div black else echo div white
div obal konec

Ohodnoceno: 0x
 
Datum: 19.11.15 21:34
avatar

Obávám se, že začínáte mluvit řečí jiného kmene...

 

 

 

 

Přihlásit se k odběru odpovědí z této otázky:

Neneseme odpovědnost za správnost informací a za škodu vzniklou jejich využitím. Jednotlivé odpovědi vyjadřují názory jejich autorů a nemusí se shodovat s názorem provozovatele poradny Poradte.cz

 
Copyright © 2004-2016 Poradna Poradte.cz. Všechna práva na poradně Poradte.cz vyhrazena.