Autor Zpráva
Stanley
Profil *
Dobrý den.
Včera jsem se pokoušel nakódovat stránku z free PSD šablony, není v ní žádný obsah a ani nebude (pouze se učím kódovat), jedná se mi pouze o zhodnocení nakódovaného designu.
Tak prosím o rady, co bych mohl ještě zlepšit, co je tam navíc, nebo co tam naopak chybí.
Předem moc děkuji.
Luky
Profil
Zdravím, stránka se mi líbí, možná na mě nepusobí dobře zvětšování písma. Co se týče kódu tak u tohoto se lomítko nepíše
 <link rel="stylesheet" href="style.css" type="text/css" />
ani zde
<br />

(používá se v XHTML)
Neuzavřené
</ul>

někdy je dobré nepoužívat pouze třídy (class) ale i ID.
Drobné chybky no, ale určitě dobrá práce
xmark
Profil
1. menu při přejíždění myši poskakuje
2. menu je málo kontrastní, obzvlášť čísla, ta tam navíc vypadají dost podivně .
3. obsah je vertikálně přehuštěný, chce to zvětšit odsazení. A když na to koukám, tak i odsazení obsahu od levého a pravého okraje je malé.
4. nevím, jestli šrafování na pozadí má navazovat na šrafování v hlavičce. V opeře je asi o 20 px výš. V důsledku toho je těch vodorovných linií trochu moc a je to nekompaktní
Petr ZZZ
Profil
Menu při přejíždění myší poskakuje a při zvětšování písma v IE se mírně rozhodí, ale zůstává čitelné a stránka zůstává použitelná. Chválím, že lze zvětšit písmo v IE, i když největší velikost není "velmi veliká" a "velmi malé" písmo je opravdu droboučké.
Stanley
Profil *
Petr ZZZ:
Ano, o tom poskakování menu vím, ale nevím, jak to odstranit, snad jedině, kdybych dal a:hover bez BOLDu, ale kdybych ho přece jen chtěl ponechat, je nějaká možnost, jak to udělat ?
Děkuju
Stanley
Profil *
Luky:
Děkuju, o těch lomítkách vím, dělá to PSPAD, a já jsem líný je odstraňovat:)
Každopádně už je to opravené a já ještě jednou děkuji.
Stanley
Profil *
xmark:
1. Ano, o poskakování vím, snažím se vyřešit, ale nějak se mi nedaří.
2.Barvu čísel změním, ale nejdříve se musím rozhodnout, jakou barvu.
3.Už na tom pracuju.
4.Ano, už to vídím, v Opeře se to ukazuje níž, než by mělo, nevíte prosím, proč ?
Děkuji.
xmark
Profil
Stanley:
Poskakování já řeším jednoduše. Ve svislém menu si můžeš dovolit ztučňovat, ve vodorovném řeším hover i zvýraznění aktuální položky pozadím celého <li>. Kromě toho, že pak nemá co poskakovat, to i líp vypadá a je to pohodlnější, protože není třeba se trefovat myší do textu, ale máš k dispozici celou plochu položky.
Bubák
Profil
V Opeře se to chybně zobrazí jen někdy, už jsem myslel, že jsi to opravil, pomůže:
.hlavicka h1 {margin: 0;}

Dodatek: tedy na 99% doufám, že pomůže, když se chybné zobrazení projeví jen někdy (po smazání keše vždy), tak se chyba na lokálu blbě odhaluje.
Stanley
Profil *
Bubák:
Aha, že mě to nenapadlo:)
Díky
Stanley
Profil *
xmark:
Pořád nějak nemůžu přijít na to, jak jste to myslel, ať dělám co dělám, pořád menu poskakuje. :(
Petr ZZZ
Profil
Stanley:
ať dělám co dělám, pořád menu poskakuje.

Vertikální menu by asi šlo udělat poměrně jednoduše pomocí display:block; a width, potom by snad ztučněný hover blbnout neměl. Zda to jde tak nějak podobně vyřešit i u horizontálního menu, nevím, ale bubák nebo panther ovládají CSS líp, třeba něco budou vědět. Podle toho, co píše [#8]xmark, se ale nezdá, že by to šlo řešit nějak snadno. Já bych dokázal udělat horizontální menu s tučným hoverem jako tabulku o jednom řádku a vybodnout se na <menu> a <li>, ale sémantické by to zrovna nebylo.

Pokud jde o menu všeobecně, zkus se pro inspiraci mrknout na bubákovy příklady. Ztučněný hover tam sice nevidím, ale jinak je to poučné a vycházím z toho, že ty příklady jsou bezchybné a odzkoušené v řadě prohlížečů, protože bubák, abych tak řekl, mi nevypadá na začátečníka. :-)
Stanley
Profil
Petr ZZZ:
Děkuju, nejspíše budu muset doufat, že sem zavítá jeden z ,,mistrů" bubák nebo panther :)
hrochpepa
Profil *
Stanley:
Na mě to dělá dojem, že je tam málo místa. Vadí tam ten obrázek. Když se klikne na 3. Galerie tak se 4 posune jen o kousek a zůstane tam, ale když klikneš na 2. tak ztučněním písma se to posune o větší kus a pak tedy 4. jde dolů. Jen můj názor. Pepa
Stanley
Profil
hrochpepa:
Mě se to dolů neposouvá, jaký prohlížeč používáš ?
Bubák
Profil
Petr ZZZ:
Ztučněný hover tam sice nevidím
Můj názor je, že podobné "vychytátky" nevypadají dobře. V CSS je dost možností, jak zviditelnit hover: barva, pozadí, podtržení, border. Poskakování textu se mi nelíbí, maximálně tak o pár px vodorovně / svisle jako simulace zmáčknutí tlačítka.

Stanley:
Mě se to dolů neposouvá
Vidím dva problémy, nedeklaruješ defaultní font, kdo nemá Myriad Pro, má smůlu a zpravidla vidí text v Times New Roman, což pro čitelnost na monitoru není nejlepší. Dej tam třeba:
font-family: "Myriad Pro", Arial, "DejaVu Sans", sans-serif;

Koukni na http://www.jakpsatweb.cz/css/font-family.html

Taky na to někdo může koukat třeba v Linuxu a používat fonty z rodiny DejaVu, které je širší, nebo si zvětšil písmo v prohlížeči a ty jsi s rezervou pro tohle nepočítal.
hrochpepa
Profil *
Stanley:
Google Chrome
Stanley
Profil
Bubák:
Aha, takže nejlepší bude, když to ztučnění odstraním a nahradím ho jiným efektem.
Ano, na písma jsem zapoměl, máš pravdu, děkuju ti.

Všem ještě jednou moc DĚKUJI.
Malý kutil
Profil *
Jedna drobnost. Nikdy nepodtrhávej, co není odkazem. Pokud budeš chtít podtrhnout něco, co není odkaz, tak to nepodtrhávej.
Stanley
Profil
hrochpepa:
jj, teď už by se ti to mělo ukázat dobře, bubák mě upozornil na to, že tam mam napsaný jenom 1 typ písma, už jsem zrušil i ten bold efekt, takže by se ti to mělo ukazovat OK :)
Stanley
Profil
Malý kutil:
Dobře, díky za rady, ihned napravím a zruším podtrhávání nadpisů :)
Stanley
Profil
Tak, a mělo by to být snad vše, jestli jste přisli ještě na nějaké nesrovnalosti, prosím napište je sem, ať se jim příště můžu vyvarovat.. :)
Děkuju.
Petr ZZZ
Profil
Bubák:
Můj názor je, že podobné "vychytátky" nevypadají dobře.
Jak se to vezme, kdyby se to udělalo dobře, mohl by ztučněný hover vypadat zajímavě (třeba jako že se písmo rozsvítí, ale to by se asi stejně muselo dělat pomocí obrázku). Já to nepoužívám hlavně proto, protože v menu mám nouzi o místo a na ztučněný hover bych musel místo rezervovat. Tím by utrpěla čitelnost menu, když se po něm zrovna nejezdí myší, protože by text musel být zkrátka menší. U svislého menu ten problém není, ale u vodorovného je nouze o místo už u poměrně nízkého počtu položek.
Petr ZZZ
Profil
@ Bubák:
<OT>
Nechceš si Zajímavosti, ukázky, testy a pokusy trošku rozčlenit a přidat pár nadpisů a kotev? Třeba u těch příkladů menu by se nadpis a kotva docela hodily a kdybys to udělal brzo, mohl bych ještě upravit odkaz v [#12], např. na http://teststranek.kvalitne.cz#variace-menu (ona by vlastně stačila i kotva, bez nadpisu)
</OT>
peta
Profil
Menu ztucnovani, neresit. Udelej ho hned tucne, protoze v pozadi mas srafovani. Srafovani v pozadi snizuje citelnost a to muze poresit jen tucnejsi pismo. Pro zmenu ho muzes dat mensi, kdyz bude tucne.
Pro puvodni ztucnovani bych zkusil position:relative. To by melo odkaz ukotvit, kde je. Pripadne nastavit sirky na pevno a odkaz centrovat vuci teto sirce.

Srafovani pod obrazkem loga je i ve FF rozhozene. Mozna by se ten obrazek v logu dal resit jako dalsi div, ktery pres opacitu prosvita do pozadi.
Problem je v tom, jak mas nastavene background-position, horizontalni (na sirku). Muzes ho zkusit dat 50% na stred. Protoze stranka je centrovana, melo by to zustat shodne pri jakemkoliv nastaveni okna.

Obsah, margin zleva dej urcite min 2em (2 velikosti fontu pismene M). Respektive stejne, jako ma nadpis Snowboard a uplne stejne zleva by melo zacinat i menu.

Galerie, asi bych pouzil jinou barvu ramecku, ktera vic odpovida ostatnim barvam, zluto zelenou z cisel? tmave modrou z nadpisu v psd? A mozna uzsi ramecek 3px? 4px? 5px?

V tom psd mas ty marginy o moc lepsi a i to stinovani a barva v pozadi je jina. Blokove se to da rozdelit
1 /----\ horni okraj + logo
2 [----] menu a obsah
3 \----/ dolni okraj
Petr ZZZ
Profil
peta:
margin zleva dej urcite min 2em

Zadávat levý nebo pravý margin v em nepovažuji za moudré. Zvětší-li si uživatel v IE písmo, může to rozhodit design. Pro margin a padding proto považuji px za vhodnější.

(Jen pro úplnost dodávám, že velikost písma je něco jiného. Já zde už delší dobu propaguji písmo v jednotkách em, teď jsem však četl Yuhůovu úvahu o alternativě v procentech, která se mi líbí.)

Prosím používej diakritiku. Děkuji.

Vaše odpověď

Mohlo by se hodit

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0