| Autor | Zpráva | ||
|---|---|---|---|
| Blow Profil |
#1 · Zasláno: 19. 1. 2010, 10:37:43
AHoj mám problém s vlastností clear. mám dvou sloupcovej layout a v pravém sloupci mám plovoucí prvky a pod nima chci text tak jsem dal žejo clear ale text se zobrazí až tam kde končím menu (levej sloupec).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs-cz" lang="cs-cz"><head>
<style type="text/css">
body{
background-color: #f0f0f0;
}
.clear{clear:both;}
div#leftcolumn{
float:left;
width: 250px;
text-align:left;}
.module, div#maincolumn_full{background:#fff;}
div#maincolumn_full{
margin-left:260px;
}
</style>
</head><body>
<div id="content">
<div id="leftcolumn">
<div class="module">
<ul>
<li class="item1"><a href="">AAA</a></li>
<li class="item1"><a href="">AAA</a></li>
<li class="item1"><a href="">AAA</a></li>
<li class="item1"><a href="">AAA</a></li>
<li class="item1"><a href="">AAA</a></li>
<li class="item1"><a href="">AAA</a></li>
<li class="item1"><a href="">AAA</a></li>
<li class="item1"><a href="">AAA</a></li>
</ul>
</div>
</div>
<div id="maincolumn_full">
<h1>DDDDDDDDDD</h1>
<p style="float: left;">LEFT</p>
<p style="float: right;">RIGHT</p>
<hr class="clear"/>
<p>GGGGGGG</p>
</div>
</div>
</body>
</html>chci aby to GGGG bylo hned pod LEFT a ne až skončí menu(AAA) |
||
| Petr ZZZ Profil |
#2 · Zasláno: 19. 1. 2010, 11:05:26 · Upravil/a: Petr ZZZ
Zkus to takto:
<div id="maincolumn_full">
<h1>DDDDDDDDDD</h1>
<div style="float: left;">
<p>LEFT</p>
<p>GGGGGGG</p>
</div>
<p style="float: right;">RIGHT</p>
<hr class="clear"/>
</div> |
||
| Blow Profil |
#3 · Zasláno: 19. 1. 2010, 11:25:20
Jo to sice funguje, ale proč nefunguje to co jsem psal já? Co je na tom špatně?
|
||
| Petr ZZZ Profil |
#4 · Zasláno: 19. 1. 2010, 11:31:37
Měl´s ggggg až za čističem a nevím, jak jinak dát společný float více odstavcům, než obalit je do společného divu a floatovat ten div (zda to jde i jinak, nevím).
|
||
| Blow Profil |
#5 · Zasláno: 19. 1. 2010, 11:38:09 · Upravil/a: Blow
No jasně jenže ten hr .clear říká že co je za ním(i on sám) už neobtéká
ale nejde mi do hlavy proč se zobrazuje na urovni konce left column měl by snad být hned pod LEFT a RIGHT Nebo snad ne? GGGG přeci už nemusí být float left - když ho dám za clear tak stačí aby byl staticky. Když ten kod jen lehce upravim a přidam jenom tag table tak to celý funguje jak má. <div id="maincolumn_full"><table>
<h1>DDDDDDDDDD</h1>
<p style="float: left;">LEFT</p>
<p style="float: right;">RIGHT</p>
<hr class="clear"/>
<p>GGGGGGG</p>
</table>
</div> |
||
| Petr ZZZ Profil |
#6 · Zasláno: 19. 1. 2010, 14:54:21 · Upravil/a: Petr ZZZ
V tabulce to není sémantické a netuším, zda to nefunguje jen náhodou a kde všude to vůbec funguje. Spíš se ale obávám, že to je nesmysl a plavání v tabulce bych radši omezil na tabulková data.
Clear ukončí veškeré předcházející floatování, takže v podstatě začínáš jakoby na čisté stránce. Čistič, no. Může mít ovšem různé hodnoty. |
||
| Blow Profil |
#7 · Zasláno: 19. 1. 2010, 15:01:31
Jasný že tabulkou to není košér, ale je to zajímavý že s tabulkou to funguje. ale netušim proč?
O co mi spíš jde je to že left column je soused main columnu a když dam uvnitř mainucolumnu čistič tak se vztahuje k sousedu svého předka. Myslel sem že se muže vztahovat jen k svým sousedům tj. LEFT a RIGHT. Napadá mě řešení dát maincolumnu float left ale problém je ten že pak ten maincolumnt nemuže být "roztahovatelný" a reagovat tak na šíři stránky. Tak nevim. |
||
| Petr ZZZ Profil |
#8 · Zasláno: 19. 1. 2010, 15:45:43
Já do toho zas tak nevidím, ale když floatuji dva bloky, tak dám rozměr jen jednomu z nich a floatuji taky jen jeden z nich. Ten druhý už se pak přizpůsobí. Podobně by to snad mělo fungovat i při floatování tří bloků – jeden nechat flexibilní a bez floatování, aby se ostatním dvěma mohl přizpůsobit.
|
||
| Blow Profil |
#9 · Zasláno: 20. 1. 2010, 09:29:49
Tak se mi to podařilo vyladit, tak kdyby měl někdo stejnej problém tak
jsem přidal div.wrap <div id="maincolumn_full">
<h1>DDDDDDDDDD</h1>
<div class="wrap">
<p style="float: left;">LEFT</p>
<p style="float: right;">RIGHT</p>
</div>
<p>GGGGGGG</p>
</div>div.wrap {
border: 1px solid #000000;
overflow: auto;
width: 100%
}řešení viz. : www.quirksmode.org/css/clearing.html |
||
|
Časová prodleva: 14 let
|
|||
0