Як «зрушыць» ўвесь сайт ўніз (па вертыкалі)?

У мяне быў просты вэб-дызайн зрабіў для кліента.

3 месяцы праз, кліент хоча панэль апавяшчэнняў, усталяваную ў верхняй частцы. Лёгка. Hopped на CodeCanyon і знайшоў пасільны сцэнар, ратуючы мяне гадзіны.

Адна з асноўных праблем: Панэль апавяшчэнняў накладваецца зверху на вэб-старонкі, а націснуўшы на вэб-старонку ўніз. Атрыманы эфект з'яўляецца тое, што панэль апавяшчэнняў пакрывае частку верхняга лагатыпа, які не з'яўляецца вялікай не-не.

Ёсць просты спосаб проста «зрух» ўвесь дызайн вэб-старонкі з дапамогай, дазваляе сказаць, 80px, без неабходнасці паўторна рабіць усё CSS?

0
Лепш дадаць код і скрыншот старонкі. Гэта, безумоўна, дапаможа іншым даць правільнае прапанову.
дададзена аўтар Santosh Panda, крыніца
Лепш дадаць код і скрыншот старонкі. Гэта, безумоўна, дапаможа іншым даць правільнае прапанову.
дададзена аўтар Santosh Panda, крыніца
калі вы аддзелены галаву і ўтрыманне з DIV, што павінна быць на самой справе даволі лёгка. Але да таго часу, пакуль вы не падаюць некаторыя HTML структуру, якую вы выкарыстоўваеце, гэта будзе цяжка, каб дапамагчы
дададзена аўтар MatthiasLaug, крыніца
калі вы аддзелены галаву і ўтрыманне з DIV, што павінна быць на самой справе даволі лёгка. Але да таго часу, пакуль вы не падаюць некаторыя HTML структуру, якую вы выкарыстоўваеце, гэта будзе цяжка, каб дапамагчы
дададзена аўтар MatthiasLaug, крыніца

8 адказы

дадаць новы<div> section just underneath the <body> tag with a height of 80px. Give it any CSS styles you want and add the notification bar as child element of the <div>

Example. Let's say this was your website:

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

Then adding the banner is easy:


<html>
<body>
   <div style="height:80px;background:red;">Some div content. Put whatever controls you want here</div>
   Some existing content
</body>
</html>
2
дададзена
Працаваў выдатна. дзякуй @selbie
дададзена аўтар Han Sup Yoon, крыніца

дадаць новы<div> section just underneath the <body> tag with a height of 80px. Give it any CSS styles you want and add the notification bar as child element of the <div>

Example. Let's say this was your website:

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

Then adding the banner is easy:


<html>
<body>
   <div style="height:80px;background:red;">Some div content. Put whatever controls you want here</div>
   Some existing content
</body>
</html>
2
дададзена
Працаваў выдатна. дзякуй @selbie
дададзена аўтар Han Sup Yoon, крыніца

Адзін з easyiest чынам ўсталёўвае Верхняе поле у цела :

body {
    margin-top: 80px;
}
2
дададзена

Адзін з easyiest чынам ўсталёўвае Верхняе поле у цела :

body {
    margin-top: 80px;
}
2
дададзена

Калі я зразумеў права гэтага паведамлення бар прыходзіць і сыходзіць, гэта не назаўсёды там ...

Калі гэта сцэнар CodeCanyon можа мець метад зваротнага выкліку для таго, калі сцэнар выклікаецца. Проста выкарыстоўвайце гэты метад (ці код, які выкарыстоўваецца для запуску скрыпту), каб усталяваць абгортку ўсёй старонкі 80px ніжэй (напрыклад, адказы, перш чым маё заяўлена). І паменшыць яго назад, калі сцэнар скончаны (магчыма метады скончаных падзей у сцэнары?).

Іншая справа: Гэта не добрая практыка, каб важдацца з водступамі цела і полем. Я хацеў бы прапанаваць, каб мець абгортачнай DIV вакол усёй старонкі для такога роду сітуацый.

0
дададзена

Калі я зразумеў права гэтага паведамлення бар прыходзіць і сыходзіць, гэта не назаўсёды там ...

Калі гэта сцэнар CodeCanyon можа мець метад зваротнага выкліку для таго, калі сцэнар выклікаецца. Проста выкарыстоўвайце гэты метад (ці код, які выкарыстоўваецца для запуску скрыпту), каб усталяваць абгортку ўсёй старонкі 80px ніжэй (напрыклад, адказы, перш чым маё заяўлена). І паменшыць яго назад, калі сцэнар скончаны (магчыма метады скончаных падзей у сцэнары?).

Іншая справа: Гэта не добрая практыка, каб важдацца з водступамі цела і полем. Я хацеў бы прапанаваць, каб мець абгортачнай DIV вакол усёй старонкі для такога роду сітуацый.

0
дададзена

Загарніце ўсе дадзеныя вашай HTML у DIV:

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

і ўсталюйце Верхняе поле для гэтага элемента:

#wrapper {margin-top:80px;}
0
дададзена

Загарніце ўсе дадзеныя вашай HTML у DIV:

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

і ўсталюйце Верхняе поле для гэтага элемента:

#wrapper {margin-top:80px;}
0
дададзена