Несколько "class" одной части модуля. (php)

Тема в разделе "Создание шаблона", создана пользователем Killhar, 26.04.2011.

  1. Offline

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

    Регистрация:
    26.04.2011
    Сообщения:
    5
    Симпатии:
    0
    Пол:
    Мужской
    Уважаемые форумчане столкнулся со следующей проблемой. К модулю gk-tab от всеми известного Гавика необходимо сделать круглые углы с использованием изображений, также фон и ребра этого модуля. Все это задумывалось быть резиновым. Вообщем изображения я подготовил в CSS запихал. Добавил 9 дополнительных "class" этому модулю.
    Код (CODE):
    1. <div [COLOR="DarkRed"]class[/COLOR]="gk_tab_container0-<?php echo $this->config['styleSuffix']; ?>" style="<?php echo $style; ?>">  ///Вот к class этой стороки и задумывались дополнительные 9 class ниже.
    2.  
    3.  
    4.    
    5.  
    6. [b][COLOR="Blue"]<div class="tabtop1">
    7.         <div class="tabtop2">
    8.             <div class="tabtop3"></div>
    9.         </div>
    10.     </div>
    11.    
    12.     <div class="tabcenter1">
    13.         <div class="tabcenter2">
    14.             <div class="tabcenter3">
    15.            
    16.             </div>
    17.         </div>
    18.     </div>
    19.  
    20.     <div class="tabbottom1">
    21.         <div class="tabbottom2">
    22.             <div class="tabbottom3"></div>
    23.         </div>
    24.     </div>[/COLOR][/b]
    25.            
    26.         <div class="gk_tab_container1-<?php echo $this->config['styleSuffix']; ?> clearfix-tabs" style="<?php echo $style; ?>">
    27.            
    28.            
    29.             <div class="gk_tab_container2-<?php echo $this->config['styleSuffix']; ?> clearfix-tabs">
    30.                 <?php GKTabHelper::moduleRender(); ?>
    31.             </div>
    32.         </div>
    33.     </div>
    34.      
    35. <?php if($this->config['styleType'] == 0) : ?>
    36.     </div>
    37. <?php endif; ?>
    38. </div>



    Собственно вот что выделено я и добавил. Но только получилось так, что все это дело как бы не фоновое изображение. а обычное, которое сместило контент модуля в низ.

    Код (CODE):
    1. .clearfix-tabs { clear:both; }
    2. .gk_tab_item_space { padding:28px 0; }
    3. div.gk_tab_wrap-style1 { margin:0 auto; }
    4. div.gk_tab-style1 div.gk_ul_wrap { height:45px; }
    5. div.gk_tab-style1 { position:relative; }
    6. .gk_tab_news_image { margin:5px; }
    7.  
    8.  
    9. div.gk_tab_container0-style1 { clear:both; background: #060606 url('../images/dark_bg.png') repeat-x 0 0; border-top: 1px solid #444; margin:0; }
    10. div.gk_tab_container1-style1 { overflow:hidden; margin:0 23px; }
    11. div.gk_tab_item-style1 .gk_tab_news_info { font-size:90%; }
    12. div.gk_tab_item-style1 { float:left; overflow:hidden; padding:0; }
    13. ul.gk_tab_ul-style1 li:first-child { margin-left:0; }
    14. ul.gk_tab_ul-style1 li:hover { background-position:0 bottom; color:#fff; }
    15. ul.gk_tab_ul-style1 li { cursor:pointer; display:block; float:left; font-weight:bold; font-size:11px; height:32px; line-height:32px; margin-right:1px; padding:0 0 0 13px !important; text-decoration:none; text-transform: uppercase; width:auto; border:none !important; color:#888888; }
    16. ul.gk_tab_ul-style1 li span { border-right: 1px dashed #444; padding: 0 13px 0 0; }
    17. ul.gk_tab_ul-style1 li.active { background-position:0 top; color:#F6BF00; }
    18. ul.gk_tab_ul-style1 { overflow:hidden; padding:0; background:transparent; margin:0; border-top: 1px dashed #444 }
    19. #gk-container h4.gk_tab_news_header a:hover { color:#202020; }
    20. #gk-container h4.gk_tab_news_header a { color:#cf052b; }
    21. #gk-container h4.gk_tab_news_header { margin:6px 0; color:#555555; font-size:110%; }
    22. #gk-container div.gk_tab_container0-style1 { background:transparent; }
    23. [COLOR="Blue"]div.tabtop1 { background: url(../images/tabbox1.png) 0 0 no-repeat; }
    24. div.tabtop1 { background-position: 0 -90px; }
    25. div.tabtop2 { padding: 0px 10px 0px 10px; background: url(../images/tabbox1.png) 100% -15px no-repeat;}
    26. div.tabtop2 { background-position: 100% -105px; }
    27. div.tabtop3 { height: 10px; background: url(../images/tabbox1.png) 0 -30px repeat-x;}
    28. div.tabtop3 { background-position: 0 -120px; }
    29. div.tabcenter1 { background: url(../images/tabbox2.png) 0 0 repeat-y; }
    30.  
    31. div.tabcenter2 { padding: 0px 10px 0px 10px; background: url(../images/tabbox2.png) 100% 0 repeat-y;}
    32.  
    33. div.tabcenter3 { padding: 10px; background: url(../images/tabbox_bg.png) 0 0 repeat; overflow: hidden;}
    34. div.tabbottom1 { background: url(../images/tabbox1.png) 0 -45px no-repeat; }
    35. div.tabbottom1 { background-position: 0 -135px;}
    36. div.tabbottom2 { padding: 0px 10px 0px 10px; background: url(../images/tabbox1.png) 100% -60px no-repeat;}
    37. div.tabbottom2 { background-position: 100% -150px;}
    38. div.tabbottom3 { height: 10px; background: url(../images/tabbox1.png) 0 -75px repeat-x;}
    39. div.tabbottom3 { background-position: 0 -165px;}
    [/COLOR]

    Собственно это CSS данного модуля.

    [​IMG] На изображении, где надпись фон и есть то что должно получиться, но он должен охватить весь модуль, а не смещать контент модуля. div.gk_tab_container0-style1 вот если добавлять фон сюда, то все норм. Я не силен в php но думается мне что неправильно я с класс сделал. подскажите пожалуйста как правильно работать в этом случае с "class" и как для одного модуля сделать их несколько, в моем случае необходимо 9.



    Во общем создание дополнительных классов встречается во многих шаблонах, но как оно работает не понятно. метод подстановки не помог, а лишь добавил не понятностей.
     
    Последнее редактирование: 26.04.2011
  2.  
  3. Offline

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

    Регистрация:
    26.04.2011
    Сообщения:
    5
    Симпатии:
    0
    Пол:
    Мужской
    Появилась мысль, что каждому мною созданному дополнительному Class, необходимо прописать style или еще какие-нибудь уточняющие свойства, указывающие на точное действие. Но очень я не силен в php. Может кто-то уже делал нечто подобное. Единственное что мне говорили ранее, это способ добавления дополнительных Div-ов, но этот вариант не приемлем из-за своей багости и необходимости большого количества хаков к различным браузерам.
    p.s. Пробовал прописывать высоту моим классам, все растягивается как и должно, но смешается контент модуля...
     
  4. Offline

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

    Регистрация:
    26.04.2011
    Сообщения:
    5
    Симпатии:
    0
    Пол:
    Мужской
    Вопрос так и не решен. Неужели никто не сталкивался с данной проблемой.
     
  5. alex0603
    Offline

    alex0603 специалист

    Регистрация:
    25.11.2007
    Сообщения:
    417
    Симпатии:
    39
    Пол:
    Мужской
    используй firefox+firebug
    используй отрицательный magin
    используй css3 с border-radius в конце концов

    используй это всё и избавишься от гемороя.

    и да, элементам можно впаять хоть 30 классов сразу.

    div class="style1 style2 style3 .... style100500"

    а в ксс будет
    div.style1.style2.style3...style100500 {

    }
     
    Killhar нравится это.
  6. DKraev
    Offline

    DKraev <i>(aka gft)</i>

    Регистрация:
    16.08.2008
    Сообщения:
    1 627
    Симпатии:
    216
    Пол:
    Мужской
    Killhar, Вы где разместили контент модуля? Ниже конструкции, которую сами же написали. Не наталкивает на мысли почему на странице содержимое отображается ниже?
     
  7. Offline

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

    Регистрация:
    26.04.2011
    Сообщения:
    5
    Симпатии:
    0
    Пол:
    Мужской
    Меня это тоже смутило, но почему тогда во многих шаблонах что от рокет, что от ютем, встречается именно вариант создания дополнительных class ниже основного и контент у них не уезжает.
     

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

Загрузка...