Autor Zpráva
Levoš
Profil
Prosím o radu, kde dělám chybu. Viz ukázka.
Chtěl bych vložit paddding-left: 20px abych měl text odsazeny.
Zatím jsem to řešil .posun01 { position: relative; left: 20px} a v html pak vypisování <span class="posun01">xxxxxx</span>

Co tedy potřebuji:
zrušit .posun01 a někam vložit padding-left: 20px abych všude mohl v HTML
odmazat <span class="posun01">xxxxxx</span>, pokud to vložím .tlac03 ul li a { padding-left: 20px} ,
tak se mi to celý rozhodí a posunou se céle položky, prosím o radu, děkuji.

Ukázka problému
Tomáš123
Profil
Levoš:
Živá ukážka. Odsadenie som pridal prvku <a>.

pokud to vložím .tlac03 ul li a { padding-left: 20px} , tak se mi to celý rozhodí a posunou se céle položky
Zrejme si to vkladal pod selektor .tlac03 ul li.
Levoš
Profil
Tomáš123:
Děkuji diky vám jsem to vyřešil. Fungovalo to, ale trochu byl problém s velikostí, tak jsem pátral dál, kde zase dělám chybu.
Problém byl v tom, že pokud délku 183px zadám do .tlac03 ul li ,tak pak je to o cca 6 px kratší.
Pokud délku dám do .tlac03 ul li a ( a to byla právě ta chyba! tak se to celý rozhodí, protože je to veliký.
Musel jsem zadat délku jen protože 163 px 163x4=652px a k tomu ten padding 20px = 80 tedy celkem 738px.
Vůbec jsem si neuvědomil, že padding bude prodlužovat délku.
Děkuji moc.
Tomáš123
Profil
Levoš:
Problém byl v tom, že pokud délku 183px zadám do .tlac03 ul li ,tak pak je to o cca 6 px kratší.
Vlastne o 8. Spôsobuje to ten margin-left, ktorý tvorí medzery. Ak sú rozmery zadané nadradenému prvku (<li>), rozmer vnoreného elementu (<a>) sa prispôsobí tak, aby zaplnil priestor (vlastnosť bloku).

Vůbec jsem si neuvědomil, že padding bude prodlužovat délku.
Za jediné spoľahlivé riešenie rozdielov v dopočitávaní paddingu a borderu považujem matriošku (nadradený prvok má rozmer, vnorený sa roztiahne tak, aby sa vošiel). Totiž:
• Počítanie paddingu a borderu ide prepnúť vlastnosťou box-sizing. Pri hodnote content-box hodnota šírky určuje šírku obsahu (padding a border element zväčšujú, vykreslia sa zvonku), pri hodnote border-box určuje šírka celkovú šírku elementu od okraju po okraj (padding a border zmenšujú obsah, vykreslia sa zvnútra).
• Vlastnosť box-sizing, ale nie je všade podporovaná, takže teoreticky existuje situácia, keď sa layout môže rozsypať.
• Nebol by síce problém vždy rozmery prvkov zmenšovať o rozmery „nerozhodných vlastností“, ale v spätne kompatibilnom režime Exploreru šírka vyjadruje okrajový rozmer.*

Avšak, žiadna z týchto komplikácií nenastáva, ak je hodnota šírky auto. Padding a border sa (snáď úplne) vždy dopočítajú zvnútra.

tedy celkem 738px
Nie 740 (183px * 4 = 732px; 732px + 8px (margin-left) = 740px)?

* Neviem, ako sú na tom staršie Explorery v štandardnom režime (a či vôbec existoval štandardný režim v IE staršom ako 6). Ani či je matrioška dokonale funkčná. Ani o ďalších výnimkách, kedy nie je dopočítavanie rozmerov vzájomne kompatibilné. Chamurappi?

Doplňujúci Chamurappiho článok zhrňujúci ďalšie nekompatibility, zároveň odpovedajúci na otázku štandardného režimu.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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