| Autor | Zpráva | ||
|---|---|---|---|
| Levoš Profil |
#1 · Zasláno: 13. 6. 2016, 17:35:19
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 |
#2 · Zasláno: 13. 6. 2016, 17:42:43
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. |
||
|
Časová prodleva: 8 let
|
|||
0