Autor Zpráva
Michal K.
Profil *
Dobrý den,

po delší odmlce se vracím k tvorbě www stránek a jelikož se za tu dobu objevilo dosti novinek, nejsem si jist jestli můj kód jak u HTML tak zápis CSS je správný.

Tímto bych vás chtěl poprosit o kritiku kódů.
Vždy mi šlo o to, aby zápis byl co nejstručnější a proto pokud někde naleznete něco přebytečného, budu rád, když mě informujete.

Předem díky za každou radu. Zatím sem nakódoval pouze hlavičku webu a dále sem nechtěl prozatím pokračovat dokud nebudu vědět, že kód je OK.

http://iphonemag.cz/
MartinJ
Profil *
Zkus si stránku zazoomovat, menu ti ulítne pryč.
Michal K.
Profil *
Díky za info, zkusím si s tím pohrát a snad přijdu na to, kde je chyba.
Keeehi
Profil
Můžou za to ty floaty. Odstranit je a s nimi i to pozicování.
Hlavička se dá přepsat na:
<header>
    <div id="zahlavi">  
    <h1>iPhonemag</h1>
    </div>
</header>
S tím, že ten padding z header se přesunek k #zahlavi, #zahlavi take dostane bílé pozadí. h1 bude mít na pozadí ten obrázek co byl původně ve spanu a color: transparent; pro odstranění toho textu. Snad jsem na nic nezapomněl.
MartinJ
Profil *
Jaktože je ten text hlavičky tak rozmazaný ? Já nejdřív myslel, že to je obrázek.
Michal K.
Profil *
Keeehi: Děkuji, už je vše ok a zároveň se nyní zápis zestručnil, což je dobře.
MartinJ: iPhonemag.cz v hlavičce je vytvořen pomoci obrázku. Vím, že by současné logo šlo udělat pouze pomocí textu, ale v budoucnu bude logo jiné a proto jsem už současné udělal formou obrázku.
MartinJ
Profil *
Michal K.:
iPhonemag.cz v hlavičce je vytvořen pomoci obrázku
Jo, já to přehlídl, tak už je to jasné.
Michal K.
Profil *
Tak sem se nyní vrhl na obsahovou část a nevím proč, ale i přesto, že padding mám nastaven dobře, odsazení textu zprava nefunguje tak, jak by mělo.
weroro
Profil
Michal K.:
Na margo prvého príspevku mám pocit, že značka <li> nepatrí do <nav> respektíve nemala by byť priamym potomkom značky <nav>, takže tvoje použitie je nesprávne.
Krakatoa
Profil
Podle mě tam máš hromadu znaků navíc.
Například:
<div id="obsah"> ... </div>
bych nahradil:
<main> ... </main>
Michal K.
Profil *
Krakatoa: Děkuji, nahrazeno. :)
Weroro: Ve většině návodech bylo uváděn takový zápis. Např. zdrojak.cz

<nav>
    <ul>
         <li><a href=“/home”>Domů</a></li>
         <li><a href="/about">O nás</a></li>
    </ul>
</nav>

Takže mám tam přidal ještě <ul> nebo se to zapisuje zcela jinak?
Díky za odpověď.
Krakatoa
Profil
Michal K.:
Zapomněl jsi vyměnit ten obal za main v css.
A ještě poznámka, nelíbí se mi ten přechod u hoveru v nav, pozadí jde ze zelené do bílé a text z bílé do zelené, takže v půlce ten text na chvilku zmizne, ale je možné, že ten pocit bude individuální.
Chamurappi
Profil
Reaguji na Michala K.:
<main> bych nahradil za <div>, totéž s ostatními hůř podporovanými elementy. Návštěvníci s podporujícím prohlížečem z nich nic nemají, zbytek z nich má akorát problémy, což v součtu znamená … problémy.
V Exploreru 10 není hlavní obsah stránky uprostřed (za to může hlavně Krakatoa) a obrázky mají výchozí border.

Vždy mi šlo o to, aby zápis byl co nejstručnější a proto pokud někde naleznete něco přebytečného, budu rád, když mě informujete.
1) <meta name="author">,
2) atribut type u <link>u,
3) značky <html>, <head>, </head>, <body>, </body> a </html>,
4) všechny značky </p> a </li>,
5) kombinaci elementů <header><div id="zahlavi"><h1> by mohl hravě zastávat sám <h1>,
6) šipky v odkaze na předchozí a další stránku nemusí být zapsané entitou.

jestli můj kód jak u HTML tak zápis CSS je správný
V CSS jsem nepochopil, proč mají mít Webkity jeden z transitionů pětkrát kratší než ostatní.
Selektoru header #zahlavi h1 a nastavuješ marně šířku a výšku, odkaz má výchozí display: inline.
Keeehi
Profil
#zahlavi stále chybí background-color: white;
weroro
Profil
Michal K.:
Takže mám tam přidal ještě <ul> nebo se to zapisuje zcela jinak?
Aby to bolo správne, musia byť značky <li> obalené v značke <ul> alebo <ol>.
Bubák
Profil
weroro:
musia byť značky <li> obalené v značke <ul> alebo <ol>.
Anebo v <menu>.
Michal K.
Profil *
Krakatoa:
Hover změněn.

Chamurappi:
- značky <html>, <head>, </head>, <body>, </body> a </html> - moc nevím co jste tímto myslel, jestli to odstranit, což jsem ještě u žádné stránky nebo u žádného návodu neviděl, takže se nechám rád poučit do budoucna.
- všechny značky </p> a </li> - taktéž jako u předchozí rady moc nevím co zde dělat, jestli odstranit lomítka a dělat zápis např. <p>...<p> nebo čistě jen před každým odstavcem dát <p> a na nějaké ukončování zapomenout

Co se týká šipek v odkazech na předchozí a další stránky, když sem je zapsal pomocí znaku <>, v PSPadu se to červenalo chybou a to mě zmátlo.

Keeehi: Děkuji, nyní již přidáno.
weroro a Bubák: Děkuji, zvolil jsem nakonec <menu>
lionel messi
Profil
Michal K.:
- značky <html>, <head>, </head>, <body>, </body> a </html> - moc nevím co jste tímto myslel, jestli to odstranit, což jsem ještě u žádné stránky nebo u žádného návodu neviděl, takže se nechám rád poučit do budoucna.

- všechny značky </p> a </li> - taktéž jako u předchozí rady moc nevím co zde dělat, jestli odstranit lomítka a dělat zápis např. <p>...<p> nebo čistě jen před každým odstavcem dát <p> a na nějaké ukončování zapomenout


Poučné (podľa môjho názoru povinné) čítanie obzvlášť pre začínajúceho kódera: Nepresnosť v texte o zoznamoch v HTML..

Prehliadač si v rámci DOM chýbajúce značky domyslí podľa kontextu a špecifikácie. Pozri sa na demonštračnú živú ukážku, zobraz si zdrojový kód a potom použi vývojárske nástroje, ktoré ti ukážu DOM (pomocou F12 a potom príslušná záložka, vo FireFoxe Prieskumník stránok, ostatné prehliadače fungujú podobne).
Michal K.
Profil *
lionel messi:
Díky moc, značky jako </p> a </li> upraveny.

<html>, <head>, </head>, <body>, </body> a </html> - zde jsem pochopil, že je možnost všechny tyto značky odstranit a vadit to nebude, jenže odjakživa jsem byl vždy zvyklí <body> stylovat a nevím zda je tedy vhodné jej odstraňovat.
lionel messi
Profil
Michal K.:
jenže odjakživa jsem byl vždy zvyklí <body> stylovat a nevím zda je tedy vhodné jej odstraňovat.
Keď nastavuješ štýl priamo body a nevymýšľaš zbytočné komplikácie cez identifikátory a triedy, tak je to v pohode.

Dôkaz
Trejpa
Profil
Michal K.:
djakživa jsem byl vždy zvyklí <body> stylovat a nevím zda je tedy vhodné jej odstraňovat.
Nestyluješ značku <body>, ale element BODY. A tento element v dokumentu bude, i když není přítomna jeho značka.
Michal K.
Profil *
lionel messi a Trejpa: Aha, super. Již to chápu, díky moc! :)
Michal K.
Profil *
Opět zde řeším chybu, nyní však s patičkou, kde nereaguje line-height: 40px; a i float: right; nefunguje tak jak bych chtěl => aby se ty tři odkazy zobrazovali těsně u okraje patičky o velikosti 1020px.
Trejpa
Profil
Michal K.:
Neplavej odkazy, ale blok kolem nich.
.paticka .prava { float: right; }
Doporučuji blokům .leva a .prava také zadat šířky, které se součtem do obalujícího bloku (.paticka) vlezou.

Proč začátečníci mají pokaždé potřebu nastavovat pozici každému odkazu zvlášť?

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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