odkazy přestaly fungovat
Dobrý den, na webu liborsimek.eu mi dnes přestaly fungovat hypertextové odkazy pod obrázky. Hledám chybu, ale žádnou jsem v kódu neobjevila. Je to nějaká chyba na vaší straně nebo mám hledat dál? Díky. Odkazy vedou na google videa a ta sama o sobě fungují, takže je problém je asi někde na serveru s miniwebem.
4 Odpověď
Nemám na mysli tento konkrétní problém, samozřejmě jsem udělal už spoustu chyb. Mám na mysli nesmyslnou organizaci celého kódu – napíšu Vám menší rozbor.
Už na mnou přiloženém screenshotu je vidět velké množství <br>, kterých máte na webu nepočítaně. <br> slouží spíš k zalomení řádku v textu, k vytvoření mezery mezi dvěma obrázky / prvky / odstavci je vhodnější padding v css. Můžete tím mnohem rychleji (a plošně) měnit rozestupy a navíc tyto rozestupy máte plně pod kontrolou, nejste limitován velikostí řádku.
Header má zcela nesmyslnou velikost – 100% x 30px – to je případě klasického obdélníkového monitoru úzký pruh naležato, obsah by měl být právě v této oblasti. Ve Vašem případě je ale obsah headeru rozmístěn po celé ploše webu, takže zcela logicky překrýval vše včetně odkazů. Height 30px sice omezí prostor headeru do stavu, kdy se zdá vše v pořádku, ale obsah není uvnitř headeru, což může způsobovat problémy nejen se zobrazováním, ale v případě nějakých pozdějších úprav Vám to může způsobit mnoho starostí. Header v podstatě pokrývá celou plochu webu a obrázky v něm zabírají 10% celé plochy. Kdybyste zrušil omezení width 10% u obrázků v headeru, roztáhnou se na mnohem větší prostor, který odpovídá reálné velikosti zdrojového obrázku – není tam žádné efektivní omezení velikosti. Pokud má být header takhle vlevo, asi bych šel spíš cestou height: auto; width: 10%; left: 0px; , což vytvoří odpovídající tvar headeru. U obrázků v headeru bych pak nastavil width 100%.
To, co teď máte na webu sice nějak funguje, ale jste tam výrazně limitován v momentě, kdy byste chtěl provést nějaké změny. Jak byste například postupoval, kdybyste chtěl headeru nastavit nějaké barevné pozadí? V mnou navrhovaném řešení by stačilo jednoduše připsat do stylu background: red; (v případě červené barvy). Kdybyste v tomto momentě připsal do stylu background: red; , zobrazí se Vám v horní části stránky červený obdélník.
Teoreticky by bylo ještě vhodnější vytvořit na stránce jednoduchý grid, aby obsah levé části nepřekrýval hlavní obsah.
Celý obsah webu máte v tagu <h3> a případné výjimky specifikujete font-size: 160%; a podobně. <h3> (a další jako h1, h2 ,..) jsou primárně určeny pro nadpisy, aby tvůrci webu nemuseli nadpisy vkládat do <span> a tam upravovat parametry ať už přes class, id nebo style. V kódu by to zabíralo zbytečné místo a tak je vhodnější využít tag <h1> (apod.), kterému v css nastavíte parametry. Tagy <h1> (apod.) také zalamují řádek.
Doporučoval bych nastavit font-size v body a pak případně v h1 (apod.), kde byste nastavil další parametry jako třeba podtržení apod., potřebný padding pro text můžete nastavit v p. Nadpisy jednotlivých sekcí byste pak vložil do <h1>, <h2> , .. a obsah do <p>.
V kódu často opakujete parametry jednotlivých položek. Například v headeru máte u každého obrázku nastaveno width=“10%“. V případě úpravy musíte u každého jendoho obrázku změnit hodnutu. V případě, že byste width nespecifikoval přímo u obrázku, ale specifikoval jej v css, můžete šířku všech obrázků nastavit najednou. Podobně je to i s písmem.
Neberte to, prosím, jako kritiku, ale spíš jako upozornění na možné problémy.