Sponzorované odkazy:


Diskuse i na konci stranky FACEBOOK bez nutnosti registrace v tomto foru

html stránka který element dělá šírku

html stránka který element dělá šírku

Příspěvekod AdminNovy » ned bře 17, 2019 11:01 am

Na html stránce jeden element roztahoval šířku tak, že nebyla vhodná pro chytré telefony.
Zjistit, který element to dělá, je detektivka.
V Google Chrome prohlížeči je možnost otevřít si vývojářskou konzoli pomocí klávesy F12.
Kliknout na šipku a pak na patřičný element, kde jsem čekal chybu, v záložce Elements.
Zjistil jsem, že html kontejner je užší, než ostatní elementy, i když měl šířku 100% a
to dole v konzoli, kde se vypsaly všechny nadřazené elementy elementu, na který jsem klikl.

Postupně jsem myší přejížděl nad nadřazenými elementy a viděl, že všechny mají užší šířku,
dle namodralé ploše pohybující vyznačující element na stránce.
Pak jsem přejel nad tabulku nadřazenou přímo elementu a tam již vykazovala šířku větší než HTML tag element.
Zkusil jsem tabulku zúžit na width:50%
Styl lze snadno upravit v pravém poli vývojářské konzole pod hlavičkou STYLES - element.style.
Tabulka již vykazovala zúžení, ale stále tam byl nějaký element, který byl širší.
Najel jsem na tlačítko, označil jej, viz na obrázek tmavě šedý proužek a zkusil jsem mu mu zmenšit šířku natvrdo,
tedy na 200px. Stránka okamžitě splaskla - byl nalezen problém.

Tedy po delším zkoušení nakonec problém dělalo tlačítko input type button, které mělo delší text,
jenž se na malých obrazovkách ještě zvětšil, měl jsem to ve style.css tak nadefinováno.

Tlačítko INPUT jsem změnil na DIV, text zkrátil a vše bylo již v pořádku.
Místo INPUT, pokud je to možné, raději používat elementy SPAN, DIV, A s událostí onclick.

Obrázek ukazuje vývojářskou konzoli prohlížeče Google Chrome a šířku elementů, když se přejíždí nad jejich seznamem myší.
Najel jsem kurzorem nad tag HTML a hned viděl, že ten stránku nerozšiřuje a není příčinou problému, pak jsem přejel nad další tag a postupoval až k tagu, který již byl širší než HTML a v něm byl problémový element.
how-to-find-the-widest-element-on-a-web-page.jpg
AdminNovy
Site Admin
 
Příspěvky: 751
Registrován: stř lis 02, 2011 10:07 am

Zpět na Počítače

Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 1 návštěvník

%2F%2Fdum-zahrada.okhelp.cz%2Fforum%2Fviewtopic.php%3Ff%3D64%26t%3D1984 link
cron