Новости Joomla

0 Пользователей и 1 Гость просматривают эту тему.
  • 10 Ответов
  • 2340 Просмотров
*

zz84

  • Осваиваюсь на форуме
  • 47
  • 0 / 0
  • ...
СSS+JS или таблицы?
« : 27.12.2009, 17:42:29 »
Возникла проблема. Верстаю "резиновый" шаблон из трех колонок. Хочу блочную верстку, но когда среднему DIV(он должен горизонтально тянуться) задаю 100%, он вытягивается на весь экран. При помощи JavaScript написал скрипт, на onLoad и onResize высчитываю ширину рабочей области минус ширину двух боковых колонок. Но у посетителя может быть отключен JS. Как альтернатива - вижу только таблицы. Может есть способ обойтись только блоками с CSS?
*

ARW

  • Захожу иногда
  • 57
  • 2 / 0
Re: СSS+JS или таблицы?
« Ответ #1 : 27.12.2009, 19:37:34 »
Возникла проблема. Верстаю "резиновый" шаблон из трех колонок. Хочу блочную верстку, но когда среднему 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 »
а теперь еще раз и по-русски)))

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

ARW

  • Захожу иногда
  • 57
  • 2 / 0
Re: СSS+JS или таблицы?
« Ответ #4 : 27.12.2009, 20:19:27 »
тогда только таблица, хотя мне пришел в голову извращенный способ  crazy!
делаем 2 слоя, на первом наш div 100% ширины и margin:0 {ширина боковой колонки};
ну и второй слой, через position: absolute; прижимая к краям.... Не знаю что получится, честно)))

*

zz84

  • Осваиваюсь на форуме
  • 47
  • 0 / 0
  • ...
Re: СSS+JS или таблицы?
« Ответ #5 : 27.12.2009, 20:48:32 »
Я уже сверстал с JS и будь что будет...  ;D Если кому-нибудь будет полезно, выкладываю. Большое спасибо, 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 »
Недостатки - Если у посетителя отключен 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 »
Спасибо большое!  ^-^ Это очень помогло... На будущее буду знать, как это делается..
Проверил во всех броузерах, кроме Apple Safari, работает отлично!

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

gdX

  • Глобальный модератор
  • 995
  • 128 / 0
  • Открыт к заказам по дизайну
Re: СSS+JS или таблицы?
« Ответ #10 : 28.12.2009, 11:44:13 »
А можно воспользоваться одним из сервисов построения html/css скелета.
О них уже писали на форуме.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как адаптировать таблицы под мобильную версию?

Автор PNP

Ответов: 4
Просмотров: 2443
Последний ответ 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
Просмотров: 2727
Последний ответ 02.07.2015, 12:29:25
от Palochka
Стиль таблицы

Автор Элана

Ответов: 6
Просмотров: 2398
Последний ответ 24.06.2015, 21:27:57
от SeBun