ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / DIVный макет с колонками высотой 100% и футером, прижатым к низу
25 сообщений из 48, страница 1 из 2
  1  все
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35419379
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
Опять на форуме всплыл вопрос о подобном дизайне (имею в виду Как бы такое сверстать? ). На эту тему уже
смотреть противно, она как кость в горле.

Для начала я решила найти в тырнете макет трех колонок одинаковой высоты. Готовый макет
нашелся, естественно, в первом же линке, выданном нигмой. Пример из линка . Решение
основано на применении рисунков в качестве бэкграунда, которые как бы "дорисовывают" левую
и правую колонки до нужной высоты.
К этому макету я приделала хедер с футером.

Результат в приложении и чуть ниже открытым кодом.

- Что получилось:
хедер, три колонки, футер всегда снизу даже при малом количестве текста на странице и при этом
не наезжает на текст при маленькой высоте окна (как то бывает при position:absolute). Левая и
центральная колонки занимают всю высоту от хедера до футера.
- Что не получилось:
объяснить правой колонке, что она тоже должна быть от хедера до футера. Найти общий язык с
Оперой.

Опера как не хотела всегда вовремя рендерить страницу, так и не хочет. Если растягивать макет
только вниз, то ниже футера появляется пустое место. Если после этого потянуть в ширину (или
сразу растягивать по ширине и высоте одновременно), то она вспоминает, что неплохо бы привести
страницу в соответствие с версткой. Править баги в Опере я не собираюсь, поэтому считаю, что не
получилось только организовать правильно правую колонку.


Код: 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.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
<!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" lang="en" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />

<title>трехколонный макет, футер снизу</title>

<style type="text/css">
html, body { margin:  0 ; padding:  0 ; height:  100 %; width:  100 %; }

#main {
	height: auto !important;
	height:  100 %;
	min-height:  100 %;
	margin:  0  auto;
	background: # 999  url(bg-left.gif) repeat-y left; 
	width:  100 %;
	min-width: 800px;
	width: expression(((document.documentElement.clientWidth || document.body.clientWidth) <  800 )? "800px" : "100%");
}
#header {
	background: #cda;
	height: 100px;
	margin:  0  auto -100px;
	position: relative;
}
#footer {
	background: #cad;
	height: 70px;
	margin: -70px auto  0 ;
	clear: both;
}
#columns {
	padding: 100px  0  70px  0 ;
	overflow: hidden;
	width:  100 %;
}
#wrap {
	float: left; width:  100 %; margin-right: -240px;
	background: # 999  url(bg-right.gif) repeat-y right;
}
#container {
	margin-right: 240px;
	height:  100 %;
	background: # 999  url(bg-left.gif) repeat-y left;
}
#left  { float: left;  width: 240px; background-color: #b0dbf2; }
#right { float: right; width: 240px; background-color: #abb3f8; }
#content { margin-left: 240px; background-color: # 999 ; }
</style>
</head>
<body>
<div id="header">header</div>	
<div id="main">
  <div id="columns">
    <div id="wrap">
	  <div id="container">
		<div id="left">
			left left left left left 
		</div>
		<div id="content">
			content <br>content content <br>content content <br>content content <br>content content content content 
		</div>
	  </div>
    </div>
    <div id="right">
	  right right right 
    </div>
  </div>
</div>
<div id="footer">
	footer footer footer footer footer 
</div>
</body>
</html>
Дополнительно к этому исходнику понадобятся еще два рисунка-фона для левой и правой колонок
(есть в приложении). Выглядят как узкие горизонтальные полоски цвета фона колонок.
...
Рейтинг: 0 / 0
09.07.2008, 10:09
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35419805
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Сейчас посмотрел пример в ИЕ... Если начать уменьшать размер по ширине многое налазит друг на друга.
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
09.07.2008, 11:43
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35420334
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
многое - это интересно что? Там все-таки не просто так ограничение стоит на мин.ширину - 800px.
...
Рейтинг: 0 / 0
09.07.2008, 13:55
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35424862
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
зы
Участник
АААА, там expression!! ахтунг
...
Рейтинг: 0 / 0
11.07.2008, 11:13
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35424906
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illionмногое - это интересно что?
Правая часть вытесняет всю середину...
...
Рейтинг: 0 / 0
11.07.2008, 11:20
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35426016
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
зыАААА, там expression!! ахтунг
а мне фиолетово, экспрешн там или нет. Не в нем счастье здесь. Не буду отрицать: экспрешн был бездумно скопипастен и заслуживает смерти.

krvsaПравая часть вытесняет всю середину...
а можно мне на почту пример? Так и не могу догнать, куда она ее вытесняет, а пытаться воспроизвести - лень :-).

P.S. Дивы, растянутые по высоте как таблица, - мечта идиота. Но от этого всё сильнее хочется таки макет добить.
...
Рейтинг: 0 / 0
11.07.2008, 16:26
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35426038
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illion , извиняюсь... Повторить не получается.
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
11.07.2008, 16:33
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35426059
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
ну и ладно, мне же легче. Я все равно дивами никогда таким макаром не верстаю :-).
...
Рейтинг: 0 / 0
11.07.2008, 16:39
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35429940
DocAl
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DocAl
Участник
illionхедер, три колонки, футер всегда снизу даже при малом количестве текста на странице и при этом
не наезжает на текст при маленькой высоте окна (как то бывает при position:absolute). Это, кстати, обычно лечится паддингом/маргином.
...
Рейтинг: 0 / 0
15.07.2008, 00:20
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35503552
div+table
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
div+table
Гость
Здравствуйте, помогите пожалуйста разобраться со следующей проблемой:
беру код приведенный illion , в слой "content" вставляю таблицу. Когда уменьшаю ширину экрана в IE6 до того, пока таблица не поместится в экран, весь контент спрыгивает вниз и позиционируется по высоте ниже левого меню (<div id="left">). Как с этим бороться? в FF, Опере все нормально. А то я уже не знаю что и делать. Заранее благодарю.
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<div id="content">
<table >
<tr>
     <td>wqrqwr</td>
     <td>sfgsdf_wqq</td>
     <td>wqrqwr</td>
     <td>sfgsdf_wqq</td>
     <td>wqrqwr</td>
     <td>sfgsdf_wqq</td>
     <td>wqrqwr</td>
     <td>sfgsdf_wqq</td>
     <td>wqrqwr</td>
     <td>sfgsdf_wqq</td>
</tr>
</table>
</div>
...
Рейтинг: 0 / 0
24.08.2008, 19:56
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35785160
Senya86
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Senya86
Гость
illion,

Ты реально думаешь, что можно написать макет (причем школьного уровня) и ставить его на показ на форуме!? Слушай и не стыдно тебе!? Ты сначала его протестируй нормально. А по поводу Opera: нормальный браузер, если руки ровные ;)
...
Рейтинг: 0 / 0
29.01.2009, 12:40
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35785991
Evgeniy_SH
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Evgeniy_SH
Участник
сколько уже лет прошло., а всё тот же вопрос, как же ёпт сделать на дивах несчастные три колонки с шапкой и подвалом... ;) то одно криво, то другое... тошниловка спошная... а разбираться ой как в ломы, ;) таблицей раз и готово...
...
Рейтинг: 0 / 0
29.01.2009, 16:13
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35786569
Фотография Ренат
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ренат
Участник
Evgeniy_SHсколько уже лет прошло., а всё тот же вопрос, как же ёпт сделать на дивах несчастные три колонки с шапкой и подвалом... ;) то одно криво, то другое... тошниловка спошная... а разбираться ой как в ломы, ;) таблицей раз и готово...
+2 256
...
Рейтинг: 0 / 0
29.01.2009, 20:08
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35786834
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
Senya86illion,

Ты реально думаешь, что можно написать макет (причем школьного уровня) и ставить его на показ на форуме!? Слушай и не стыдно тебе!? Ты сначала его протестируй нормально.

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

А Вам, уважаемый Senya86, не стыдно за то, что вместо того, чтоб просто выложить здесь суперпрофессиональный работающий макет, Вы загромождаете тему комментариями "школьного уровня"? Так дайте же людям то, что им нужно, покажите Ваше решение.
...
Рейтинг: 0 / 0
30.01.2009, 00:27
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35786861
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
порылась в закромах, нашла таки ссылку:

Кросс-браузерный резиновый трёхколоночный макет в высоту окна

сорри что сразу сюда не вставила после отыскания, забыла про эту тему. Честно говоря, не разбиралась как работает, знаю только что в ие6 и фф2+ поддерживается точно.
...
Рейтинг: 0 / 0
30.01.2009, 00:58
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35786864
Фотография Frenzy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Frenzy
Участник
[quote]я реально думаю, что писать подобный макет на дивах - это тупизм. Тратить свое время на доскональное тестирование тупизма я нужным не считаю.[/quote]

правильно, время не надо тратить. но это ещё не значит, что нужно опускаться до таблиц. есть Blueprint, YAML, YUI Grids, ...

_______________________________________
2pro4U
...
Рейтинг: 0 / 0
30.01.2009, 01:01
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35786872
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
Frenzy,

не считаю, что до таблиц нужно "опускаться". Их нужно использовать по мере необходимости, в том числе иногда можно задействовать их и в верстке макетов.

П.С. что-то опять запахло бесконечным холиваром "таблицы vs дивы" :-)
...
Рейтинг: 0 / 0
30.01.2009, 01:29
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35786884
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
Да ну ... надоели эти споры. Их развивать могут только тупые десигнеры с ограниченным кругозором. Как говорится, кесарю кесарево, а дизайну - универсализм! Не комбинировать тейблы и дивы - это или идиотский принцип, или отсталость взглядов (читай - тупиковая ветвь "моды").
...
Рейтинг: 0 / 0
30.01.2009, 01:56
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35787109
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
ShSerge
Участник
IDVsbruck,

В принципе, любому юзеру сайта совершенно по барабану на дивах или ещё на чём. Красиво, юзабельно - и хорошо.
...
Рейтинг: 0 / 0
30.01.2009, 09:32
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35787224
Фотография Antonariy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Antonariy
Участник
Даёшь таблицы на дивах!
...
Рейтинг: 0 / 0
30.01.2009, 10:14
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35787617
интересующийся предметом
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
интересующийся предметом
Гость
а можно в двух словах в каком месте правильней использовать див, а в каком - таблицу? или ссылочкой поделитесь. желательно - русскоязычной :)
...
Рейтинг: 0 / 0
30.01.2009, 11:56
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35787644
Evgeniy_SH
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Evgeniy_SH
Участник
на мой взгляд, обыному пользователю(бабушка, дедушка, просто гопник) его никаким образом не волнует, див-ли, таблица-ли... нужно представить информацию и не более... а всё рассусоливания на тему див или таблица, тухлая тема... как нравится или как умешь так и делай... ;) наши поезда самые поездатые поезда...
...
Рейтинг: 0 / 0
30.01.2009, 12:03
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35787815
интересующийся предметом
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
интересующийся предметом
Гость
"как умеешь" я уже сделал, теперь хочу осознать "как правильно" =))
...
Рейтинг: 0 / 0
30.01.2009, 12:42
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35787864
Фотография Vlad-Miami
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vlad-Miami
Участник
Да, и вправду чушь. Мы всегда верстаем так
Код: plaintext
<table><table><div></div></table></table>
и позишининг абсолютный вполне с этой структурой работает, в то время как только див остается релатив. Упрощает верстку.
...
Рейтинг: 0 / 0
30.01.2009, 12:56
| Ответить | Цитировать | Написать  
DIVный макет с колонками высотой 100% и футером, прижатым к низу
    #35787900
Фотография Vlad-Miami
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vlad-Miami
Участник
Vlad-MiamiДа, и вправду чушь. Мы всегда верстаем так
Код: plaintext
<table><table><div></div></table></table>
и позишининг абсолютный вполне с этой структурой работает, в то время как только див остается релатив. Упрощает верстку.

Да и вообще, народ, не увлекайтесь так процессом, это не секс, это программирование :) Тут важен результат, а не процесс ))))))))))
...
Рейтинг: 0 / 0
30.01.2009, 13:03
| Ответить | Цитировать | Написать  
25 сообщений из 48, страница 1 из 2
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / DIVный макет с колонками высотой 100% и футером, прижатым к низу
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=35786864&tid=1455208]:
 0ms
get settings:
 5ms
get forum list:
 12ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 261ms
get topic data:
 9ms
get forum data:
 3ms
get page messages:
 79ms
get tp. blocked users:
 1ms
others: 201ms
total:  575ms
созд. / загр.: 575ms
x
x
Закрыть


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