|
|
Страници по тази тема: 1 | 2 | (покажи всички)
|
Тема
|
 CSS bottom menu, frame-like
|
|
| Автор | Vox (Нерегистриран) |
| Публикувано | 03.02.07 22:09 |
|
|
Здравейте!
Дали е възможно само с CSS да се изработи меню,което да се намира в долния край на страницата и да е статично, т.е. контента, който ще е налят горе да е скролва над него. Все едно, че са два фейма, долу 80 px меню и каквото остане горе за контента!???
Ще съм благодарен за идеи и примери, вкл. такива из нета.
| |
|
Тема
|
 Re: CSS bottom menu, frame-like
[re: Vox]
|
|
| Автор |
dimodi (...) |
| Публикувано | 03.02.07 23:53 |
|
|
Дано под "само с CSS" имаш предвид "без таблици", Защото ползвам javascript за тоя фокус, без javascript не се сещам как може да стане.
Ако има нещо неясно - питай :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="bg" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="bg" />
<title>Bottom menu</title>
<style type="text/css" media="screen">
*{margin:0;padding:0}
html,body{height:100%;overflow:hidden}
#menu{position:absolute;left:0;bottom:0;background:#ffc;width:100%;height:100px;z-index:2}
#wrp{overflow:auto;background:#ddd}
p{margin-top:1.2em}
</style>
<script type="text/javascript">
function setHeight()
{
document.getElementById('wrp').style.height = (document.documentElement.offsetHeight - 100) + 'px';
}
</script>
</head>
<body onload="javascript:setHeight();">
<div id="wrp">
<p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p>
<p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p>
<p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p>
<p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p>
<p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p>
<p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p>
</div><!--wrp-->
<div id="menu">
div id="menu"
</div><!-- menu-->
</body>
</html>
| |
|
Тема
|
Re: CSS bottom menu, frame-like
[re: dimodi]
|
|
| Автор | Vox (Нерегистриран) |
| Публикувано | 04.02.07 12:27 |
|
|
dimidi,
Работи, симпатично е, прекроих го, но дава следните досадни не грешки, но недуразумения, да ги нарека:
1. javascript-а и CSS-а дават разлика от до десетина пиксела при точното позициониране, което си личи в мястото на долното скролче. (Уточнявам - пд IE 6!) Ето стойностите в кода в червено:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="bg" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="bg" />
<title>Bottom menu</title>
<style type="text/css" media="screen">
*{margin:0;padding:0}
html,body{height:100%;overflow:hidden}
#menu{position:absolute;left:0;bottom:0;background:#ffc;width:100%;height:100px;z-index:2}
#wrp{overflow:auto;background:#ddd}
p{margin-top:1.2em}
</style>
<script type="text/javascript">
function setHeight()
{
document.getElementById('wrp').style.height = (document.documentElement.offsetHeight - 100) + 'px';
}
</script>
</head>
<body onload="javascript:setHeight();">
<div id="wrp">
<p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p>
<p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p>
<p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p>
<p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p>
<p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p>
<p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p>
</div><!--wrp-->
<div id="menu">
div id="menu"
</div><!-- menu-->
</body>
</html>
2. При resize на джамлъка, съотношенията остават, както при преишната му големина - оправя се с refresh, но едва ли това е начина.
Иначе пак казвам – симпатично, леко и простичко, и донякъде ;) работещо! Благодаря!
| |
|
|
|
и абсолютно позиционирани контейнери за Opera и FF (поддържат top и bottom без да се задава height)... За IE обаче е наложително да се използва поне dynamic CSS (което поне е по-добро от javascript закачен на event) за да се зададе височина на горния контейнер:
_height: expression( document.body.clientHeight - [височината на долната част] );
There are three determined states the cat could be in: Alive, Dead, and Bloody Furious.
| |
|
|
|
dynamic CSS (което поне е по-добро от javascript закачен на event)
Да, ама IE понякога забива на тези и не ги ползвам, много са ми 'dirty'
| |
|
Тема
|
Re: CSS bottom menu, frame-like
[re: Vox]
|
|
| Автор |
dimodi (...) |
| Публикувано | 04.02.07 15:30 |
|
|
Да бе, хич не се сетих за ресайзването... Ами можеш да закачиш още един евент, който да оправя височината при ресайз.
| |
|
|
|
ако напишеш неработещ js... Досега никакъв проблем не са ми правили с прости сметки.
Колкото и да е мръсен хак, далеч по-добре е от закачането за евенти...
There are three determined states the cat could be in: Alive, Dead, and Bloody Furious.
| |
|
|
|
а с "мръсния" CSS хак немa нужда да се закачаш на нищо...
There are three determined states the cat could be in: Alive, Dead, and Bloody Furious.
| |
|
|
|
за какво иде реч!?... Дай да видим, моля!.. ;)
| |
|
|
|
Например погледни този сайт:
и по-точно в CSS:
широчината на #box се изчислява в движение с javascript вътре в CSS-то. Този пример специално е малко по-специален, на тебе ти е необходимо само нещо от рода:
#box { position: absolute; top: 10px; bottom: 50px; }
Това до момента се поддържа от ФФ и Опера. За ИЕ добавяш още малко :)
#box { position: absolute; top: 10px; bottom: 50px; _height: expression(document.body.clientHeight - 60); }
_ е хак който се парсва само от ИЕ, както и динамичните expression-и. Това на мен лично ми е достатъчно за да накарам нещо да работи, въпреки недостатъците на ИЕ... Като го депрекейтнат ше му мислим, ама засега няма тази опасност.
There are three determined states the cat could be in: Alive, Dead, and Bloody Furious.
| |
|
Страници по тази тема: 1 | 2 | (покажи всички)
| 
|
|
(bloody furious)