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

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

04.03.2014, 13:11. Просмотров 1001. Ответов 1
Метки нет (Все метки)

Подскажите пожалуйста, возможно ли средствами html, css и, возможно, javascript, сделать сайт, состоящий из шапки, 3х колонок и подвала с тем учетом, что:
1. Шапка имеет фиксированную высоту и растягивается только по ширине, на всю ширину браузера при его масштабировании и растягивании мышкой, не в зависимости от разрешения.(имеет минимальную ширину)
2.Левая и правая колонки имеют фиксированную ширину, минимальную высоту, но растягиваются на всю высоту браузера(с условием пункта 1 о растяжении).
3. Контент полностью резиновый и растягивается, как по ширине, так и по высоте(есть минимальная ширина и высота соответственно). Важный момент, у этого блока есть скролл, по сути сам контент является окном чата, где будут находиться сообщения(как в скайпе).
4. Подвал растягивается только по ширине и имеет минимальную ширину соответственно, но здесь тоже загвоздка - он находится между левой и правой колонками , и контент меньше по высоте, чем левая и правая колонки, ровно на высоту подвала. Кроме того, браузерный скролл должен появляться только тогда, когда вся структура достигает минимальных параметров ширины и высоты. В остальных случаях все 5 блоков полностью видны.

Минимальная ширина 640px и высота 480px. Шапка имеет все 640 px, контент и подвал минимальную ширину с учетом вычтенной ширины 2х колонок слева и справа(т.к. они резиновые), и контент так же имеет минимальную высоту с учетом вычета шапки и подвала, а левая и правая колонки минимальную высоту с учетом вычета шапки.
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
04.03.2014, 13:11
Ответы с готовыми решениями:

резиновая верстка
как сделать чтобы на всех размерах экрана,блоки с картинками не съезжали друг на друга,а стояли на...

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

Резиновая верстка
Подскажите, какими средствами можно решить такое задание: На странице расположены блоки-ячейки...

Резиновая верстка
как сделать чтоб блоки при увеличении и уменьшении экрана не убегали вниз и вверх, а оставались на...

Резиновая верстка
Такая вот проблема, есть 6 кнопок фиксированного размера.., как правильно их сверстать для разных...

1
pkDemi
5 / 1 / 2
Регистрация: 05.03.2014
Сообщений: 27
05.03.2014, 00:40 2
Лучший ответ Сообщение было отмечено Ev[G]eN как решение

Решение

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Трехколоночный макет</title>
  <style type="text/css">
   body {
    font: 0.8em Arial, Helvetica, sans-serif; /* Шрифт на веб-странице */
    background: #D7E1F2; /* Цвет фона */
    color: #ffe; /* Цвет текста */
   }
   a { color: #008BCE; /* Цвет ссылок */ }
   #container {
    width: 500px; /* Ширина макета */
    margin: 0 auto; /* Выравниваем по центру */
    background: #FCE600; /* Цвет колонок */
   }
   #header { 
    font-size: 2.2em; /* Размер текста */
    text-align: center; /* Выравнивание по центру */
    padding: 5px; /* Отступы вокруг текста */
    background: #D71920; /* Цвет фона шапки */
   }
   #nav, #aside {
    float: left; width: 110px; padding: 5px;
   }
   #content {
    background: #54B948;
    margin: 0 120px; /* Ширина колонок */
    padding: 10px;
   }
   #aside {
    float: right; color: #000;
   }
   h2 { margin: 0 0 1em; }
   #footer { 
    clear: both; /* Отменяем действие float */
    padding: 5px; /* Отступы вокруг текста */
    background: #D71920; /* Цвет фона подвала */
   }
  </style>
 </head>
 <body>
  <div id="container">
   <div id="header">Исторический турнир</div>
   <div id="nav">
    <p><a href="stat.html">Статистика турнира</a></p>
    <p><a href="interview.html">Интервью с главным судьей</a></p>
    <p><a href="ask.html">Конкурсные вопросы</a></p>
   </div>
   <div id="aside">
    <h3>Статистика</h3>
    <p>одиннадцать человек дошли до финала;</p>
    <p>один человек правильно указал в каком стиле писал Диего Веласкес;</p>
    <p>только один человек знал, кто изобрел пароход;</p>
   </div> 
   <div id="content"> 
   <h2>Опрос общественного мнения показал</h2>
    <ul>
     <li>что пароход изобретен: Петром I, А. Эйнштейном и А. Поповым;</li>
     <li>Диего Веласкес писал свои полотна в стиле: империализма, кубизма 
     и империосионизма;</li>
     <li>Фаросский маяк находится в Фаросе;</li>
     <li>конфуцианство возникло в: Италии, Корее и Франции;</li>
     <li>богами торговли и воровства в Древней Греции были: Марс, Меркурий 
     и Дионис;</li>
     <li>Франция – это город;</li>
     <li>богами загробного мира в Египте были: Аид, Анубис и Ассирис;</li>
     <li>столица Золотой Орды — Монголия;</li>
     <li>главные противники Александра Македонского: татаро-монголы, Дедал 
     и Цезарь;</li>
    </ul>
   </div>
   <div id="footer">&copy; Влад Мержевич</div>
  </div>
 </body>
</html>
Добавлено через 2 минуты
Заполнен для наглядности, все параметры подписаны , так что можешь как тебе угодно изменить под твой вариант. Цвета подбери нужные тебе. Основная задача думаю выполнена. Хэдер, 3 колонки, футер
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
05.03.2014, 00:40

Резиновая верстка
Не могу понять одного. Как выставить &quot;резиновые&quot; параметры для страницы где много графики? ну...

Резиновая верстка
Добрый день! Нужно резиново спозиционировать div относительно wraper. Чтобы при уменьшении размера...

Резиновая верстка
Допустим есть блок: &lt;div class=&quot;content&quot;&gt; &lt;div&gt; И стиль: .content { height:450px;


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

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

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