Подложка под контент!!!

Тема в разделе "Изменение шаблона (кастомизация)", создана пользователем Stasilok, 12.06.2010.

  1. Offline

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

    Регистрация:
    12.06.2010
    Сообщения:
    18
    Симпатии:
    0
    Пол:
    Мужской
    Подскажите как с помощью кода реализовать подложку для текста чтобы она тянулась вмеесте с текстом или другим контентом! На рисунке пример:
    [​IMG]

    Код из Css:

    Код (CODE):
    1. .main_contents {
    2. float: left;
    3. width: 461px;
    4. background-image: url(../images/osn_content.png);
    5. font-family: "Century Gothic";
    6. font-size: 14px;
    7. color: #000;
    8. padding: 35px;
    9. font-weight: lighter;
    10. font-style: italic;
     
  2.  
  3. Kadavr
    Offline

    Kadavr специалист

    Регистрация:
    18.10.2007
    Сообщения:
    557
    Симпатии:
    39
    Пол:
    Мужской
    Добавьте background-repeat: repeat;
     
  4. Offline

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

    Регистрация:
    12.06.2010
    Сообщения:
    18
    Симпатии:
    0
    Пол:
    Мужской
    Попробовал... Картинка повторяться перестала при росте контента, но растягиваться не началась(((
     
  5. Kadavr
    Offline

    Kadavr специалист

    Регистрация:
    18.10.2007
    Сообщения:
    557
    Симпатии:
    39
    Пол:
    Мужской
    А, я не посмотрел внимательно - у вас там она с тенюшками и бордюром. Тогда надо ее делать из нескольких частей - верх, низ и растягивающаяся срединка, в которой и будет прописан repeat
     
    Stasilok нравится это.
  6. Offline

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

    Регистрация:
    12.06.2010
    Сообщения:
    18
    Симпатии:
    0
    Пол:
    Мужской
    Спасибо большое, Я так и думал в принципе... Сейчас реализовал и картинка потянулась =))) +1 вам =)
     
  7. Offline

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

    Регистрация:
    12.06.2010
    Сообщения:
    18
    Симпатии:
    0
    Пол:
    Мужской
    Но что заметил, что текс распологается только в той части которая тянется (т.е середина).. Реализовал так, может и ошибся в чем то, посмотрите!!!
    Код из CSS
    Код (CODE):
    1. .main_contents {
    2.     float: left;
    3.     width: 531px;
    4.     font-family: "Century Gothic";
    5.     font-size: 14px;
    6. }
    7. .main_contents_verh {
    8.     float: left;
    9.     height: 128px;
    10.     width: 531px;
    11.     background-image: url(../images/osn_content_verh.png);
    12. }
    13. .main_content_seredina {
    14.     background-image: url(../images/osn_content_seredina.png);
    15.     float: left;
    16.     width: 531px;
    17.     background-repeat: repeat;
    18. }
    19. .main_content_niz {
    20.     background-image: url(../images/osn_content_niz.png);
    21.     float: left;
    22.     height: 181px;
    23.     width: 531px;
    24. }


    Код из index.php

    Код (CODE):
    1. <div class="main_contents">
    2.     <div class="main_contents_verh"></div>
    3.        <div class="main_content_seredina">
    4.            <jdoc:include type="component" />
    5.        <jdoc:include type="modules" name="user1" style="xhtml" />
    6.        </div>
    7.      <div class="main_content_niz"></div>
    8. </div>


    А нужно чтобы текст начинался не с середины картинки!!
     
  8. Kadavr
    Offline

    Kadavr специалист

    Регистрация:
    18.10.2007
    Сообщения:
    557
    Симпатии:
    39
    Пол:
    Мужской
    Так сделайте верх и низ совсем небольшими по высоте: сама горизонтальная линия и закругления вниз и вверх. А все остальное -центральная часть.
     
  9. Offline

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

    Регистрация:
    12.06.2010
    Сообщения:
    18
    Симпатии:
    0
    Пол:
    Мужской
    То что было вверху, это был просто пример для наглядности!!! а картинку я использую - эту
    [​IMG]
     
    Последнее редактирование: 13.06.2010
  10. Offline

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

    Регистрация:
    12.06.2010
    Сообщения:
    18
    Симпатии:
    0
    Пол:
    Мужской
    И вот еще проблема в чем, текст уехал влево.... Пробовал в стилях ставить отступы, но не помогает, картинка "едет" вместе с текстом!!
    [​IMG]
     
  11. Kadavr
    Offline

    Kadavr специалист

    Регистрация:
    18.10.2007
    Сообщения:
    557
    Симпатии:
    39
    Пол:
    Мужской
    так стили-то надо к тексту применять, а не ко всему блоку
     
  12. Offline

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

    Регистрация:
    12.06.2010
    Сообщения:
    18
    Симпатии:
    0
    Пол:
    Мужской
    Все... Разобрался =))) Спасибо за помощь =)
     

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

Загрузка...