| Autor | Zpráva | ||
|---|---|---|---|
| zetor22 Profil |
#1 · Zasláno: 27. 2. 2014, 11:39:28
Ahoj, měl bych takový jednoduchý (hloupý) dotaz.
Tady je ukázka odsazování divů http://ukazky.maxcz.cz <div id="container">
<div id="header">
<div id="header_cont">aaa</div>
</div>
</div>Div header_cont bych chtěl odsadit třeba o 20px shora, ale když dám do css toto: div#header_cont { margin: 20px auto auto auto; } odsadí se div container... zatím to řeším takovým clearovacím divem <div class="clearovaci_div"> </div> (nulová výška a výška řádku), který dám nad div header_cont, ale toto řešení se mi moc nelíbí... poradil by mi někdo jak to dělat jinak? |
||
| Taurus Profil |
#2 · Zasláno: 27. 2. 2014, 11:46:51
Zkus
div#header_cont {
margin: 0 auto;
padding-top: 20px;
}Těch 20 px probublá do #container, protože z marginů dvou sousedních divů vznikne margin rovný většímu z nich. |
||
| zetor22 Profil |
padding se mi už vůbec nezamlouvá, protože roztahuje ten div kterému ho nastavím... jiné řešení by nebylo?
a teď jsem si to i vyzkoušel a padding mi to taky neodsadí... odsadí jen text uvnitř divu |
||
| Taurus Profil |
Pak tě nechápu. Nelíbí se ti odsazení #container, ani #hader_cont.
Edit: aha, máš na mysli odsazení šedé části od té černé? |
||
| zetor22 Profil |
padding-top mi neodsadí div header_cont ale roztáhne ho na výšku o ten nastavený padding.... odsadí pouze text v divu
viz ukázka2: http://ukazky.maxcz.cz/?p=ukazka2 přesně tak, chci odsadit celý div (světle šedou od tmavě šedé) |
||
| juriad Profil |
#6 · Zasláno: 27. 2. 2014, 12:11:39
Jedná o problém http://jecas.cz/margin#vyteceni.
Ten padding-top dej elementu #header, uvnitř kterého je ten odsazovaný #header_cont. |
||
| Taurus Profil |
#7 · Zasláno: 27. 2. 2014, 12:14:37
Ano, je to jak píše juriad, jen jsem špatně pochopil, co chceš odsadit. Pak stačí dát těch 20 px o úroveň výš.
|
||
| zetor22 Profil |
#8 · Zasláno: 27. 2. 2014, 12:19:45
u toho paddingu se mi nelíbí, že roztahuje div, bude asi lepší použíš absolutní pozicování v tomto případě ne?
|
||
| juriad Profil |
zetor22:
Tak tomu divu zmenši výšku právě o těch 20 pixelů. Absolutním pozicováním si jen zaděláš na další problémy. |
||
| zetor22 Profil |
#10 · Zasláno: 27. 2. 2014, 12:23:37
no, tak díky za rady
|
||
| Joker Profil |
Anebo, kdyby z nějakého důvodu byl problém převést ten margin na padding vnějšího prvku, mělo by fungovat tomu vnějšímu prvku dát margin-top: -1px a border-top-width: 1px.
Horní rámeček zruší to přetékání marginu, negativní margin vykompenzuje ten rámeček a rozměry prvků to neovlivní. Ale obvykle bude jednodušší a čistší řešení místo marginu vnitřního prvku dát vnějšímu prvku padding a příslušně zmenšit rozměry. |
||
| zetor22 Profil |
#12 · Zasláno: 27. 2. 2014, 15:54:09
jo, to vím, že border to přetékání zruší, no taky zajmavé řešení... dík
|
||
|
Časová prodleva: 10 let
|
|||
0