Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Помогите с версткой DIV, надо резиновый дизайн.......... / 12 сообщений из 12, страница 1 из 1
26.12.2007, 14:23
    #35035335
armix2000
armix2000
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите с версткой DIV, надо резиновый дизайн..........
вот пример кода

Код: 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, 15:03
    #35035485
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите с версткой DIV, надо резиновый дизайн..........
У меня даже слов 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:06
    #35035496
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите с версткой DIV, надо резиновый дизайн..........
Даже вертикальная прокрутка есть

----------
Cache for Windows NT (Intel) 5.0.20 (Build 6305) Fri Sep 16 2005 11:54:10 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.12.2007, 11:06
    #35037088
armix2000
armix2000
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите с версткой DIV, надо резиновый дизайн..........
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, 15:07
    #35037977
ambarka_max
ambarka_max
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите с версткой DIV, надо резиновый дизайн..........
А в каком месте тут резиновость?

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

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

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

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


Не получается и с этим примером, мне нужно просто 3 дива, 1 сверху, 2 и 3 под ним заполняют все пустое пространство по вертикали, не вызывая линейку прокрутки.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.12.2007, 09:56
    #35039196
ambarka_max
ambarka_max
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите с версткой DIV, надо резиновый дизайн..........
попробуй так, но это иллюзия...
Код: 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, 13:26
    #35039984
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите с версткой DIV, надо резиновый дизайн..........
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:30
    #35039996
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите с версткой DIV, надо резиновый дизайн..........
ambarka_maxВ Вилларибо и Виллабаджо опять дедлайн.
Это понравилось всему нашему отделу!

Извини, что к тебе обращался в сообщении выше, это я автору писал...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.12.2007, 14:13
    #35040114
lancerAnt
lancerAnt
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите с версткой DIV, надо резиновый дизайн..........
Лишних дивов дофига и параметров!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.12.2007, 15:29
    #35040369
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите с версткой DIV, надо резиновый дизайн..........
lancerAnt , ты свой вариант давай. Нет толку от твоей "критики"...
----------
Cache for Windows NT (Intel) 5.0.20 (Build 6305) Fri Sep 16 2005 11:54:10 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.12.2007, 17:02
    #35040701
lancerAnt
lancerAnt
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите с версткой DIV, надо резиновый дизайн..........
Доктайп 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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Помогите с версткой DIV, надо резиновый дизайн.......... / 12 сообщений из 12, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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