3-х колоночный шаблон с сайта CSSplay - ошибка автора?

[Sulpher]

Доброго времени суток. Я искал оптимальную реализацию вертикального растягивания колонок в CSS по аналогии со свойствами таблиц и сверстал шаблон, основываясь на примере от Ste Nicholls, выложенном на его сайте CSS_Play -исходник.

Итак, мой шаблон корректно отображается в Firefox 2.0, Opera 9. В Internet Explorer'е 7 левая колонка постоянно "скачет", смещаясь на пол экрана. В Safari колонка на несколько пикселей сдвинута вправо.

Пример выложил в сеть, можете посмотреть здесь .

Использована след. конструкция, с помощью которой достигается 3-хкол. макет:

#container_des {position:relative; display:block; background:url(../images/backgr.png); border-left:223px solid #170100; border-right:223px solid #170100; overflow:visible; padding-bottom:10px;}

#left_des {float:left; position:relative; width:222px; margin-left:-222px; display:inline;}

#right_des {float:right; position:relative; width:222px; margin-right:-222px; display:inline;}

.clear_des {clear:both;height:1px;overflow:hidden;}

HTML (шаблон для Joomla - не обращайте внимания на куски PHP-кода):

<?php

if (mosCountModules( "right" )) {

mosLoadModules ( 'right',-3);

}

?>

<?php

if (mosCountModules( "left" )) {

mosLoadModules ( 'left',-3);

}

?>

<?php mosMainBody(); ?>

Суффиксы модулей в данном случае не влияют - отключал, эффект тот же.

Второй, более глобальный глюк, объяснение которому я не могу найти: в некоторых моментах часть контента начинает выводиться в самом низу основого поля текста, сразу после самого нижнего модуля левого или правого краев (во всех браузерах). Во вложении картинка, которая наглядно демонстрирует данный глюк.

На моем сайте этот глюк появляется в двух случаях: в меню Community Builder и при использовании Ajax Vote от Joomla Works.

Касаемо этого примера, прошу опробовать:

http://polygon.cre-active.eu

user name: user

password: 111222111

Зайдите под данным профилем и кликните в "change my profile" - появится Community Builder и этот глюк. А вот здесь скриншот.

Курьезно, но причина именно в примере от Stu Nocholls (я специально убрал свой код и оставил чистый оригинал), ибо в др. шаблоне данного странного поведения не обнаруживается. Скорее всего, не прописано какое-то свойство или.... в общем, прошу помощи, ибо не знаю, в чем ошибка.

Я специально использовал исходник 3-х колоночного макета от гуру CSS верстки во избежании кривизны, но к сожалению, что-то не учтено. Должен заметить, что данный глюк появляется в некоторых случаях, т.к. если размещать обычный HTML текст, данной проблемы нет)

Очень прошу уважаемое сообщество помочь в решении данного вопроса, т.к. очень не хочется верстать табличным способом.

[yopopt]

Здравствуйте. Не могли бы Вы объяснить следующий код:

#container_des {position:relative; display:block; background:url(../images/backgr.png); border-left:223px solid #170100; border-right:223px solid #170100; overflow:visible; padding-bottom:10px;}

#left_des {float:left; position:relative; width:222px; margin-left:-222px; display:inline;}

#right_des {float:right; position:relative; width:222px; margin-right:-222px; display:inline;}

.clear_des {clear:both;height:1px;overflow:hidden;}

А конкретнее, зачем прописаны display:inline и position:relative? У Вас же указан float. Вообще в коде огромное количество мусора и ошибок... Разобраться сложно.

1. В #leftcol вместо margin используйте top:-20px;. Будет нормально работать в ие.

2. Это происходит из-за блока со свойством clear:both. Clear применяется для всего документа. Попробуйте блокам с классами cbPosTabMain и cbPosTop прописать overflow:hidden;

[Sulpher]

Спасибо Вам за ответ и советы, Yopopt!

А конкретнее, зачем прописаны display:inline и position:relative? У Вас же указан float. wink Вообще в коде огромное количество мусора и ошибок... Разобраться сложно.

Эти строки как раз и позаимствованы с примера 3-хколоночного макета (сайт CSSplay. )

Выходит, ошибка автора. Объяснить не могу, т.к. пока еще недостаточно разбираюсь в свойствах.

Сделал все, как Вы рекомендовали и теперь практически во всех работает!

В частности, убрал display:inline и position:relative в #left_des и #right_des. В результате в IE7, Firefox 2.0 и Opera 9 работает отлично. В IE6 пока не проверял. А вот в Safari левая колонка немного сдвинута вправо. Если указать margin-right:-240px вместо текущего значения 222px, в этом браузрере все нормально, но сдвигается, соответственнно, в других. Интересно, с чем это связано?

Попробуйте блокам с классами cbPosTabMain и cbPosTop прописать overflow:hidden;

Спасибо, это помогло!

Вы упоминали про ошибки и мусор в CSS. Проверял на валидацию - ошибок нет, кроме 17 предупреждений (это поправлю). Или Вы имеете ввиду так сказать, идеологию верстки? Пока постигаю CSS верстку, подозреваю, что какие-то моменты, на которые Вы обратили внимание, просто реализованы криво. Можете в двух словах прокомментировать по поводу серьезных ошибок в верстке? Хотелось бы знать, над чем стоит работать.

[Sulpher]

Я невнимательно прочитал Ваш совет по поводу margin'ов в #leftcol

Сделал по аналогии с top - вместо margin-right указал left:-19px и теперь работает.

Спасибо!

[Sulpher]

Все же я поторопился с поспешными выводами... Левая колонка все равно "скачет" в IE7, не смотря на то, что я убрал display:inline и position:relative в #left_des и #right_des...

[yopopt]

Вы упоминали про ошибки и мусор в CSS. Проверял на валидацию - ошибок нет, кроме 17 предупреждений (это поправлю). Или Вы имеете ввиду так сказать, идеологию верстки? Пока постигаю CSS верстку, подозреваю, что какие-то моменты, на которые Вы обратили внимание, просто реализованы криво. Можете в двух словах прокомментировать по поводу серьезных ошибок в верстке? Хотелось бы знать, над чем стоит работать.

В css вс? нормально за исключением бесполезных свойств. Много ошибок в html. В основном все ошибки из-за невнимательности. К примеру:

<a href='href='#' target=_self' target=_self

Ещ? я бы отметил излишнюю вложенность тегов. У Вас в той-же левой колонке пять вложенных дивов, а потом ещ? и таблица. Верстка с помощью блоков и css хороша тем, что код становится меньше и легче читаем. Может позже посмотрю полробней.

Все же я поторопился с поспешными выводами... Левая колонка все равно "скачет" в IE7, не смотря на то, что я убрал display:inline и position:relative в #left_des и #right_des...

Попробуйте ещ? z-index убрать. У Вас там их много прописано.

[Sulpher]

Проверил валидатором сайт с хостинга... Да, Вы правы - действительно, много мусора.

Он появляется из-за использования двух модулей CMS Joomla (модуль последних зарегистрированных пользователей компонента Community Builder и календарь), но там незначительные ошибки - border=0 вместо border="0" и аналогично, которые плодят плеяду однотипных ошибок (исправлю - на шаблон это, насколько понимаю, не влияет)...

Убрал все z:index, как Вы и советовали. Но макет все равно валится в IE6, увы...

Что же может так нарушать шаблон в IE6? Во всех остальных основных браузерах работает нормально.

[yopopt]

Хм, вроде на ie6 Вы не жаловались... Попробую разобраться.

Так, левая колонка неправильно позицируется, просто уберите position:relative; в #container_des.

C правой интересней. Что-то непонятное... Как-то двоится. Тогда возьм?м и разделим вс? на два.

#right_des {
	float: right;
	width: 111px;
	margin-right: -111px;
}

По поводу центрального блока. Он у Вас просто не влезает в отвед?нное для него пространство. Это происходит из-за особенностей работы float в ie6. Чтобы исправить уберите у #banner_j свойство width и в #banner_inner замените margin-left на padding.

P. S. Вообще стоит вс? переверстать, поскольку я(думаю и Вы) не могу положится что изменение чего-то одного не порушит что-нибудь другое.

[Sulpher]

Yopopt, Вы были абсолютно правы - в данном случае оптимальнее всего сверстать шаблон заново. Чем я и не применул заняться. В качестве каркаса был взят вот этот пример.

Теперь все работает как надо. Единственное, что вызывает нарекание - правая колонка постоянно обновляется, вместо того,чтобы кэшироваться. Причем отключал вывод модулей для этой колонки и их стили - обновляется даже чистый текст. Не могли бы Вы посмотреть?

Ссылка та же: http://polygon.cre-active.eu

У меня есть подозрение,что причина в структуре вывода блоков: первым идет leftcolumn, затем грузится средняя колонка с контентом, которая и создает торможение, поскольку контент отнимает какое-то время на загрузку. После чего грузится rightcol. Я, конечно же, не уверен в своем предположении, но мне кажется,что блок все же должен кэшироваться...

[yopopt]

У меня вс? замесательно кешируется. Да и не должно быть иного.

В коде есть ошибки. К примеру тег

. Не должно его быть, для выравниванися по центру используйте css свойство margin. Также странно видеть таблицу внутри span и тд. В целом код гораздо лучше предыдущего.

[Dimitry Wolotko]

Замесательно, насяльник =)))

[yopopt]

Замесательно, насяльник =)))

[mixar]

Посмотри статью, может поможет: Блочная верстка в 3 колонки

[Sulpher]

Спасибо за советы, господа!