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

Тема в разделе "Веб-дизайн", создана пользователем Koshsh, 23 апр 2011.

Модераторы: zek24
  1. Koshsh

    Koshsh Постоялец

    Регистр.:
    6 мар 2010
    Сообщения:
    75
    Симпатии:
    1
    делаю шаблон, точнее осталось только с выводом блока контента разобраться... для того чтоб затемнить фон этого блока, а потом поверх блока вставить рамку использую z-index. Для родителя где общий фон ставлю z-index:0, а для блока контента где надо вывести поверх затемненого фона рамку ставлю z-index:-1, по другому не работает... Так вот если так делать, то в FF и Opera при ниапример регистрации пользователя вывоодятся поля, которые не кликабельны, подскажите как исправить эту беду, запарился... смотреть здесь http://restoranharbin.ru.swteh.ru/index.php?option=com_user&view=register
     
  2. UDAV

    UDAV

    Регистр.:
    22 июн 2007
    Сообщения:
    776
    Симпатии:
    153
    Поля(форму) делай еще на одном слое, который будет выше всех остальных.
     
  3. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.451
    Симпатии:
    677
    Собирать нужно так:

    PHP:
    <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>

     
  4. Koshsh

    Koshsh Постоялец

    Регистр.:
    6 мар 2010
    Сообщения:
    75
    Симпатии:
    1
    Всем спасибо!!! Делаю шаблон для Joomla, поэтому не так все просто... идея такая, есть общий фон, есть затемненный фон блока в котором выводится позиция content, кроме того нужно вывести рамку которая растягивается в зависимости от наполнения content
    делаю это как показал на сайте так:
    HTML:
    
    <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 оказывается на нижнем слое, и соответственно не интерактивным для пользователя.
    Может я в корне все делаю не так а?
     
  5. bork75

    bork75 The Team

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

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

    Koshsh Постоялец

    Регистр.:
    6 мар 2010
    Сообщения:
    75
    Симпатии:
    1
    Немного видоизменил воспользовавшись твоим советом относительно вложенности и все заработало =)))
    PHP:
    <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>
     
  7. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.451
    Симпатии:
    677
  8. alica

    alica

    Регистр.:
    28 июл 2008
    Сообщения:
    243
    Симпатии:
    76
    Но есть специальный фильтр, filter: alpha(opacity=70); так будет работать.
     
  9. Koshsh

    Koshsh Постоялец

    Регистр.:
    6 мар 2010
    Сообщения:
    75
    Симпатии:
    1
    Да, с этим я в курсе, у меня как раз стоит условие на проверку броузеров и там на ИЕ фильтр filter: alpha(opacity=70); :)
     
  10. troop3r

    troop3r Постоялец

    Регистр.:
    14 ноя 2009
    Сообщения:
    138
    Симпатии:
    22
    ни в коем случае не нужно использовать z-index: -1.

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

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