Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.53/15: Рейтинг темы: голосов - 15, средняя оценка - 4.53
3 / 3 / 2
Регистрация: 29.09.2014
Сообщений: 40
1

Не могу понять откуда отступ

23.02.2017, 03:17. Показов 2801. Ответов 4
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Доброй ночи. Решил сверстать макет. Никак не могу понять откуда отступ между header-ом и меню под ним.
Html Код
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]-->
    <title>Shoes</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="CSS/style.css" rel="stylesheet">
</head>
 
<body>
 
<div class="wrapper">
    <header class="header">
        <div class="content">
            <div class="logo">
                <img src="IMAGES/Header/LOGO.png" alt="LOGO">
            </div>
            <div class="search">
                <img src="IMAGES/Header/Search Icon.svg" alt="Search">
            </div>
            <div class="register"><a href="#">LOGIN or REGISTER</a></div>
        </div>
    </header><!-- .header-->
        <main class="main">
            <div class="header-bottom">
                <div class="content">
                    <div class="primary-menu">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Products</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Pages</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </main><!-- .content -->
 
</div><!-- .wrapper -->
 
<footer class="footer">
    <div class="content">
        <div class="copyright">
            <p>Copyright © Fooseshoes 2013. <br>Designed by EnzoLiVolti. </p>
        </div>
        <nav class="mini-menu">
            <ul>
                <li><a href="#">Home</a> /</li>
                <li><a href="#">Support</a> /</li>
                <li><a href="#">Terms and Conditions</a> /</li>
                <li><a href="#">Faqs</a> /</li>
                <li><a href="#">Contact us</a></li>
            </ul>
        </nav>
    </div>
</footer><!-- .footer -->
 
</body>
</html>
CSS Код
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
/* Eric Meyer's CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* End of Eric Meyer's CSS Reset */
 
html {
    height: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}
body {
    font: 12px/18px Arial, sans-serif;
    height: 100%;
}
.wrapper {
    width: 100%;
    min-width: 940px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
.content {
    margin: 0 auto;
    min-width: 940px;
    width: 940px;
}
@font-face {
    font-family: 'Aller-rg';
    src: url("../Fonts/Aller/Aller_Rg.ttf");
}
@font-face {
    font-family: 'Aller-lt';
    src: url("../Fonts/Aller/Aller_Lt.ttf");
}
 
/* Header
-----------------------------------------------------------------------------*/
.header {
    height: 45px;
    background: #242424;
}
.logo {
    padding-top: 12px;
    float: left;
}
.search {
    margin-left: 565px;
    line-height: 50px;
    float: left;
}
.register a {
    margin-left: 49px;
    float: left;
    clear: right;
    display: block;
    width: 110px;
    text-decoration: none;
    font-family: 'Aller-lt', sans-serif;
    line-height: 45px;
    height: 45px;
    padding-left: 22px;
    padding-right: 22px;
    border-right: 1px solid #979797;
    border-left: 1px solid #979797;
    color: #979797;
}
 
/* Middle
-----------------------------------------------------------------------------*/
.header-bottom {
    height: 60px;
}
.primary-menu ul li {
    display: inline-block;
    padding: 20px 22px;
}
.primary-menu ul li a {
    font-family: 'Aller-rg',sans-serif;
    font-size: 16px;
    text-decoration: none;
    color: #242424;
}
.primary-menu {
    border: 1px solid #000;
    clear: left;
}
/* Footer
-----------------------------------------------------------------------------*/
.footer {
    margin: -90px auto 0;
    min-width: 940px;
    height: 90px;
    background: #2e2e2e;
    position: relative;
}
.copyright p {
    font-family: 'Aller-rg', sans-serif;
    color: #979797;
    padding-top: 25px;
    float: left;
}
.mini-menu ul li{
    color: #979797;
    display: inline-block;
}
.mini-menu {
    margin-left: 620px;
}
.mini-menu ul li a {
    color: #979797;
    text-decoration: none;
    line-height: 90px;
}
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
23.02.2017, 03:17
Ответы с готовыми решениями:

Не могу понять откуда картинка берется
http://rhythm.bestlooker.pro/index-05.html - раздел SERVICES Откуда берет иконки? Это svg? Как...

Не могу понять как правильнее увеличить отступ между пунктами меню
Доброго времени суток! Подскажите, можно ли в css задать какой-нибудь параметр в блоке id=menu...

Откуда берется отступ?
при установке float: left; для блока, откудо то появляется отступ сверху, в чем подвох? ...

Откуда берется отступ
Добрый день уважаемые. Я видать пропустил где-то кусок в образовании, но не могу понять откуда...

4
98 / 98 / 46
Регистрация: 21.03.2012
Сообщений: 378
23.02.2017, 06:29 2
Лучший ответ Сообщение было отмечено Dzhabrai как решение

Решение

CSS
1
2
3
4
5
.search {
    margin-left: 565px;
    /* line-height: 50px; */ - уберите
    float: left;
}
1
0 / 0 / 0
Регистрация: 31.03.2016
Сообщений: 36
23.02.2017, 08:05 3
Цитата Сообщение от Dzhabrai Посмотреть сообщение
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
Заместь всего этого можно указывать "*")
0
3 / 3 / 2
Регистрация: 29.09.2014
Сообщений: 40
23.02.2017, 12:36  [ТС] 4
Просто где то слышал что каждый перечислять лучше.
0
0 / 0 / 0
Регистрация: 21.09.2016
Сообщений: 41
23.02.2017, 14:29 5
На сколько я понимаю, у вас в header-е что-то мешает. если установить header {overflow:hidden}, то отступ пропадает.
по-моему класс .search не вписывается..
0
23.02.2017, 14:29
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
23.02.2017, 14:29
Помогаю со студенческими работами здесь

Откуда появился отступ?
Доброе утро, подскажите откуда появился отступ сверху в блоке у h2 (Walter Williams) &lt;!DOCTYPE...

Откуда отступ перед картинкой?
Здравствуйте. есть html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; ...

Странный отступ, откуда он берётся?
Здравствуйте увыжаемый народ, подскажите в чём причина этой проблемы. Откуда берётся данный отступ....

Откуда берётся этот отступ? (На картинке)
Доброго всем вечера! Дело в том, что я хотел создать шаблон на своем сайте (через конструктор uCoz)...

Не могу понять, что дает не большой отступ
что дает не большую рамку между ними(рамками с разными цветами)? Вот мой css body{ ...

Не могу понять откуда взялась цифра!
Добрый день! Пытаюсь разобраться с задачей способом симплекс-метод, никак не пойму откуда взялась...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru