Autor Zpráva
JJ
Profil *
#1 · Zasláno: 6. 1. 2007, 02:30:12
Odpovědět Citovat
Zdravím,
mám možná banální problém, ale nedaří se mi ho nijak elegantně vyřešit. Potřebuji udělat layout, kde bude horní titulkový pruh, levý pruh s menu a zbytek stránky bude hlavní oddíl pro vlastní obsah. Problém je v tom, že potřebuji, aby horní a levý pruh setrvávaly na místě a scrollovala pouze ta hlavní část. Nechci to ale dělat přes rámy. Chci to mít přes css pozicované divy.

Zatím se mi to povedlo přes position:fixed;, ale to nechodí v IE. Pak se dá zakázat overflow u body (overflow: hidden;) a povolit ho u div.main (overflow:auto;), ale pak nastává ten problém, že když má ten hlavní div začínat až pod tím titulkovým pruhem (top: 100px;), tak se natáhne dolů pod okraj stránky (protože má height: 100%;) a scrollovací lišta končí o 100px pod spodním okrajem okna, což je dost problém.

Nevíte někdo, jak na to? Ve FF už bych to měl dávno hotové, ale potřebuju, abych to chodilo i v IE :-((((

Díky moc.
JJ
Profil *
#2 · Zasláno: 6. 1. 2007, 02:34:56
Odpovědět Citovat
Ještě doplním pro upřesnění:
Když ten hlavní div pozicuji top: 0px; a jeho obsahu (třeba nějakému odstavci) dám margin-top: 100px;, tak nastává opačný problém, že rolovací lišta dole končí správně a nahoře zajíždí pod ten titulkový pruh.
tiso
Profil
#3 · Zasláno: 6. 1. 2007, 03:48:25
Odpovědět Citovat
Zaujímalo by ma kvôli čomu chceš dosiahnuť túto funkcionalitu...
AlešD
Profil
#4 · Zasláno: 6. 1. 2007, 07:37:30
Odpovědět Citovat
Zkus CSS knihovnu na intervalu
Mistr
Profil
#5 · Zasláno: 6. 1. 2007, 10:37:15
Odpovědět Citovat
JJ
Tohle je ono, ne? http://css.interval.cz/priklady/priklad-15-1.htm
A tady je k tomu případně návod: http://css.interval.cz/clanky/simulace-ramcu/
JJ
Profil *
#6 · Zasláno: 6. 1. 2007, 15:40:17
Odpovědět Citovat
Zaujímalo by ma kvôli čomu chceš dosiahnuť túto funkcionalitu...
Byl jsem požádám o výrobu kostry stránek, do které si dotyčná už doplní, co potřebuje. Má to fungovat tak, jak jsem popsal, proč nevím, moje stránky to nebudou. Přesvědčení mi brání udělat to přes rámce :-)

AlešD, Mistr: Díky, kouknu na to.
JJ
Profil *
#7 · Zasláno: 6. 1. 2007, 15:42:16
Odpovědět Citovat
jojo, tak to bude ono. Vypadá to velmi dobře. Optimální by sice bylo, aby posuvník nedostahoval až nahoru, ale jen pod šedý pruh, ale to už bych asi chtěl moc :-)) Tohle bude stačit.
Díky moc.
JJ
Profil *
#8 · Zasláno: 6. 1. 2007, 17:28:31
Odpovědět Citovat
Tak už jsem si to přepracoval. A světe div se, jde to i bez těch zprasenejch podtržítkovejch css vlastností pro IE (nebo skoro bez nich).

HTML zdroj vypadá takto:
</head>
<body>
<div class="top">
<div class="intop">
Horní pruh
</div>
</div>

<div class="page">
<div class="main">
Hlavní text stránky
</div>
</div>

<div class="left">
Levý pruh
</div>
</body>
</html>

a cssko vypadá takhle:

body, html {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
_overflow: hidden;
}
div.page {
height: 100%;
overflow: auto;
}
div.main {
padding-top: 100px;
padding-left: 150px;
}
div.top {
position: absolute;
top: 0px;
left: -16px;
height: 100px;
width: 100%;
background: !!!;
}
div.intop {
padding-left: 16px;
}
div.left {
position: absolute;
top: 100px;
left: 0px;
width: 150px;
}

element div.top musí mít definované nějaké pozadí (klidně i background-color:white;), jinak je průhlednej a ten text, kterej se za něj roluje z div.page je vidět. Jinak to ale funguje v IE i FF (jinde jsem nezkoušel) stejně. Jak jste si asi všimli body,html má definovanou vlastnost pro IE _overflow: hidden;, ale existují i jiná řešení. Buď se tam dá dát overflow: hidden; bez podtržítka, což prej ale dráždí Operu, takže radši asi ne a nebo se přímo do html dá napsat <body scroll="no">, ale to už neni XHTML validní, takže ať si každej vybere to svoje. Každopádně se to dá obejít bez spousty zdvojených css vlastností a bez position:fixed;, které IE neumí.
Budiž to zájemcům k užitku :-)
Časová prodleva: 17 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0