Как это сделать без таблиц?

Асмодиан · 02.12.2008, 18:01

Итак, мы с Наташкой очень часто делаем диз, псевдорасширяющий сайт. Смысл такой. Сайт рисуется под большое разрешение (например под 1280), но контент реальный расположен внутри блока шириной в 990px.
Получается центральная колонка фиксированной ширины и две боковые, дополняющее до границ. В боковых колонках расположен бэкграунд причём в левой ориентированный по правой границе, в правой - по левой.
Результатом всего этого издевательства является то, что страница и на 1280 и на 1024 выглядит так, как будто рисовали специально под это разрешение. Пример вы можете увидеть на сайте http://www.eq2elite.ru

На практике решение оказывается чуть сложнее, чем я описал, используется таблица из 2-х строк, причём центральные ячейки объеденены. в угловые ячейки ещё дополнительно вставляются дивы, чтобы левая и правая колонки состояли из общего фона, верха и низа, но это детали. Главный фишка такая:
таблица, 3 колонки. Центральная фиксированна, левая и правая равной ширины, бэкграунд на левой колонке приаттачен к правому краю, бэкграунд на правой - к левому краю.
Сейчас я это делаю с помощью таблиц, более того, в центральную колонку приходиться вставлять img шириной в эту колонку, а то без него на некоторых браузерах сайт едет.

Можно ли осуществить такой же вот финт ушами БЕЗ использования таблиц.

PS. Над вариантами с использованием js, предложениями переделать всё во Flash с удовольствием посмеюсь.

kost · 02.12.2008, 18:36

Так в правой и левой колонке ничего нет, кроме фона?

Код:

<div id="background-left"><div id="background-right">

<div id="content">
... content ...
</div>

</div></div>

о назначении дивов можно догадаться из их названия.

Асмодиан · 02.12.2008, 19:03

Клёва, а теперь скажи как сделать так, чтоб правый и левый див заполняли страницу до конца, а центральный был ровно посреди страницы.

Добавлено через 1 минуту

то есть чтоб ширина правого и левого дивов стоставляла 50% - (content.width / 2)px

deMone · 02.12.2008, 19:37

.content {
margin: 0 25%;
}

.background-left, .background-right {
width: 25%;
}

?

Асмодиан · 02.12.2008, 22:47

Что замечательно будет работать в случае когда окно браузеро в 2 раза шире центральной колонки... А как быть со всеми остальными случаями?

PS. Кроме того необходимо, чтобы высота всех 3-х колонок была одинакова, хотя сами понимаете, высоту центральной предсказать нельзя - она зависит от контента...

sokol666 · 02.12.2008, 23:03

левый и правый див в ширину по 25% а центральный в ширину либо авто либо 50%. а несчет как заставить их быть одинаковыми по длинне самому узнать интересно

Асмодиан · 02.12.2008, 23:06

Читайте первый пост внимательно. Центральная колонка фиксированна!!!
при размере окна 990px левая и правая колонка становяться 0-й ширины и дальше сайт не уменьшается, но при растяжении на насколько угодно большую ширину центральная колонка остаётся в центре, а левая и правая занимают всё место от неё и до краёв

sokol666 · 02.12.2008, 23:49

ну я как обычно, сначала написал потом подумал что написал.

ну если центральная колонка фиксированная то это вообще херня какая то получается, или я просто не знаю как это правильно сделать

я думаю тут лучше таблицы оставить

deMone · 03.12.2008, 04:22

Код:

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="ru" lang="ru">
 <head>
  <style type="text/css">
	#center {
		background-color: #9acd32;
		margin: 0 auto;
		width: 600px;
	}

	#left {
		background-color: #9a32cd;
		float: left;
		width: 50%;
	}

	#right {
		background-color: #cd9a32;
		float: right;
		width: 50%;
	}

	.over {
		overflow: hidden;
	}
  </style>
  <script type="text/javascript">
	wSet = function() {
		w = (document.width - 600) / 2;
		document.getElementById('left').style.width = w + 'px';
		document.getElementById('right').style.width = w + 'px';
	}

	if (window.addEventListener) {
		window.addEventListener('load', wSet, false);
	} else {
		window.attachEvent('onload', wSet);
	}
  </script>
 </head>
 <body>
  <div class="over">
   <div id="left">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   </div>
   <div id="right">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   </div>
   <div id="center">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
   </div>
  </div>
  <p>Оно?</p>
 </body>
</html>

Без яваскрипта так и не придумал.

Scroll · 03.12.2008, 09:42

Особо не вникал, башка раскалывается после вчерашнего.

Цитата:

Сообщение от Makarenya

при размере окна 990px левая и правая колонка становяться 0-й ширины и дальше сайт не уменьшается

http://htmlbook.ru/css/min-width.html но эт не работает в ИЕ6 и ниже

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Макет, 3 колонки без таблиц	fanat_92	HTML, CSS, JavaScript	4	27.04.2008 17:23
Одинаковое отображение таблиц	Marick	HTML, CSS, JavaScript	3	27.09.2007 16:38
как делать округлые края таблиц?	chaynik	HTML, CSS, JavaScript	13	28.06.2007 14:52
Зацените сайт без таблиц	commander9191	Скамейка запасных	8	22.09.2006 21:42
Подскажите прогу для таблиц	MaharashtRa	HTML, CSS, JavaScript	18	18.01.2005 01:55

02.12.2008, 18:01	#1
Асмодиан	Итак, мы с Наташкой очень часто делаем диз, псевдорасширяющий сайт. Смысл такой. Сайт рисуется под большое разрешение (например под 1280), но контент реальный расположен внутри блока шириной в 990px. Получается центральная колонка фиксированной ширины и две боковые, дополняющее до границ. В боковых колонках расположен бэкграунд причём в левой ориентированный по правой границе, в правой - по левой. Результатом всего этого издевательства является то, что страница и на 1280 и на 1024 выглядит так, как будто рисовали специально под это разрешение. Пример вы можете увидеть на сайте http://www.eq2elite.ru На практике решение оказывается чуть сложнее, чем я описал, используется таблица из 2-х строк, причём центральные ячейки объеденены. в угловые ячейки ещё дополнительно вставляются дивы, чтобы левая и правая колонки состояли из общего фона, верха и низа, но это детали. Главный фишка такая: таблица, 3 колонки. Центральная фиксированна, левая и правая равной ширины, бэкграунд на левой колонке приаттачен к правому краю, бэкграунд на правой - к левому краю. Сейчас я это делаю с помощью таблиц, более того, в центральную колонку приходиться вставлять img шириной в эту колонку, а то без него на некоторых браузерах сайт едет. Можно ли осуществить такой же вот финт ушами БЕЗ использования таблиц. PS. Над вариантами с использованием js, предложениями переделать всё во Flash с удовольствием посмеюсь.

02.12.2008, 18:36	#2
kost	Так в правой и левой колонке ничего нет, кроме фона? Код: <div id="background-left"><div id="background-right"> <div id="content"> ... content ... </div> </div></div> о назначении дивов можно догадаться из их названия.

02.12.2008, 19:03	#3
Асмодиан	Клёва, а теперь скажи как сделать так, чтоб правый и левый див заполняли страницу до конца, а центральный был ровно посреди страницы. Добавлено через 1 минуту то есть чтоб ширина правого и левого дивов стоставляла 50% - (content.width / 2)px Последний раз редактировалось Асмодиан; 02.12.2008 в 19:03.. Причина: Добавлено сообщение

02.12.2008, 19:37	#4
deMone	.content { margin: 0 25%; } .background-left, .background-right { width: 25%; } ?

02.12.2008, 22:47	#5
Асмодиан	Что замечательно будет работать в случае когда окно браузеро в 2 раза шире центральной колонки... А как быть со всеми остальными случаями? PS. Кроме того необходимо, чтобы высота всех 3-х колонок была одинакова, хотя сами понимаете, высоту центральной предсказать нельзя - она зависит от контента...

02.12.2008, 23:03	#6
sokol666	левый и правый див в ширину по 25% а центральный в ширину либо авто либо 50%. а несчет как заставить их быть одинаковыми по длинне самому узнать интересно

02.12.2008, 23:06	#7
Асмодиан	Читайте первый пост внимательно. Центральная колонка фиксированна!!! при размере окна 990px левая и правая колонка становяться 0-й ширины и дальше сайт не уменьшается, но при растяжении на насколько угодно большую ширину центральная колонка остаётся в центре, а левая и правая занимают всё место от неё и до краёв

02.12.2008, 23:49	#8
sokol666	ну я как обычно, сначала написал потом подумал что написал. ну если центральная колонка фиксированная то это вообще херня какая то получается, или я просто не знаю как это правильно сделать я думаю тут лучше таблицы оставить

Опции темы
Версия для печати Отправить по электронной почте