| Autor | Zpráva | ||
|---|---|---|---|
| Michal K. Profil * |
#1 · Zasláno: 5. 3. 2015, 22:08:10
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 * |
#2 · Zasláno: 5. 3. 2015, 22:54:53
Zkus si stránku zazoomovat, menu ti ulítne pryč.
|
||
| Michal K. Profil * |
#3 · Zasláno: 5. 3. 2015, 22:59:58
Díky za info, zkusím si s tím pohrát a snad přijdu na to, kde je chyba.
|
||
| Keeehi Profil |
#4 · Zasláno: 5. 3. 2015, 23:24:30
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> |
||
| MartinJ Profil * |
#5 · Zasláno: 5. 3. 2015, 23:37:52
Jaktože je ten text hlavičky tak rozmazaný ? Já nejdřív myslel, že to je obrázek.
|
||
| Michal K. Profil * |
#6 · Zasláno: 5. 3. 2015, 23:48:00
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 * |
#7 · Zasláno: 5. 3. 2015, 23:50:53
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 * |
#8 · Zasláno: 6. 3. 2015, 00:34:36
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 |
#10 · Zasláno: 6. 3. 2015, 01:26:11
Podle mě tam máš hromadu znaků navíc.
Například: <div id="obsah"> ... </div> <main> ... </main> |
||
| Michal K. Profil * |
#11 · Zasláno: 6. 3. 2015, 01:54:58
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 |
#12 · Zasláno: 6. 3. 2015, 02:23:20
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 |
#13 · Zasláno: 6. 3. 2015, 02:28:02
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 |
#14 · Zasláno: 6. 3. 2015, 03:46:09
#zahlavi stále chybí background-color: white;
|
||
| weroro Profil |
#15 · Zasláno: 6. 3. 2015, 10:37:44
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 |
#16 · Zasláno: 6. 3. 2015, 11:03:48
weroro:
„musia byť značky <li> obalené v značke <ul> alebo <ol>.“ Anebo v <menu>.
|
||
| Michal K. Profil * |
#17 · Zasláno: 6. 3. 2015, 11:56:04
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 |
#18 · Zasláno: 6. 3. 2015, 12:09:42
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 * |
#19 · Zasláno: 6. 3. 2015, 12:31:53
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 |
#20 · Zasláno: 6. 3. 2015, 12:41:53
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 |
#21 · Zasláno: 6. 3. 2015, 12:43:26
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 * |
#22 · Zasláno: 6. 3. 2015, 12:53:14
lionel messi a Trejpa: Aha, super. Již to chápu, díky moc! :)
|
||
| Michal K. Profil * |
#23 · Zasláno: 6. 3. 2015, 15:04:16
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 |
#24 · Zasláno: 6. 3. 2015, 15:17:26
Michal K.:
Neplavej odkazy, ale blok kolem nich. .paticka .prava { float: right; }.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ášť? |
||
|
Časová prodleva: 9 let
|
|||
0