ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Верстка дивами в две колонки. Помогите!!!
25 сообщений из 41, страница 1 из 2
  1  все
Верстка дивами в две колонки. Помогите!!!
    #35368539
Necronominicon
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Necronominicon
Гость
Мужики, помогите!!! Нужно сверстать дивами две колонки. Но есть одна трудность: первая колонка должна быть резиновой, а у второй фиксированный размер. Все примеры, что я перелопатил предполагают верстку только либо процентами, либо фиксажом. Если кто знает как это сделать, то помогите!!!
...
Рейтинг: 0 / 0
11.06.2008, 08:56
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35368587
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
Почему "мужики". На форуме на эту тему как раз лучше всех illion отвечает, которая не мужик.
...
Рейтинг: 0 / 0
11.06.2008, 09:23
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35368595
Necronominicon
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Necronominicon
Гость
ShSergeПочему "мужики". На форуме на эту тему как раз лучше всех illion отвечает, которая не мужик.
Я только вчера сюда попал, поэтому и не знаю никого тут...
...
Рейтинг: 0 / 0
11.06.2008, 09:24
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35368695
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Necronominiconпервая колонка должна быть резиновой, а у второй фиксированный размер
Резиновой куда? Картинку покажи как нужно сделать... Вся верстка начинается "с картинки в твоем букваре" (с)
...
Рейтинг: 0 / 0
11.06.2008, 09:59
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35368706
Necronominicon
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Necronominicon
Гость
krvsa Necronominiconпервая колонка должна быть резиновой, а у второй фиксированный размер
Резиновой куда? Картинку покажи как нужно сделать... Вся верстка начинается "с картинки в твоем букваре" (с)
Прикрепляю файл. Шаблон готов, но правда фиксированной ширины. Остался только сабж...
...
Рейтинг: 0 / 0
11.06.2008, 10:04
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35368708
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
ShSergeНа форуме на эту тему как раз лучше всех illion отвечает
злыдень ты, теперь мне придется че-то отвечать, а то нехорошо получается :-))).

В общем сделать можно абсолютно спозиционированными дивами:
Код: plaintext
1.
2.
3.
4.
5.
<style>
.left {position:absolute; margin-right:210px; width:expression(document.body.clientWidth- 210 +'px'); background:yellow;}
.right {position:absolute; width:200px; right: 0 ; background:green; }
</style>
<div class="left">left</div>
<div class="right">right</div>
противный ИЕ6 не захотел устанавливать margin-right, поэтому для него персональное вычисление width.
...
Рейтинг: 0 / 0
11.06.2008, 10:04
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35368723
Necronominicon
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Necronominicon
Гость
illion, спасибо огромное!!! Сейчас попробую... Но заранее целую в алые губки. Спасибо!!!
...
Рейтинг: 0 / 0
11.06.2008, 10:08
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35368847
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illion , при таком варианте дивы налазят друг на друга при уменьшении ширины окна...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
11.06.2008, 10:47
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35368907
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
конечно налезут, если уменьшить до определенных размеров. За этим программисту и нужна голова - чтоб думать. Посмотреть на основу, а потом привести ее к рабочему виду. Вставить в страницу див-распорку с min-width, например. Думаю она поможет.
...
Рейтинг: 0 / 0
11.06.2008, 11:04
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35368927
Vint_x
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vint_x
Гость
Ну можно и проще сделать:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
 <style type="text/css">
        #lDiv
        {        	
        	background: #FFC;
        	height:300px;        	
        	margin-right: 220px;
        }
        #rDiv
        {
        	
        	width: 210px;
        	height:300px;  
        	float:right;        	      	
        	background: #CCC;
        }
    </style>

<div id="rDiv"></div>
<div id="lDiv"></div>
...
Рейтинг: 0 / 0
11.06.2008, 11:08
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35368971
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Например в ИЕ прекрасно работает вот этот вариант...

Код: 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.
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.
<!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" />
<style type='text/css'>
* {
	margin: 0px;
	padding: 0px;
}
html {
	width:  100 %;
}
body {
	width:  100 %;
	height:  100 %;
}
div {
}
#container {
	float: left;
	width:  100 %;
	height:  100 %;
}
#left {
	float: left;
	clear: right;
	height:  100 %;
	background-color: aqua;
}
#tab {
	float: left;
	clear: right;
	width: 200px;
	height:  100 %;
	background-color: yellow;
}
#right {
	float: left;
	margin-left: -200px;
	margin-right: auto;
	width: 200px;
	height: 400px;
	overflow: hidden;
	background-color: red;
}
</style>
</head>
<body>
<div id='container'>
	<div id='left'>Куча текста
	</div>
	<div id='tab'>Tab
	</div>
</div>
	<div id='right'>Право
	</div>
</body>
</html>
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
11.06.2008, 11:24
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35369035
Vint_x
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vint_x
Гость
height: 100%; работает только в ИЕ.
...
Рейтинг: 0 / 0
11.06.2008, 11:43
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35369117
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
krvsa
Ага. Точно надо сделать форум, тынц - и всё видно.
...
Рейтинг: 0 / 0
11.06.2008, 12:01
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35369124
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Vint_x , мне понравился твой пример. Но в твоем варианте при уменьшении ширины окна правая часть залазит на левую...

В моем примере в Опере "упрыгивает" див "таб"... Вот как бы его "заставть" стоять на месте?
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
11.06.2008, 12:02
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35369229
Vint_x
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vint_x
Гость
К сожалению IE не знает min-width.
Но, более менее нормально себя ведёт такой способ..
Код: 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.
28.
29.
<!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>
    <title>Untitled Page</title>
    <style type="text/css">
        #lDiv
        {        	
        	background: #FFC;
        	height:500px;        	
        	margin-right: 220px;
        	min-width: 300px;
        }
        #rDiv
        {
        	position:absolute;
        	right:0px;
        	width: 210px;
        	height:300px; 
        	background: #CCC;
        	
        }
    </style>
</head>
<body>
<div id="rDiv">Правая</div>
<div id="lDiv">Левая</div>

</body>
</html>
...
Рейтинг: 0 / 0
11.06.2008, 12:23
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35369274
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Прокрутка горизонтальная не появляется...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
11.06.2008, 12:34
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35369459
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
Vint_xК сожалению IE не знает min-width.

поражаете. Для ИЕ придумана куча способов имитации этого свойства. Начиная от заумных и заканчивая тупо вставкой в страницу дива с заданной шириной.
...
Рейтинг: 0 / 0
11.06.2008, 13:22
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35369919
Necronominicon
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Necronominicon
Гость
Спасибо всем кто отписался в данной теме. Не ожидал, что мне так быстро и качественно могут. Пересмотрел все варианты и остановился на примере Vint_x , за что ему моя личная благодарность.
...
Рейтинг: 0 / 0
11.06.2008, 15:24
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35374960
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
зы
Участник
NecronominiconНо заранее целую в алые губки.
NecronominiconНе ожида л
ахтунг блин :-O

вообще нужна резиновая верстка - таблицы и в путь, нафиг эти дивы
...
Рейтинг: 0 / 0
16.06.2008, 16:20
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35375616
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
зы...таблицы и в путь, нафиг эти дивы...
Да. Правильно. Хотелось написать чего-то умное по поводу тысячного поста. Но, не могу не согласиться, что таблицы (которые ещё фиг знает когда были) - вариант лучший.
...
Рейтинг: 0 / 0
16.06.2008, 21:11
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35377792
Vint_x
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vint_x
Гость
Табличная вёрстка очень громоздкая и уже можно сказать "прошлый век".
...
Рейтинг: 0 / 0
17.06.2008, 16:31
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35378001
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
зы
Участник
да ну?
сделай мне такую хрень на дивах:


|----- резиновая колонка -----|--100px--|--50px--|


это одна строчка. Таких может быть много. По ширине строка занимает 100% от контейнера.
...
Рейтинг: 0 / 0
17.06.2008, 17:21
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35378455
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
Vint_xТабличная вёрстка очень громоздкая и уже можно сказать "прошлый век".
Двойка. Зато твёрдая.
...
Рейтинг: 0 / 0
17.06.2008, 20:33
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35378631
Vint_x
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vint_x
Гость
Руки просто должны рости откуда следует и всё можно дивами реализовать. Дело в том, что при вёртске дивами появляется такая проблема, чем руки кривее, тем почему то сложнее что то реализовать. ShSerge так что для начала сходи к пластическому хирургу, а потом оценки ставь.

Если есть сомнения, полистай работы, сделанные нормальными руками:
www.csszengarden.com
...
Рейтинг: 0 / 0
17.06.2008, 23:11
| Ответить | Цитировать | Написать  
Верстка дивами в две колонки. Помогите!!!
    #35378755
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
Vint_xРуки просто должны рости откуда следует и всё можно дивами реализовать. Дело в том, что при вёртске дивами появляется такая проблема, чем руки кривее, тем почему то сложнее что то реализовать. ShSerge так что для начала сходи к пластическому хирургу, а потом оценки ставь.

про зависимость сложности реализации от кривизны рук соглашусь. Но утверждение про "всё можно дивами реализовать" просто глупое. Если у Вас не хватает фантазии придумать то, что нельзя реализовать дивами, то это еще не значит, что у всех такое скудное воображение.

Возможно у меня тоже очень кривые руки и я не все знаю о дивной верстке. Давайте так - я привожу элементарный пример на таблицах, а Вы мне - полный аналог на дивах. Буду рада увидеть простой рабочий результат и взять свои слова о глупости Вашего утверждения обратно.

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
<table height="100%" width="100%" border="1">
<tr height="50"><td colspan="3">header</td></tr>
<tr>
	<td width="200"> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br></td>
	<td> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br></td>
	<td width="20%"> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br> 1 <br></td>
</tr>
<tr height="35"><td colspan="3">footer</td></tr>
</table>
...
Рейтинг: 0 / 0
18.06.2008, 03:13
| Ответить | Цитировать | Написать  
25 сообщений из 41, страница 1 из 2
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Верстка дивами в две колонки. Помогите!!!
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=331&tid=1456327]:
 0ms
get settings:
 7ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 74ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 36ms
get tp. blocked users:
 1ms
others: 240ms
total:  385ms
созд. / загр.: 385ms
x
x
Закрыть


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