2013-04-12 3 views
1

Я создал этот .css файл на моей странице:CSS Позиция: фиксированный не работает

#content-box, #header-box, #menu-box, #footer-box 
{ 
    background-color:#084B8A; 
    color:#FFFFFF; 
} 

#content-box 
{ 
    display:block; 
    width:auto; 
    min-height:205px; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    margin:1px; 
    padding:5px; 
} 

#menu-box 
{ 
    position:fixed; 
    display:block; 
    width:auto; 
    height:205px; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    margin:1px; 
    padding:5px; 
} 

#footer-box 
{ 
    display:block; 
    width:auto; 
    height:20px; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    margin:0px; 
    padding:0.5px 5px; 
    text-align:right; 
} 

#header-box 
{ 
    display:block; 
    width:auto; 
    height:20px; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    margin:0px; 
    padding:0.5px 5px; 
    text-align:left; 
} 

И я хочу # меню коробки, чтобы двигаться, когда я прокручиваю вниз/вверх страницы, но не работает. Вот расположение страницы:

#header-box 
--------------------------------------- 
     |# 
     |c 
#menu-box|o 
     |n 
     |t 
     |e 
     |n 
     |t 
     |- 
     |b 
     |o 
     |x 
--------------------------------------- 
          #footer-box 

В каждом DIV (# заголовок-бокс, # меню окна, #content_box, # сноска коробка) добавить информацию (в # меню коробки добавить CSS вертикальное раскрывающееся меню).

EDIT: Вот мой HTML-код, я думаю, что проблема с помощью таблицы тегов:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ro"> 
<head> 
<title>...</title> 
</head> 
<body> 
<table border="1" width="100%"><tr><td><div id='header-box'>Bine ai venit 
</div></td></tr></table> 
<table border="1" width="100%"> 
<tr><td style="width:200px; height:205px;"><div id='menu-box'><?php include("nav.php"); ?></div></td> 
<td><div id='content-box'> 
<?php // content ?> 
</div></td></tr></table> 
<table border="0" width="100%"><tr><td><div id='footer-box'>Creat de ...</div></td></tr></table> 
</body> 
</html> 

(нормальная граница являются выставиться на 0, но теперь, потому что я выставиться 1 я не могу видеть my # menu-box)

@Andrew: Я знаю, что мне нужна длинная страница, и у меня есть тот, где в # содержимом я перечислил таблицы.

+0

A [TestCase] ​​(http://cssdeck.com/labs) с HTML (и CSS тоже) код поможет! – Rishabh

+1

нужен html, а также –

+0

Я добавил код html – AlexxanderX

ответ

2

Я создал jsfiddle свой код здесь: http://jsfiddle.net/cXmhS/

Это, кажется, работает. Для перемещения меню с полосой прокрутки требуется большее количество контента.

Чтобы заставить его работать лучше, я изменил свой min-height:1005px;

+0

Добавляем маржу слева в свой контент-бокс, чтобы избежать перекрытия меню, и это прекрасно – Bigood

0

Даже если я вижу подобный ответ, я попытался создать свой собственный пример. И мне, хорошо, если бы вы установили ширину для вас #menu-box, так как нет возможности плавать влево. Даже определение поля не помогло бы, если в меню-окне будет автоматическая ширина.

Мое решение будет выглядеть следующим образом: http://jsfiddle.net/6sg3v/

с определением width: для #menu-box и соответствующего margin-left: для #content-box

+0

, так что вы хотите сказать, что моя проблема связана с табличными тегами? – AlexxanderX

Смежные вопросы