ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Верстка div'ами, центральный div резиновый?
20 сообщений из 20, страница 1 из 1
Верстка div'ами, центральный div резиновый?
    #35680498
Фотография INOKENTiY
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
INOKENTiY
Участник
Здравствуйте!
Подскажите как сделать что бы колонки были фиксированого размера, а центр выставлялся процентами? Вот пробовал, но ничего не получилось
Код: plaintext
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.
  <style>
  #container{
    width:  100 %;
  }

  #leftside{
    float: left;
    width: 200px;
  }
  #centerside{
    float: left;
    width:  100 %;
  }
  #rightside{
    float: left;
    width: 200px;
  }

  </style>

<div id="container">
<div id="leftside">LEFT</div>

<div id="centerside">CENTER</div>

<div id="rightside">RIGHT</div>
</div>
...
Рейтинг: 0 / 0
27.11.2008, 20:38
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35680524
Фотография Ренат
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ренат
Участник
Там вроде как то вписывать надо как то так:
Код: plaintext
1.
2.
3.
4.
5.
6.
#centerside{
    float: left;
    width:  100 %;
margin-left;200px;
margin-right:200px;
  }
хотя я хз, всегда в % делал)
...
Рейтинг: 0 / 0
27.11.2008, 20:59
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35680594
Фотография Ренат
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ренат
Участник
тынц . тута достаточно интересный (но на мой взгляд корявый :D ) способ реализации того что ты хочеш.
...
Рейтинг: 0 / 0
27.11.2008, 22:29
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35680722
Фотография INOKENTiY
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
INOKENTiY
Участник
с двумя колонками выходит, а с тремя нет
...
Рейтинг: 0 / 0
28.11.2008, 00:29
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35680737
Фотография Ренат
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ренат
Участник
Как это не выходит? как имено третья не выходит? Там два раза по применяетсья один и тот же пием, один раз чтобы делать вторйо ряд, вторйо раз чтобы третий. Еси вторйо получился то и тертий должен.
...
Рейтинг: 0 / 0
28.11.2008, 01:06
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35680747
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
вариант 1
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<style>
  #container { width:  100 %; }
  #leftside   { float: left; width: 200px; background:red; }
  #centerside { width:  100 %; 	margin-left:200px; margin-right:200px; background:yellow; }
  #rightside { float: right; width: 200px; background:green; }
</style>
<div id="container">
	<div id="leftside">LEFT</div>
	<div id="rightside">RIGHT</div>
	<div id="centerside">CENTER</div>
</div>

вариант 2
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
<style>
  #container{ width:  100 %; position:relative; }
  #leftside   { position:absolute; left: 0 ;  top: 0 ; width: 200px; background:red; }
  #rightside  { position:absolute; right: 0 ; top: 0 ; width: 200px; background:green; }
  #centerside { width:  100 %; margin-left:200px; margin-right:200px; background:yellow; }
</style>
<div id="container">
	<div id="leftside">LEFT</div>
	<div id="centerside">CENTER</div>
	<div id="rightside">RIGHT</div>
</div>

P.S. можно было и потщательнее готовое решение поискать самостоятельно. В тырнете их немало.
...
Рейтинг: 0 / 0
28.11.2008, 01:25
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35682316
Фотография INOKENTiY
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
INOKENTiY
Участник
не работает ни один не второй вариант толком((
...
Рейтинг: 0 / 0
28.11.2008, 15:44
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35682758
Фотография Ренат
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ренат
Участник
Значит что то недоговариваете? К примеру может после всего этого есть еще снизу стоит еще один див тогда, второй вариант Илиан отпадает. А чтобы работал первый надо дописать clear:both к конечному диву.
Такое что у Илиан чето не работает это... как чтобы Microsoft винду бесплатную выпустит. Я даж проверил, все отлично работает
...
Рейтинг: 0 / 0
28.11.2008, 17:50
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35682834
Фотография INOKENTiY
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
INOKENTiY
Участник
прикрепил первый способ
...
Рейтинг: 0 / 0
28.11.2008, 18:10
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35682843
Фотография INOKENTiY
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
INOKENTiY
Участник
прикрепил второй способ
...
Рейтинг: 0 / 0
28.11.2008, 18:13
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35682846
Фотография Ренат
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ренат
Участник
Сверху опера, в центре эксплорер, снизу мазила...
У вас почемуто маргин райт не работает o_O
...
Рейтинг: 0 / 0
28.11.2008, 18:15
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35682853
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
ИЕ6 не отрабатывает :)
...
Рейтинг: 0 / 0
28.11.2008, 18:17
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35682861
Фотография Ренат
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ренат
Участник
Во втором варианте у второго центрального дива попробуйте убрать width:100%; мож отсуда глюк?
...
Рейтинг: 0 / 0
28.11.2008, 18:18
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35682877
Фотография Ренат
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ренат
Участник
Такво вариант тож не работает? Можете показать как выглядит?)
 
html kod<head>
<style>
#outer_wrapper {
/* т.к. min-width не поддерживается IE, мы будем использовать скрипт написанный PVII */
min-width:740px;
/* Правило для решения бага прорисовки фона в IE, но т.к. оно создает промежуток
под футером, мы добавим такое же правило в блок #footer */
width:100%;
/* Техника ложных колонок (faux-column), левая колонка */
background:#fff url(left.gif) repeat-y left
}
#wrapper {
/* Техника ложных колонок (faux-column), правая колонка */
background:url(right.gif) repeat-y right
}
#header {
border:1px solid #b0b0b0;
background:#b0b0b0;
/* Задаем "определение позиции" для элемента и устраняем
peek-a-boo баг в IE (v6 sp2) */
width:100%;
/* Предыдущее правило создает горизонтальную прокрутку в IE,
избавимся от нее */
margin:0 -1px
}
#container {
float:left;
width:100%;
/* IE удваивает внешние полоски (margins) у плавающих элементов,
позаботимся об этой проблеме */
display:inline;
/* Тут мы расходимся во мнениях с Ryan Brill (автором статьи в ALA) */
margin-left:-200px
}
#left {
float:left;
width:150px;
/* IE удваивает внешние полоски (margins) у плавающих элементов,
позаботимся об этой проблеме */
display:inline;
margin-left:200px
}
#main {
/* ширина левой колонки #left (150px) + отрицательное поле (negative margin)
у блока #container (200px) */
margin-left:350px
}
/* Примечание: если блок #sidebar будет короче чем блок #main,
тогда можете удалить это правило */
#sidebar {
/* Для сохранения контента блока #sidebar справа от блока #main,
если контента в #main меньше */
padding-left:100%;
/* Возвращаем блок #sidebar на место, который был вытеснен
из вьюпорта из-за отступа */
margin-left:-200px
}
#sidebar p {
/* Удостоверимся что IE (v6 sp2) отображает элемент (та же проблема что и
с блоком #header, но решение другое) */
position:relative
}
#footer {
/* См. блок #outer_wrapper */
width:100%;
/* Для очистки #container */
clear:both;
border-top:1px solid #b0b0b0;
border-bottom:1px solid #b0b0b0;
background:#b0b0b0}
/* Этот класс применяется к 2-м структурным хакам в разметке. Первый
"бессмысленный" элемент используется для очистки блока #left в NN6,
а последний для очистки #container в NN4 */
.clearing {height:0;clear:both}
</style>
</head>
<body>
<div id="outer_wrapper">
<div id="wrapper">
<div id="header">
<h2>Header</h2>
</div><!-- /header -->
<div id="container">
<div id="left">
<h1>Left</h1>

</div><!-- /left -->
<div id="main">
<h1>Main</h1>
</div><!-- /main -->
<!-- This is for NN6 -->
<div class="clearing"> </div>
</div><!-- /container -->
<div id="sidebar">
<h1>Sidebar</h1>
</div><!-- /sidebar -->
<!-- This is for NN4 -->
<div class="clearing"> </div>
<div id="footer">
<h2>Footer</h2>
</div><!-- /footer -->
</div><!-- /wrapper -->
</div><!-- /outer_wrapper --&;gt;
</body>
...
Рейтинг: 0 / 0
28.11.2008, 18:27
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35683155
Фотография INOKENTiY
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
INOKENTiY
Участник
спасибо последний вариант, работае
...
Рейтинг: 0 / 0
29.11.2008, 00:07
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35683156
Фотография Ренат
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ренат
Участник
ответ на первое предложение
INOKENTiYс двумя колонками выходит, а с тремя нет
про то же самое
INOKENTiYспасибо последний вариант, работае
Так это я его шас тебе и выложил <^_^>
...
Рейтинг: 0 / 0
29.11.2008, 00:12
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35698988
Фотография akopium
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
akopium
Участник
РенатСверху опера, в центре эксплорер, снизу мазила...
У вас почемуто маргин райт не работает o_O

а ИЕ-то у тя не шестой, а, как минимум, седьмой.
Ведь шестой самый "неправильный" и всё исследовать, что касается ИЕ, нужно на нем
...
Рейтинг: 0 / 0
08.12.2008, 03:31
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35699122
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
INOKENTiY , доктайп использовал? Полный код покажи...

Для ИЕ бывает помогает

Код: plaintext
overflow: hidden;

----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
08.12.2008, 09:21
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35699128
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Вот это у меня например работает и в ИЕ6...

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
  #container { width:  100 %; }
  #leftside   { float: left; width: 200px; background:red; }
  #centerside { width:  100 %; 	margin-left:200px; margin-right:200px; background:yellow; }
  #rightside { float: right; width: 200px; background:green; }
</style>
</head>
<body>
<div id="container">
	<div id="leftside">LEFT</div>
	<div id="rightside">RIGHT</div>
	<div id="centerside">CENTER</div>
</div>
</body>
</html>
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
08.12.2008, 09:24
| Ответить | Цитировать | Написать  
Верстка div'ами, центральный div резиновый?
    #35699129
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Это тоже работает в ИЕ6...

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
  #container{ width:  100 %; position:relative; }
  #leftside   { position:absolute; left: 0 ;  top: 0 ; width: 200px; background:red; }
  #rightside  { position:absolute; right: 0 ; top: 0 ; width: 200px; background:green; }
  #centerside { width:  100 %; margin-left:200px; margin-right:200px; background:yellow; }
</style></head>
<body>
<div id="container">
	<div id="leftside">LEFT</div>
	<div id="centerside">CENTER</div>
	<div id="rightside">RIGHT</div>
</div></body>
</html>

Т.ч., illion , твая пабедила...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
08.12.2008, 09:25
| Ответить | Цитировать | Написать  
20 сообщений из 20, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Верстка div'ами, центральный div резиновый?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=35683156&tid=1455458]:
 0ms
get settings:
 7ms
get forum list:
 14ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 164ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 52ms
get tp. blocked users:
 1ms
others: 233ms
total:  488ms
созд. / загр.: 488ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]