Проблема с вёрсткой шапки

666FoX666 · September 3, 2017

Здравствуйте! Имеется сайт, на котором хочу сделать шапку, но столкнулся с такой проблемой.

Код страницы (header и есть сама шапка)

Скрытый текст


<!DOCTYPE html>
<html>
    <head>
        <title>NormalGame Project</title>
        <meta charset="UTF-8">
        
        <script type="text/javascript" src="//vk.com/js/api/openapi.js?146"></script>
        <link rel="stylesheet" href="style/main.css">
        <link rel="icon" href="favicon.ico" type="image/x-icon">
    </head>
    
    <body>
        <header>
            <div id="logo">
                <a href="http://normalgame.ru/">NormalGame</a>
            </div>
            
            <nav>
                <a href="http://forum.normalgame.ru" target="_blank">Форум</a><a href="http://bans.normalgame.ru" target="_blank">Банлист</a><a href="#">Магазин</a><a href="#">Правила</a><a href="#">О нас</a>
            </nav>
        </header>
        
        <main>            
            <br><br><br><br><br><br><br>
            <section>
                <h1>Из меня жопорукий верстальщик</h1><br><br><br><br><br><br><br><br><br><br>
            </section>
            
            <section>
                <h2>Сейчас мы тестируем фиксируемую шапку</h2><br><br><br><br><br><br><br><br><br><br>
            </section>
            
            <section>
                <h2>Хотелось бы, чтобы еще фоновая картинка не съезжала, но это так, мечты</h2><br><br><br><br><br><br><br><br><br><br>
            </section>
            
            <section>
                <h4>Сейчас перекрещусь, и пойду проверять</h3><br><br><br><br><br><br><br><br><br><br>
            </section>
            
            <section>
                <!-- VK Widget -->
                <div id="vk_community_messages"></div>
                <script type="text/javascript">
                    VK.Widgets.CommunityMessages("vk_community_messages", 81286257, {disableExpandChatSound: "1",disableButtonTooltip: "1"});
                </script>
            </section>
        </main>
        
        <footer>
            <center>&copy NormalGame 2017</center>
        </footer>
    </body>
</html>

Файл стилей:

Скрытый текст


@font-face {
	font-family: Montserrat;
	src: url("../fonts/Montserrat-Thin.ttf");
}

@font-face {
	font-family: Roboto;
	src: url("../fonts/Roboto-Thin.ttf");
}

body {
	margin: 0px;
	background-image: url("/img/bg.jpg");
	background-attachment: fixed;
	background-size: cover;
}

body::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

body::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

body::-webkit-scrollbar-thumb
{
	background-color: rgb(14, 237, 18);
}

header {
	padding: 0.7%;
	background: black;
	position: fixed;
	width: 100%;
	-webkit-box-shadow: 0px 1.5px 1.5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 1.5px 1.5px 0px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 1.5px 1.5px 0px rgba(50, 50, 50, 0.75);
}

#logo a {
	font-family: Montserrat;
	font-size: xx-large;
	color: white;
	text-decoration: none;
	margin-left: 4%;
}

nav {
	position: absolute;
	left: 50%;
	bottom: 33%;
	width: 60%;
	margin: 0px;
}

nav a {
	text-decoration: none;
	font-family: Roboto;
	color: white;
	font-size: large;
	padding-top: 2.3%;
	padding-bottom: 2.3%;
	padding-right: 3.5%;
	padding-left: 3.5%;
	border-right: 1px solid gray;
}

nav a:last-child {
	border-right: 0px;
}

nav a:hover {
	background: rgba(220, 214, 214, 0.6);
	-webkit-transition: background 0.4s;
	-moz-transition: background 0.4s;
	-o-transition: background 0.4s;
	transition: background 0.4s;
}

footer {
	font-family: Montserrat;
	color: black;
	font-weight: bold;
}

Как это всё дело выглядит сейчас

Скрытый текст

Но, проблема в том, что если в дальнейшем вставлять какие-то блоки с информацией без тегов <br> (В самом начале это видно, но ниже ещё раз скинул кусок кода), то получается печаль-беда. Если же делать отступы margin-top, тоже получается печаль-беда, скрины - ниже.

		<header>
			<div id="logo">
				<a href="http://normalgame.ru/">NormalGame</a>
			</div>
			
			<nav>
				<a href="http://forum.normalgame.ru" target="_blank">Форум</a><a href="http://bans.normalgame.ru" target="_blank">Банлист</a><a href="#">Магазин</a><a href="#">Правила</a><a href="#">О нас</a>
			</nav>
		</header>
		
		<main>			
			<br><br><br><br><br><br><br>
			<section>
				<h1>Из меня жопорукий верстальщик</h1><br><br><br><br><br><br><br><br><br><br>
			</section>

(Скрины)

https://yadi.sk/i/a3hGWWiM3MZg6R
https://yadi.sk/i/va5iNtde3MZg7D

Методом научного тыка понял, что подобная бяка исправляется только если у header убрать position: fixed; (Да при этом нужно переделать ещё nav, но это не суть), однако хотелось бы, чтобы шапка оставалась зафиксированной. Кто-нибудь может, пожалуйста, подсказать как это реализовать (фиксированная шапка, но чтобы элементы после неё нормально "располагались")?

P.S. Или все дальнейшие элементы делать с position: absolute; ?

Заранее спасибо.

prophet_07 · September 3, 2017

Если правильно понял проблему, то у header добавьте - top: 0;
И дальше main можно двигать без всяких "<br>"

666FoX666 · September 3, 2017

2 часа назад, prophet_07 сказал:

Если правильно понял проблему, то у header добавьте - top: 0;
И дальше main можно двигать без всяких "<br>"

Огромное Вам спасибо!

Sign In

Проблема с вёрсткой шапки

Question

666FoX666

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

prophet_07

Link to comment

Share on other sites

666FoX666

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information