Добрый день. Делая менюшку для сайта столкнулся с проблемой, не могу убрать пустое место между div и hr.
Пытался это сделать вот такими способами:
| CSS |
1
2
3
4
| border: none;
clear: both;
margin-top:0px;
padding:0px; |
|
Для наглядности, покрасил div'ы в красный.
Код страницы:
| 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
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
| <!DOCTYPE html>
<!--height-высота width-ширина http://n-wp.ru/8746 -->
<head>
<title>Кондитерская "La Dolche Vita" | Главная</title>
<link rel="shortcut icon" href="/image/ikonka.jpg" type="image/x-icon">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" type="text/css" href="1.css">
<meta http-equiv="Cache-Control" content="no-cache"><!--Запрет на кеширование-->
<style>
@font-face {
font-family: American Retro;
src: url(american-retro_[allfont.ru].ttf);
}
span.centerbottomshrift {font-family: 'American Retro', arial;font-size:24px;}
span.textt {font-family: 'American Retro', arial;font-size:50px;}
body {
background: url(/image/123.jpg) no-repeat;
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
}
div.telo {background:white;width:1000px; height:1000px;margin:0 auto;}
hr {
border: none; /* Убираем границу */
background-color: black; /* Цвет линии */
color: black; /* Цвет линии для IE6-7 */
height: 2px; /* Толщина линии */
clear: both;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<!--Предзагрузка начало-->
<script>
$(window).on('load', function () {
$preloader = $('.loader'),
$loader = $preloader.find('.loader-inner');
$loader.fadeOut();
$preloader.delay(350).fadeOut('slow');
});
</script>
<!--Предзагрузка конец-->
<!--Скролинг начало-->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css?v4">
<link rel="stylesheet" href="jquery.mCustomScrollbar.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("body").mCustomScrollbar({
theme:"dark"
});
});
})(jQuery);
</script>
<!--Скролинг конец-->
<!--Слайдер начало #ffe5b4-->
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script defer src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
<!--Слайдер конец-->
</head>
<body vlink="black" link="black" >
<div class="telo" align="center"><!--align сортировка текста-->
<!--Предзагрузка начало-->
<div class="loader" background="black">
<div class="loader-inner">
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
</div>
</div>
<!--Предзагрузка конец-->
<span class="textt">Кондитерская "La Dolche Vita"</span>
<hr>
<div class="center">
<a href="index.php"><div class="centerbottom" id="centerbottom1"><span class="centerbottomshrift">Главная</span></div></a>
<a href="Assortiment.php"><div class="centerbottom" id="centerbottom2"><span class="centerbottomshrift">Вкусняхи</span></div></a>
<a href="Zakaz.php"><div class="centerbottom" id="centerbottom3"><span class="centerbottomshrift">Заказ</span></div></a>
<a href="Otzivi.php"><div class="centerbottom" id="centerbottom4"><span class="centerbottomshrift">Впечатление</span></div></a>
<a href="Kontakti.php"><div class="centerbottom" id="centerbottom5"><span class="centerbottomshrift">Контакты</span></div></a>
</div>
<hr>
<!--Слайдер начало-->
<div id="container" class="cf">
<div id="main" role="main">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li><img src="image/.jpg" alt="Слайдер работает, нужно придумтаь акции"/></li>
<li><img src="image/.jpg" alt="Слайдер работает, нужно придумтаь акции"/></li>
<li><img src="image/.jpg" alt="Слайдер работает, нужно придумтаь акции"/></li>
<li><img src="image/.jpg" alt="Слайдер работает, нужно придумтаь акции"/></li>
</ul>
</div>
</section>
</div>
</div>
<!--Слайдер конец-->
</div>
</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
| .center{
height:30px;
text-align:center;
color:white;
}
.centerbottom{
border: none;
float:left;
height:100%;
width:200px;
line-height:30px;
margin-top:0px;
padding:0px;
background:RED;
}
#centerbottom1:hover{background:url(/image/Glavn.jpg) }
#centerbottom2:hover{background:url(/image/Vkusnya.jpg);}
#centerbottom3:hover{background:url(/image/Zakaz.jpg);}
#centerbottom4:hover{background:url(/image/Vpech.jpg);}
#centerbottom5:hover{background:url(/image/Kontact.jpg);}
/*Предзагрузка*/
.loader {
background: #000;
background: radial-gradient(#222, #000);
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: 99999;
}
.loader-inner {
bottom: 0;
height: 60px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.loader-line-wrap {
animation:
spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
;
box-sizing: border-box;
height: 50px;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
transform-origin: 50% 100%;
width: 100px;
}
.loader-line {
border: 4px solid transparent;
border-radius: 100%;
box-sizing: border-box;
height: 100px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }
.loader-line-wrap:nth-child(1) .loader-line {
border-color: hsl(0, 80%, 60%);
height: 90px;
width: 90px;
top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
border-color: hsl(60, 80%, 60%);
height: 76px;
width: 76px;
top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
border-color: hsl(120, 80%, 60%);
height: 62px;
width: 62px;
top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
border-color: hsl(180, 80%, 60%);
height: 48px;
width: 48px;
top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
border-color: hsl(240, 80%, 60%);
height: 34px;
width: 34px;
top: 35px;
}
@keyframes spin {
0%, 15% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
/*Предзагрузка*/ |
|
Помогите пожалуйста разобраться, что нужно сделать, что бы пробелов между ними не было, добавить не успел)
(
