Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/10: Рейтинг темы: голосов - 10, средняя оценка - 4.60
pamo007
0 / 0 / 0
Регистрация: 18.07.2013
Сообщений: 1
1

Как сделать фон под шапкой Резиновый сайт

21.07.2013, 20:11. Просмотров 1750. Ответов 1
Метки нет (Все метки)

Вот в общем такая ситуация, сверстал сайт резиновый, шапка находиться по центру в формате jpeg, и обрезал кусок шапки что бы при растяжении повторялся этот кусок обрезанный что бы было потипу продолжение шапки при растяжке, вот код:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!--[if lte IE 6]><link rel="stylesheet" href="style_ie.css" type="text/css" media="screen, projection" /><![endif]-->
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Лана Сервис</title>
</head>
 
<body bgcolor="#f9f9f7">
<div id="wrapper">
    <!---<div id="header1"></div>--->
        <div id="header">
         <a href="#" title=""><div id="header-Logo"></div></a>
        </div>
         <div id="Beg-Strok">
          <marquee  width="1190" height="20"><font color="#84619c" size="5">Наша строка для рекламы, наш номер телефона 8(903)900-90-90</font></marquee></div>
    <div id="middle">
 
        <div id="container">
            <div id="content">
                <font color="#f9aa20" size="5">О компании:</font>                           
<p><font face="Verdana, Geneva, sans-serif">Многопрофильная компания «» работает в сфере монтажа, видеонаблюдения, телевидение, сетей с 2008 года, и за всё это время мы заработали репутацию надёжной, стабильной команды профессионалов.<br/>
Слаботочные работы и услуги сервиса — это одно из ведущих направлений деятельности компании. Мы выполняем монтаж любого уровня сложности, начиная с разработки и согласования проекта и заканчивая установкой системы «Умный дом». В нашем штате работают высококвалифицированные сотрудники с опытом от 3х лет и более. Каждый слаботочник имеет диплом о профильном образовании и ежегодно повышает свою квалификацию.
Организация «» осуществляет весь спектр услуг, связанный с монтажом слаботочки в квартирах, офисах, загородных домах и производственных помещениях. Мы работаем в Владимире и Владимирской области, но также возможен выезд в регионы.<br/>
Вы можете сравнить наши цены с ценами других организаций в разделе прайс-лист на слаботочные работы, которые Вас приятно удивят, а также посмотреть примеры выполненых объектов в разделе портфолии.<br/>
Для Вашего удобства мы разместили на нашем сайте специальный калькулятор, на котором можно самостоятельно рассчитать стоимость.</font></p><br/>
 
    
    <font color="#f9aa20" size="5">Сотрудничество:</font> <br/><br/>                                
<font face="Verdana, Geneva, sans-serif"> Приглашаем к взаимовыгодному сотрудничеству управляющие компании, застройщиков и строительные компании, которым необходим надежный партнер, способный качественно и в срок выполнить слаботочные работы, а также разработать типовой или индивидуальный слаботочный проект. <br/> Мы готовы взять на себя функции субподрядчика на крупных строительных объектах для проведения прокладки кабеля и слаботочного монтажа оборудования промышленных предприятий, монтаж слаботочки в складских и торговых помещениях и электрификация офисных и жилых зданий. Вы можете <a href="#" title="Позвонить">позвонить</a> нам или зайти в раздел <a href="#" title="Партнеры">"Партнеры"</a> </font>
 
            </div>
        </div>
        
                <div id="sideLeft">
                    <div id="sideLeft-Menu-icon">
                        <a href="#" title="Главная"><div id="sideLeft-Menu-Text1"><p align="right"><font color="#000000" face="Verdana, Geneva, sans-serif" size="4">Главная</font></p></div></a>
                        <a href="#" title="Прайс-лист"><div id="sideLeft-Menu-Text2"><p align="right"><font color="#000000" face="Verdana, Geneva, sans-serif" size="4">Прайс-лист</font></p></div></a>
                        <a href="#" title="Партнеры"><div id="sideLeft-Menu-Text3"><p align="right"><font color="#000000" face="Verdana, Geneva, sans-serif" size="4">Партнеры</font></p></div></a>
                        <a href="#" title="Контакты"><div id="sideLeft-Menu-Text4"><p align="right"><font color="#000000" face="Verdana, Geneva, sans-serif" size="4">Контакты</font></p></div></a>
                        <a href="#" title="Отзывы"><div id="sideLeft-Menu-Text5"><p align="right"><font color="#000000" face="Verdana, Geneva, sans-serif" size="4">Отзывы</font></p></div></a>
                        <a href="#" title="Документы"><div id="sideLeft-Menu-Text6"><p align="right"><font color="#000000" face="Verdana, Geneva, sans-serif" size="4">Документы</font></p></div></a>
                    </div>
                    <br/><br/><br/><br/>
                        <div id="sideLeft-Children"></div>
                </div>
                    
                    <div id="sideRight">
                        <div id="sideRight-Reklama-partners"><p align="center"><font color="#33FF00" face="Verdana, Geneva, sans-serif" size="5">Реклама партнеров</font></p></div>
                    </div>
    </div>
</div>
 
            <div id="footer"></div><!-- #footer -->
             <div id="footer-Fon"></div>
 
</body>
</html>
Добавлено через 1 минуту
Вот 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
@charset "utf-8";
/* CSS Document */
 
* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
    height: 100%;
}
a {
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
p {
    margin: 0 0 18px
}
img {
    border: none;
}
input {
    vertical-align: middle;
}
 
 
#wrapper {
    width: 100%;
    min-width: 1000px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
 
 
/* Header Шапка
-----------------------------------------------------------------------------*/
#header {
    height: 350px;
    width:1360px;
    background-image:url(../image/shapka.jpg);
    background-repeat:no-repeat;
    margin:0 auto;
    float:inherit;
    position:relative;
}
#header1{
    height:231.5px;
    background-image:url(../image/shapka1123456.png);
    margin:-1135px auto;
    
}
#header-Logo{
    width:400px;
    height:86px;
    background-image:url(../image/logo.png);
    position:absolute;
    margin-top:50px;
    margin-left:102px;
}
/* Middle контект
-----------------------------------------------------------------------------*/
#middle {
    width: 100%;
    padding: 0 0 100px;
    height: 1%;
    position: relative;
}
#middle:after {
    content: '';
    clear: both;
    display: table;
}
#container {
    width: 100%;
    float: left;
    overflow: hidden;
    /*background-color:#666;*/
    margin-top:10px;
}
#content {
    padding: 0 270px 0 270px;
}
 
 
/* Sidebar Left Левая колонка
-----------------------------------------------------------------------------*/
#sideLeft {
    float: left;
    width: 250px;
    margin-left: -100%;
    position: relative;
    /*background: #B5E3FF;*/
    margin-top:-50px;
}
#sideLeft-Menu-icon{
    width:146px;
    height:285px;
    background-image:url(../image/left-menu.png);
    margin-left:70px;
}
#sideLeft-Menu-Text1{
    width:115px;
    height:23px;
    /*background-color:#006;*/
    position:absolute;
    margin-left:22px;
    margin-top:15px;
}
#sideLeft-Menu-Text2{
    width:115px;
    height:23px;
    /*background-color:#006;*/
    position:absolute;
    margin-left:22px;
    margin-top:58px;
}
#sideLeft-Menu-Text3{
    width:115px;
    height:23px;
    /*background-color:#006;*/
    position:absolute;
    margin-left:22px;
    margin-top:105px;
}
#sideLeft-Menu-Text4{
    width:115px;
    height:23px;
    /*background-color:#006;*/
    position:absolute;
    margin-left:22px;
    margin-top:151px;
}
#sideLeft-Menu-Text5{
    width:115px;
    height:23px;
    /*background-color:#006;*/
    position:absolute;
    margin-left:22px;
    margin-top:196px;
}
#sideLeft-Menu-Text6{
    width:115px;
    height:23px;
    /*background-color:#006;*/
    position:absolute;
    margin-left:22px;
    margin-top:243px;
}
#sideLeft-Children{
    width:150px;
    height:205px;
    background-image:url(../image/Left-children.png);
    margin-left:65px;
}
/* Sidebar Right Правая колонка
-----------------------------------------------------------------------------*/
#sideRight {
    float: left;
    margin-right: -3px;
    width: 250px;
    margin-left: -250px;
    position: relative;
    background: #FFACAA;
    margin-top:-10px;
}
#sideRight-Reklama-partners{
    width:200px;
    height:500px;
    background-color:#84619c;
    position:absolute;
    margin-left:px;
    margin-top:px;
    border:#000 double 5px;
}
 
/* Footer нижняя шапка
-----------------------------------------------------------------------------*/
#footer {
    margin: -100px auto 0;
    min-width: 1000px;
    width:1360px;
    height: 216px;
    background-image:url(../image/footer.jpg);
    position: relative;
}
#footer-Fon {
    height:206px;
    background-image:url(../image/1123123123.png);
    margin-top:-206px;
}
/*-----------Бегущая строка --------------*/
#Beg-Strok{
    width:1190px;
    height:20px;
    /*background-color:#006;*/
    position:absolute;
    margin-left:10px;
    margin-top:-345px;
    padding-top:3px;
}
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.07.2013, 20:11
Ответы с готовыми решениями:

Как сделать резиновый фон шапки и резиновый фон меню?
Как сделать резиновый фон шапки и резиновый фон меню?

Как сделать резиновый фон ?
добрый день! как сделать резиновый фон, он у меня не растягивается, вместе с...

Как сделать резиновый фон сайта
Здравствуйте! Подскажите пожалуйста как сделать, чтобы фон сайта при изменениях...

Как сделать резиновый фон(в Dreamweaver CS4)
Не могу сделать Фон что бы она растягивалась вместе с (браузером), как это...

Как сделать резиновый сайт
Помогите с решением проблемы. У меня есть картинка. Мне нужно её разместить...

1
ychelovek
13 / 13 / 3
Регистрация: 31.03.2013
Сообщений: 287
21.07.2013, 23:49 2
CSS
1
2
3
background:url(l.jpg) left no-repeat,
url(c.jpg) center repeat-x,
url(r.jpg) right no-repeat;
Если я так понял

Добавлено через 1 минуту
в общем Фон из нескольких частей наверно поможет
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
21.07.2013, 23:49

Как сделать резиновый или фиксированный сайт.
&lt;div id = &quot;rap&quot;&gt; &lt;div id = &quot;hed&quot;&gt; &lt;img src =...

Резиновый сайт, при прокрутки горизонтального скрола не появляется фон
Проблема заключается в следующем: Фон меню задан обычным цветом, при узком...

Блочная верстка (резиновый сайт), подскажите как сделать такой макет (см. рисунок)?
я думаю что по цветам можно легко распознать что является контейнером, а что...


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

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

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