Резиновая вёрстка

@Shura_deg · Регистрация: 01.02.2015

Студворк — интернет-сервис помощи студентам

Помогите в данном шаблоне сделать картинки резиновыми что бы они вместе с шаблоном при уменьшении или при увеличении размера экрана меняли свой размер!
shoblon.rar
Вот код 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
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
<!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=Windows-1251" />
<title>BELheat</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <!-- header -->
    <div id="menu">
       <div id="menu_list"> 
        <a href="#">Домой</a>
        <img src="https://www.cyberforum.ru/images/splitter.gif" class="splitter" alt="" />
        <a href="#">О нас</a>
        <img src="https://www.cyberforum.ru/images/splitter.gif" class="splitter" alt="" />
        <a href="#">Монтаж</a>
        <img src="https://www.cyberforum.ru/images/splitter.gif" class="splitter" alt="" />
        <a href="#">Прайс</a>
        <img src="https://www.cyberforum.ru/images/splitter.gif" class="splitter" alt="" />
        <a href="#">Контакты</a>
        </div>
    </div>
    <div id="header">
      <div id="slogan"><img src="https://www.cyberforum.ru/images/logo.gif" width="370" height="83" alt="" /></div>
      <div id="logo">
      <br/><br/>
      +375 (29) 7768622 MTC<br /><br />
      +375 (29) 8368643 MTC
      </div>
    </div>
    <!--end header -->
    <!-- main -->
    <div id="main">
          <div id="sidebar">
            <h1>Разделы</h1>
            <div class="item"><a href="#"><img src="https://www.cyberforum.ru/images/picture1.gif" alt=" " /></a>
            <a href="#">Посмотреть</a><span class="description">Немецкое качество. 140 лет на рынке</span></div>
            <div class="item"><a href="#"><img src="https://www.cyberforum.ru/images/picture2.gif" alt=" " /></a>
            <a href="#">Посмотреть</a><span class="description">Компания с мировым именем</span></div>
            <div class="item"><a href="#"><img src="https://www.cyberforum.ru/images/picture3.gif" alt=" " /></a>
            <a href="#">Посмотреть</a><span class="description">Уже успела себя зарекомендовать во всей Европе</span></div>
            <div class="item"><a href="#"><img src="https://www.cyberforum.ru/images/picture4.gif" alt=" " /></a>
            <a href="#">Посмотреть</a><span class="description">Итольянское качество, признано многоими потребителям</span></div>
            <div class="item"><a href="#"><img src="https://www.cyberforum.ru/images/picture5.gif" alt=" " /></a>
            <a href="#">Посмотреть</a><span class="description">Навесные газовые котлы. Съэконом место в своём доме!</span></div>
            <div class="item"><a href="#"><img src="https://www.cyberforum.ru/images/picture6.gif" alt=" " /></a>
            <a href="#">Посмотреть</a><span class="description">Немецкая группа компаний, ведущий мировой поставщик технологий и услуг в области газовых котлов</span></div>
          </div>
          <div id="text" >
                <h1>Доброго времени суток</h1>
                <p><strong>Основное направление</strong> работы компании "BELheat" – продажа надежного, высокотехнологичного и энергосберегающего оборудования. В нашем интернет-магазине вы можите найти газовые котлы следующих всемирно известных брендов:</p>
                <ul>
                  <li>BOSCH</li>
                  <li>VAILANT</li>
                  <li>ARISTON</li>
                  <li>IMMERGAS</li>
                  <li>JUNKERS</li>
                </ul>
                <h1>BELheat.by</h1><br />
               <b>БелХэт</b> бесспорно занимает лидирующие позиции в сфере продаж отопительных котлов, благодаря высококлассному сервису, профессионализму своих сотрудников и качественной продукции. Основная задача – создание максимально комфортных условий для клиента в приобретении товаров.
                Своевременная доставка, низкая цена, наличие товара на складе, удобный сервис при выборе и покупке – вот, что мы ставим на первое место!
               <br /> <h1>Почему мы? </h1> <br />
               <b>БэлХэт</b> - специализированный магазин на территории Республики Беларусь, который предлагает наиболее широкий ассортимент отопительного оборудования от ведущих производителей. Среди ассортимента товаров присутствуют лучшие модели отопительных котлов. Вся продукция, представленная в нашем каталоге соответствует мировым стандартам качества, ведь ее производство осуществляется с использованием последних технологических разработок.
               Всё оборудование имеет сертификаты соответствия Республики Беларусь. Специалисты нашей компании помогут подобрать оптимальную модель, которая устроит вас по функциональности, экономичности и надежности. Мы всегда готовы предложить вам профессиональные консультации, в которых вы, несомненно, найдете ответы на все свои вопросы.
               Все услуги осуществляются ведущими специалистами компании ООО «БелХэт», которая только начинает набирать обороты на рынке, но уже успела себя зарекомендовать у поторебителей. Обратившись к нам, вы, несомненно, будете приятно удивлены широким выбором высококачественного отопительного оборудования, профессионализмом сотрудников и стоимостью отопительных систем.
               <br /><h1>Монтаж и установка</h1> <br />
                <b>Посетив раздел</b> «Монтаж и установка», вы сможете ознакомиться с правилным способом установки отопительного оборудования, а также как увеличить эксплуатационный срок отопительного прибора.
                Все услуги осуществляются ведущими специалистами компании ООО «БелХэт». Обратившись к нам, вы, несомненно, будете приятно удивлены широким выбором высококачественного отопительного оборудования, профессионализмом сотрудников и стоимостью отопительных систем.
                <br /><h1>Банковские реквизиты</h1> <br />
ООО “КотловБай”<br />
220140, г. Гродно, ул. Пестрока, 54,<br /> <br />
 
код 152001854, р/с 3012001208111 в ЗАО “Цептер Банк” <br />
г. Минск, ул. Платонова, д.1Б, 220432 <br />
код 820, УНП 192211169, ОКПО 381435705000<br /><br />
 
код 153011142, р/с 3011100082515 в ОАО “Белгазпромбанк”<br />
г. Гродно, ул. Независимости, 74<br />
УНП 190098161, ОКПО 381825765400<br /> <br />
                <p class="additional">Если вам понравился наш интернет-магазин и вы бы хотели что бы он стал ещё лучше. Вы можете помоч нашему проекту сделав добровольный взнос</p>
          </div>
    </div>
    <!-- end main -->
    <!-- footer -->
    <div id="footer">
    <div id="left_footer">&copy; Copyright 2015 </div>
    <div id="right_footer">
 
<!-- Please do not change or delete this link. Read the license! Thanks. :-) -->
Design by <strong>Dorofeichik Andrei</strong>
 
    </div>
</div>
    <!-- end footer -->
</body>
</html>

вложенного туда файла css style

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
body { margin:0; padding:0; font-size:0.9em; line-height:20px; font-family: Arial, Helvetica, sans-serif; border:1px solid #000; background:#000; }
a { color:#97070b; text-decoration:none;}
a:hover { text-decoration:underline;}
p { padding: 0 10px 5px 10px; }
h1 { margin:0; padding:10px 0 0 10px; text-transform:uppercase; font-size:1.5em; color:#be141d; font-weight:normal;}
 
#header { padding:30px 20px 0 40px; height:131px; background:url(images/head_bckg.jpg) no-repeat #B9121C; }
#slogan { float:left; color:#FFFFFF; font-size:26px; text-transform:uppercase; padding-top:10px}
#header a{ color:#fff; text-decoration:none; font-weight:bold; font-size:20px; text-transform:uppercase; letter-spacing:5px; }
#logo { float:right; width:240px; text-align:left; font-size:19px; color:#fff; line-height:12px; padding-top:5px;}
#menu { background: url(images/menu_bckg.gif) repeat-x #fff; height:40px; padding-top:10px;}
#menu_list {width:600px; margin:0 auto;}
#menu a { display:block; color:#000000; float:left; font-size:14px; text-transform:uppercase; font-weight:bold; text-decoration:none; margin:0 20px; padding-top:8px;}
#menu a:hover{padding-top:10px;}
.splitter { display:block; float:left;}
.item img { background-color:#FFFFFF; padding:6px; border:1px solid #d0d0d0;}
.item a { display:block; float:left; font-size:12px; color:#bd131d;}
.description { display:block; float:right; width:130px; padding: 0 10px 20px 0; line-height:12px;}
p.additional { margin:0 10px; color:#9c9c9c; font-size:11px; line-height:12px; border-top:1px solid #bdbdbd; padding: 10px 10px 30px 45px; background:url(images/umbrella.gif) no-repeat 0 12px;}
 
#text { margin: 0 305px 0 20px; }
#text li {list-style:none; padding-left:20px; background:url(images/li.gif) no-repeat 0px 4px;}
#sidebar { float:right; width:245px; padding: 10px 20px 0 30px; font-size:11px;}
#sidebar a{ font-weight:bold; }
#sidebar h1 { margin:0; padding:0 0 20px 0; text-transform:uppercase; font-size:18px; color:#000; font-weight:normal;}
 
#main { float:left; background:url(images/sidebar_bckg.gif) no-repeat top right #fff; padding:20px 0 0 0;}
#footer {background:url(images/footer_bckg.gif) repeat-x #000; height:57px; clear:both;  }
#left_footer { float:left; padding:20px 0 0 30px; color:#fff; font-size:12px;}
#left_footer a { color:#fff;}
#left_footer a:hover { text-decoration:none;}
#right_footer { float:right;  padding:20px 30px 0 0; color:#fff;  font-size:12px; text-align:right;}
#right_footer a { color:#fff;}

@Shura_deg · 08.06.2015, 23:18 **[ТС]**

дивная вёрстка вроде ещё называется! если не прав поправьте!

@evikza · 09.06.2015, 00:29

Возможно вы имели ввиду адаптивная верстка

В данном случае, нужно использовать @media, я так понимаю нужно уменьшать и увеличивать логотип и раздел #sidebar. C логотипом понятно, а sidebar нужно пересобирать,

при >980px экрана, изображения уменьшаются до 60%, вот пример, добавьте его в css и увидите результат:

CSS
1
2
3
4
5
6
7
8
9
10
11
@media screen and (max-width: 980px) {
 
   .item img {
      width: 60%;
}
   #slogan img {
      width: 60%;
      height: 60%;
}
 
}

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@Shura_deg 83 / 19 / 5 Регистрация: 01.02.2015 Сообщений: 655
	08.06.2015, 23:18 [ТС]
	дивная вёрстка вроде ещё называется! если не прав поправьте! 0