CSS: верстка в колонки (задачка для профи) @ DeForum.ru

0 Сообщения: 61 Зарегистрирован: 28.07.03

есть страница, http://www.orlis.ru/

<div id="#content">
ля-ля-ля

<div id="#news">
ля-ля-ля
</div>
<div id="#goods">
ля-ля-ля
</div>

</div>

<div id="toc">
ля-ля-ля
</div>

#content { margin: 0 0 0 29ex; padding: 1ex 3ex 3ex; border-left: #706 solid 0.5ex; }
#toc { position: absolute; top: 0; left: 0; width: 29ex; }

Задача:
сверстать #news и #goods в две колонки (как сделано сейчас, но без таблицы)
размеры в пикселях задавать нельзя, ибо резиновая верстка

проблема: совместимость броузеров, прежде всего с IE 5.0

А зачем это делать ДИВами? Ну да ладно, поступаем таким образом:

<style>
#news {position: absolute; margin: 0; padding: 1ex 3ex 3ex; left: 20%; top: 50px; width: 40%}
#goods {position: absolute; margin: 0; padding: 1ex 3ex 3ex; left: 60%; top: 50px; width: 40%}
#toc { position: absolute; top: 0; left: 0; width: 20%; }
</style>
<div id="news">
news ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля
</div>

<div id="goods">
goods ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля ля-ля-ля
</div>

<div id="toc">
toc ля-ля-ля
</div>

amphibian, Угу, у него одна колонка с фиксированной шириной

0 Сообщения: 61 Зарегистрирован: 28.07.03

Решение найдено, все свободны

<div id="frame">

<div id="#news">
ля-ля-ля
</div>
<div id="#goods">
ля-ля-ля
</div>

</div>

#frame { width:100%; }
#news { float:left; width:57%; padding-right: 1ex; }
#goods { float:right; width:41%; }

Если кому и в правду интересно, проверьте http://www.orlis.ru/ в 4й версиях Netscape и IE,
у меня их нет под рукой.

да и вообще в чем придется...

Под шкаф так не будет работать - проверил. А ссылка не открывается.

Орлис, удовлетвори любопытство: зачем так напрягаться?

Почему не таблицами? В ногу с прогрессом?

Цитата:

Под шкаф так не будет работать - проверил

а так в нетшкафе? :

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<style>
.frame { width:100%; background-Color: black;} 
.news { float:left; width:50%; padding-right: 1ex; background-Color: green;} 
.goods { float:right; width:50%; background-Color: red;}
</style>
</head>
<body>

  <layer class="frame" bgcolor=black>
  <nolayer>
<div class="frame">
  </nolayer> 

  <layer class="news" bgcolor=green>
  <nolayer>
<div class="news">
  </nolayer> 

  ля-ля-ля

  <nolayer>
</div>
  </nolayer> 

  <layer class="goods" bgcolor=red>
  <nolayer>
<div class="goods">
  </nolayer> 

  ля-ля-ля

  <nolayer>
</div>
  </nolayer> 

  <nolayer>
</div>
  </nolayer>
 
 
</body>
</html> 

CutCopyPaste, при изменении размеров окна схлопывается в левый угол до размера текста

А что случилось с левой колонкой? Куда она пропала?

amphibian, она пошла погулять.…

на самом деле, у меня в шкафу все ОК,
у тя какая версия?

CutCopyPaste, 4.72 :laugh:

Цитата:

она пошла погулять.…

Вот это подход, я понимаю! :laugh:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>

<style>
.frame { width:100%; background-Color: black;} 
.news { float:left; width:50%; padding-right: 1ex; background-Color: green;} 
.goods { float:right; width:50%; background-Color: red;}
</style>

</head>

<body>

  <layer class="frame" bgcolor=black>
  <nolayer>
<div class="frame">
  </nolayer> 

  <layer class="news" bgcolor=green>
  <nolayer>
<div class="news">
  </nolayer> 

  ля-ля-ля

  <nolayer>
</div>
  </nolayer> 

  <layer class="goods" bgcolor=red>
  <nolayer>
<div class="goods">
  </nolayer> 

  ля-ля-ля

  <nolayer>
</div>
  </nolayer> 

  <nolayer>
</div>
  </nolayer>
 
 
</body>
</html>

а так?

вобщем,
пока нетскейп окончательно не сдохнет :killanasshole:

с дивами и кссами можно сильно помучиться...

CutCopyPaste, перегружать при каждом изменении размера?

Это не может не работать! Осталось только левую колонку поставить на место и все!
Что-то я слышал что Microsoft купило Netscape и закрыло эту тему с броузерами.

amphibian,
Не, AOL шкафное отделение не продало, зато заключило партнерское соглашение с Microsoft'ом - типа на аоловских дисках будет поставляться как дефолтный браузер. А шкафное отделение убыточно, часть людей ушла в opensourceовскую Мозиллу, часть еще куда. Шкафов больше не будет - факт.

hokum, а кстати, шкаф 7-ой версии довольно неплохой браузер

CutCopyPaste, Да так себе. Все они неплохие.
Будут хорошими тогда, когда мысли научатся читать

0 Сообщения: 61 Зарегистрирован: 28.07.03

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<layer class="frame" bgcolor=black>
<nolayer>
<div class="frame">
</nolayer>

код не соответствует указанному DOCTYPE, он вообще ничему не соответствует

по поводу #frame, #news, #goods:
похоже Netscape неправильно считает проценты... если б знать как он их считает, то можно ему подсовывать нужный CSS.

или просто убрать описание float, самое грамотное решение, но, наверное, не самое изящное.

Орлис, так все-таки, почему нужно именно слоями все решать, а не таблицами?

0 Сообщения: 61 Зарегистрирован: 28.07.03

1) w3.org не рекомендует использовать таблицы на потеху оформления
2) сайт нормально смотрится в Lynx, на Palme, PocketPC (проверено),
таблицы в этих условиях просто издевательство.
3) сайт быстрее грузится
4) это "модно", среди тех, кто разбирается

26 Сообщения: 6283 Зарегистрирован: 03.01.02

Орлис, давайте честно признаемся: первые три пункта можно смело вычеркнуть.

так ведь?

oLL...

MiRo, как раз первые три пункта наиболее важны.
В том числе и для тех, о ком идет речь в четвертом :glasses:

1) w3c вообще много чего рекомендует. А разве w3c рекомендует юзать слои? w3c рекомендует css и теги div/span.
И кстати оформление и сетка суть разные вещи.
Более того, сами таблицы HTML взяты из таблиц SGML, а в SGML их сделали на основе типографской сетки.

http://www.w3.org/TR/html4/struct/tables.html
http://www.w3.org/TR/html4/appendix/not … tes-tables

ИМХО, что бы кто-то там (напр. организация американского, француского и японского институтов, известная как w3c) не рекомендовал, лоб-то лучше не расшибать.

2) Хау мач оф юзерс (реальных ваших клиентов) смотрят через Lynx, Palm и PocketPC. Цифры — в студию.
Если процент будет большой, сделайте версию для экзо-клиентов.

3) А циферки?

4) Любой сайт существует заведомо дольше краткосрочной моды. И если моду понимать как «нравится, но не могу словами объяснить», то не факт, что разработчику веб-сайтов надо за такой модой следовать.

0 Сообщения: 61 Зарегистрирован: 28.07.03

Цитата:

w3c рекомендует css и теги div/span

об том и речь

Цитата:

А циферки?

Вы все свои решения проверяете на статистически значимой репрезентативной выборке?

Орлис писал(а):

Вы все свои решения проверяете на статистически значимой репрезентативной выборке?

Нет, конечно.
Но и не использую в качестве аргументов то, что не проверено.

Потому как, в данном случае, загрузка сайта вещь измеряемая.
Подсчет посещений + браузер клиента тоже.
Без цифр такими вещами лучше не аргументировать.

Орлис писал(а):

об том и речь

У меня-то был вопрос о слоях. Они вообще не входят в спецификацию, не говоря уж о рекомендациях.

0 Сообщения: 61 Зарегистрирован: 28.07.03

Цитата:

<div id="frame">

<div id="#news">
ля-ля-ля
</div>
<div id="#goods">
ля-ля-ля
</div>

</div>

#frame { width:100%; }
#news { float:left; width:57%; padding-right: 1ex; }
#goods { float:right; width:41%; }

вопрос не ко мне

Мда, мисандестендинг...

Я-то прочитав в последнем постинге о слоях,
так понял, что Вы приняли решение использовать именно их.
Сорри.

Кстати, поделитесь подробностями о пальмиках.
Как именно этот код (приведенный Вами) воспринимается на Palm или PocketPC (и чем именно он лучше таблиц).

Кстати, задайте слоям еще параметр overflow: scroll,
чтобы они не «поехали» в случае, если получат контент больший чем их габариты.
По умолчанию overflow установлен visible, что означает, что элемент будет стараться охватить собой контент, не взирая на установленные размеры.

0 Сообщения: 61 Зарегистрирован: 28.07.03

В PocketPC 2002 -- IE3.x, он игнорирует описание стилей, поэтому сайт на мизерном экране верстается в академическом стиле, в один столбец без горизонтальной прокрутки.

Аналогично и на Palm, только там единого браузера нет, например, iSiloX понимает стили color, background, border-color и в нем опционально можно настроить игнорирование стилей margin, padding.

0 Сообщения: 61 Зарегистрирован: 28.07.03

Цитата:

параметр overflow: scroll

смысл "резиновой" верстки избежать прокрутки и заполнить все окно браузера, поэтому scroll в данном случае не подходит.

Если туда будет положено что-то, что по размерам больше отмеренного, то ваша страница вылезет за границу окна браузера.

Этот параметр не влияет на размер, он определяет, как элементу поступать в случае превышения предписанных размеров. Типичный пример: текст из нескольких слов в теге <nobr>.

0 Сообщения: 61 Зарегистрирован: 28.07.03

это параметр предписывает создать горизонтальную и вертикальную полосы прокрутки, независимо от содержимого бокса

Сорри, писал по памяти,
сейчас глянул в доку,
правильный параметр auto.
Он создаёт полосы, только когда это необходимо.

По поводу скорости загрузки:
Самый распространённый броузер отображает сайт свёрстаный таблицей лишь когда загрузит всю эту таблицу.
АФАИК только Мозилла умеет отрисовывать таблицы динамически.
DIV отрисовывается по мере заргузки, поэтому контент отбражается скорее.
Кроме того при ЦСС вёрстке не проблема первым пустить контент, а навигацию и рюшечки после. Можно так таблицами?
Да и сам вес страниц уменьшается в большинстве случаев.
Пример: http://www.digital-web.com/tutorials/tutorial_2002-06.shtml
Был ещё где-то пример с первой страницей Яхи, но не помню где. Там тоже был солидный выигрыш.

<sergio.ga> писал(а):

Кроме того при ЦСС вёрстке не проблема первым пустить контент, а навигацию и рюшечки после. Можно так таблицами?

Таблица нужна для создания сетки, а не рюшечек.
Таблица ничем не отличается от других тегов HTML по возможностям использования CSS.

<sergio.ga> писал(а):

Пример: http://www.digital-web.com/tutorials/tutorial_2002-06.shtml
Был ещё где-то пример с первой страницей Яхи, но не помню где. Там тоже был солидный выигрыш.

Мда, офигительно солидный выигрыш — 19.6 против 21.8.
Целых 1.2 килобайта.

И это при том, что эти ребята сами подбирали пример :wink:

И сами его верстали. При этом верстали весьма своеобразно.
Их концепция вёрстки спорна.
Но даже при всём этом выигрыш получается 1.2 К.
Если они не могут дать приличный пример, то что же говорить о «полевых» условиях.

0 Сообщения: 61 Зарегистрирован: 28.07.03

>Skeeve
существует такая "модная" фишка как технология разделения содержимого от представления

Если всё делать по уму, то можно радикально менять оформление сайта, изменяя одинственный файл CSS
Если ты представление страницы забил в "сетку" таблицы, то переписывать придется каждую страницу.

пример: http://www.orlis.ru

Сначала раздел "Новости" и "Новые товары" шли один за другим, а теперь верстаются в две колонки.
содержание не изменилось, код страницы практически тоже (пришлось добавить <div id="frame"> из-за багов старых версий броузеров).

При табличной верстке пришлось бы переверстывать много чего дополнительно, так как изменилось число строк и рядов в "сетке".

существуют и другие преимущества, как для разработчиков сайта, так и для тех кто на сайт ходит,
но это уже offtopic.

DeДверь
Логин:
Пароль:
	Автологин