СSS+JS или таблицы?

zz84

Осваиваюсь на форуме
47
0 / 0
...

Возникла проблема. Верстаю "резиновый" шаблон из трех колонок. Хочу блочную верстку, но когда среднему DIV(он должен горизонтально тянуться) задаю 100%, он вытягивается на весь экран. При помощи JavaScript написал скрипт, на onLoad и onResize высчитываю ширину рабочей области минус ширину двух боковых колонок. Но у посетителя может быть отключен JS. Как альтернатива - вижу только таблицы. Может есть способ обойтись только блоками с CSS?

Записан

ARW

Захожу иногда
57
2 / 0

Re: СSS+JS или таблицы?

« Ответ #1 : 27.12.2009, 19:37:34 »

Цитата: zz84 от 27.12.2009, 17:42:29

Возникла проблема. Верстаю "резиновый" шаблон из трех колонок. Хочу блочную верстку, но когда среднему DIV(он должен горизонтально тянуться) задаю 100%, он вытягивается на весь экран. При помощи JavaScript написал скрипт, на onLoad и onResize высчитываю ширину рабочей области минус ширину двух боковых колонок. Но у посетителя может быть отключен JS. Как альтернатива - вижу только таблицы. Может есть способ обойтись только блоками с CSS?

а теперь еще раз и по-русски)))

Что вам даст таблица, чего не сможет дать тот же div в данном случае?

Записан

zz84

Осваиваюсь на форуме
47
0 / 0
...

Re: СSS+JS или таблицы?

« Ответ #2 : 27.12.2009, 19:43:14 »

Три DIV - три колонки. Ширина первой и третей - фиксированная. Вторая, та что посредине - тянется в ширину.
Как это можно сделать? Чтобы тянулась? Когда выставляю ширину средней - 100%, она растягивается на всю ширину экрана.

Записан

zz84

Осваиваюсь на форуме
47
0 / 0
...

Re: СSS+JS или таблицы?

« Ответ #3 : 27.12.2009, 19:45:58 »

Цитата: ARW от 27.12.2009, 19:37:34

а теперь еще раз и по-русски)))

Что вам даст таблица, чего не сможет дать тот же div в данном случае?

А таблица - ставил первой и третьей колонке 0%, и помещал там в каждую фиксированной ширины DIV, и работало.

Записан

ARW

Захожу иногда
57
2 / 0

Re: СSS+JS или таблицы?

« Ответ #4 : 27.12.2009, 20:19:27 »

тогда только таблица, хотя мне пришел в голову извращенный способ

делаем 2 слоя, на первом наш div 100% ширины и margin:0 {ширина боковой колонки};
ну и второй слой, через position: absolute; прижимая к краям.... Не знаю что получится, честно)))

Записан

zz84

Осваиваюсь на форуме
47
0 / 0
...

Re: СSS+JS или таблицы?

« Ответ #5 : 27.12.2009, 20:48:32 »

Я уже сверстал с JS и будь что будет...

Если кому-нибудь будет полезно, выкладываю. Большое спасибо, ARW
Функцию вызывать при onLoad() и onResize
У себя я поместил код функции не в теги script а в отдельный файл.

Код

<HEAD>

<script type="text/javascript">
function getTrueSize()
{ 
var cwidth= document.getElementById('columns').offsetWidth // здесь указываем ID Div, внутри которого содержатся все три колонки
var dwidth= cwidth-352 //здесь 352 - в моем случае совместная ширина двух боковых DIV, left_div + right_div
var wresult=dwidth + "px"
document.getElementById("center_div").style.width=wresult; // Задаем центральной тянущейся колонке размер
}
</script>

</HEAD>

<BODY onLoad="getTrueSize()" onResize="getTrueSize()" >

<div id="columns" style="width:100%">
<div id="left_div"style="width:176px; float:left;">Левая колонка</div><div id="center_div" style="float:left;">Центр, который растягиваем</div><div id="right_div" style="width:176px; float:left;">Правая колонка</div>
</div>

</BODY>

Преимущества - мало кода и чисто блочная верстка.
Недостатки - Если у посетителя отключен JS, то шаблон в броузере превратится в аццкую кашу, созданную для пришествия Нечистого в Мир.

« Последнее редактирование: 27.12.2009, 21:06:51 от zz84 »

Записан

ARW

Захожу иногда
57
2 / 0

Re: СSS+JS или таблицы?

« Ответ #6 : 27.12.2009, 22:13:52 »

Цитата: zz84 от 27.12.2009, 20:48:32

Недостатки - Если у посетителя отключен JS, то шаблон в броузере превратится в аццкую кашу, созданную для пришествия Нечистого в Мир.

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

« Последнее редактирование: 27.12.2009, 22:49:22 от ARW »

Записан

ARW

Захожу иногда
57
2 / 0

Re: СSS+JS или таблицы?

« Ответ #7 : 27.12.2009, 22:44:35 »

ну а вот собственно то, о чем я писал:

Код

<!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" xml:lang="en" lang="en">
<head>
	<title></title>
	<style type="text/css">
	body {
		background: black;
		margin: 0;
		padding: 0;
		width: 100%;
		height:auto;
	}
	
	.rcol,
	.lcol {
		background: blue;
		width: 200px;
		position: absolute;
		z-index: 2;
		top: 0;
	}
	
	.rcol {
		right: 0;
	}
	
	.lcol {
		left: 0;
	}
	
	.content {
	 width: 100%;
	 background: white;
	 padding: 0 200px;
	}
	</style>
</head>

<body>
<div class="lcol">somemodule</div>
<div class="content">somecontent</div>
<div class="rcol">somemodule</div>
</div>
</body>
</html>

много лишнего и есть ошибки, сами разберетесь, за 10 минут, много не сваяешь)))

З.Ы. Почистил.

« Последнее редактирование: 27.12.2009, 22:48:41 от ARW »

Записан

zz84

Осваиваюсь на форуме
47
0 / 0
...

Re: СSS+JS или таблицы?

« Ответ #8 : 28.12.2009, 00:01:01 »

Спасибо большое!

Это очень помогло... На будущее буду знать, как это делается..
Проверил во всех броузерах, кроме Apple Safari, работает отлично!

Записан

ARW

Захожу иногда
57
2 / 0

Re: СSS+JS или таблицы?

« Ответ #9 : 28.12.2009, 00:04:55 »

Цитата: zz84 от 28.12.2009, 00:01:01

Спасибо большое! Это очень помогло... На будущее буду знать, как это делается..
Проверил во всех броузерах, кроме Apple Safari, работает отлично!

Да не за что, работать будет во всех, не даю гарантии на IE6, т.к. отказался от разрешения меньше 1024px и собственно IE6. На ресурсе за месяц ни одного юзера с ним не было...

Записан

gdX

Глобальный модератор
995
128 / 0
Открыт к заказам по дизайну

Re: СSS+JS или таблицы?

« Ответ #10 : 28.12.2009, 11:44:13 »

А можно воспользоваться одним из сервисов построения html/css скелета.
О них уже писали на форуме.

Записан

Источник нашей мудрости — наш опыт. Источник нашего опыта — наша глупость.
Long train running

Как адаптировать таблицы под мобильную версию? Автор PNP	Ответов: 4 Просмотров: 2442	17.10.2021, 22:59:27 от darkghost
Выделение таблицы Автор Leo1986	Ответов: 14 Просмотров: 1199	10.10.2019, 19:09:08 от dm-krv
Выделение строки таблицы при наведении Автор March Cat	Ответов: 6 Просмотров: 3076	27.10.2018, 18:27:16 от effrit
Некорректное отображение таблицы в IE Автор Palochka	Ответов: 0 Просмотров: 2726	02.07.2015, 12:29:25 от Palochka
Стиль таблицы Автор Элана	Ответов: 6 Просмотров: 2396	24.06.2015, 21:27:57 от SeBun

СSS+JS или таблицы? - Вопросы по CSS

Новости Joomla

VKGallery — плагин вставки альбомов VK для Joomla.VKGallery — расширение для Joomla 3.x–5

Swiper.js, документация на русском языке

Модуль материалов Joomla на Vue.js.Модуль выводит материалы с помощью JavaScript фреймворка Vue.js

zz84

СSS+JS или таблицы?

ARW

Re: СSS+JS или таблицы?

zz84

Re: СSS+JS или таблицы?

zz84

Re: СSS+JS или таблицы?

ARW

Re: СSS+JS или таблицы?

zz84

Re: СSS+JS или таблицы?

ARW

Re: СSS+JS или таблицы?

ARW

Re: СSS+JS или таблицы?

zz84

Re: СSS+JS или таблицы?

ARW

Re: СSS+JS или таблицы?

gdX

Re: СSS+JS или таблицы?

Похожие темы