TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
![Position: fixed IE6 - PROBLÉM Č.1 [IE EXPERTS ONLY] – CSS – Fórum – Programujte.com](http://img.cdnprg.webtea.cz/web/logo_new.png){kind=logo}
Věrný člen
Mám na stránce ve volném prostoru, který tvoří levý margin hl.části, umístěnu navigaci pozicovanou fixně.
Aby se stránka zobrazila shodně i v IE6 (který position:fixed chybně interpretuje -> jako normální statický prvek),
použil jsem emulaci tohoto chování (podle návodu z Pixyho knihy CSS:Hotová řešení) pomocí absolutní position
(která je vztažena k prvku html a ten má normálně nastaveno [podtrzene]html {overflow:auto}[/podtrzene] a tak roluje se statickými i absolutními prvky):
html {
overflow: hidden ........zakážeme rolování u html - takže abs.prvek bude abs. vzhledem k oknu (nemůže se hýbat) => FIXNÍ
}
body {
height: 100%; ......................body je stejně vysoký jako okno
overflow: auto ......................a delší obsah bude rolovat
}
body #nav_fix {position: absolute} ..... Přesto,že ostatní přímí potomci body rolují, absolutní prvci nebudou=stanou se fixními.
Pixy píše:
Buď jsem udělal chybu - rád bych věděl jakou - a nebo se Pixy mýlí.Řešení je nevýhodné v tom,že se absolutně pozicované bloky,které nejsou potomky (tedy jsou umístěny přímo v těle dokumentu body) jiných absolutně nebo relativně pozicovaných bloků, budou chovat jako fixní....
Posuďte - rolovaný text obsahuje sice [podtrzene]2 absolutní prvky [/podtrzene]- ale jako [podtrzene]potomky relativních bloků [/podtrzene][H_hlavicka, P_paticka].
V IE6 se oba (v protikladu s tím co Pixy říká) chovají jako FIXNÍ.
V ostatních browserech (nebo když odstraním hlavu+patu tak ve všech browsrech) se stránka chová tak, jak má.
Nenapadá vás jak na to ? ? ? HELP PLS
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {margin:0; padding:0}
body * {padding: 1ex}
b {display:block}
/********************* LEVÝ SLOUPEC /NAVIGACE/ FIXNÍ *************************************/
#nav_fix { position: fixed; top:0; left:0; width: 200px;
padding: 6em 25px 100% 25px;
color: white; background: black
}
/********************* OBSAH /Head+Text+Footer/ SCROLLOVATELNÝ ****************************/
#M_main_text { margin-left: 250px; color: blue}
#H_hlavicka,#P_paticka {position: relative; height:5em; background:#FF6; text-align:center}
#content div div {color: #292; position: absolute; left:0; right:0; width:100% } /* Tohle jsou obsahy hlavy/paty,co blbnou. */
body #P_paticka div { color: red }
</style>
<!--[if IE 6]> <style type="text/css">
html { overflow: hidden }
body { height: 100%; overflow: auto}
#nav_fix { position: absolute }
</style>
<![endif]-->
</head>
<body>
<ul id="nav_fix">
<li>BEGINUM dolor sit amet</li>
<li>dolor sit amet</li>
<li>dolor sit amet</li>
<li>dolor sit amet</li>
<li>dolor sit amet</li>
<li>dolor sit amet</li>
<li>dolor sit amet</li>
<li>dolor sit amet</li>
<li>ENDUM dolor sit amet</li>
</ul>
<div id="content">
<div id="H_hlavicka"> <div><b>H = hlavička</b>O její výšku odsadíme navigaci</div> </div>
<div id="M_main_text">
BEGINUM dolor sit amet, consectetuer adipiscing elit.adipiscing elit.
adipiscing elit.adipiscing elit.adipiscing elit.adipiscing elit.
adipiscing elit.adipiscing elit.adipiscing elit.adipiscing elit.
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.
Duis at felis a erat lobortis congLorem ipsum dolor sit amet, consectetuer adipiscing elit.
ENDUS.
</div>
<div id="P_paticka"> <div><b>P = patička</b>Copyright © PETROFF</div> </div>
</div>
</body>
</html>
Nahlásit jako SPAM
IP: ...–
Zjistit počet nových příspěvků
