Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/11: Рейтинг темы: голосов - 11, средняя оценка - 5.00
52 / 51 / 19
Регистрация: 22.03.2009
Сообщений: 173
1

Резиновый дизайн

21.01.2011, 13:57. Просмотров 1962. Ответов 4
Метки нет (Все метки)

Здравствуйте уважаемые, на сайте имеется 3 блока каждый построен на 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
<div class="left_panel">
    <em class="bt"><b>&nbsp;</b></em>
    <div class="block_content">
      <p>Menu </p>
    
    </div>
    <em class="bb"><b>&nbsp;</b></em>
</div>
 
 
<div class="center_panel">
    <em class="bt"><b>&nbsp;</b></em>
    <div class="block_content">
    <p>   content. </p>
    </div>
    
    <em class="bb"><b>&nbsp;</b></em>
</div>
 
<div class="right_panel">
    <em class="bt"><b>&nbsp;</b></em>
    <div class="">
      <p>content</p>
     
    </div>
    <em class="bb"><b>&nbsp;</b></em>
</div>
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
.left_panel {
    position:relative;
    width:180px;    
    float:left; 
    margin-left:2px;  
    border: 2px #808080 solid; /* Параметры рамки */
    background: #f6f6f6; /* Цвет фона */
    text-align:center;
   }
   
    
.right_panel {
    position:relative;
    width:180px;
    float:right;          
    margin-right:2px;
    border: 2px #808080 solid; /* Параметры рамки */
    background: #f6f6f6; /* Цвет фона */
    text-align:center;
   }
   
.center_panel {
    text-align:center;
    position:relative;
    margin-right:3px;
    margin-left:3px;
    float:left;
    width:50%;
    border: 2px #808080 solid; /* Параметры рамки */
    background: #f6f6f6; /* Цвет фона */
   }
на данном этапе центральная панель поставлена с обтеканием слево, и ширина 50% но это неправильно, глючит при сужении
Резиновый дизайн
Резиновый дизайн
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.01.2011, 13:57
Ответы с готовыми решениями:

Резиновый дизайн
Всем привет, Задача тривиальная. Есть три дива, идут слева направо: левый сайдбар, див с...

Резиновый дизайн
Здравствуйте уважаемые программисты. Я занимаюсь дизайном сайтов, заказчики все чаще просят делать...

Резиновый дизайн
Добрый форумчане! Нужно сделать резиновый дизайн. Требование: чтобы до определенного размера рос...

Почти резиновый дизайн
Как сделать так, чтобы центральная часть была фиксированной ширины, а левая и правая одинаково...

4
13183 / 6571 / 1039
Регистрация: 10.01.2008
Сообщений: 15,069
21.01.2011, 14:58 2
.center_panel убрать float и width
CSS
1
2
3
.center_panel {
    margin: 0 190px;
}
Вслед за ними тремя пустить еще
HTML5
1
<div class="clear"></div>
CSS
1
.clear {clear:both; float:none; height:0; font-size:0;}
И всех четверых обернуть в контейнер.
1
52 / 51 / 19
Регистрация: 22.03.2009
Сообщений: 173
21.01.2011, 18:01  [ТС] 3
спасибо, ваш вариант работает, но тут ход мысли пошел дальше...
теперь когда центральная часть забита контентом, и получаестя относительно длинной, по сравнению с боковыми блоками навигации, новостей, и подобных. как сделать, к примеру, 2 блока друг под другом слево ( menu 1 и menu2 ), центральная и правая часть как была так и остается.

при добавлении в контейнер еще одного элемента он появляется, но отображается слево, после завершения центрального блока ( т.е. он висит где то снизу )

в сторону каких свойст подскажете копать ?
0
13183 / 6571 / 1039
Регистрация: 10.01.2008
Сообщений: 15,069
21.01.2011, 18:07 4
Цитата Сообщение от mus Посмотреть сообщение
как сделать 2 блока друг под другом слево ( menu 1 и menu2 ), центральная и правая часть как была так и остается.
Так теперь внутрь этого left засунуть два блока, и никуда они оттуда не денутся.
Цитата Сообщение от mus Посмотреть сообщение
при добавлении в контейнер еще одного элемента он появляется, но отображается слево, после завершения центрального блока ( т.е. он висит где то снизу )
А зачем именно в контейнер? За его пределы после него. Главное тот .clear никуда не девайте, чтобы он внутри контейнера был после этих float'ов.
1
52 / 51 / 19
Регистрация: 22.03.2009
Сообщений: 173
21.01.2011, 18:21  [ТС] 5
Цитата Сообщение от Vovan-VE Посмотреть сообщение
Так теперь внутрь этого left засунуть два блока, и никуда они оттуда не денутся.
это бы нехотелось однин в другой вкладывать идея состоит в модульности сайта, т.е. создастся примерно 5-6 таких блоков, впоследствии будет другой css файл стиля в котором их размещение и оформление будет по другому сделано, через выбор стиля, тоесть сменный дизайн подразумевается..

поэтому и думал что все в единый контейнер пихать чтобы было, так сказать, рабочее пространство где будут подобие гаджетов которые через стиль можно размещать в разных местах сайта
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
21.01.2011, 18:21

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Непонятные отступы резиновый дизайн (IE6)
Уже два дня мучаюсь с проблемой... Во всех браузерах приведенный ниже код, нормально растягивает...

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

Резиновый макет
Может кто обьъснить,как делаются резиновые макеты,и размещение ссылок на резиновом меню. за ранние...

Резиновый сайт
Здравствуйте. Я сделал сайт по размерам своего монитора (1366x768). Но на мониторе друга...


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

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

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