z-index не работает

[Chingi]

CMS Version: 1.10.3
Версия Apache 2.2.17
Версия PHP 5.2.17
Версия MySQL 5.1.62-cll

Шаблон встал не корректно, а именно не работает z-index. Ошибок в коде нет, проверял во многих браузерах.. не отображается только на данном движке CMS Made Simple.

Code: Select all

#wrapper {
	width: 955px;
	margin: 0 auto;
	height: 100%;
	position: relative;
	z-index: 1;
}

#header-bg {
	width: 100%;
	height: 512px;
	position: absolute;
	top: 0;
	z-index: 0;
	background: #e3eeff;
	box-shadow: 0 0 20px #666666;
	filter: progid:DXImageTransform.Microsoft.dropshadow(offX=0, offY=0, color=#999999);
	filter: progid:DXImageTransform.Microsoft.shadow(direction=180, color=#999999, strength=8);
}

Мне принципиальна работа атрибута z-index, т.к. мне и так пришлось убрать -moz-box-shadow и -webkit-box-shadow из-за некорректной работы на ЭТОМ движке.

p.s.: переделал пост по форме из форума README FIRST. надеюсь на понимание. я так же обнаружил, что по запросу "z-index" в поиске выводит достаточно большое количество ссылок (значит тема актуальна), жаль я не владею английским языком.

[guro]

Добрый день.

Несколько замечаний

Ошибок в коде нет, проверял во многих браузерах.. не отображается только на данном движке CMS Made Simple.

Не путайте браузер и систему управления сайтом. CMS Made Simple всего лишь формирует из заложенных в неё шаблонов и БД html код, который отправляет пользователю по http протоколу (и это серверная часть). В свою очередь пользователь просматривает этот html код в браузере (клиентская часть). И на то, как будет отображать конкретный браузер полученный html код cmsms повлиять не может.

Если вы проверяли голый html на разных браузерах и он работает, а после вставки этого кода в cmsms он перестал работать, то проверьте что же всё таки выдает cmsms конечному пользователю. Какие отличия вашего голого html кода от того, что сформировала cms-ка. Идентичен ли он вашему или всё таки есть отличия?
Только что проверил ваш код на cmsms 1.10.3 - всё работает.

И ещё

мне и так пришлось убрать -moz-box-shadow и -webkit-box-shadow из-за некорректной работы на ЭТОМ движке.

Опять же. Никакого отношения к любой cms эти параметры не имеют.
-moz-box-shadow - этот атрибут работает только в FireFox http://htmlbook.ru/css/-moz-box-shadow
-webkit-box-shadow - а этот только в Safari и Chrome http://htmlbook.ru/css/-webkit-box-shadow

[Chingi]

Не путайте браузер и систему управления сайтом. CMS Made Simple всего лишь формирует из заложенных в неё шаблонов и БД html код, который отправляет пользователю по http протоколу (и это серверная часть). В свою очередь пользователь просматривает этот html код в браузере (клиентская часть). И на то, как будет отображать конкретный браузер полученный html код cmsms повлиять не может.

Здравствуйте, Уважаемый Кэп! Спасибо за столь подробное разъяснение понятий и принципа работы web-страницы. Школьный курс по информатики за 8 класс усвоен на отлично!

Если вы проверяли голый html на разных браузерах и он работает, а после вставки этого кода в cmsms он перестал работать, то проверьте что же всё таки выдает cmsms конечному пользователю. Какие отличия вашего голого html кода от того, что сформировала cms-ка. Идентичен ли он вашему или всё таки есть отличия?
Только что проверил ваш код на cmsms 1.10.3 - всё работает.

Отличие в том, что я вставил в голый шаблон теги cms и тем самым натянул его на систему управления. Что конкретно я должен проверить? как cms сгенерировала по тегу путь к .css? на сколько я знаю кроме тегов ничего само в коде, а тем более в стилях не должно изменяться и переписываться..

Опять же. Никакого отношения к любой cms эти параметры не имеют.
-moz-box-shadow - этот атрибут работает только в FireFox http://htmlbook.ru/css/-moz-box-shadow
-webkit-box-shadow - а этот только в Safari и Chrome http://htmlbook.ru/css/-webkit-box-shadow

И опять же большое спасибо! Когда я верстал этот шаблон, я, наверное, просто так прописал эти параметры в стили, чисто так.. для красоты!
По сабжу: факт остается фактом. Признаюсь, я сам был очень удивлен такому поведению шаблона на данной cms.

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

[Chingi]

В продолжение к моему ответу Ув. guro.

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

То, что должно быть:
http://dmitriyzaharov.ru/work/index.html
Скриншот на случай, если модер затрет ссылку

То, что в итоге получилось (z-index):
http://work.dmitriyzaharov.ru/
Скриншот

На счет -moz-box-shadow и -webkit-box-shadow я снимаю свои претензии, прошу прощения. До этого косо отображалось только на cms в браузере Хром (когда голый шаблон в том же хроме показывал как запланировано), сейчас установил Мозиллу последней версии, в ней тень на шаблоне повела себя одинакого не правильно, что на cms, что голым кодом (а ведь когда проверял в мозиле за чужим компьютером, все было ок! возможно старой версии браузер там... да и честно не знаю я, влияет ли это). Одна Опера отобразила все прекрасно.

Соглашусь, что z-index не сильно в данном случае играет, но поймите и меня.. мне надо сделать как на макете, и упускать из виду подобные мелочи не приемлемо.

Если найдете ошибку, буду весьма признателен.

[guro]

Проверил ваши страницы.
Всё работает правильно в Opere 11.62, Firefox 12.0, Chrome.
Единственное отличее на страницах - это наличие слова "Home" внутри тега <head></head> на странице work.dmitriyzaharov.ru. Подозреваю что это должен быть титл, т.е. должно быть <title>Home</title>. Проверьте шаблон в cmsms. Это слово сдвигает блоки вниз.
А так всё отображается корректно.

Да, z-index здесь не причем.

[Chingi]

Единственное отличее на страницах - это наличие слова "Home" внутри тега <head></head> на странице work.dmitriyzaharov.ru. Подозреваю что это должен быть титл, т.е. должно быть <title>Home</title>. Проверьте шаблон в cmsms. Это слово сдвигает блоки вниз.

Весьма благодарен! Действительно мой косяк, при адаптации не правильно прописал тег {title}.
поставил

Code: Select all

{title}

вместо

Code: Select all

<title>{title}</title>

а я и не заметил это.. свою верстку перепроверил, про адаптацию забыл
Еще раз спасибо! Извиняюсь за доставленные неудобства.

[Chingi]

Code: Select all

<head>
<!--[if IE]>
<style type="text/css">
#middle {border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999;}
</style>
<![endif]-->
</head>

А вот это движок, похоже, точно не воспринимает
На выходе выдает только так:

Code: Select all

<head>
<!--[if IE]><style type="text/css">#middle</style><![endif]-->
</head>

[guro]

Всё логично. Это же smarty шаблоны. А в smarty знак { говорит шаблонизатору, что сейчас будет переменная или функция. Для того чтобы в шаблонах использовать фигурные скобки их всегда нужно заключать в специальный тег {literal}. Соответственно ваш код будет выглядеть следующим образом:

Code: Select all

<head>
<!--[if IE]>
<style type="text/css">
{literal}
#middle {border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999;}
{/literal}
</style>
<![endif]-->
</head>

А ещё советую почитать документацию http://www.smarty.net/
При разработке сайтов на cmsms будет очень полезным.