| Autor | Zpráva | ||
|---|---|---|---|
| nethor Profil |
#1 · Zasláno: 25. 7. 2011, 15:36:38
Mám layout, kde má být menu s pevnou šířkou vlevo a obsah s pevnou šířkou na středu zbytku stránky:
<style type="text/css" media="all">
<!--
.menu {
width: 230px;
float: left;
background-color: #cc0;
}
.obsah {
width: 762px;
background-color: #0cc;
margin: 0px auto ;
float: none;
text-align: left;
}
.obal {
text-align: center;
float: none;
margin: 0px 0px 0px 240px ;
background-color: #c0c;
}
//-->
<body>
<div class="menu">
menu <br>menu<br> menu
</div>
<div class="obal">
<div class="obsah">
<h2 style="clear:both;">nadpis</h2> <!-- zde je problém -->
obsah <br>abcd <br>
</div>
</div>
</body>
Vše funguje dokud v 'obsahu' nepoužiju clear:both; pak nadpis odskočí až pod úroveň menu. (Tento problém je ve FFoxu, chromu, Opeře. V IE funguje jak je žádoucí. ) Měl jsem za to , že vlastnost clear platí v rámci přímo nadřazeného elementu, ne globálně. Předesílám, že článek vnořené divy a float jsem četl, včetně sovisejících. Ale rozchodit se mi to stejně nedaří. Živý příklad Předem díky za pomoc |
||
| Elcid Profil |
#2 · Zasláno: 25. 7. 2011, 15:50:55
co takto?
<style type="text/css" media="all">
.menu {
width: 230px;
float: left;
background-color: #cc0;
}
.obsah {
width: 762px;
background-color: #0cc;
margin: 0px auto;
text-align: left;
}
.obal {
text-align: center;
padding-left:230px;
background-color: #c0c;
}
</style>
|
||
| nethor Profil |
#3 · Zasláno: 25. 7. 2011, 16:44:48
Elcid:
Stále stejný problém. |
||
| Elcid Profil |
#4 · Zasláno: 25. 7. 2011, 17:51:21
nethor:
jasne.. napsal jsem tu blbost. toto přímo k něčemu potřebuješ, nebo je to teoreticke zamyšlení? |
||
| Davex Profil |
#5 · Zasláno: 25. 7. 2011, 19:16:43
nethor:
Clear bude působit pouze v bloku .obsah, pokud ho také rozplaveš. |
||
| nethor Profil |
#6 · Zasláno: 25. 7. 2011, 19:51:54
Davex:
díky, už jsem měl radost , že jsem to obešel:
<style type="text/css" media="all">
<!--
.menu {
width: 230px;
float: left;
background-color: #cc0;
}
.obal {
text-align: center;
float: none;
margin: 0px 0px 0px 240px ;
background-color: #c0c;
}
.obsah {
width: 762px;
background-color: #0cc;
margin: 0px auto ;
float: none;
text-align: left;
}
.float {
width: 100%;
float: left;
text-align: left;
}
//-->
</style>
</head>
<body>
<div class="menu">
menu <br>menu<br> menu
</div>
<div class="obal">
<div class="obsah">
<div class="float">
<h2 style="clear:both;">nadpis</h2>
obsah <br>abcd <br>
</div>.
</div>
</div>
</body>
Ale takhle se mi zase začal zalamovat obsah pod menu v IE při okně menším než 1000px. :( V podstatě řeším, jak provést bez tabulky toto: <table border="0" width='100%'> <tr> <td width='230' valign='top'> menu </td> <td align='center' valign='top'> <div style="width:762px;"> <h2 style="clear:both;">nadpis</h2> obsah <br>abcd <br> </div> </td> </tr> </table> Jde to řešit s .menu {position: absolute;} , ale to mázase jiné nevýhody. Zvažuju, jestli v tomto není lepší vrátit se případě zpět k tabulkovému layoutu. |
||
| Davex Profil |
#7 · Zasláno: 25. 7. 2011, 22:13:10
V Exploreru 8 by s tím problém být neměl. Explorer 7 a starší se pokouší odskočením vyřešit situaci, kdy se bloky nevejdou vedle sebe do vyhrazeného prostoru, což je v tvém případě šířka stránky, kterou si nechal na prohlížeči. Nastav stránce šířku, která bude minimálně součtem šířek .menu a .obsah.
|
||
| nethor Profil |
#8 · Zasláno: 26. 7. 2011, 08:49:13
Davex:
pravda v IE8 to funguje. „Nastav stránce šířku, která bude minimálně součtem šířek .menu a .obsah.“ Popravdě nevím přesně jak. Takhle?: body , html {min-width: 1005px;}To začalo fungovat i v IE7 , diky , ale od IE6 níž ne, nevím jak na to ani mě nanapadá žádný _hack . |
||
| Davex Profil |
#9 · Zasláno: 26. 7. 2011, 18:27:19
Nastavuješ minimální šířku, kterou IE6 nepodporuje. Použij vlastnost
width.
|
||
| nethor Profil |
#10 · Zasláno: 26. 7. 2011, 18:55:55
Davex:
Samozřejmě. Ale width neznám ani v px ani v %. Když nastavím body , html {width: 1005px;} K tomu, co pořebuji slouží vlastnost min-width , kterou <= IE6 nepodporuje. To nevím, jak fixnout. |
||
| Davex Profil |
#11 · Zasláno: 26. 7. 2011, 19:07:26
V tom případě nevím, jak chceš aby se to chovalo. Menu a obsah mají pevnou šířku, takže proč potřebuješ nastavit
min-width?
|
||
| nethor Profil |
#12 · Zasláno: 26. 7. 2011, 19:34:35
Má být menu s pevnou šířkou vlevo a obsah s pevnou šířkou na středu zbytku stránky.
S tím, že když je šířka okna menší než (menu + obsah) nesmí se obsah zalomit pod menu (vše se bude scrollovat horizontálně). Tabulkou to jde prvést celkem snadno: <table border="0" width='100%'>
<tr>
<td width='230' valign='top'> menu </td>
<td align='center' valign='top'>
<div style="width:762px;">
<h2 style="clear:both;">nadpis</h2>
obsah <br>abcd <br>
</div>
</td>
</tr>
</table>
Obdobný živý příklad s tabulkou |
||
| YoSarin Profil |
#13 · Zasláno: 26. 7. 2011, 19:58:26
nethor:
Nechová se v IE6 width defacto stejně jako min-width ve FF & spol? A co expression, to by nešlo? width: expression(document.body.clientWidth < 850 ? "850px" : document.body.clientWidth + "px"); (dlouho jsem nepoužil, kdyžtak googli) |
||
| panther Profil |
#14 · Zasláno: 26. 7. 2011, 22:24:01
YoSarin:
„Nechová se v IE6 width defacto stejně jako min-width ve FF“ nechová. |
||
| YoSarin Profil |
#15 · Zasláno: 26. 7. 2011, 23:35:27
panther:
Nerad to tu zasypávám nadbytečným offtopicem, ale kde konkrétně je ten rozdíl? Pokud se dobře pamatuju, tak jsem si takhle už párkrát pomohl a nenarazil jsem na nějaké konkrétní úskalí a ani teď při googlení (pravda, možná trochu povrchním) jsem nenarazil na to co na tom dělá problémy (ale, pravda, narazil jsem na spoustu článků, které popisují řešení min-width pro IE6 složitějšími postupy, takže tam nějakou zradu očekávám...) |
||
| panther Profil |
#16 · Zasláno: 27. 7. 2011, 06:25:24 · Upravil/a: panther
YoSarin:
„kde konkrétně je ten rozdíl?“ že se tak prostě nechová. „tak jsem si takhle už párkrát pomohl a nenarazil jsem na nějaké konkrétní úskalí“ ukaž konkrétní příklad, kde sis tak „pomohl“. Místo minimální šířky jsi nastavil jen obyčejnou, pevnou, šířku. Kdyby se totiž jako min-width chovalo width, zhroutila by se drtivá většina layoutů s fixními rozměry. Hádej proč. |
||
| YoSarin Profil |
#17 · Zasláno: 27. 7. 2011, 10:45:29
panther:
Já se jdu stydět do kouta, nějak jsem to pomotal - většinou jsem to řešil sice přes width ale pomocí expression... (alespoň jestli dobře chápu své předpotopní kódy) |
||
| Davex Profil |
#18 · Zasláno: 27. 7. 2011, 21:47:22
nethor:
„obsah s pevnou šířkou na středu zbytku stránky“ Pokud nebudou mít 2 % uživatelů vystředěno na zbytku stránky, tak se nic moc nestane. Pokud na tom trváš, tak zkus expression, nech to v tabulce nebo menu napozicuj, ale dle mého názoru to nestojí za to. |
||
| peteruu Profil * |
#19 · Zasláno: 28. 7. 2011, 17:13:02
toto len citujem z jedneho clanku: " Dalším (ač se to nezdá) problémem je nastavení minimální výšky levého, pravého, i středního (hlavního) sloupce. Z estetického hlediska je totiž vhodné, aby tyto měly nějakou minimální výšku, aby i v případě, že jejich obsah není dostatečný, jejich spodní hrana končila až kousek pod spodní hranou okna prohlížeče. V případě Mozilly a Opery 7+ to není problém, stačí nastavit procentní hodnotu (100% nebo o něco víc) vlastnosti min-height. S Internet Explorerem je to trochu komplikovanější. Explorer totiž min-height vůbec nezná, ale můžeme mu podstrčit vlastnost height, kterou Internet Explorer zpracuje podobně, jako ostatní prohlížeče min-height. Pouze nesmíme zapomenut tuto přenastavit zpět na auto (pomocí selektoru potomka), jinak by i ostatní prohlížeče použili height"
no a tady je priklad: .levy
{
background: silver;
font-size: 180%;
border: thin solid black;
position: absolute;
top: 120px;
left: 10px;
width: 150px;
height: 120%;
min-height: 120%;
padding: 5px 0;
overflow: hidden;
overflow-y: visible;
}
*>.levy
{
height: auto;
}uprav si podla seba snad ti to pomohlo. |
||
|
Časová prodleva: 13 let
|
|||
0