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

Уважаемые форумчане столкнулся со следующей проблемой. К модулю 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 данного модуля.

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



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

 

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

 

Вопрос так и не решен. Неужели никто не сталкивался с данной проблемой.

 

используй firefox+firebug
используй отрицательный magin
используй css3 с border-radius в конце концов

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

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

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

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

}

 

Killhar, Вы где разместили контент модуля? Ниже конструкции, которую сами же написали. Не наталкивает на мысли почему на странице содержимое отображается ниже?

 

Меня это тоже смутило, но почему тогда во многих шаблонах что от рокет, что от ютем, встречается именно вариант создания дополнительных class ниже основного и контент у них не уезжает.