Заголовок перекрывает другой текст/изображения

-1

Я хочу, чтобы, если люди просматривают страницу, заголовок будет отображаться (логотип + панель навигации). Это код CSS я использую:Заголовок перекрывает другой текст/изображения

#header_bar 
{ 
    margin: 0 auto; 
    width: 100%; 
    background-color: #1F1D1E; 
    height: 80px; 
    position: fixed; 
    top:0;

}

Но это то, что происходит сейчас: http://puu.sh/6FiXY.jpg

Как вы видите заголовок в настоящее время перекрывает изображение, как я могу это исправить? Я пробовал использовать margin-bottom/padding-bottom, но margin ничего не делает, а padding делает фоновое окно больше.

Как это исправить?

источник

2014-01-31 JM8-Real

Маржа-верхней части контейнера контента? Использовать Google? – bjb568

Я не совсем понимаю проблему, основанную на вашей картинке, но я думаю, что это так: поскольку панель заголовка имеет фиксированную позицию, другие элементы на странице (например, полускрытые изображения) заправляются под нее, даже если пользователь не прокрутил вниз. Если это так, вам просто нужно заполнить верхнюю часть страницы над полускрытыми изображениями. Положите туда 80px высокий DIV. [И если я не понял проблему, пожалуйста, объясните это еще раз! Спасибо!] – BrettFromLA

Предположив структуру HTML выглядит

<div id="header_bar">...</div> 
<div id="someOtherDiv">...</div>

Добавить margin-top к следующему элементу после #header_bar

#someOtherDiv { 
    margin-top:80px; /* 80px because #header_bar is taking up 80px in height. */ 
}

demo

источник

2014-01-31 22:10:12 kei

Спасибо, кучка, подумать об этом раньше, ха-ха. –

Поскольку ваш заголовок имеет фиксированное положение все ваши другие элементы не будут учтите это. Вы можете создать «обертку» div для всего другого контента, который размещен на 80 пикселей сверху. Просто добавление поля или перемещение элемента самого верхнего div может работать слишком долго, пока оно имеет относительную (по умолчанию) позицию.

источник

2014-01-31 22:13:42 Madmenyo

Вы должны добавлять маркер к своим тегам контента, чтобы они не были мгновенно перекрыты заголовком.

Смотрите здесь: www.jsfiddle.net/cranavvo/5F8EP/

источник

2014-01-31 22:15:33

Заголовок перекрывает другой текст/изображения

ответ

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