Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Верстка дивами в две колонки. Помогите!!! / 25 сообщений из 41, страница 1 из 2
  1  все
11.06.2008, 08:56
    #35368539
Necronominicon
Necronominicon
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстка дивами в две колонки. Помогите!!!
Мужики, помогите!!! Нужно сверстать дивами две колонки. Но есть одна трудность: первая колонка должна быть резиновой, а у второй фиксированный размер. Все примеры, что я перелопатил предполагают верстку только либо процентами, либо фиксажом. Если кто знает как это сделать, то помогите!!!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.06.2008, 09:23
    #35368587
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстка дивами в две колонки. Помогите!!!
Почему "мужики". На форуме на эту тему как раз лучше всех illion отвечает, которая не мужик.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.06.2008, 09:24
    #35368595
Necronominicon
Necronominicon
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстка дивами в две колонки. Помогите!!!
ShSergeПочему "мужики". На форуме на эту тему как раз лучше всех illion отвечает, которая не мужик.
Я только вчера сюда попал, поэтому и не знаю никого тут...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.06.2008, 09:59
    #35368695
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстка дивами в две колонки. Помогите!!!
Necronominiconпервая колонка должна быть резиновой, а у второй фиксированный размер
Резиновой куда? Картинку покажи как нужно сделать... Вся верстка начинается "с картинки в твоем букваре" (с)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.06.2008, 10:04
    #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:08
    #35368723
Necronominicon
Necronominicon
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстка дивами в две колонки. Помогите!!!
illion, спасибо огромное!!! Сейчас попробую... Но заранее целую в алые губки. Спасибо!!!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.06.2008, 10:47
    #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, 11:04
    #35368907
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстка дивами в две колонки. Помогите!!!
конечно налезут, если уменьшить до определенных размеров. За этим программисту и нужна голова - чтоб думать. Посмотреть на основу, а потом привести ее к рабочему виду. Вставить в страницу див-распорку с min-width, например. Думаю она поможет.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.06.2008, 11:08
    #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:24
    #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:43
    #35369035
Vint_x
Vint_x
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстка дивами в две колонки. Помогите!!!
height: 100%; работает только в ИЕ.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.06.2008, 12:01
    #35369117
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстка дивами в две колонки. Помогите!!!
krvsa
Ага. Точно надо сделать форум, тынц - и всё видно.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
11.06.2008, 12:02
    #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:23
    #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:34
    #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, 13:22
    #35369459
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Верстка дивами в две колонки. Помогите!!!
Vint_xК сожалению IE не знает min-width.

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

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


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


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

Если есть сомнения, полистай работы, сделанные нормальными руками:
www.csszengarden.com
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.06.2008, 03:13
    #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
| Ответить | Цитировать | Написать  
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Верстка дивами в две колонки. Помогите!!! / 25 сообщений из 41, страница 1 из 2
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 438ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1456327]:
 0ms
get settings:
 12ms
get forum list:
 17ms
check forum access:
 5ms
check topic access:
 5ms
track hit:
 64ms
get topic data:
 13ms
get forum data:
 4ms
get page messages:
 84ms
get tp. blocked users:
 2ms
others: 232ms
total:  438ms
x
x
Закрыть


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