Несколько "class" одному элементу. (PhP)

Есть любые вопросы, связанные со стилями/темами для phpBB 3.0.x? Задайте их здесь!
Правила форума
Местная Конституция | Шаблон запроса | Документация (phpBB3) | Переход на 3.0.6 и выше | FAQ-3 (phpbb3) | Как задавать вопросы | Как устанавливать моды

Ваш вопрос может быть удален без объяснения причин, если на него есть ответы по приведённым ссылкам (а вы рискуете получить предупреждение ;) ).
Killhiden
phpBB 1.2.0
Сообщения: 16
Стаж: 15 лет 6 месяцев
Благодарил (а): 1 раз

Несколько "class" одному элементу. (PhP)

Сообщение Killhiden »

Уважаемые форумчане столкнулся со следующей проблемой. К одному элементу необходимо сделать круглые углы с использованием изображений, также фон и ребра резиновыми во все стороны. Вообщем изображения я подготовил в CSS запихал. Добавил 9 дополнительных "class" этому модулю. первым делом пробовал это сделать для cms joomla, не получилось. Но так как дизайн форума и сайта планируется одинаковым назрел вопрос. как правильно применить к одному элементу несколько class, да так что бы не уезжал контент. Пока все попытки реализовать данную задумку не увенчался успехом. Вообщем о том как я это делал написано ниже.

Код: Выделить всё

<div class="gk_tab_container0-<?php echo $this->config['styleSuffix']; ?>" style="<?php echo $style; ?>">  ///К class этой стороки задумывались добавить дополнительные 9 class ниже. На многих сайтах я встречал в исходном коде именно добавление новых class элементу и все работает нормально, у меня же выходит смещение контента. Собственно ниже есть скрин о том как я это пытался сделать первоначально для сайта.


	

<div class="tabtop1">
		<div class="tabtop2">
			<div class="tabtop3"></div>
		</div>
	</div>
	
	<div class="tabcenter1">
		<div class="tabcenter2">
			<div class="tabcenter3">
			
			</div>
		</div>
	</div>

	<div class="tabbottom1">
		<div class="tabbottom2">
			<div class="tabbottom3"></div>
		</div>
	</div>
			
        <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; }
[COLOR="Blue"]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 данного модуля.
95618757bd7a.jpg
На изображении, где надпись фон и есть то что должно получиться, но он должен охватить весь модуль, а не смещать контент модуля. div.gk_tab_container0-style1 вот если добавлять фон сюда, то все норм. Я не силен в php но думается мне что неправильно я с класс сделал. подскажите пожалуйста как правильно работать в этом случае с "class" и как для одного модуля сделать их несколько, в моем случае необходимо 9.

Во общем создание дополнительных классов встречается во многих шаблонах, но как оно работает не понятно. метод подстановки не помог, а лишь добавил не понятностей.
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Последний раз редактировалось Айдар 08.03.2022 23:10, всего редактировалось 3 раза.

Вернуться в «Стили для phpBB 3.0.x»