2013-05-24 5 views
0

У меня был простой веб-дизайн, сделанный для клиента.Как «сдвинуть» весь сайт вниз (по вертикали)?

3 месяца спустя клиент хочет, чтобы панель уведомлений была установлена ​​наверху. Легко. Выскочил на CodeCanyon и нашел возможный сценарий, сохранив мне часы.

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

Есть ли простой способ просто «сдвинуть» весь дизайн веб-страницы, допустим, 80px, без необходимости повторного выполнения всего CSS?

+0

Лучше добавить код и скриншот страницы. Это определенно поможет другим дать правильное предложение. –

+0

, если вы разделили голову и содержимое с помощью div, это должно быть довольно просто. Но пока вы не предоставляете какую-либо структуру html, которую используете, будет сложно помочь. – MatthiasLaug

ответ

2

Добавить новый < раздел > раздел под окном < корпус > тег высотой 80px. Дайте ему какие-либо стили CSS, которые вы хотите, и добавьте панель уведомлений в качестве дочернего элемента в <div>

Пример. Скажем, это был ваш сайт:

<!doctype> 
<html> 
<body> 
    Some existing content 
</body> 
</html> 

Затем добавив баннер легко:

<!doctype> 
<html> 
<body> 
    <div style="height:80px;background:red;">Some div content. Put whatever controls you want here</div> 
    Some existing content 
</body> 
</html> 
+0

Работал отлично. Спасибо, @selbie –

2

Один из easyiest образом устанавливает margin-top в body:

body { 
    margin-top: 80px; 
} 
0

Если я понял право эта панель уведомлений приходит и уходит, это не постоянно ...

Если это скрипт CodeCanyon, у него может быть метод обратного вызова для запуска сценария. Просто используйте этот метод (или код, который вы используете для запуска скрипта), чтобы установить обертку всей страницы 80px ниже (как и ответы до моего заявления). И сжимаете его, когда скрипт закончен (возможно, законченный метод события в скрипте?).

Другая вещь: Неправильная практика, связанная с прокладками и полями тела. Я бы предложил иметь обертку div по всей странице для таких ситуаций.

0

Wrap все ваши HTML-данные в DIV:

<div id="wrapper"> 
    <!-- html data --> 
</div> 

и установите Верхнее поле для этого элемента:

#wrapper {margin-top:80px;} 
Смежные вопросы