Kritika webu http://skkelti.cz/

HTML a CSS Kritika webů - ukažte se! http://skkelti.cz/ American English version English version

Jak se ti líbí web?
Celkové hodnocení (2 hlasů):
2.52.52.52.52.5
Přejít na web:
http://skkelti.cz/

Při vložení tohoto webu do kritiky web získal následující hodnocení:

Kladných hodnocení: 10; Varování a poznámky: 17; Kritické chyby: 4.
Stránka obsahuje mnoho zbytečných chyb. Většinu nalezených chyb je možné jednoduše opravit. Pokud si s něčím nevíte rady, použijte Český neoficiální validátor HTML stránek

Avatar
tbartolen
Člen
Avatar
tbartolen:

AHoj, po delší době jsme provedli opět nějaké změny na našem webu. Máme novou kamarádku co nám dělá grafiku. S tím se pojí nový header. Máme ho tam jeden den, ale mě se prostě zdá nemastný, neslaný, špatný. Nevím jak ho jen trochu upravit, aby byl top. Měli by jste někdo nějaký nápad? Zarovnání textu, výška, umístění obrázku, atd?
Jinak další rady ohledně designu si rád poslechnu, jsem amatér a vše to dáváme dohromady jen svépomocí a zadarmo, takže nejde o profesionální práci, to ale neznamená, že to tak nemusí vypadat :-)

Děkuji za konstruktivní kritiku =)

Odpovědět 16. března 10:11
Navštiv www.fb.com/skkelticz
Avatar
kelley
Člen
Avatar
kelley:

Hodnocení grafiky přenechám jiným, nejsem grafik, ale stránka mi připadá tak nějak "standardní" :-) Výhrady mám k nesrovnaným sekcím/divům svisle pod sebou. Header, menu, obsah i patička jsou o dva tři body "poskákané" do stran. Pak bych se podíval na to, proč se header, menu i úvodní fotka pohne směrem dolů při najetí myší, dělají to i nadpisy s odkazem... asi to měl být úmysl, ale na mě to působí jako chyba. A další věc: v rozbalovacích menu dát menší font a nastavit nějaký margin-left, ať to není tak nalepené na boku.

 
Nahoru Odpovědět  +1 16. března 13:24
Avatar
Jiří Gracík
Redaktor
Avatar
Jiří Gracík:

Rady českého neoficiálního validátoru jsou výborný :D

Nahoru Odpovědět  +1 16. března 14:19
Creating websites is awesome till you see the result in another browser ...
Avatar
martinkhla
Člen
Avatar
martinkhla:

Stránka mi príde nemastná, neslaná. Grafika zastaralá, nudný font a všetko moc na kope. Ďalej, ako písal kelley vyššie, vypol by som / upravil by som hýbanie, pri hoveri, smerom dole, nakoľko to dáva dojem nefunkčnosti stránky. Začal by som prve fontom, nakoľko je to základ web dizajnu a vie veľa pokaziť. Zmenil by som ho na nejaký modernejší napr. Lato alebo iný. Z grafickej stránky by som ti dal inšpiráciu napr. http://demo.themeum.com/sportsline/ , kde môžeš vidieť ako sa dajú pekne zladiť farby, ako sa dajú pekne spraviť výsledky zápasov, ako sa dajú moderne nastaviť novinky a ako sa dá dať stránke šmrnc. Skús popozerať aj inde, pohľadaj stránky s podobnou tématikou a sleduj funkcie ktoré používajú a ktoré si myslíš že by sa hodili tvojej stránke. Na záver: Dúfam, že ťa moja kritika nejako neodradila. Ber to ako pomoc do budúcna a verím, že nabudúce to bude lepšie. Za mňa máš 2 / 5.

Nahoru Odpovědět 16. března 19:55
Logic will get you from A to B. Imagination will take you everywhere. - Albert Einstein
Avatar
tbartolen
Člen
Avatar
Odpovídá na martinkhla
tbartolen:

To mě v žádném případě neodradí. Bohužel to co si poslal je jiná wordpress šablona, která není zadarmo. Určitě je to ale inspirace jakým směrem to směrovat. Děkuji.

Nahoru Odpovědět 16. března 22:38
Navštiv www.fb.com/skkelticz
Avatar
00
Člen
Avatar
Odpovídá na tbartolen
00:

Na rozházené velikosti se hodí

* {box-sizing : border-box}

dát do CSS

 
Nahoru Odpovědět 17. března 21:02
Avatar
Matúš Petrofčík
Šéfredaktor
Avatar
Odpovídá na 00
Matúš Petrofčík:

Ja to robím takto:

/* box-sizing: border-box */
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}
Nahoru Odpovědět  +2 17. března 21:19
obsah kocky = r^2 ... a preto vlak drnká
Avatar
tbartolen
Člen
Avatar
tbartolen:

Co se týče podskakování odkáazů, snažil jsem se ve widgetu udělat efekt tlačítka na obrázku. Použil jsem na to následující kód

<style>
a:hover {position: relative; top: 2px}
</style>
<a href="http://www.cmshb.cz/mladez/hokejbalova-centra-mladeze/">
<img src="http://skkelti.cz/wp-content/uploads/2016/02/logo_hcm-e1456319541343.jpg"  title="SK Kelti 2008 jsou držitelem statusu Hokejbalové centrum mládeže!">
</a>

Nevím proč, ale ten efekt se mi začal dělat na všech odkazech...:(

Nahoru Odpovědět 17. března 21:53
Navštiv www.fb.com/skkelticz
Avatar
martinkhla
Člen
Avatar
Odpovídá na tbartolen
martinkhla:

Pretože týmto spôsobom nastavíš efekt globálne pre všetky odkazy na stránke. Navrhujem napr. určiť si konkrétnu oblasť, kde chceš efekt využiť, napr.

.widget a:hover {  }
Nahoru Odpovědět 17. března 21:58
Logic will get you from A to B. Imagination will take you everywhere. - Albert Einstein
Avatar
martinkhla
Člen
Avatar
Odpovídá na tbartolen
martinkhla:

A tento efekt by som asi riešil skôr cez transfrom a zároveň pridal transition - touto úpravou docieliš peknej animácie.
Čiže finálny kód by som napísal takto:

/* .widget je príklad Oblasti pre ktorú chceš efekt využiť */
.widget a {  transition: 0.2s linear;  }
.widget a:hover > img {  transform: translate3D(0, 3px, 0); }
Nahoru Odpovědět 17. března 22:11
Logic will get you from A to B. Imagination will take you everywhere. - Albert Einstein
Avatar
martinkhla
Člen
Avatar
Odpovídá na martinkhla
martinkhla:
  • oprava kódu
/* .widget je príklad Oblasti pre ktorú chceš efekt využiť */
.widget a > img {  transition: 0.2s linear;  }
.widget a:hover > img {  transform: translate3D(0, 3px, 0); }
Nahoru Odpovědět 17. března 22:20
Logic will get you from A to B. Imagination will take you everywhere. - Albert Einstein
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 11 zpráv z 11.