Позиционирование «обертки» под подставной панелью навигации?

Я начал работу над совершенно новым сайтом, и некоторое время я играл с дизайнами, однако одна проблема, с которой я, похоже, касаюсь расположения навигационной панели с полной шириной экрана, которая фиксируется для прокрутки. Под мной я создал div, называемый «оберткой», который установлен в центр с шириной 980px. Ниже приведен пример кода;Позиционирование «обертки» под подставной панелью навигации?

<style> 
    #navBar { 
     background: RGB(0, 0, 0); 
     height: 30px; 
     position: fixed; 
     width: 100%; 
    } 

    #wrapper { 
     margin: 0 auto; 
     width: 980px; 
    } 
</style> 

<div id="navBar"> 

</div> 

<div id="wrapper"> 
    <div style="border: 1px solid RGB(0, 0, 0); float: left; height: 500px; margin: 5px; width: 400px;"></div> 
</div>

Ящик я создал в «обертке» ДОЛЖНА (очевидно, не потому, что я делаю что-то неправильно - где-то) сидят 5px ниже navBar, однако, потому что я использовал position: fixed он сидит под ним вместо этого. Может ли кто-нибудь привести меня к тому, как я решаю эту проблему, и иметь ее так, чтобы обертка сидела прямо ниже, а не под навигационной панелью, поддерживая ее центрирование?

источник

2013-05-24 Banny

Я думаю, вам нужно установить верхнюю границу вашей обертки, равную высоте навигатора ... –

Я действительно пробовал это, потому что он сидит под навигационной панелью, а также нажимает навигационную панель на 30 пикселей. Обычно я хорошо разбираюсь в обходных решениях, но что-то такое же основное, как и у меня. – Banny

установить top:0 на вашем navbar и добавить 30px маржи-топ на вашем wrapper DIV

#navBar { 
    background: RGB(0, 0, 0); 
    height: 30px; 
    position: fixed; 
    width: 100%; 
    top:0 
} 
#wrapper { 
    margin: 30px auto 0; 
    width: 980px; 
}

http://jsfiddle.net/duncan/NkRxQ/

источник

2013-05-24 11:18:25

Brill! похоже, сделал трюк :) Является ли это решением ЛЮБОЙ проблемы «позиция: исправлено» с точки зрения перекрытия? Также есть ли какой-либо способ, которым вы можете видеть, что я мог бы улучшить свой макет или это в значительной степени, как это должно быть? – Banny

Я сделал это, но тогда, если я сделаю Experience, панель навигации покрывает заголовок. – Janneman96

Аналогичная ситуация со мной, когда высота навигационной панели динамическая (я положил слово «wrap-break: break-word» в css). Что я должен писать в файле оболочки? –

Комплексное решение, чтобы решить вашу проблему.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
*{ 
    margin:0; 
    padding:0; 
} 
#navBar { 
    background: RGB(0, 0, 0); 
    height: 30px; 
    position: fixed; 
    width: 100%; 
    top: 0; 
} 
#wrapper { 
    margin: 30px auto; 
    width: 980px; 
    background: #ccc; 
} 
.clear { 
    clear: both; 
} 
</style> 
</head> 
<body> 
<div id="navBar"> 

</div> 

<div id="wrapper"> 
    <div style="border: 1px solid RGB(0, 0, 0); float: left; min-height: 500px; margin: 5px; width: 400px;"> 
     <!-- You can create left side elements here (without any float specification in CSS) --> 
    </div> 
<div style="border: 1px solid RGB(0, 0, 0); float: left; min-height: 500px; margin: 5px; width: 556px;"> 
     <!-- You can create right side elements here (without any float specification in CSS) --> 
    </div> 
    <div class="clear"></div> 
</div> 
</body> 
</html>

Начиная новый сайт должен содержать DOCTYPE и 0 margin для всех тегов. (Очень полезно).

источник

2013-05-24 11:31:39

Могу ли я спросить, для чего используется ясность? Также проблема, с которой я сталкиваюсь, я использовал решение, представленное ниже, но каждый раз, когда я создаю новый элемент, он просто бросает макет, который я создал. Есть ли в любом случае я могу создать какую-то форму постоянного исправления, чтобы он не подвергался воздействию каких-либо других элементов? Я должен использовать элемент стиля 'float' для каждого элемента для решения проблемы, однако я не хочу плавать каждый элемент. – Banny

.clear используется, чтобы сделать оболочку div. в противном случае оно будет в 1px height, потому что вы указали float: left для внутреннего div обертки div. –

Я имею в виду всякий раз, когда я создаю ЛЮБЫЙ элемент, я должен применять float к нему или просто просто разбивает мой макет – Banny

Позиционирование «обертки» под подставной панелью навигации?

ответ

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