Вопрос по CSS z-index в Шаблоне

[Koshsh]

делаю шаблон, точнее осталось только с выводом блока контента разобраться... для того чтоб затемнить фон этого блока, а потом поверх блока вставить рамку использую z-index. Для родителя где общий фон ставлю z-index:0, а для блока контента где надо вывести поверх затемненого фона рамку ставлю z-index:-1, по другому не работает... Так вот если так делать, то в FF и Opera при ниапример регистрации пользователя вывоодятся поля, которые не кликабельны, подскажите как исправить эту беду, запарился... смотреть здесь Для просмотра ссылки Войди или Зарегистрируйся

 

[UDAV]

Поля(форму) делай еще на одном слое, который будет выше всех остальных.

 

[bork75]

Собирать нужно так:

<div style="position:relative;">
  
  <div style="background: url(фон рамки) top left no-repeat; width:300px; height:300px; position:absolute; top:0; left:0;"></div>
  
  <div style="position:absolute; top:0; left:0;"> Здесь текст </div>

  <div style="position:absolute; top:0; left:0;"> Здесь форма </div>

</div>

 

[Koshsh]

Всем спасибо!!! Делаю шаблон для Joomla, поэтому не так все просто... идея такая, есть общий фон, есть затемненный фон блока в котором выводится позиция content, кроме того нужно вывести рамку которая растягивается в зависимости от наполнения content
делаю это как показал на сайте так:

<div style="background: url(картинка общего фона);
    position: relative;
    z-index: 0;>!!!!!!!!!!!!!!!!!!
  <div id="1top-left" style="width:660px; 
       background: url(картинка рамки снизу) no-repeat scroll 0 100% transparent;
       position:relative;
       margin-bottom:20px;">
     <div style="background: url(картинка рамки сверху) no-repeat scroll 0 0 transparent;
          position:relative;
          padding-left: 14px;
          padding-top: 15px;
          padding-bottom:15px;">
       <div style="  background-color: #Фон для затемнения;
             opacity: 0.8;
              padding-top: 2px;
             position: relative;
             width: 632px
            z-index: -1;">!!!!!!!!!!!!!!!!!!!!!!!!
           <jdoc:include type="component" />
</div>
</div>
</div>
</div>

но таким образом позиция component оказывается на нижнем слое, и соответственно не интерактивным для пользователя.
Может я в корне все делаю не так а?

 

[bork75]

Если это код из рабочего примера, то нужно ошибки все по убирать.
Не хватает одного закрывающегося </div>, кавычек нет 0;>. Все стили в строку. z-index не нужны.

Я написал выше рабочий пример.
Не знаю, почему не хочешь делать так. Вложения не удобны.
Для joomla я все шаблоны делаю сам и верстаю так же.

 

[Koshsh]

Если это код из рабочего примера, то нужно ошибки все по убирать.
Не хватает одного закрывающегося </div>, кавычек нет 0;>. Все стили в строку. z-index не нужны.
Я написал выше рабочий пример.
Не знаю, почему не хочешь делать так. Вложения не удобны.
Для joomla я все шаблоны делаю сам и верстаю так же.

Немного видоизменил воспользовавшись твоим советом относительно вложенности и все заработало =)))

<div style="position:relative; background:ОСНОВНОЙ ФОН;">
<div style="width:636px; background-color: #EEE8AA;opacity: 0.8; position:relative;margin-left:10px;">
							<div style="background: url(../images/verh.png) no-repeat scroll 0 100% transparent;width:660px;height:138px;position:absolute;top:-15px; left:-10px;"></div>
							<div style="background: url(../images/boka.png) repeat-y scroll -9px 0 transparent;position:relative; padding-bottom:20px; top:37px;Left:-1px; width:643px;">
						<jdoc:include type="message" />
						<jdoc:include type="component" />
						</div>
						<div style="background: url(../images/niz.png) no-repeat scroll 0 100% transparent; position:relative;top:15px;left:-10px;width:660px;height:96px;margin-bottom:25px;"></div>
				</div></DIV>

 

[bork75]

И не забудь, что opacity не поддерживается в IE ниже 9

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[alica]

И не забудь, что opacity не поддерживается в IE ниже 9
*** скрытое содержание ***

Но есть специальный фильтр, filter: alpha(opacity=70); так будет работать.

 

[Koshsh]

Да, с этим я в курсе, у меня как раз стоит условие на проверку броузеров и там на ИЕ фильтр filter: alpha(opacity=70);

 

[troop3r]

ни в коем случае не нужно использовать z-index: -1.

на одном из саттелитов мне сделали шапку, в итоге я сидел два часа втыкал, почему лого не кликабельное))

фишка в родительских z-index, их очередность, также position должен быть relative или absolute.