С Новым годом! Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
 Аватар для Shura_deg
83 / 19 / 5
Регистрация: 01.02.2015
Сообщений: 655

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

08.06.2015, 23:18. Показов 1148. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Помогите в данном шаблоне сделать картинки резиновыми что бы они вместе с шаблоном при уменьшении или при увеличении размера экрана меняли свой размер!
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;}
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
08.06.2015, 23:18
Ответы с готовыми решениями:

Резиновая вёрстка
Ребят, помогите пожалуйста сделать вёрстку на странице резиновой. У меня две проблемы: 1. Появляется горизонтальный скроллбар и 2....

Резиновая вёрстка
Здравствуйте! Необходимо создать резиновый макет одностраничного сайта, представленный на картинке. Как я понимаю, структура div'ов...

Резиновая вёрстка
Доброе утро, делаю резиновую верстка сайта и у меня возникла проблема. когда уменьшаю ширину браузера (картинка 1) то в низу появляется...

2
 Аватар для Shura_deg
83 / 19 / 5
Регистрация: 01.02.2015
Сообщений: 655
08.06.2015, 23:18  [ТС]
дивная вёрстка вроде ещё называется! если не прав поправьте!
0
 Аватар для evikza
968 / 530 / 244
Регистрация: 20.05.2015
Сообщений: 776
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%;
}
 
}
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
09.06.2015, 00:29
Помогаю со студенческими работами здесь

Резиновая вёрстка
Ребят, всем привет. Очень нужна помощь. Нужно сверстать блок как во вложении. Я подобный уже сверстал (привязал к конкретным размерам),...

И вновь резиновая вёрстка (
Понимаю, что тема эта чуть старше чем вебдизайн, всё что нашёл, прочитал, но увы ничего не работает ( Изображение слева, всё равно...

Резиновая вёрстка. Высота блоков
Учусь делать &quot;резиновую&quot; вёрстку, так что не судите строго. /*@media screen and (min-width: 1280px){*/ html { height: 100%; ...

Резиновая вёрстка сайта 7 стобцов+шапка+подвал
Кручу сайт,не получается сделать столбец по середине. подчерпнул отсюда: http://manufactura.livejournal.com/1732.html второй...

Резиновая вёрстка или адаптивный сайт, что же лучше ?
Приветствую всех! В последние время всё чаще и чаще стали заходить в интернет с сотовых телефонов, планшетов, принтеров и других...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Изучаю 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 считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru