| Autor | Zpráva | ||
|---|---|---|---|
| neregistrovaný Profil * |
#1 · Zasláno: 27. 3. 2013, 22:54:09
Zdravím,
mám menší problém, kterému nějak nerozumím. Mám na stránce dva divy (obsahující nadpis + seznam), kdy jeden plave vlevo a druhý vpravo. Tím se zobrazí vedle sebe. Pod tyto dva divy je umístěn nadpis, který má nastavený clear: both, aby již neobtékal.
Když ale nastavím tomuto nadpisu margin-top na třeba 70px, tak bych předpokládal, že se tento prostor přidá mezi ty divy a nadpis a vytvoří se prostor. Jenže ten nadpis vůbec "nereaguje" a když nastavím ten margin, tak se nadpis ani nepohne. Čím to a co s tím? Děkuji za jakoukoliv radu. |
||
| Anonym Profil |
neregistrovaný:
Ahoj, mělo by to fungovat takhle: <style>
.clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
</style>
<div class="clear">
<div id="nadpis1" style="float: left; font-size: 1.6em">Nadpis 1</div>
<div id="seznam" style="float: right; width: 260px; border: 1px dotted">Seznam</div>
</div>
<div id="nadpis2" style="font-size: 1.6em; margin-top: 70px">Nadpis 2</div> |
||
| neregistrovaný Profil * |
#3 · Zasláno: 29. 3. 2013, 11:29:06
Pokud tomu rozumím, tak mám ty dva divy uzavřít do jednoho divu kterému nastavím tu skrytou tečku?
Pro jistotu můj kód: HTML: <div id="obsah-960">
<div id="levy-sloupec">
<h2>Nadpis h2:</h2>
<ul>
<li>položka seznamu1</li>
<li>položka seznamu2</li>
<li>položka seznamu3</li>
</ul>
</div>
<div id="pravy-sloupec">
<h2>Nadpis h2</h2>
<ul>
<li>položka seznamu1</li>
<li>položka seznamu2</li>
</ul>
</div>
<h2 class="nadpis-pod-divy">Nadpis</h2>
</div>CSS: div#obsah-960 {
width: 960px;
margin: 0 auto 0 auto;
padding-top: 1px; /* Oprava sloučených okrajů */
}
div#levy-sloupec {
width: 465px;
float: left;
margin-top: 50px;
}
div#pravy-sloupec {
width: 465px;
float: right;
margin-top: 50px;
}
h2.nadpis-pod-divy {
clear: both;
font: 20px/100% Arial, sans-serif;
margin: 70px 0 0 0;
background: url("images/icon.gif") top left no-repeat;
padding-left: 40px;
}Rád bych věděl, proč se to chová tak jak se to chová a co s tím. Ten uvedený trik znám v případě, že jsou dva plovoucí divy uvnitř nějakého divu s pozadím a jelikož jsou plovoucí, tak "uniknou" mimo ten obalovaný div. Ale v tom mém případě nějak nerozumím chování prohlížeče a proč se takto chová. Já jsem původně myslel, že se tímto způsobem obejdu bez toho obalovací divu u těch dvou sloupců (abych divy zbytečně neplýtval). |
||
| Anonym Profil |
#4 · Zasláno: 29. 3. 2013, 14:47:36
neregistrovaný:
Ano, já bych to tak udělal: <style>
div#obsah-960 {background: #abc;
width: 960px;
margin: 0 auto 0 auto;
padding-top: 1px; /* Oprava sloučených okrajů */
}
div#levy-sloupec {background: #bac;
width: 465px;
float: left;
margin-top: 50px;
}
div#pravy-sloupec {background: #cba;
width: 465px;
float: right;
margin-top: 50px;
}
h2.nadpis-pod-divy {
font: 20px/100% Arial, sans-serif;
margin: 70px 0 0 0;
background: #bca url("images/icon.gif") top left no-repeat;
padding-left: 40px;
}
#horni-cast:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
</style>
<div id="obsah-960">
<div id="horni-cast">
<div id="levy-sloupec">
<h2>Nadpis h2:</h2>
<ul>
<li>položka seznamu1</li>
<li>položka seznamu2</li>
<li>položka seznamu3</li>
</ul>
</div>
<div id="pravy-sloupec">
<h2>Nadpis h2</h2>
<ul>
<li>položka seznamu1</li>
<li>položka seznamu2</li>
</ul>
</div>
</div>
<div id="spodni-cast">
<h2 class="nadpis-pod-divy">Nadpis</h2>
</div>
</div>Tak tohle vám asi bude muset vysvětlit někdo jiný, ale myslím si, že je to jak jste říkal. Protože jsou plovoucí, tak "uniknou" a prohlížeč pokračuje (dává nadpis) dál do dokumentu a nebere ty plovoucí divy že jsou tam umístěné. |
||
|
Časová prodleva: 11 let
|
|||
0