Уважаемые форумчане столкнулся со следующей проблемой. К модулю gk-tab от всеми известного Гавика необходимо сделать круглые углы с использованием изображений, также фон и ребра этого модуля. Все это задумывалось быть резиновым. Вообщем изображения я подготовил в CSS запихал. Добавил 9 дополнительных "class" этому модулю.
<div class="gk_tab_container0-<?php echo $this->config['styleSuffix']; ?>" style="<?php echo $style; ?>">
[b]<div class="tabtop1"<?php echo $style; ?>>
<div class="tabtop2"<?php echo $style; ?>>
<div class="tabtop3"<?php echo $style; ?>></div>
</div>
</div>
<div class="tabcenter1"<?php echo $style; ?>>
<div class="tabcenter2"<?php echo $style; ?>>
<div class="tabcenter3 deepest"<?php echo $style; ?>>
</div>
</div>
</div>
<div class="tabbottom1"<?php echo $style; ?>>
<div class="tabbottom2"<?php echo $style; ?>>
<div class="tabbottom3"<?php echo $style; ?>></div>
</div>
</div>[/b]
<div class="gk_tab_container1-<?php echo $this->config['styleSuffix']; ?> clearfix-tabs" style="<?php echo $style; ?>">
<div class="gk_tab_container2-<?php echo $this->config['styleSuffix']; ?> clearfix-tabs">
<?php GKTabHelper::moduleRender(); ?>
</div>
</div>
</div>
<?php if($this->config['styleType'] == 0) : ?>
</div>
<?php endif; ?>
</div>
Собственно вот что выделено я и добавил. Но только получилось так, что все это дело как бы не фоновое изображение. а обычное, которое сместило контент модуля в низ.
.clearfix-tabs { clear:both; }
.gk_tab_item_space { padding:28px 0; }
div.gk_tab_wrap-style1 { margin:0 auto; }
div.gk_tab-style1 div.gk_ul_wrap { height:45px; }
div.gk_tab-style1 { position:relative; }
.gk_tab_news_image { margin:5px; }
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; }
div.gk_tab_container1-style1 { overflow:hidden; margin:0 23px; }
div.gk_tab_item-style1 .gk_tab_news_info { font-size:90%; }
div.gk_tab_item-style1 { float:left; overflow:hidden; padding:0; }
ul.gk_tab_ul-style1 li:first-child { margin-left:0; }
ul.gk_tab_ul-style1 li:hover { background-position:0 bottom; color:#fff; }
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; }
ul.gk_tab_ul-style1 li span { border-right: 1px dashed #444; padding: 0 13px 0 0; }
ul.gk_tab_ul-style1 li.active { background-position:0 top; color:#F6BF00; }
ul.gk_tab_ul-style1 { overflow:hidden; padding:0; background:transparent; margin:0; border-top: 1px dashed #444 }
#gk-container h4.gk_tab_news_header a:hover { color:#202020; }
#gk-container h4.gk_tab_news_header a { color:#cf052b; }
#gk-container h4.gk_tab_news_header { margin:6px 0; color:#555555; font-size:110%; }
#gk-container div.gk_tab_container0-style1 { background:transparent; }
div.tabtop1 { background: url(../images/tabbox1.png) 0 0 no-repeat; }
div.tabtop1 { background-position: 0 -90px; }
div.tabtop2 { padding: 0px 10px 0px 10px; background: url(../images/tabbox1.png) 100% -15px no-repeat;}
div.tabtop2 { background-position: 100% -105px; }
div.tabtop3 { height: 10px; background: url(../images/tabbox1.png) 0 -30px repeat-x;}
div.tabtop3 { background-position: 0 -120px; }
div.tabcenter1 { background: url(../images/tabbox2.png) 0 0 repeat-y; }
div.tabcenter2 { padding: 0px 10px 0px 10px; background: url(../images/tabbox2.png) 100% 0 repeat-y;}
div.tabcenter3 { padding: 10px; background: url(../images/tabbox_bg.png) 0 0 repeat; overflow: hidden;}
div.tabbottom1 { background: url(../images/tabbox1.png) 0 -45px no-repeat; }
div.tabbottom1 { background-position: 0 -135px;}
div.tabbottom2 { padding: 0px 10px 0px 10px; background: url(../images/tabbox1.png) 100% -60px no-repeat;}
div.tabbottom2 { background-position: 100% -150px;}
div.tabbottom3 { height: 10px; background: url(../images/tabbox1.png) 0 -75px repeat-x;}
div.tabbottom3 { background-position: 0 -165px;}
Собственно это CSS данного модуля.
На изображении, где надпись фон и есть то что должно получиться, но он должен охватить весь модуль, а не смещать контент модуля. div.gk_tab_container0-style1 вот если добавлять фон сюда, то все норм. Я не силен в php но думается мне что неправильно я с класс сделал. подскажите пожалуйста как правильно работать в этом случае с "class" и как для одного модуля сделать их несколько, в моем случае необходимо 9.
24.06.2021, 20:23:06