Наложение картинки фона поверх шаблона

Тема в разделе "Внешний вид, шаблоны, графика", создана пользователем annflower1, 17.11.2010.

  1. annflower1
    Offline

    annflower1 Недавно здесь

    Регистрация:
    28.08.2010
    Сообщения:
    29
    Симпатии:
    0
    Пол:
    Женский
    Всем привет, сдела новый шаблончик для сайта, да вот закралась проблемка с одной из картинок фона. Есть картинка topmenu2.png (нижние части рук, так как верхняя часть является шапкой шаблона) края у неё с фоном, а центр прозрачный (сделан специально, чтобы при наложении были видны статьи сайта.

    [​IMG]

    Так вот начала я её прописывать в .css

    когда прописываю как #top {

    Код (html):
    1. #top {
    2. margin:0 -354px;
    3.     background-position:center top;
    4.     background-color: transparent;
    5.     background-image:url(../images/topmenu2.png);
    6.     background-repeat:no-repeat;
    7.         padding:0;
    8.         width:1665px;
    9.         height: 290px;
    10. }


    получается ерунда, текст уезжает вниз
    [​IMG]

    когда прописываю как #bg_up {

    Код (html):
    1. #bg_up {
    2. margin:0 -354px;
    3.     background-position:center top;
    4.     background-color: transparent;
    5.     background-image:url(../images/topmenu2.png);
    6.     background-repeat:no-repeat;
    7.         padding:0;
    8.         width:1665px;
    9.         height: 290px;
    10. }


    то не вижу эту картинку на сайте вобще(
    [​IMG]

    А должен сайт http://guards.ordenos.ru/ выглядеть вот так, чтобы ручки были на месте и на уровне текста
    [​IMG]

    Подскажите, кто может помочь, что яд елаю не так, и что я должна написать в css, чтобы картинка корректно отображалась на сайте.
     
  2.  
  3. woojin
    Offline

    woojin Местный Команда форума => Cпециалист <=

    Регистрация:
    31.05.2009
    Сообщения:
    3 206
    Симпатии:
    334
    Пол:
    Мужской
    попробуй сюда:
    добавь overflow: hidden;
    или поиграй с z-index'ами
     
  4. annflower1
    Offline

    annflower1 Недавно здесь

    Регистрация:
    28.08.2010
    Сообщения:
    29
    Симпатии:
    0
    Пол:
    Женский
    Код (html):
    1. #top {
    2. margin:0 -354px;
    3.     background-position:center top;
    4.     background-color: transparent;
    5.     background-image:url(../images/topmenu2.png);
    6.     background-repeat:no-repeat;
    7.         padding:0;
    8.         width:1665px;
    9.         height: 290px;
    10.         overflow: hidden;
    11. }


    прописала, но текст все-равно уехал вниз(

    а вот это не поняла, :[с чем поиграть и что там сделать то?

    или поиграй с z-index'ами
     
  5. woojin
    Offline

    woojin Местный Команда форума => Cпециалист <=

    Регистрация:
    31.05.2009
    Сообщения:
    3 206
    Симпатии:
    334
    Пол:
    Мужской
    z-index - это положение элемента относительно других по оси Z, т.е. если рассматривать экран как лист бумаги то это будет положение данного листка относительно остальных ВЫШЕ(над) или НИЖЕ(под)

    ясно?
     
  6. annflower1
    Offline

    annflower1 Недавно здесь

    Регистрация:
    28.08.2010
    Сообщения:
    29
    Симпатии:
    0
    Пол:
    Женский
    о, это понятно да)) только где с ними играть то в css?
     
  7. annflower1
    Offline

    annflower1 Недавно здесь

    Регистрация:
    28.08.2010
    Сообщения:
    29
    Симпатии:
    0
    Пол:
    Женский
    Я так поняла мне надо текст теперь двигать вверх? ума не приложу где это делать
     
  8. woojin
    Offline

    woojin Местный Команда форума => Cпециалист <=

    Регистрация:
    31.05.2009
    Сообщения:
    3 206
    Симпатии:
    334
    Пол:
    Мужской
    естественно в CSS
    всё в том же CSS

    ищи тег в который у тебя заключён твой текст, у этого тега есть или класс или ID и поле этого ищи в CSS соответствующий класс или ID и в нём добавляй margin-top: -(какое то число - опытным путём подберёшь)px; пример:
    Код (CODE):
    1. margin-top: -150px;

    будешь подбирать опытным путём если не умеешь пользоваться FB*
     

Поделиться этой страницей

Загрузка...