Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
vanyakilkil
37 / 37 / 2
Регистрация: 13.06.2012
Сообщений: 650
#1

border

20.05.2013, 15:56. Просмотров 1115. Ответов 7
Метки нет (Все метки)

Имеется сайт. Если убрать border то все содержимое, которое находится ниже блока уходит вниз. Непойму как так. border находится в шапке сайта, но ведь он не должен менять содержимое, это просто граница...
Вот код без border в блоке shapka:
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
body {
margin: 0;
min-width: 900px;
max-width: 1900px;
background-color: #336699;
}
 
#shapka {
width: 100%;
height: 186px;
border: 1px solid red;
}
 
#menu_kontekst {
margin-top: 10px;
float: left;
width: 184px;
height: 274px;
list-style: none;
}
 
#inf {
margin: 10px 220px 0 194px;
height: 1000px;
border: 1px solid yellow;
}
 
#piar {
margin-top: 10px;
float: right;
width: 210px;
height: 500px;
border: 1px solid black
}
 
#menu {
margin-top: 135px;
height: 50px;
list-style: none;
}
 
#menu div {
min-width: 710px;
max-width: 1154px;
margin: 0 auto;
text-align: center;
list-style: none;
}
 
#menu ul  {
margin-top: 0;
display: inline-block;
}
 
#menu ul li {
width: 84px;
height: 50px;
background:#fff;
float: left;
list-style: none;
border-right: 1px solid #336699;
margin: 0;
padding: 0;
background-image: url("Ссылка_(обычная).jpg");
}
 
#menu ul li a {
padding: 15px 0;
margin: 0;
width: 84px;
display: block;
text-decoration: none;
}
 
#menu ul li a:hover {
background-image: url("Ссылка_(навести).jpg");
color: #fff;
display: block;
}
 
#menu_kontekst div {
min-width: 84px;
max-width: 184px;
margin: 0 auto;
text-align: center; 
list-style: none;
}
 
#menu_kontekst ul {
margin-top: 0;
padding: 0;
display: block;
}
 
#menu_kontekst ul li {
height: 26px;
width: 100%;
background-image: url("контекст.jpg");
list-style: none;
border-bottom: 1px solid black;
margin: 0;
}
#menu_kontekst ul li a {
padding: 3px 0;
margin: 0;
display: block;
text-decoration: none;
}
 
#menu_kontekst ul li a:hover {
background-image: url("активная.jpg");
color: #333333;
display: block;
}
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
<!DOCTYPE html>
<html>
<head>
<title>Главная</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
 
    <div id="shapka">
        <div id="menu">
            <div>
            <ul>
            <li><a href="index.html">Главная</a></li>
            <li><a href="javascript:DoIt();">бла бла</a></li>
            <li><a href="javascript:DoIt();">бла бла</a></li>
            <li><a href="javascript:DoIt();">бла бла</a></li>
            <li><a href="javascript:DoIt();">бла бла</a></li>
            <li><a href="javascript:DoIt();">бла бла</a></li>
            <li><a href="javascript:DoIt();">бла бла</a></li>
            <li><a href="javascript:DoIt();">О сайте</a></li>
            <li><a href="javascript:DoIt();">Контакты</a></li>
            </ul>
            
            </div>
        
        </div>
        
    </div>
    
    <div id="menu_kontekst">
        <div>
        <ul>
            <li><a href="javascript:DoIt();">здесь был бы раздел 1</a></li>
            <li><a href="javascript:DoIt();">а здесь был бы раздел 2</a></li>
            <li><a href="javascript:DoIt();">а здесь был бы раздел 3</a></li>
        </ul>
        </div>
    </div>
    
    <div id="piar">
    
    </div>
 
    <div id="inf">
    
    </div>
 
 
 
</body>
</html>
0
Миниатюры
border   border  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.05.2013, 15:56
Ответы с готовыми решениями:

Некорректная работа свойств border и border-radius на мобильных устройствах
Доброго времени суток, произошла интересная вещь: использовала...

CSS border-right как убрать крайний правый border
делаю сайт http://medi-clinic.ru и столкнулся с такой проблемой, в меню пункты...

Border-top и border-bottom сделать шарами
здравствуйте, не могу сделать границы рамки шарами, т.е. border-bottom: 15px...

При наличии border 1px сайт отображается корректно, а при border 0px разлетается
При наличии border 1px сайт отображается корректно, а при border 0px...

border: 0 none;
Всем привет! Часто встречаю border: 0 none; для чего делают такую запись,...

7
Forastero
541 / 323 / 81
Регистрация: 15.05.2013
Сообщений: 781
Записей в блоге: 1
20.05.2013, 17:36 #2
Значит так-с... Вам нужно подучить блочную модель css.
У Вас происходит конфликт полей (margin). Margin Вашего меню перепрыгивает за блок #shapka. То есть шапка съезжает вниз, а верхний отступ - это как раз margin-top: 135px; у #menu. Применяя бордер можно избавиться от этой проблемы.

Вообще, лучше всего было бы вынести ваше меню из шапки. Меню - это навигация, а шапка - это другое.
Но раз уж Вы поступили так, то добавьте вашему блоку #shapka однопиксельный падднг сверху и будет Вам счастье.))

CSS
1
2
3
4
5
#shapka {
width: 100%;
height: 186px;
padding-top:1px;
}
1
vanyakilkil
37 / 37 / 2
Регистрация: 13.06.2012
Сообщений: 650
20.05.2013, 17:42  [ТС] #3
Цитата Сообщение от SoraxWeb Посмотреть сообщение
Значит так-с... Вам нужно подучить блочную модель css.
Да, у меня часто блоки уходят куда не нужно. А вы конкретно не посоветуете где подучить? именно это.
0
Forastero
541 / 323 / 81
Регистрация: 15.05.2013
Сообщений: 781
Записей в блоге: 1
20.05.2013, 17:52 #4
vanyakilkil, в общем, чтобы не усложнять Вам жизнь, вот ссылка на видеоурок Попова касательно конфликтов полей. Думаю, Вам проще будет понять о чем здесь идет речь. Если не все останется ясным, советую вбить в поисковик "Конфликты полей CSS" или "Блочная модель CSS" и прочесть еще пару статей.
Кликните здесь для просмотра всего текста
1
vanyakilkil
37 / 37 / 2
Регистрация: 13.06.2012
Сообщений: 650
20.05.2013, 17:53  [ТС] #5
Спасибо большое Вы заслуживаете звание модератора
0
Lovrentiy
161 / 161 / 11
Регистрация: 07.09.2011
Сообщений: 995
20.05.2013, 20:21 #6
Вообще почитайте за блочную верстку
0
vanyakilkil
37 / 37 / 2
Регистрация: 13.06.2012
Сообщений: 650
20.05.2013, 20:22  [ТС] #7
Lovrentiy, вообще я понимаю принцип....
0
Lovrentiy
161 / 161 / 11
Регистрация: 07.09.2011
Сообщений: 995
20.05.2013, 20:28 #8
Уверены? Повторение мать учения!
0
20.05.2013, 20:28
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.05.2013, 20:28

Border
как сделать сделать такой border? я о green border

Св-во border
Народ подскажите, как сделать в css такой border (или может не borderom), как...

Border
Должно получиться вот так: http://i.imgur.com/rPiJeFJ.png Вот что я написал:...


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

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru