ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Помогите с версткой DIV, надо резиновый дизайн..........
12 сообщений из 12, страница 1 из 1
Помогите с версткой DIV, надо резиновый дизайн..........
    #35035335
armix2000
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
armix2000
Участник
вот пример кода

Код: 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.
58.
59.
60.
61.
62.
63.
64.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
html, body {
    margin: 0 ;
    padding: 0 ;
    height: 100 %;
}
#main {

    height: 100 %;
	bottom: 20px;
}
#header {
    width:500px;
    height: 10 %;
	float: left;
    background: #EEE;
}
#content {
    float:left;
    width:500px;
    height: 100 %;
    background:#19CAFF;
    padding-top:100px;
	float: left;
    margin-top:-100px;
}
#sidebar {
    float:left;
    width:200px;
    height: 100 %;
    background:#B9CAFF;
    padding-top:100px;
	float: left;
    margin-top:-100px;
}
div.inner { margin-top:100px;}
#clear {
    clear:both;
}

/* Îáùèé ñòèëü äëÿ âñåõ ñëîåâ */
div {
	border:  0pt solid;
}

</style>
</head>
<body>
<div id="main">
<div id="header">sggs</div>
  <div id="clear"></div>
  <div id="sidebar">
      <div class="inner">sidebar</div>
  </div>
  <div id="content">
      <div class="inner">content</div>
  </div>
  <div id="clear"></div>
</div>
</body>
</html>

Как сделать так, чтобы sidebar и content занимали всю вертикаль, оставшуюся после слоя header?

У меня не получается!
...
Рейтинг: 0 / 0
26.12.2007, 14:23
| Ответить | Цитировать | Написать  
Помогите с версткой DIV, надо резиновый дизайн..........
    #35035485
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
У меня даже слов sggs не видно... Просто две полоски вертикальные с sidebar и content ... Использую ИЕ 6.
----------
Cache for Windows NT (Intel) 5.0.20 (Build 6305) Fri Sep 16 2005 11:54:10 EDT
...
Рейтинг: 0 / 0
26.12.2007, 15:03
| Ответить | Цитировать | Написать  
Помогите с версткой DIV, надо резиновый дизайн..........
    #35035496
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Даже вертикальная прокрутка есть

----------
Cache for Windows NT (Intel) 5.0.20 (Build 6305) Fri Sep 16 2005 11:54:10 EDT
...
Рейтинг: 0 / 0
26.12.2007, 15:06
| Ответить | Цитировать | Написать  
Помогите с версткой DIV, надо резиновый дизайн..........
    #35037088
armix2000
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
armix2000
Участник
krvsaДаже вертикальная прокрутка есть

----------
Cache for Windows NT (Intel) 5.0.20 (Build 6305) Fri Sep 16 2005 11:54:10 EDT






Извините код был не тот, уточняю

Код: 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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
html, body {
    margin: 0 ;
    padding: 0 ;
    height: 100 %;
}
#main {
    width:700px;
    height: 100 %;
    margin: 0  auto;
}
#header {
    margin: 0 ;
    height:100px;
    background: #EEE;
    position:relative
}
#content {
    float:left;
    width:500px;
    height: 100 %;
    background:#19CAFF;
    padding-top:100px;
    margin-top:-100px;
}
#sidebar {
    float:left;
    width:200px;
    height: 100 %;
    background:#B9CAFF;
    padding-top:100px;
    margin-top:-100px;
}
div.inner { margin-top:100px;}
#clear {
    clear:both;
}
</style>
</head>
<body>
<div id="main">
  <div id="header">header</div>
  <div id="sidebar">
      <div class="inner">sidebar</div>
  </div>
  <div id="content">
      <div class="inner">content</div>
  </div>
  <div id="clear"></div>
</div>
</body>
</html>


Без слоя header два других слоя нормально упираются вниз окна без прокруутки, а когда появляется сверху слой <div id="header">header</div> появляется прокрутка вниз, как сделать так, чтобы при наличии слоя <div id="header">header</div> два других слоя упирались в край браузера без появления прокрутки?
...
Рейтинг: 0 / 0
27.12.2007, 11:06
| Ответить | Цитировать | Написать  
Помогите с версткой DIV, надо резиновый дизайн..........
    #35037977
ambarka_max
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ambarka_max
Участник
А в каком месте тут резиновость?

Может вот это посмотришь? http://www.alistapart.com/articles/holygrail

P.S.
В Вилларибо и Виллабаджо опять дедлайн.
Пока ребята из Вилларибо верстают сайт дивами, ребята из Виллабаджо уже всё сверстали на таблицах и %@!# друг друга в ку2.
скажи стандартам “нуна$#@!”.
...
Рейтинг: 0 / 0
27.12.2007, 15:07
| Ответить | Цитировать | Написать  
Помогите с версткой DIV, надо резиновый дизайн..........
    #35038159
armix2000
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
armix2000
Участник
ambarka_maxА в каком месте тут резиновость?

Может вот это посмотришь? http://www.alistapart.com/articles/holygrail

P.S.
В Вилларибо и Виллабаджо опять дедлайн.
Пока ребята из Вилларибо верстают сайт дивами, ребята из Виллабаджо уже всё сверстали на таблицах и %@!# друг друга в ку2.
скажи стандартам “нуна$#@!”.


Не получается и с этим примером, мне нужно просто 3 дива, 1 сверху, 2 и 3 под ним заполняют все пустое пространство по вертикали, не вызывая линейку прокрутки.
...
Рейтинг: 0 / 0
27.12.2007, 15:57
| Ответить | Цитировать | Написать  
Помогите с версткой DIV, надо резиновый дизайн..........
    #35039196
ambarka_max
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ambarka_max
Участник
попробуй так, но это иллюзия...
Код: 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 HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
html, body {
    margin: 0 ;
    padding: 0 ;
    height: 100 %;
}
#main {
    width:700px;
    height: 100 %;
    margin: 0  auto;
}
#header {
    margin: 0 ;
    height:100px;
    width:700px;
    background: #EEE;
    position:absolute;
    top:0px;
}
#content {
    float:left;
    width:500px;
    height: 100 %;
    background:#19CAFF;
    padding-top:100px;
    margin-top:-100px;
}
#sidebar {
    float:left;
    width:200px;
    height: 100 %;
    background:#B9CAFF;
    padding-top:100px;
    margin-top:-100px;
}
div.inner { margin-top:100px;}
#clear {
    clear:both;
}
</style>
</head>
<body>
<div id="main">  
  <div id="sidebar">
      <div class="inner">sidebar</div>
  </div>
  <div id="content">
      <div class="inner">content</div>
  </div>
  <div id="clear"></div>
  <div id="header">header</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
28.12.2007, 09:56
| Ответить | Цитировать | Написать  
Помогите с версткой DIV, надо резиновый дизайн..........
    #35039984
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
ambarka_max , думаю, что вся твоя "проблема" в разнотипном указании высоты дивов. Когда она "однотипная" - все нормально
Код: 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.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
html, body {
    margin: 0 ;
    padding: 0 ;
    height: 100 %;
}
#main {
    width:700px;
    height: 100 %;
    margin: 0  auto;
}
#header {
    margin: 0 ;
    height: 10 %;
    background: #EEE;
    position:relative
}
#content {
    float:left;
    width:500px;
    height: 90 %;
    background:#19CAFF;
    padding-top:100px;
    margin-top:-100px;
}
#sidebar {
    float:left;
    width:200px;
    height: 90 %;
    background:#B9CAFF;
    padding-top:100px;
    margin-top:-100px;
}
div.inner { margin-top:100px;}
#clear {
    clear:both;
}
</style>
</head>
<body>
<div id="main">
  <div id="header">header</div>
  <div id="sidebar">
      <div class="inner">sidebar</div>
  </div>
  <div id="content">
      <div class="inner">content</div>
  </div>
  <div id="clear"></div>
</div>
</body>
</html>
Прокрутка у тебя появляется потому, что два дива пыжутся стать 100%-ной высоты, "назная", что горизонтальный уже "отъел" 100px...
----------
Cache for Windows NT (Intel) 5.0.20 (Build 6305) Fri Sep 16 2005 11:54:10 EDT
...
Рейтинг: 0 / 0
28.12.2007, 13:26
| Ответить | Цитировать | Написать  
Помогите с версткой DIV, надо резиновый дизайн..........
    #35039996
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
ambarka_maxВ Вилларибо и Виллабаджо опять дедлайн.
Это понравилось всему нашему отделу!

Извини, что к тебе обращался в сообщении выше, это я автору писал...
...
Рейтинг: 0 / 0
28.12.2007, 13:30
| Ответить | Цитировать | Написать  
Помогите с версткой DIV, надо резиновый дизайн..........
    #35040114
lancerAnt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
lancerAnt
Гость
Лишних дивов дофига и параметров!
...
Рейтинг: 0 / 0
28.12.2007, 14:13
| Ответить | Цитировать | Написать  
Помогите с версткой DIV, надо резиновый дизайн..........
    #35040369
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
lancerAnt , ты свой вариант давай. Нет толку от твоей "критики"...
----------
Cache for Windows NT (Intel) 5.0.20 (Build 6305) Fri Sep 16 2005 11:54:10 EDT
...
Рейтинг: 0 / 0
28.12.2007, 15:29
| Ответить | Цитировать | Написать  
Помогите с версткой DIV, надо резиновый дизайн..........
    #35040701
lancerAnt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
lancerAnt
Гость
Доктайп XHTML strict 1.0 поставил.. зачем тебе HTML'ный то? Сейчас спрос XHTML..

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
<!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>
<style type="text/css">
*{margin: 0 ; padding: 0 ; border: 0 }
html,body{height: 100 %}
#main{width:700px; height: 100 %; margin: 0  auto}
#header{margin: 0 ; height: 10 %; background:#EEE}

#content{float:left;width:500px; height: 90 %;background:#19CAFF}
#sidebar {float:right; width:200px; height: 90 %; background:#B9CAFF}
</style>
</head>

<body>
<div id="main">
  <div id="header">header</div>
  <div id="sidebar">sidebar</div>
  <div id="content">sidebar</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
28.12.2007, 17:02
| Ответить | Цитировать | Написать  
12 сообщений из 12, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Помогите с версткой DIV, надо резиновый дизайн..........
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=35035496&tid=1457137]:
 0ms
get settings:
 9ms
get forum list:
 14ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 67ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 54ms
get tp. blocked users:
 2ms
others: 14ms
total:  179ms
созд. / загр.: 179ms
x
x
Закрыть


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