Допоможіть з версткою

Добрий день, в мене пусте місце між вікном браузера і background, між nav і тим же background, а нижче між іншим div(ом). З margin і padding вже перепробував різні варіанти.

<body>
     <div id="home" class="bg">
        <h1>Вікна-Двері</h1>
    </div>

    <nav id="nav" class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Вікна&Двері</a>
                </div>
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">Початкова</a>
                    </li>
                    <li>
                        <a href="#">Фабрики виробники</a>
                    </li>
                    <li>
                        <a href="#">Контакти</a>
                    </li>
                </ul>
            </div>
        </nav>  
        <div class="bg1"></div>
   <div id="about">
            <h2>Про магазини</h2>
            <p>
                Магазини "Вікна&Двері", від відомих виробників, пропонують: <strong>вікна</strong>,
                <strong>двері вхідні</strong>,<strong>двері міжкімнатні</strong>, <strong>гаражні ворота</strong>,
                <strong>ролокасети</strong>. А також <strong>паркетна дошка</strong> і <strong>ламінат</strong>. 
            </p>
            <p class="text3">
                <span>8 років в цій галузі</span><br/> 
                <span>Є перевага в невисокій ціні, а також ще нижчі ціни на 
                    <a href="#">акційну продукцію</a></span><br/> 
                    <span>Звертайтесь за адресами, щоб проконсультуватись 
                в магазинах, а також дзвоніть і запитуте</span>
            </p>
        </div>
        <div class="bg2"></div>
</body>

.bg {
    background: url("../images/bg.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
.bg h1 {
    text-align: center;
    color: #496c8a;
    font-size: 7vw;
    text-shadow: yellow 2px 2px 3px;
    padding-top: 200px;
}
#nav {
    background-color: #496c8a;
    box-shadow: yellow 0px 0px 4px 0px;
    border: none;
    margin: 0;
    padding: 0;
}
#home, body {
    margin: 0;
    padding: 0;
}
.bg1 {
    background: url("../images/colorw.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 500px;
    margin: 0;
    padding: 0;
}
#about {
    background-color: aquamarine;
}
#about p {
    font-size: 16px;
}
.bg2 {
    background: url("../images/w2.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 500px;
}

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

Ctrl + Enter

Михайло Гангура 30.03.2018 19:22

Доречі, стер все і починав знову, правда подібні речі знову появились, які виправив використавши клас container-fluid (bootstrap)

Відповісти

Підтримати

Михайло Гангура 30.03.2018 11:13

Всім дякую за відповіді, буду ще з тим розбиратись.

Software Engineer 29.03.2018 19:11

загуглите обнуление css и почему это вообще нужно

Sasha Potienko 29.03.2018 17:57

Гугли как пользоваться в хроме кнопкой F12

Vitalii Nalyvaiko Frontend Developer 29.03.2018 15:23

первой строкой в стилях добавьте:
* {
margin: 0;
padding: 0;
}

Богдан Мініч 29.03.2018 12:34

#home h1 {
margin: 0;
}

ul.nav.navbar-nav {
margin: 0;
}

jsbin.com/...udamimuya/edit?css,output

Михайло Гангура 30.03.2018 11:12

З верхніми відступами допомогло #home h1 {margin 0;}, дякую.

Богдан Мініч

Олег Front End Lead 28.03.2018 18:44

Вы про этот отступ?
puu.sh/zRlMw/1230c12fb7.png

Михайло Гангура 28.03.2018 18:48

prntscr.com/ixm07t

Олег

Олег Front End Lead 28.03.2018 18:50

Вообще надо готовить фидл для таких вещей, скрин и куски кода бесполезны.
На моем скрине я показал дефолтные маржины у UL, все элементарно проверяется тулзой хрома

Михайло Гангура

Михайло Гангура 28.03.2018 19:04

Дякую за відповідь, врахую це.

N K 28.03.2018 16:12

А в чем собственно вопрос? В этих отступах?

prnt.sc/ixjhkj
jsfiddle.net/0ztggo1u/3

Михайло Гангура 28.03.2018 18:43

Вибачте, що нема картинок, але там між фоновою картинкою і браузером зверху десь пікселів 30 відступ пустий, і не тільки там зверху

N K

Михайло Гангура 28.03.2018 18:45

Там де в мене padding-top 200px це просто щоб відступити h1 зверху

Допоможіть з версткою

14 коментарів

Підписатись на коментарі