Как исправить мою навигационную панель в верхней части страницы

Мне было интересно, может ли кто-нибудь помочь мне исправить мою верхнюю часть моей веб-страницы, чтобы остаться.Как исправить мою навигационную панель в верхней части страницы

Я попытался использовать позицию: фиксированный атрибут, но это мешает всему, так как мой контент перекрывает фиксированные div.

Мой сайт находится здесь:

www.crookedcartoon.co.uk/print.html

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

Я понимаю, это может означать, что мне придется изменить большинство моих изображений на jpg вместо png. Тем не менее, мне было интересно, если бы это было так? Как и при создании ложной строки, содержимое которой прокручивается, затем исчезает, а не достигает верхней части страницы, где вы увидите ее через прозрачные части изображений PNG. Я не хочу использовать iframe, действительно, если это не единственный способ.

Спасибо!

источник

2013-07-02 CrookedCartoon

Код не должен быть на внешнем сайте, код должен быть здесь. Если вам также необходимо включить скриншоты, сделайте это; но просто привязка к стороннему сайту делает так, чтобы у нас никогда не было «моментального» представления кода, что важно для поиска и устранения проблем для будущих посетителей. –

iframe, конечно, не является правильным выбором здесь. Поместите div вокруг материала, который хотите иметь сверху, положите на него position: fixed и расположите его в верхнем левом углу.

<div class="ontop"> 
    <div id="top"></div> 
    <div id="logo"></div> 
    <div id="contact"></div> 
    <div id="navbar"></div> 
</div>

После этого, добавьте некоторые margin-top на #content-holder, которая равна высоте .ontop. Это необходимо, потому что оно выводится из потока документов (из-за position: fixed), и содержимое будет проходить под ним.

Если вы также добавили background-color: white в адрес .ontop, проблемы с прозрачностью исчезнут.

Пробовал реплицировать вашу установку, вот working demo.

источник

2013-07-02 10:14:22 kapa

+1 Важной частью является крайний край для другого содержимого. – HerrSerker

Проблема с этим - это прокрутка содержимого над моей навигационной панелью, и даже если я добавил CSS, чтобы убедиться, что он ушел, вы все равно увидите контент через PNG прозрачные изображения при прокрутке вверх. Мне нужна остановка, где текст исчезает под. – CrookedCartoon

@CrookedCartoon Поместите 'background-color: white' в' .ontop' div :). И удалить по умолчанию 'margin' на' body'. – kapa

-1

вы можете попробовать это

пожалуйста, обновите ниже CSS, как я обновил изображение, делая часть на дне прозрачного, что делает верхний фон белым. [1 - DOWNLOAD IMAGE и проверить его]

#ontop { 
    background: inherit; 
    height: auto; 
    margin-top: -10px; 
    position: fixed; 
    z-index: 10; 
} 
#contact { 
    background: none repeat scroll 0 0 white; 
    height: 45px; 
    margin-bottom: 1px; 
    margin-left: -5px; 
    margin-top: -8px; 
    position: relative; 
    vertical-align: top; 
    width: 1127px; 
} 
#logo { 
    height: 62px; 
    margin-left: -10px; 
    position: relative; 
    width: 1127px; 
    z-index: 1111; 
}

] 1

источник

2013-07-02 10:32:36 falguni

Каким образом это отличается от моего решения? :) Вы могли бы хотя бы потратить время, чтобы изменить 'ontop' на что-то еще :). – kapa

без фиксированного фона не работает должным образом, поэтому он работает правильно, если вы можете попробовать это. – falguni

Снова; http://www.crookedcartoon.co.uk/print.html Хорошо работает, однако, как я могу поддерживать прозрачность кривых, чтобы содержимое не попадало в прямую «белую» линию? – CrookedCartoon

Как исправить мою навигационную панель в верхней части страницы

ответ

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