HTML/CSS - ruší se řádkování textu
Dobrý den,
nejsem kodér ani programátor, nicméně mám svůj amatérský web, kde nyní dochází k chybě, kterou si nedokážu vysvětlit. Odstavce jsou nastaveny tak, aby byly psány 1,5tým řádkováním. Na PC zařízeních je vše v pořádku. Když se stránka zobrazí na mobilním zařízení, je vše také v pořádku, ale po "refresh" se řádkování promění na jednoduché. Tato chyba se objevuje u všech mobilních zařízení, u PC zařízení se neděje nikdy.
HTML vypadá takto:
<main>
<p>Zde je nějaký odstavec.</p>
</main>
CSS vypadá takto:
main p{color: black; text-align:justify; line-height:1.5em;}
Nenapadá někoho, v čem je problém? Předem děkuji za případné odpovědi.
- Zkus to udat v pixelech nebo s normal ( line-height: 15px , nebo line-height: normal), jinak za posledni deklaraci « ; » v CSS delat nemusis.
/*nebo :15px*/ - Na samotny paragraf, nebo HTML, body etc uz nemas nejakaou deklaraci v css zvlast ? Myslim to tak, jestli ji neprebiji jina hodnota ?
Nevidím nic, co by to přebíjelo. Každopádně line-height:normal mi nepomohlo, protože tím jsem dostal jednoduché řádkování. To s těmi pixely funguje (funkce "refresh" už řádkování nerozhazuje), ale zatím jsem nedokázal najít hodnotu pixelů, která by vypadala "příjemně" jak na PC, tak na mobilu. Ale třeba ji najdu. Každopádně díky za radu.
Zkus tady (nakych 24px zkus, 15 bude mozna moc malo) : https://www.w3schools.com/tags/ref_pxtoemconversion.asp
Tak bohužel nenašel jsem žádnou velikost v pixelech, která by vypadala jako 1,5té řádkování jak na PC, tak na mobilu. Na mobilu tomu odpovídá 60px, což je ale na PC obrovská velikost. Ale zkusím si ještě různě pohrát s velikostmi v px a em, třeba ještě na něco přijdu.
Klidne to "na zkousku" udelej pro mobil pres media querie (px nastav dle svého uvazeni) :
TiP ~ V CSS ho dej na konec, takle mas jistotu ze nebude prebitej jinym pravidlem.
@media screen and (max-width:1024px)
{
main{
line-height:1.5
}
}
Ok, díky, vyzkouším. Celé je to uzavřené v <body>. To <main> je akorát sémantická značka hlavního textu (tj. toho, co není menu ani záhlavní ani zápatí atd.)
Jinak problém je prostě v tom, že určitý počet pixelů prostě není hezký zároveň na mobilu a na PC. A co se týče media query, tak to používám, ale neberu to jako mobilní verzi a PC verzi, ale spíš větší verzi a menší verzi. Můj mobil má třeba víc pixelů na šířku než některé staré monitory, takže "mobilní verze" se vytváří dost těžko.
Nejsme si jisty, ale <main> v html by mel byt pouzit jen jendou na jednu stranku a oznacuje kde je hlavni obsah stranky, neni to jako <div>.
INFO : Jinak line-height ma chrome jinak prednastavené jak jiné prohlizece, tusim 1.1 o proti 1.x, nevim presne, musel bys pohledat na google nechci ti psat nepresnosti, WIKAN ktery ti odpovidal jako prvni by to mohl vedet.
Já používám <main> jenom jednou na stránku. Mám to takhle:
<head>
</head>
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
Sem se rychle podival a u clanku kde mas jen <p> bych ten paragraf vlozil kdyz uz to pises v HTML5 i s nadpisem do :
* Nasledovne vechny <article> do <section>
..ale v tom problém stejne neni, je to zbytecné to rozpytlavat.
to súhlasím, i když potom treba h2 zmeniť na h1.
Ok, díky za tipy. Myslím, že není třeba rozebírat všechny podrobnosti. Jak jsem psal, jsem absolutní amatér a těch nedostatků tam budou mraky. Zajímalo mě hlavně řádkování, které je ale evidentně způsobeno tím fontem. Každopádně díky za rady.
ok, ale tie obrázky to jediné bych určite poriešil, to považujem za kritickú chybu.
Dobře, kouknu na to.
Uz ma na te samé strance pod <H1> - "hitorie mesta", nadpis pro jednu stranku, kdyby v tomto pripade pouzil i <h1> na jednotlivé sekce by "SEO" nemuselo spravne rozeznat jejich dulezitost, takle vi ze "Historie mesta" je hlavni nadpis a ruzné clanky, sekce <section> s <h2> jsou jednotlivé odstavce s informacemi o "historii mesta".
* V hirarchi ma tak spravne na prvnim miste "HISTORII MESTA" a clanky o meste <h2>
Ne, nemáš pravdu,... v prípade že sa nachádza tag h1-h6 medzi tagmi article tak sa to vyhodnocuje nie ako nadpis dokumentu či položky v dokumente ale ako nadpis článku. Pre atricle tag je povolené a dokonca odporúčané používať pre každý article h1 tag ako hlavný nadpis, v tomto prípade viac h1 tagov vôbec nevadí, naopak pre SEO je to ešte za pozitívne bodíky.
Kdyz to tvrdis. Proto na tvé prispevky radeji neodpovidam, skonci to vzdy stejne.
https://www.w3.org/TR/html52/sections.html#the-article-element a https://www.w3.org/TR/html52/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements pozri špecifikáciu a https://html.spec.whatwg.org/multipage/sections.html
https://twitter.com/johnmu/status/852131231928135680 a https://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824
používa body, a main má vo vnútry body,... a presne takto to má byť. To má správne.
Je to tým že font metron_light_pro_regular nerešpektuje defaultné user agent CSS u určitých tagov (vrátane <p>) ktorý obsahuje margin start/end/before/after a nerešpektuje ani line-height samotný. (Aha to už Vám tu poradili.)
Ovšem dodám k tej stránke trocha iného kecania, trocha kritiky. Za 1. som si všimol že načítanie tej stránky mi zhltne až 12.6MB, obrázky sťahujete v rozlíšení 1024x1024 aj keď je zobrazujete v rozlíšení 428x428, lazy-loading Vám asi nič nehovorí, díky tomu Load trvá pri emulácii Fast 3G so zakázaným cashom až 1.2 minúty (cashovanie taky poriešené nemáte), fakt nepochopím načo sa načitáva posledný obrázok zo Slidu v čase kdy ešte neni načítaný prvý obrázok. Stránka by nemala presiahnuť 1MB v prípade fotogalérie sa dá ešte rešpektovať 2-3MB, 12.6 MB je už ale sakra prehnane veľa. Docela nesprávny spôsob jak tie obrázky prepínate, a okrem toho ani nie sú normálne skomprimované. Favicona v rozlíšení 1550x1550 a ešte v PNG formáte je čo preboha? na čo také rozlíšenie když sa to zobrazuje v tabu v oblasti 32x32 pixelov, pre Splash Art v prípade PWA jakožto ikonové pozadie sa bežne používa len 256x256 alebo 512x512. Okrem toho, Vaša favicona nesie len jedno jediné rozlíšenie. Nepoužívate ani meta viewport, responzivita je len "tvrdé wrapovanie, a percentuálny size prvkov, na mobile by ma navigácia zabila, ani neviem koľko krát bych klikol na tlačítko Odkazy kdybych chcel kliknúť na Linka A. Obrázkom vždycky pridávajte alt atribút, pre obrázok ktorý nenesie obsah prázdny ale i tak ho tam majte (práve tak kde by mal byť prázny tak tam máte "CZECH" hodnotu. samotná stránka by mohla používať HTTPS. Cross-origin neporiešený, linky na externú doménu nenesú rel="noreferrer" ani rel="noopener", jinak meta keywords sú zbytočné, najčastejšie používané vyhladávače jako google, bing, yahoo, duckduckgo atp je ignorujú. linky s popiskom obsahujúce jedno " " je taky nezmysel. Ešte sa vrátim ku tým obrázkom čo sa Vám prepínajú nie úplne skrz slideovanie, u všetkých máte napísané veľkosti cez atribúty, odporúča sa nastavovať veľkosť skrz CSS, HTML by mal určovať len sémantiku, CSS zobrazenie. Okrem toho u obrázkov nikdy nemente obe rozmery skrz CSS, vyvarujete sa tým deformáciám obrázkov a vždy si zachovajú správny pomer strán. Ešte jednu chybu som našiel a to title jakožto tag nesúci textový obsah napsaný pred meta charset tagom, v rôznych prehliadačoch to môe spôsobiť to že sa budú zobrazovať na záložke otázniky, to nechcete. Je tam toho ešte omnoho viac, ale to už nie sú až tak vážne chyby. Hlavne tie obrázky poriešte, to by ste mali určite,... 1.2 minúty načitávať pár obrázkov je extrém. A ešte dodám že veľa krát opakujete rovnaké CSS vlastnosti pre rôzne selektory, alebo naopak, rovnaké selektory pre rôzne vlastnosti.
Bez urážky, nechci Tě nijak namíchnout.
Vůbec tomu nerozumím, ale trocha odstavců by nezaškodila.
Je to nepřehledné. Následná úprava bleskově napsaného sice zdržuje, ale členění textu je dost důležité i pro ty, co by tomu rozuměli.
OK, skrátim to o do zarážiek:
- zmenšite veľkosť stránky: 12.6MB a teda load time 1.2 minúty pri fast 3G je extrémne veľa (najmä když nemáte poriešené ani cashovanie).
- upravte obrázky na rozlíšenie v akom sa zobrazujú reálne na webstránke. Neco jako <img src="obrazok_v_4K_rozliseni" height="100" width="100"> je nesmysl.
- používajte komprimáciu.
- používajte atribút alt pri obrázkoch s hodnotami ktoré majú zmysel.
- favicona by najvhodnejšie mala byť vo formáte .ICO na to existujú online convertery z PNG.
- používajte rel="noreferrer" alebo rel="noopener" v prípade linkov smerujúcich na inú doménu.
- nepoužívajte stylovacie html atribúty, na stylovanie je CSS. (presne to čo je v druhej zarážke je špatne)
- nenastavujte v CSS natvrdo obe rozmery obrázku, vyvarujete sa deformáciám obrázkov a zachovajú si správny pomer strán.
- Používajte lazy-loading, je nesmysl načitávať posledný obrázok zo slidovania ktorý sa má zobraziť možno tak o 20 sekúnd, když ešte nieje načítaní ani prvý obrázok ktorý by sa mal zobraziť ako prvý.
- rozlíšenie 1550x1550 pre faviconu je nesmysl.
- linky obsahujúce v popisku &nbps; sú nesmysl, jediné &nbps; nahradiť medzerou, formátovanie neriešiť skrz tvrdé medzery.
- nepoužívať zbytočne rovnaké CSS vlastnosti pre rôzne selektory, alebo naopak, rovnaké selektory pre rôzne vlastnosti.
Tým myslím neco jako: "p {line height: 1.5"} p {font-size: 20px} p {...} nebo .uhorka {height: 20px} .mrkva {height: 20px} .pomaranc {height: 20px}
- meta charset písať pred title tagom a akýmkoľvek textovým obsahom, ideálne by mal byť vždy úplne prvý v heade.
- používať meta viewport.
- meta keyword sú zbytočné, vyhladávací boti to ignorujú.
- používajte HTTPS
Neviem či som napsal všetko.