CSS bottom menu, frame-like

V

Vox

03.02.07 г., 22:09 #1

Здравейте!

Дали е възможно само с CSS да се изработи меню,което да се намира в долния край на страницата и да е статично, т.е. контента, който ще е налят горе да е скролва над него. Все едно, че са два фейма, долу 80 px меню и каквото остане горе за контента!???

Ще съм благодарен за идеи и примери, вкл. такива из нета.

Отговор

d

dimodi

...

Мнения: 1411

От: 15.09.2003 г.

dimodi

03.02.07 г., 23:53 в отговор на Vox #2

Re: CSS bottom menu, frame-like

Дано под "само с CSS" имаш предвид "без таблици", Защото ползвам javascript за тоя фокус, без javascript не се сещам как може да стане.

Ако има нещо неясно - питай :)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"[линк]">



<html xml:lang="bg" xmlns="[линк]">

<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>

[линк] - блог, уеб дизайн и програмиране, мъдрости, лекции

Отговор

V

Vox

04.02.07 г., 12:27 в отговор на dimodi #3

Re: CSS bottom menu, frame-like

dimidi,

Работи, симпатично е, прекроих го, но дава следните досадни не грешки, но недуразумения, да ги нарека:

1. javascript-а и CSS-а дават разлика от до десетина пиксела при точното позициониране, което си личи в мястото на долното скролче. (Уточнявам - пд IE 6!) Ето стойностите в кода в червено:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"[линк]">

<html xml:lang="bg" xmlns="[линк]">
<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">
Lorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsum
</div>
<div id="menu">
div id="menu"
</div>
</body>
</html>

2. При resize на джамлъка, съотношенията остават, както при преишната му големина - оправя се с refresh, но едва ли това е начина.

Иначе пак казвам – симпатично, леко и простичко, и донякъде ;) работещо! Благодаря!

Отговор

K

KoтapakътнaШpьoдинrep

bloody furious

Мнения: 414

От: 17.10.2006 г.

KoтapakътнaШpьoдинrep

04.02.07 г., 13:24 в отговор на dimodi #4

Може с CSS...

и абсолютно позиционирани контейнери за 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.

Отговор

d

dimodi

...

Мнения: 1411

От: 15.09.2003 г.

dimodi

04.02.07 г., 15:28 в отговор на KoтapakътнaШpьoдинrep #5

Re: Може с CSS...

dynamic CSS (което поне е по-добро от javascript закачен на event)

Да, ама IE понякога забива на тези и не ги ползвам, много са ми 'dirty'

[линк] - блог, уеб дизайн и програмиране, мъдрости, лекции

Отговор

d

dimodi

...

Мнения: 1411

От: 15.09.2003 г.

dimodi

04.02.07 г., 15:30 в отговор на Vox #6

Re: CSS bottom menu, frame-like

Да бе, хич не се сетих за ресайзването... Ами можеш да закачиш още един евент, който да оправя височината при ресайз.

[линк] - блог, уеб дизайн и програмиране, мъдрости, лекции

Отговор

K

KoтapakътнaШpьoдинrep

bloody furious

Мнения: 414

От: 17.10.2006 г.

KoтapakътнaШpьoдинrep

04.02.07 г., 22:54 в отговор на dimodi #7

Забива...

ако напишеш неработещ js... Досега никакъв проблем не са ми правили с прости сметки.

Колкото и да е мръсен хак, далеч по-добре е от закачането за евенти...

There are three determined states the cat could be in: Alive, Dead, and Bloody Furious.

Отговор

K

KoтapakътнaШpьoдинrep

bloody furious

Мнения: 414

От: 17.10.2006 г.

KoтapakътнaШpьoдинrep

04.02.07 г., 22:58 в отговор на dimodi #8

Мда...

а с "мръсния" CSS хак немa нужда да се закачаш на нищо...

There are three determined states the cat could be in: Alive, Dead, and Bloody Furious.

Отговор

V

Vox

05.02.07 г., 11:54 в отговор на KoтapakътнaШpьoдинrep #9

Re: Коте,

за какво иде реч!?... Дай да видим, моля!.. ;)

Отговор

K

KoтapakътнaШpьoдинrep

bloody furious

Мнения: 414

От: 17.10.2006 г.

KoтapakътнaШpьoдинrep

05.02.07 г., 17:04 в отговор на Vox #10

Ами за ето това:

Например погледни този сайт:

[линк]

и по-точно в 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.

Отговор

s

sularome

lamer

Мнения: 129

От: 16.01.2005 г.

sularome

05.02.07 г., 18:04 в отговор на Vox #11

Re: CSS bottom menu, frame-like

не знам дали аз неправилно сам разбрал въпроса, ама за какво е тоя жавасцрипт, ей така става и без:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"[линк]">
<html xml:lang="bg" xmlns="[линк]">
<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;height:100%;width:100%;position:absolute;left:0;bottom:100px;}
p{margin-top:1.2em}
</style>
</head>
<body>
<div id="wrp">
Lorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsumLorem ipsumLorem ipsum
</div>
<div id="menu">
div id="menu"
</div>
</body>
</html>

'In this life we cannot do great things. We can only do small things with great love'

Отговор

d

dimodi

...

Мнения: 1411

От: 15.09.2003 г.

dimodi

05.02.07 г., 22:06 в отговор на sularome #12

Re: CSS bottom menu, frame-like

Да, ама #wpr ти излиза със 100px извън екрана отгоре....

[линк] - блог, уеб дизайн и програмиране, мъдрости, лекции

Отговор

s

sularome

lamer

Мнения: 129

От: 16.01.2005 г.

sularome

05.02.07 г., 22:24 в отговор на dimodi #13

Re: CSS bottom menu, frame-like

Да, ама #wpr ти излиза със 100px извън екрана отгоре....
мда.. това не го забелязах :-)

това обаче върши работа тогава:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[линк]">
<html xmlns="[линк]" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
*{padding:0;margin:0;}
html,body{height:100%;overflow:hidden;}
#footer,#top{width:100%;}
#footer{height:100px;position:absolute;left:0;background:#000;bottom:0;color:#fff;}
#top{overflow:auto;}
head+body #top{top:0;bottom:100px;position:absolute;}
</style>

</head>
<body>
<div id="top">

start
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem 
Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem 

end

</div>
<div id="footer">asdasd</div>
</body>
</html>

'In this life we cannot do great things. We can only do small things with great love'

Отговор

K

KoтapakътнaШpьoдинrep

bloody furious

Мнения: 414

От: 17.10.2006 г.

KoтapakътнaШpьoдинrep

05.02.07 г., 22:38 в отговор на sularome #14

За цела страница...

става, да.

Ама и ти използваш неколко номерца, та се тая

There are three determined states the cat could be in: Alive, Dead, and Bloody Furious.

Отговор

M

Mитko

10.02.07 г., 14:00 в отговор на Vox #15

Re: CSS bottom menu, frame-like

Мойе и да не е с java skript , може да се направи и по просто да ти кажа зависи ...

Отговор

V

Vox

12.02.07 г., 15:47 в отговор на sularome #16

10x

Благодаря за съветите и кода. Успях да си сглобя нещо работещо. Дори и допълнително меню на 88 px отгоре се пръкна, но сега се чудя как да се справя с командата:
<A href="file.htm#tam">
...
Иди <A name=tam>там</А>!

Any suggestions!?...

Отговор

V

Vox

21.02.07 г., 23:56 в отговор на Vox #17

Re: 10x

На глупави въпроси не се отговаря и с право!!!

Отговор

Сайтове

Услуги

Градове

Dir.bg Media Group

CSS bottom menu, frame-like