плавающее меню

a_web · May 22, 2008

Здравствуйте всем,

можно ли сделатьтоолько средствами CSS плавающее меню? Т.е. чтобы при скроллинге странице слой оставался всегда на одном и том же месте.

И еще вопрос), прописываю диву position:absolute, когда размещаю его над комбобоксами, в IE слой "режется", т.е. комбобксы через него просвечивают несмотря на z-index. В других браузерах все нормально. Как решить проблему?

Спасибо!

Emm · May 22, 2008

1) возможно

2) покаж код...

ZoNT · May 22, 2008

комбобоксы (это селекты) всегда выпирают над остальными

элементами в ИЕ6... есть путь решения данной проблемы, щас поищу ссылку...

ZoNT · May 22, 2008

вот:

http://www.hedgerwow.com/360/bugs/css-select-free.html

a_web · May 23, 2008

1) возможно

может, приведете примерчик? Или хотя бы натолкнете на путь истины?

Vlad · May 24, 2008

Самое просто добавь для слоя position: fixed. В IE6 правда не работает, для этого браузера придется хак отдельно искать.

Например, вот.

http://www.artlebedev.ru/tools/technogrett.../fixed_in_msie/

mozart · May 25, 2008

Примерно следующее с фиксом для IE6 (меню слева):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body > #sidebar
{position:fixed;}
body {margin:0;}
#sidebar {position:absolute; top:0; right:0; height:100%; width:210px; text-align:center; background-color:#dadada;}
</style>
<!--[if IE 6]>
<link rel="stylesheet" href="fix.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="sidebar">MENU</div>
</body>
</html>

Оптимизируешь сам.

fix.css

html
{overflow:hidden;}

body
{height:100%; overflow:auto;}

Для расположения иначе меняешь значения top, right, bottom, left, height, width. Для остальных элементов не забудь указать margin на размер своего меню.

В целом это выглядит так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body > #sidebar
{position:fixed;}
body {margin:0; text-align:center;}
#sidebar {position:absolute; top:5px; left:5px; bottom:5px; height:100%; width:210px; background-color:#dadada;}
#header {margin-left:220px; margin-top:5px; margin-right:5px; height:115px; border-bottom:solid #dadada 2px;}
#linkpanel {margin-left:220px; margin-top:9px; margin-right:5px; border:solid #dadada 2px;}
#content {margin-left:220px; margin-top:9px; margin-right:5px; border:solid #dadada 2px;}
#footer {margin:9px 5px 5px 220px; border-top:solid #dadada 2px;}
</style>
<!--[if IE 6]>
<link rel="stylesheet" href="fix.css" type="text/css" />
<![endif]-->
<body>
<div id="sidebar">MENU</div>
<div id="header">HEADER</div>
<div id="linkpanel">LINKPANEL</div>
<div id="content">CONTENT</div>
<div id="footer">FOOTER</div>
</head>
</body>
</html>

Замени "CONTENT" каким нибуть обьемным текстом и увидишь результат.

Если располагать фиксированную панель по горизонтали, то в fix.css надо указать #sidebar {right: больше, чем 5px}, т.к. IE6 полосу прокрутки включает в ширину, соответственно панель залазит на нее.

Sign In

плавающее меню

Question

a_web

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Emm

Link to comment

Share on other sites

ZoNT

Link to comment

Share on other sites

ZoNT

Link to comment

Share on other sites

a_web

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

mozart

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information