Diskuze: Machr na webdesign - Kreativní layout

HTML a CSS HTML a CSS Machr na webdesign - Kreativní layout American English version English version

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Ahoj, v pravidelné minisoutěži Machr na webdesign budeme jako každý týden hrát o placku a nálepky. Aktuální zadání bude kreativní layout. Vymyslete si fiktivní stránku a pokuste se vytvořit nevšední layout, tedy rozložení prvků na stránce. Layout by měl být kreativní zapadat do tématiky webu, tedy např. obchod s vánočními ozdobami bude mít odkazy do hvězdy nebo stromečku.

Nejpovedenější šablona vítězí. Deadline je jako vždy v neděli 6.10. v 18:00

Editováno 1.10.2013 8:40
Odpovědět  +4 30.9.2013 20:21
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Honza Bittner
Redaktor
Avatar
Nahoru Odpovědět 30.9.2013 21:08
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
ton
Neregistrovaný
Avatar
ton:

Sdraco, kdy ty se naucis psat datumy... :D :D :D

 
Nahoru Odpovědět 1.10.2013 6:08
Avatar
David Čápka
Tým ITnetwork
Avatar
Nahoru Odpovědět  +2 1.10.2013 8:39
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na ton
Jiří Gracík:

Jako programátor bys měl vědět, že leden je vlastně 0. :P

Nahoru Odpovědět  ±0 1.10.2013 9:12
Creating websites is awesome till you see the result in another browser ...
Avatar
Kit
Redaktor
Avatar
Odpovídá na Jiří Gracík
Kit:

Jasně, první dítě programátora je také nulté :)

Nahoru Odpovědět 1.10.2013 9:50
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Kit
Jiří Gracík:

Z toho jasně vyplývá, že David Čápka píše data dobře, jenom se doteď nenašel člověk, který by byl tělem i duší programátor :D i když já jsem programátor zatím jenom duší, tělem díkybohu ne :D

Nahoru Odpovědět  ±0 1.10.2013 10:07
Creating websites is awesome till you see the result in another browser ...
Avatar
Michal Žůrek (misaz):

no tak já zde připojuji svůj výtvor. Sice přiliš nesplňuje zadání, ale i přesto ho zde publikuji. http://machr40.misaz.moxo.cz/ zajimavostní v něm je, že tam není ani řádek javascriptu. Skrývaní a odkrývaní může být pro někoho záhadou.

Nahoru Odpovědět  +7 3.10.2013 17:24
Nesnáším {}, proto se jim vyhýbám.
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Daniel Vítek:

Má to být responzivní ?

 
Nahoru Odpovědět 3.10.2013 18:39
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:

Hezké, jsem :target ani neznal :)

GOOD JOB !

Ještě přidej do jQuery :

$('a').click(function(e){e.preventDefault;});

To ti zabrání vypisovat #html, #java atp. do url adresy :) Podle mne by to bylo lepší s tim :)

Nahoru Odpovědět 3.10.2013 18:49
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Michal Žůrek (misaz):

to mi ani tak moc nevadí, když bude někdo chtít odkázat na "bublinu", tak ji prostě otevře a zkopíruje URL.

Nahoru Odpovědět 3.10.2013 18:56
Nesnáším {}, proto se jim vyhýbám.
Avatar
Ondrca
Redaktor
Avatar
Ondrca:

Ahoj, zde přidávám svůj výtvor:
http://www.uschovna.cz/…M6B4AXW5-VRV
Snad se bude líbit :D.

Nahoru Odpovědět 4.10.2013 21:00
Zase jsem o něco chytřejší
Avatar
Odpovídá na Ondrca
Michal Žůrek (misaz):

Nepodporuje ti to jen nějak moc malé rozlišení?

Nahoru Odpovědět 4.10.2013 21:36
Nesnáším {}, proto se jim vyhýbám.
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Ondrca:

Jak to jako myslíš?
Na HD ti to vůbec nefunguje, nebo se to to zdá pouze malý?

Nahoru Odpovědět 4.10.2013 21:38
Zase jsem o něco chytřejší
Avatar
Odpovídá na Ondrca
Michal Žůrek (misaz):

Pokud okno roztáhneš je tam bílé místo.

Nahoru Odpovědět 4.10.2013 21:41
Nesnáším {}, proto se jim vyhýbám.
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Ondrca:

To snad tolik vadit nebude - dík za upozornění.
Je to aspoň responzivní :D.

Nahoru Odpovědět 4.10.2013 21:42
Zase jsem o něco chytřejší
Avatar
Odpovídá na Ondrca
Michal Žůrek (misaz):

počkat. Co je responzivní Jo a ještě ty tam máš 2 definice DOCTYPE a každá je jiná :D

Nahoru Odpovědět 4.10.2013 21:45
Nesnáším {}, proto se jim vyhýbám.
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Ondrca:

Díky - a jde se přepisovat :D.
PS: smí se to poslat znovu?

Editováno 4.10.2013 21:49
Nahoru Odpovědět 4.10.2013 21:46
Zase jsem o něco chytřejší
Avatar
Odpovídá na Ondrca
Michal Žůrek (misaz):

jo, pošleš to verzi jako 1.1, pak 1.2, pak 1.3 a až to celé bude vypadat úplně jinak tak to dáš jako 2.0

Nahoru Odpovědět 4.10.2013 21:51
Nesnáším {}, proto se jim vyhýbám.
Avatar
Ondrca
Redaktor
Avatar
Ondrca:

Verze 1.1:
http://www.uschovna.cz/…8MZ8Z4GG-85T
Asi už bude konečná - pouze jsem smazal ten Doctype navíc.

Nahoru Odpovědět 4.10.2013 21:53
Zase jsem o něco chytřejší
Avatar
Odpovídá na Ondrca
Michal Žůrek (misaz):

fajn, jeden doctype navíc nám zmizel. Teď už tam zbyl jen jeden, který je zastaralý. Proč doctype píšeš složitě?

<!DOCTYPE html>

Jo a ještě jsem stále nepřišel na to proč je to responzivní?

Nahoru Odpovědět 5.10.2013 9:35
Nesnáším {}, proto se jim vyhýbám.
Avatar
Ondrca
Redaktor
Avatar
Ondrca:

Verze 1.2:
http://www.uschovna.cz/…MZWUTU3M-YPL
Snad už určitě finální ;).
Misaz - na tu responzivitu zapomeňme :).

Nahoru Odpovědět 5.10.2013 18:19
Zase jsem o něco chytřejší
Avatar
Odpovídá na Ondrca
Michal Žůrek (misaz):

no ještě jsem zapoměl na starou metu a jednu zbytečnou. :` Ale to už jako řešit nemusíš.

Nahoru Odpovědět 5.10.2013 18:30
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Ondrca
Honza Bittner:

má to při oddálení dělat toto : http://prntscr.com/1vfk1t
?

Nahoru Odpovědět  +2 5.10.2013 18:33
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Honza Bittner
Ondrca:

Tím jako myslíš, že text není skoro k přečtení?

Nahoru Odpovědět 5.10.2013 19:04
Zase jsem o něco chytřejší
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Ondrca
David Čápka:

Spíše tím myslí, že by se měl web alespoň centrovat. Také není důvod, proč by se pozadí nemohlo opakovat po celé šířce, i když to není nutné.

Nahoru Odpovědět 5.10.2013 19:06
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na David Čápka
Ondrca:

Nevíš proč mi nefunguje:

article{
margin: 0 auto;
}
?
Díky
Nahoru Odpovědět 5.10.2013 19:08
Zase jsem o něco chytřejší
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Ondrca
Jiří Gracík:

nemá nastavenou šířku

Nahoru Odpovědět  +1 5.10.2013 19:18
Creating websites is awesome till you see the result in another browser ...
Avatar
Ondrca
Redaktor
Avatar
Nahoru Odpovědět 5.10.2013 19:19
Zase jsem o něco chytřejší
Avatar
Ondrca
Redaktor
Avatar
Ondrca:

verze 1.3:
http://leteckaposta.cz/182030883
Radši nebudu psát, že je finální, ale snad už bude :D

Nahoru Odpovědět  +1 5.10.2013 19:32
Zase jsem o něco chytřejší
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Ondrca
Jiří Gracík:

Není mi moc jasný, proč tam máš bílé pozadí kolem a ten blok není až dolů. Zkus to tak udělat ;)

Nahoru Odpovědět 5.10.2013 19:41
Creating websites is awesome till you see the result in another browser ...
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Jiří Gracík
Ondrca:

Už ne - díky za nápad, ale ani to moc nechápu jak to myslíš.
Protože ten blok má stejou výšku jako sloupce a kdyby to teklo až dolů - to se mi moc nezdá.

Nahoru Odpovědět 5.10.2013 19:43
Zase jsem o něco chytřejší
Avatar
Ondrca
Redaktor
Avatar
Nahoru Odpovědět 5.10.2013 19:51
Zase jsem o něco chytřejší
Avatar
Jiří Gracík
Redaktor
Avatar
Nahoru Odpovědět 5.10.2013 19:52
Creating websites is awesome till you see the result in another browser ...
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na Jiří Gracík
Ondrca:

Jak říkám - mně se to moc nezdá :( (i když něco na tom je).

Nahoru Odpovědět 5.10.2013 19:54
Zase jsem o něco chytřejší
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Ondrca
Jiří Gracík:

Je to tvoje věc, mě je to vcelku jedno :)

Nahoru Odpovědět 5.10.2013 19:55
Creating websites is awesome till you see the result in another browser ...
Avatar
Ondrca
Redaktor
Avatar
Nahoru Odpovědět 5.10.2013 19:56
Zase jsem o něco chytřejší
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Ondrca
Honza Bittner:

Možná by to chtělo méně spamovat a více myslet ;)

Nahoru Odpovědět  ±0 5.10.2013 20:06
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
David Čápka:

Náhodou se mu to dnes povedlo oproti minulým výtvorům :)

Nahoru Odpovědět  +3 5.10.2013 20:11
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na David Čápka
Jiří Gracík:

To každopádně, pokrok tam je vidět :)

Nahoru Odpovědět 5.10.2013 20:22
Creating websites is awesome till you see the result in another browser ...
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Daniel Vítek:

Také se hlásím :P
http://projekty.danvitek.cz/…ivni-layout/

btw. na tom tlačítku Odeslat je takovej vtípek :D

 
Nahoru Odpovědět  +7 6.10.2013 14:24
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na Michal Žůrek (misaz)
Daniel Vítek:

Hele, zmiz ! :D Ty už webdesign máš ! :D
(neber si to špatně :D)

 
Nahoru Odpovědět 6.10.2013 18:53
Avatar
Odpovídá na Daniel Vítek
Michal Žůrek (misaz):

To přece nevadí. Alespoň Vás to donutí více se snažit.

Nahoru Odpovědět 6.10.2013 19:04
Nesnáším {}, proto se jim vyhýbám.
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

Daniel Vítek (100 bodů) - Povedlo se ti vše hezky sladit do jednoho stylu, HTML 5, animace, pěkný font, dobrý nápad s kurzorem a nebezpečné tlačítko. Nemám co vytknout, gratuluji k placce :)

Misaz (90 bodů) - Výborný nápad i provedení, jen to není dotažené do finální podoby nějakého webu.

Ondrca (70 bodů) - Začíná ti to jít, web je sladěný do 2 barev a jednoho prostedí. Co působí velice rušivě je namačkaný text až do okrajů, chtělo by to používat padding. Bloček také nemusí ležet úplně až u hrany stolu, ale nad ním a pod ním by mohlo být volné místo. Chválím animace.

Snad jsem nikoho nepřehlédl, těším se zas příště :)

Nahoru Odpovědět 6.10.2013 19:10
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Ondrca
Redaktor
Avatar
Nahoru Odpovědět 6.10.2013 19:16
Zase jsem o něco chytřejší
Avatar
Odpovídá na David Čápka
Michal Žůrek (misaz):

Gratuluji. Jen mi u Dana nesedí to bílé pozadí. :)

Editováno 6.10.2013 19:21
Nahoru Odpovědět  -1 6.10.2013 19:21
Nesnáším {}, proto se jim vyhýbám.
Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Odpovídá na David Čápka
Daniel Vítek:

Juchůůůů :D Konečněěě :D Díky.. :)

 
Nahoru Odpovědět 6.10.2013 19:27
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Michal Vašíček:

Taky musím pogratulovat :-) A sdílím názor s Misazem, mohl jsi tam dát třeba dřevo (jako že je na stole).

Nahoru Odpovědět 6.10.2013 19:30
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
Vojtěch Jelínek (Slepice1):

Mě se líbí to bílé, papír pěkně vynikne.

 
Nahoru Odpovědět  +2 6.10.2013 22:04
Avatar
Ondrca
Redaktor
Avatar
Odpovídá na David Čápka
Ondrca:

Padding-left použit mám, ale nevíš proč mi nejde padding-right?

Nahoru Odpovědět 7.10.2013 16:13
Zase jsem o něco chytřejší
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:

Chci se zeptat ještě k tvé práci, když chci použít :target tak musí být div id="abc" v a href="abc", nebo to funguje i třeba tak, že budu mít někde menu, na něj kliknu a provede se něco pod ním ? :)

Nahoru Odpovědět 10.10.2013 16:35
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:

Ahá, tak jsem to už pochopil ...

Např. selektor #abc:targer říká : ,,jestli je v url #abc, proveď tento styl" .. ?

To je geniální :D

Editováno 10.10.2013 16:43
Nahoru Odpovědět 10.10.2013 16:42
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Michal Maršálek:

Ne. :target říká aplikuj tento styl na prvek jehož id je za křížkem v url.
Edit: pak jsem si uvědomil, cos měl na mysli, vlastně máš prsvdu, jen je to nějak zvláštně řečeno...

Editováno 10.10.2013 19:22
 
Nahoru Odpovědět  +1 10.10.2013 19:19
Avatar
Odpovídá na Honza Bittner
Michal Žůrek (misaz):

přesně tak. Úžasná funkce. Díky toho lze udělat třeba i CSS lightbox ve kterém se bude dát odkázat na obrázek pomocí url. :)

A ano je to geniální. :D

Nahoru Odpovědět  +1 10.10.2013 19:35
Nesnáším {}, proto se jim vyhýbám.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Honza Bittner:

Spíše se mi to hodí pro měnící se obsah stránky :)
Pro class se to asi udělat nedá co ? :/

Nahoru Odpovědět 10.10.2013 19:36
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Michal Žůrek (misaz):

nevím ještě jsem se tímto nikdy nezabíval. Vyzkouším.

Nahoru Odpovědět 10.10.2013 19:37
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Honza Bittner
Michal Žůrek (misaz):

Ne tak to funguje asi jen pro identifikátor.

Nahoru Odpovědět 10.10.2013 19:46
Nesnáším {}, proto se jim vyhýbám.
Avatar
mkub
Redaktor
Avatar
 
Nahoru Odpovědět  +1 9.11.2013 12:09
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 60 zpráv z 60.