Горизонтальный блок на несколько секций

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

Ваш вопрос может быть удален без объяснения причин, если на него есть ответы по приведённым ссылкам (а вы рискуете получить предупреждение ;) ).
Аватара пользователя
Pazh
Former team member
Сообщения: 2317
Стаж: 16 лет 10 месяцев
Благодарил (а): 42 раза
Поблагодарили: 506 раз

Re: Горизонтальный блок на несколько секций

Сообщение Pazh »

Zhenjka bannersnack микробаннер я вижу. Flash и рекламоблокираторы поотключай в браузере и увидишь, или кеш браузера очисть
Помощь в ЛС/email только за WM или ЮMoney
Вернуться к началу
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 11361
Стаж: 16 лет 8 месяцев
Благодарил (а): 1832 раза
Поблагодарили: 1358 раз

Re: Горизонтальный блок на несколько секций

Сообщение Пчелкин »

О хаспади...

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

<div class="forabg"><div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1">
		
		<thead>
		<tr>
		    <th style="width: 33%;"></th>
			<th style="width: 34%;"></th>
			<th style="width: 33%;"></th>
 		</tr>
		</thead>
		
		<tbody>
			<tr class="bg2">
				<td>
                        <div class="copyright">
			         		 <!-- HotLog -->
							 <!--www.e-kuzbass counter-->
<script>
(new Image).src = 'http://www.e-kuzbass.ru/rank/logo/?id=11853;r='+
escape(document.referrer)+((typeof(screen)=='undefined')?'':
';s='+screen.width+'*'+screen.height+'*'+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+';u='+escape(document.URL)+
';m='+Math.random();
</script>

<a href="http://www.e-kuzbass.ru/rank/statistic/?id=11853" title="еКузбасс.ру"><img src="http://www.e-kuzbass.ru/rank/logo/?id=11853&c=v1f0f0f0" border="0" height="31" width="88" alt="города Новокузнецк, Кемерово"></a>

                             <!--/www.e-kuzbass counter--> 
							 
<script type="text/javascript">
hotlog_r=""+Math.random()+"&s=2277149&im=560&r="+
escape(document.referrer)+"&pg="+escape(window.location.href);
hotlog_r+="&j="+(navigator.javaEnabled()?"Y":"N");
hotlog_r+="&wh="+screen.width+"x"+screen.height+"&px="+
(((navigator.appName.substring(0,3)=="Mic"))?screen.colorDepth:screen.pixelDepth);
hotlog_r+="&js=1.3";
document.write('<a href="http://click.hotlog.ru/?2277149" target="_blank"><img '+
'src="http://hit18.hotlog.ru/cgi-bin/hotlog/count?'+
hotlog_r+'" border="0" width="88" height="31" alt="HotLog"><\/a>');
</script>
                               <noscript>
                               <a href="http://click.hotlog.ru/?2277149" target="_blank"><img src="http://hit18.hotlog.ru/cgi-bin/hotlog/count?s=2277149&im=560" border="0" width="88" height="31" alt="HotLog"></a>
                               </noscript>
                         <!-- /HotLog -->
                    </div> 
            	</td>
			
		    	<td>
	        		<div class="copyright">
                         <a href="http://weather.infobot.ru/current/russia/kemerovo/kemerovo.html"><img alt="Погода в Кемерово" src="http://informer.infobot.ru/weather/russia.kemerovo.kemerovo.current.88x31.gif" width=88 height=31 border=0></a>
			            	   <!-- begin of Top100 code -->
                               <script id="top100Counter" type="text/javascript" src="http://counter.rambler.ru/top100.jcn?2847756"></script>
                               <noscript>
                               <a href="http://top100.rambler.ru/navi/2847756/"><img src="http://counter.rambler.ru/top100.cnt?2847756" alt="Rambler's Top100" border="0" /></a>
                               </noscript>
                               <!-- end of Top100 code -->
                         <a href="http://kemerovo7.ru/top/?do=v&i=178" title="Рейтинг сайтов Кемерово"><img src="http://kemerovo7.ru/top/?do=in&id=178" border="0"></a>
                   </div>
		    	</td>
			
	    		<td>
	     		   <div class="copyright">
	    		       <iframe src="http://files.bannersnack.com/iframe/embed.html?hash=bu8yxqyq&bgcolor=%233D3D3D&wmode=opaque&clickTag=chinachay42.ru&t=1361018484" frameborder="0" scrolling="no" width="88" height="31"></iframe>
                   </div>
	    		</td>
			</tr>
		</tbody>
		
		</table>
	<span class="corners-bottom"><span></span></span></div>
</div>
NIKON-D90, AF-S 18-105, AF-S 14-24, AF-S 24-70
Вернуться к началу
Zhenjka
phpBB 1.4.1
Сообщения: 46
Стаж: 13 лет 8 месяцев
Откуда: Кемерово
Благодарил (а): 4 раза
Поблагодарили: 1 раз

Re: Горизонтальный блок на несколько секций

Сообщение Zhenjka »

Хм, интересно. Я в Мозилле кеш почистил, резалки отключены а баннер не вижу, в Опере отображается :(
Извиняюсь.
Вернуться к началу
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 11361
Стаж: 16 лет 8 месяцев
Благодарил (а): 1832 раза
Поблагодарили: 1358 раз

Re: Горизонтальный блок на несколько секций

Сообщение Пчелкин »

И воще...что подумал...а почему бы не поделить на шесть частей?
Симпатишней же...

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

<div class="forabg"><div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1">
		
		<thead>
		<tr>
		    <th style="width: 17%;"></th>
			<th style="width: 17%;"></th>
			<th style="width: 16%;"></th>
			<th style="width: 16%;"></th>
			<th style="width: 17%;"></th>
			<th style="width: 17%;"></th>
 		</tr>
		</thead>
		
		<tbody>
			<tr class="bg2">
				<td>
                    <div class="copyright">
<script>
(new Image).src = 'http://www.e-kuzbass.ru/rank/logo/?id=11853;r='+
escape(document.referrer)+((typeof(screen)=='undefined')?'':
';s='+screen.width+'*'+screen.height+'*'+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+';u='+escape(document.URL)+
';m='+Math.random();
</script>
                             <a href="http://www.e-kuzbass.ru/rank/statistic/?id=11853" title="еКузбасс.ру"><img src="http://www.e-kuzbass.ru/rank/logo/?id=11853&c=v1f0f0f0" border="0" height="31" width="88" alt="города Новокузнецк, Кемерово"></a>
                    </div> 
            	</td>	
				
				<td>
                    <div class="copyright">
<script type="text/javascript">
hotlog_r=""+Math.random()+"&s=2277149&im=560&r="+
escape(document.referrer)+"&pg="+escape(window.location.href);
hotlog_r+="&j="+(navigator.javaEnabled()?"Y":"N");
hotlog_r+="&wh="+screen.width+"x"+screen.height+"&px="+
(((navigator.appName.substring(0,3)=="Mic"))?screen.colorDepth:screen.pixelDepth);
hotlog_r+="&js=1.3";
document.write('<a href="http://click.hotlog.ru/?2277149" target="_blank"><img '+
'src="http://hit18.hotlog.ru/cgi-bin/hotlog/count?'+
hotlog_r+'" border="0" width="88" height="31" alt="HotLog"></a>');
</script>       
                         <noscript><a href="http://click.hotlog.ru/?2277149" target="_blank"><img src="http://hit18.hotlog.ru/cgi-bin/hotlog/count?s=2277149&im=560" border="0" width="88" height="31" alt="HotLog"></a></noscript>
                    </div> 
            	</td>
			
		    	<td>
	        		<div class="copyright">
                         <a href="http://weather.infobot.ru/current/russia/kemerovo/kemerovo.html"><img alt="Погода в Кемерово" src="http://informer.infobot.ru/weather/russia.kemerovo.kemerovo.current.88x31.gif" width=88 height=31 border=0></a>
                   </div>
		    	</td>
				
		    	<td>
	        		<div class="copyright">				
                         <script id="top100Counter" type="text/javascript" src="http://counter.rambler.ru/top100.jcn?2847756"></script>
                         <noscript><a href="http://top100.rambler.ru/navi/2847756/"><img src="http://counter.rambler.ru/top100.cnt?2847756" alt="Rambler's Top100" border="0" /></a></noscript>
                    </div>
		    	</td>
				
		    	<td>
	        		<div class="copyright">					
                         <a href="http://kemerovo7.ru/top/?do=v&i=178" title="Рейтинг сайтов Кемерово"><img src="http://kemerovo7.ru/top/?do=in&id=178" border="0"></a>
                   </div>
		    	</td>
			
	    		<td>
	     		   <div class="copyright">
	    		       <iframe src="http://files.bannersnack.com/iframe/embed.html?hash=bu8yxqyq&bgcolor=%233D3D3D&wmode=opaque&clickTag=chinachay42.ru&t=1361018484" frameborder="0" scrolling="no" width="88" height="31"></iframe>
                   </div>
	    		</td>
			</tr>
		</tbody>
		
		</table>
	<span class="corners-bottom"><span></span></span></div>
</div>
Добавлено спустя 1 минуту 45 секунд:
snap905.jpg
У вас нет необходимых прав для просмотра вложений в этом сообщении.
NIKON-D90, AF-S 18-105, AF-S 14-24, AF-S 24-70
Вернуться к началу
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 11361
Стаж: 16 лет 8 месяцев
Благодарил (а): 1832 раза
Поблагодарили: 1358 раз

Re: Горизонтальный блок на несколько секций

Сообщение Пчелкин »

Задачка.....был один блок на несколько секций, с разделением по секциям внутри в процентном соотношении...
Ну...например, от мода Top Five....вот тема о нем - Top Five on Index
Используется файл top_five_body.html
Вот так выглядит код вывода блока информации в файле top_five_body.html :

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

<div class="forabg">
	<div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1" id="top_five">
		<thead>
		<tr>
			<th style="width: 35%;">{L_NEWEST_TOPICS}</th>
			<th style="width: 20%;">{L_TOP_FIVE_ACTIVE}</th>
			<th style="width: 25%;">{L_TOP_FIVE_NEWEST}</th>
            <th style="width: 20%;">{L_TOP_THANKED}</th>
		</tr>
		</thead>
		<tbody>
			<tr class="bg2">
					<td valign="top"><!-- BEGIN top_five_topic --><!-- IF top_five_topic.NO_TOPIC_TITLE-->{top_five_topic.NO_TOPIC_TITLE}<!-- ELSE --><a href="{top_five_topic.U_TOPIC}">{top_five_topic.TOPIC_TITLE}</a><br />&nbsp;&nbsp;{top_five_topic.USERNAME_FULL}&nbsp;&nbsp;{top_five_topic.LAST_TOPIC_TIME}<br /><!-- ENDIF --><!-- END top_five_topic --></td>
					<td valign="top"><!-- BEGIN top_five_active -->{top_five_active.USERNAME_FULL}<br />&nbsp;&nbsp;{L_POSTS}: <a href="{top_five_active.S_SEARCH_ACTION}">{top_five_active.POSTS}</a><br /><!-- END top_five_active --></td>
					<td valign="top"><!-- BEGIN top_five_newest -->{top_five_newest.USERNAME_FULL}<br />&nbsp;&nbsp;{L_JOINED}: {top_five_newest.REG_DATE}<br /><!-- END top_five_newest --></td>
                    <td valign="top"><!-- BEGIN top_five_thanked -->{top_five_thanked.USERNAME_FULL}<br /> {top_five_thanked.THANKS}<br /><!-- END top_five_thanked --></td>
			</tr>
		</tbody>
		</table>

	<span class="corners-bottom"><span></span></span></div>
</div>
А вот так выглядит блок на главной....
snap1112.jpg
Но вот беда...нам это стало не интересно....Захотелось каждую секцию в своем собственно блоке видеть...Да еще что б эти блоки можно и по горизонту разместить и слева-справа от списка форумов (например)...
Дак как? Попробуем?
А почему бы и нет.....

Лезем в ХТМЛбук и покопавшись в нем основательно, находим способ размещения нескольких блоков в контейнере
Сначала создаем html каркас с использованием wrapper (обертка).
Наметки таковы...В каркас wrapper влаживаем необходимое количество секций, прописав для каждой из них необходимые свойства width иmargin-right. При этом для каждого блока делаем свой ДИВ-класс
section-условия через CSS , что бы потом можно было манипулировать его шириной так, как нам надо....
Получаем -

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

<div id="wrapper-2">
    <div class="section-a">код</div>
    <div class="section-b">код</div>
    <div class="section-c">код</div>
    <div class="section-d">код</div>
</div>
Почему wrapper-2 ? А что б не дублирнуть вдруг уже имеющийся в каких-то условиях от каких-то установленных модов...

Получив контейнер для горизонтального создания сразу четырех отдельных блоков, готовим наш файл top_five_body.html для разделения его на четыре отдельных блока...

Сначала "четверим" его (еще три раза дублируем код в файле)...
Получаем вот такую картинку -

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

<!-- СТАРТ БЛОКА 1 -->	
<div class="forabg">
	<div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1" id="top_five">
		<thead>
		<tr>
			<th style="width: 35%;">{L_NEWEST_TOPICS}</th>
			<th style="width: 20%;">{L_TOP_FIVE_ACTIVE}</th>
			<th style="width: 25%;">{L_TOP_FIVE_NEWEST}</th>
            <th style="width: 20%;">{L_TOP_THANKED}</th>
		</tr>
		</thead>
		<tbody>
			<tr class="bg2">
					<td valign="top"><!-- BEGIN top_five_topic --><!-- IF top_five_topic.NO_TOPIC_TITLE-->{top_five_topic.NO_TOPIC_TITLE}<!-- ELSE --><a href="{top_five_topic.U_TOPIC}">{top_five_topic.TOPIC_TITLE}</a><br />&nbsp;&nbsp;{top_five_topic.USERNAME_FULL}&nbsp;&nbsp;{top_five_topic.LAST_TOPIC_TIME}<br /><!-- ENDIF --><!-- END top_five_topic --></td>
					<td valign="top"><!-- BEGIN top_five_active -->{top_five_active.USERNAME_FULL}<br />&nbsp;&nbsp;{L_POSTS}: <a href="{top_five_active.S_SEARCH_ACTION}">{top_five_active.POSTS}</a><br /><!-- END top_five_active --></td>
					<td valign="top"><!-- BEGIN top_five_newest -->{top_five_newest.USERNAME_FULL}<br />&nbsp;&nbsp;{L_JOINED}: {top_five_newest.REG_DATE}<br /><!-- END top_five_newest --></td>
                    <td valign="top"><!-- BEGIN top_five_thanked -->{top_five_thanked.USERNAME_FULL}<br /> {top_five_thanked.THANKS}<br /><!-- END top_five_thanked --></td>
			</tr>
		</tbody>
		</table>

	<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ФИНИШ БЛОКА 1 -->	

<!-- СТАРТ БЛОКА 2 -->	
<div class="forabg">
	<div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1" id="top_five">
		<thead>
		<tr>
			<th style="width: 35%;">{L_NEWEST_TOPICS}</th>
			<th style="width: 20%;">{L_TOP_FIVE_ACTIVE}</th>
			<th style="width: 25%;">{L_TOP_FIVE_NEWEST}</th>
            <th style="width: 20%;">{L_TOP_THANKED}</th>
		</tr>
		</thead>
		<tbody>
			<tr class="bg2">
					<td valign="top"><!-- BEGIN top_five_topic --><!-- IF top_five_topic.NO_TOPIC_TITLE-->{top_five_topic.NO_TOPIC_TITLE}<!-- ELSE --><a href="{top_five_topic.U_TOPIC}">{top_five_topic.TOPIC_TITLE}</a><br />&nbsp;&nbsp;{top_five_topic.USERNAME_FULL}&nbsp;&nbsp;{top_five_topic.LAST_TOPIC_TIME}<br /><!-- ENDIF --><!-- END top_five_topic --></td>
					<td valign="top"><!-- BEGIN top_five_active -->{top_five_active.USERNAME_FULL}<br />&nbsp;&nbsp;{L_POSTS}: <a href="{top_five_active.S_SEARCH_ACTION}">{top_five_active.POSTS}</a><br /><!-- END top_five_active --></td>
					<td valign="top"><!-- BEGIN top_five_newest -->{top_five_newest.USERNAME_FULL}<br />&nbsp;&nbsp;{L_JOINED}: {top_five_newest.REG_DATE}<br /><!-- END top_five_newest --></td>
                    <td valign="top"><!-- BEGIN top_five_thanked -->{top_five_thanked.USERNAME_FULL}<br /> {top_five_thanked.THANKS}<br /><!-- END top_five_thanked --></td>
			</tr>
		</tbody>
		</table>

	<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ФИНИШ БЛОКА 2 -->	

<!-- СТАРТ БЛОКА 3 -->	
<div class="forabg">
	<div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1" id="top_five">
		<thead>
		<tr>
			<th style="width: 35%;">{L_NEWEST_TOPICS}</th>
			<th style="width: 20%;">{L_TOP_FIVE_ACTIVE}</th>
			<th style="width: 25%;">{L_TOP_FIVE_NEWEST}</th>
            <th style="width: 20%;">{L_TOP_THANKED}</th>
		</tr>
		</thead>
		<tbody>
			<tr class="bg2">
					<td valign="top"><!-- BEGIN top_five_topic --><!-- IF top_five_topic.NO_TOPIC_TITLE-->{top_five_topic.NO_TOPIC_TITLE}<!-- ELSE --><a href="{top_five_topic.U_TOPIC}">{top_five_topic.TOPIC_TITLE}</a><br />&nbsp;&nbsp;{top_five_topic.USERNAME_FULL}&nbsp;&nbsp;{top_five_topic.LAST_TOPIC_TIME}<br /><!-- ENDIF --><!-- END top_five_topic --></td>
					<td valign="top"><!-- BEGIN top_five_active -->{top_five_active.USERNAME_FULL}<br />&nbsp;&nbsp;{L_POSTS}: <a href="{top_five_active.S_SEARCH_ACTION}">{top_five_active.POSTS}</a><br /><!-- END top_five_active --></td>
					<td valign="top"><!-- BEGIN top_five_newest -->{top_five_newest.USERNAME_FULL}<br />&nbsp;&nbsp;{L_JOINED}: {top_five_newest.REG_DATE}<br /><!-- END top_five_newest --></td>
                    <td valign="top"><!-- BEGIN top_five_thanked -->{top_five_thanked.USERNAME_FULL}<br /> {top_five_thanked.THANKS}<br /><!-- END top_five_thanked --></td>
			</tr>
		</tbody>
		</table>

	<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ФИНИШ БЛОКА 3 -->	

<!-- СТАРТ БЛОКА 4 -->	
<div class="forabg">
	<div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1" id="top_five">
		<thead>
		<tr>
			<th style="width: 35%;">{L_NEWEST_TOPICS}</th>
			<th style="width: 20%;">{L_TOP_FIVE_ACTIVE}</th>
			<th style="width: 25%;">{L_TOP_FIVE_NEWEST}</th>
            <th style="width: 20%;">{L_TOP_THANKED}</th>
		</tr>
		</thead>
		<tbody>
			<tr class="bg2">
					<td valign="top"><!-- BEGIN top_five_topic --><!-- IF top_five_topic.NO_TOPIC_TITLE-->{top_five_topic.NO_TOPIC_TITLE}<!-- ELSE --><a href="{top_five_topic.U_TOPIC}">{top_five_topic.TOPIC_TITLE}</a><br />&nbsp;&nbsp;{top_five_topic.USERNAME_FULL}&nbsp;&nbsp;{top_five_topic.LAST_TOPIC_TIME}<br /><!-- ENDIF --><!-- END top_five_topic --></td>
					<td valign="top"><!-- BEGIN top_five_active -->{top_five_active.USERNAME_FULL}<br />&nbsp;&nbsp;{L_POSTS}: <a href="{top_five_active.S_SEARCH_ACTION}">{top_five_active.POSTS}</a><br /><!-- END top_five_active --></td>
					<td valign="top"><!-- BEGIN top_five_newest -->{top_five_newest.USERNAME_FULL}<br />&nbsp;&nbsp;{L_JOINED}: {top_five_newest.REG_DATE}<br /><!-- END top_five_newest --></td>
                    <td valign="top"><!-- BEGIN top_five_thanked -->{top_five_thanked.USERNAME_FULL}<br /> {top_five_thanked.THANKS}<br /><!-- END top_five_thanked --></td>
			</tr>
		</tbody>
		</table>

	<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ФИНИШ БЛОКА 4 -->
Начинаем из каждого блока убирать ненужное в <thead></thead> и <tbody></tbody>

В первом блоке оставляем только обе первые строки...во втором - только вторые и так далее...
Получаем заготовку с разделением на отдельные блоки, но еще без определения их по классам CSS (без разметки)...

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

<!-- СТАРТ БЛОКА 1 -->	
<div class="forabg">
	<div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1" id="top_five">
		<thead>
		<tr>
			<th style="width: 35%;">{L_NEWEST_TOPICS}</th>
		</tr>
		</thead>
		<tbody>
			<tr class="bg2">
					<td valign="top"><!-- BEGIN top_five_topic --><!-- IF top_five_topic.NO_TOPIC_TITLE-->{top_five_topic.NO_TOPIC_TITLE}<!-- ELSE --><a href="{top_five_topic.U_TOPIC}">{top_five_topic.TOPIC_TITLE}</a><br />&nbsp;&nbsp;{top_five_topic.USERNAME_FULL}&nbsp;&nbsp;{top_five_topic.LAST_TOPIC_TIME}<br /><!-- ENDIF --><!-- END top_five_topic --></td>
			</tr>
		</tbody>
		</table>

	<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ФИНИШ БЛОКА 1 -->	

<!-- СТАРТ БЛОКА 2 -->	
<div class="forabg">
	<div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1" id="top_five">
		<thead>
		<tr>
			<th style="width: 20%;">{L_TOP_FIVE_ACTIVE}</th>
		</tr>
		</thead>
		<tbody>
			<tr class="bg2">
					<td valign="top"><!-- BEGIN top_five_active -->{top_five_active.USERNAME_FULL}<br />&nbsp;&nbsp;{L_POSTS}: <a href="{top_five_active.S_SEARCH_ACTION}">{top_five_active.POSTS}</a><br /><!-- END top_five_active --></td>
			</tr>
		</tbody>
		</table>

	<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ФИНИШ БЛОКА 2 -->	

<!-- СТАРТ БЛОКА 3 -->	
<div class="forabg">
	<div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1" id="top_five">
		<thead>
		<tr>
			<th style="width: 25%;">{L_TOP_FIVE_NEWEST}</th>
		</tr>
		</thead>
		<tbody>
			<tr class="bg2">
					<td valign="top"><!-- BEGIN top_five_newest -->{top_five_newest.USERNAME_FULL}<br />&nbsp;&nbsp;{L_JOINED}: {top_five_newest.REG_DATE}<br /><!-- END top_five_newest --></td>
 			</tr>
		</tbody>
		</table>

	<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ФИНИШ БЛОКА 3 -->	

<!-- СТАРТ БЛОКА 4 -->	
<div class="forabg">
	<div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1" id="top_five">
		<thead>
		<tr>
            <th style="width: 20%;">{L_TOP_THANKED}</th>
		</tr>
		</thead>
		<tbody>
			<tr class="bg2">
                    <td valign="top"><!-- BEGIN top_five_thanked -->{top_five_thanked.USERNAME_FULL}<br /> {top_five_thanked.THANKS}<br /><!-- END top_five_thanked --></td>
			</tr>
		</tbody>
		</table>

	<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ФИНИШ БЛОКА 4 -->
Ну что теперь? Теперь пора всю конструкцию поместить в поле каркаса wrapper-2
Добавляем в начале файла -
<div id="wrapper-2">
А в самом конце конечно еще один ДИВ -
</div>

А каждый из полученных наших блоков оборачиваем в наши четыре секции, сnрого по порядку (a,b,c,d)
Получаем уже почти готовую конструкцию четырех отдельных блоков в одном контейнере....
В строках во всех четырех блоках

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

<th style="width: 25%;">тут переменная</th>
удаляем процентную составляющую...она теперь нам для оглавлений просто не нужна...
Получаем вот такие строки -

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

<th>тут переменная</th>
Заодно, в строке определения свойства id убираем код, отвечающий за это параметр...
Он там тоже уже не нужен...блоки-то будут отдельные!!!
В строках - <table class="table1" cellspacing="1" id="top_five"> удаляем id="top_five" ...
Получаем не привязанный к параметрам ширины блока код строки панели названия -

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

<table class="table1" cellspacing="1">
А наш файл top_five_body.html теперь выглядит так -

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

<div id="wrapper-2">

<!-- СТАРТ БЛОКА 1 -->    
<div class="section-a">
<div class="forabg">
	<div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1" >
		<thead>
		<tr>
			<th>{L_NEWEST_TOPICS}</th>
		</tr>
		</thead>
		<tbody>
			<tr class="bg2">
					<td valign="top"><!-- BEGIN top_five_topic --><!-- IF top_five_topic.NO_TOPIC_TITLE-->{top_five_topic.NO_TOPIC_TITLE}<!-- ELSE --><a href="{top_five_topic.U_TOPIC}">{top_five_topic.TOPIC_TITLE}</a><br />&nbsp;&nbsp;{top_five_topic.USERNAME_FULL}&nbsp;&nbsp;{top_five_topic.LAST_TOPIC_TIME}<br /><!-- ENDIF --><!-- END top_five_topic --></td>
			</tr>
		</tbody>
		</table>

	<span class="corners-bottom"><span></span></span></div>
</div>
</div>
<!-- ФИНИШ БЛОКА 1 -->

<!-- СТАРТ БЛОКА 2 -->	
<div class="section-b">
<div class="forabg">
	<div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1" >
		<thead>
		<tr>
			<th>{L_TOP_FIVE_ACTIVE}</th>
		</tr>
		</thead>
		<tbody>
			<tr class="bg2">
					<td valign="top"><!-- BEGIN top_five_active -->{top_five_active.USERNAME_FULL}<br />&nbsp;&nbsp;{L_POSTS}: <a href="{top_five_active.S_SEARCH_ACTION}">{top_five_active.POSTS}</a><br /><!-- END top_five_active --></td>
			</tr>
		</tbody>
		</table>

	<span class="corners-bottom"><span></span></span></div>
</div>
</div>
<!-- ФИНИШ БЛОКА 2 -->

<!-- СТАРТ БЛОКА 3 -->
<div class="section-c">
<div class="forabg">
	<div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1" >
		<thead>
		<tr>
			<th>{L_TOP_FIVE_NEWEST}</th>
		</tr>
		</thead>
		<tbody>
			<tr class="bg2">
					<td valign="top"><!-- BEGIN top_five_newest -->{top_five_newest.USERNAME_FULL}<br />&nbsp;&nbsp;{L_JOINED}: {top_five_newest.REG_DATE}<br /><!-- END top_five_newest --></td>
 			</tr>
		</tbody>
		</table>

	<span class="corners-bottom"><span></span></span></div>
</div>
</div>
<!-- ФИНИШ БЛОКА 3 -->

<!-- СТАРТ БЛОКА 4 -->
<div class="section-d">
<div class="forabg">
	<div class="inner"><span class="corners-top"><span></span></span>
		<table class="table1" cellspacing="1" >
		<thead>
		<tr>
            <th>{L_TOP_THANKED}</th>
		</tr>
		</thead>
		<tbody>
			<tr class="bg2">
                    <td valign="top"><!-- BEGIN top_five_thanked -->{top_five_thanked.USERNAME_FULL}<br /> {top_five_thanked.THANKS}<br /><!-- END top_five_thanked --></td>
			</tr>
		</tbody>
		</table>

	<span class="corners-bottom"><span></span></span></div>
</div>
</div>
<!-- ФИНИШ БЛОКА 4 -->

</div>
Осталось только прописать CSS свойства для каждой секции <div class="section"> и самого каркаса <div id="wrapper"> ....
Открываем файл content.css и в саааааамом его начале прописываем условия вывода и контейнера и наших 4-х классов....
Выглядеть это будет примерно так -

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

#wrapper-2 {
    width:100%;
    height:100%;
    background:#EFEFEF;
	
}

.section-a {
    float:left;
    height:100%;
    margin-left:1%;
	width:33%;
}

.section-b {
    float:left;
    height:100%;
    margin-left:1%;
	width:15%;
}

.section-c {
    float:left;
    height:100%;
    margin-left:1%;
	width:25%;
}

.section-d {
    float:left;
    height:100%;
    margin-left:1%;
	width:22%;
Где в условии -
#wrapper-2 {
width:100%;
height:100%;
background:#EFEFEF;
красным отмечены и настроены высота и ширина контейнера (определяется на автомате)....

А вот дальше начинается самое интересное....
Если вы решили данные блоки использовать для боковых панелей или для портала, то красные параметры каждой секции -
.section-d {
float:left;
height:100%;
margin-left:1%;
width:22%;
определяете в пикселях...Подгоняйте так, что б стало смотрительно....
А если весь блок вы решили использовать в горизонтальном варианте, красные параметры определяйте в процентном отношении друг к другу...
Почти как бывшие оглавления бывшего блока от мода Top Five on Index
Только не забывайте что margin-ы по 1 % на четыре - это уже 8%...Верней, если честней - 7 % (почему? - подумайте)....Остальное - простая математика и подгонка цифр процентов каждой секции с проверкой на месте...
.section-d {
float:left;
height:100%;
margin-left:1%;
width:22%;

Вот эти - width:22%; необходимо подгонять опытным путем...чтоб ничего не сбивалось....
При ошибке выставленных процентов блоки ту-же полезут друг на друга или перепрыгнут на следующую строку...
В итоге у вас должна выйти вот такая картинка -
snap1113.jpg
Не правда ли - неплохо ??? И симпатишно !!!
Всем удачи и привет семье!!!!
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Последний раз редактировалось Пчелкин 11.12.2013 8:18, всего редактировалось 1 раз.
NIKON-D90, AF-S 18-105, AF-S 14-24, AF-S 24-70
Вернуться к началу
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 11361
Стаж: 16 лет 8 месяцев
Благодарил (а): 1832 раза
Поблагодарили: 1358 раз

Re: Горизонтальный блок на несколько секций

Сообщение Пчелкин »

Маленькая добавочка....
Убрать левый отступ левого блока от края можно нахрапом так -

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

#wrapper-2 div:first-child {
 margin-left:0px; 
}
Остальное - подгонка процентами...
NIKON-D90, AF-S 18-105, AF-S 14-24, AF-S 24-70
Вернуться к началу
Аватара пользователя
Galaxy
phpBB 1.4.3
Сообщения: 77
Стаж: 13 лет 1 месяц
Благодарил (а): 16 раз

Re: Горизонтальный блок на несколько секций

Сообщение Galaxy »

Пчелкин
Как считаете,реально по вашим стопам провернуть такое в susilver 2 ?
Прошу быть снисходительным ко мне,я начинающий.Мой сайт http://fishclub73.ru/forum/index.php
Вернуться к началу
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 11361
Стаж: 16 лет 8 месяцев
Благодарил (а): 1832 раза
Поблагодарили: 1358 раз

Re: Горизонтальный блок на несколько секций

Сообщение Пчелкин »

Элементарно....
NIKON-D90, AF-S 18-105, AF-S 14-24, AF-S 24-70
Вернуться к началу
Аватара пользователя
Galaxy
phpBB 1.4.3
Сообщения: 77
Стаж: 13 лет 1 месяц
Благодарил (а): 16 раз

Re: Горизонтальный блок на несколько секций

Сообщение Galaxy »

То есть,если я буду делать всё,как указано в данной теме,всё получиться? :)
Прошу быть снисходительным ко мне,я начинающий.Мой сайт http://fishclub73.ru/forum/index.php
Вернуться к началу
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 11361
Стаж: 16 лет 8 месяцев
Благодарил (а): 1832 раза
Поблагодарили: 1358 раз

Re: Горизонтальный блок на несколько секций

Сообщение Пчелкин »

Не...надо по наитию использовать сабовскую вестку блоков... Его табличную.. В принципе там почти все одинаково, но я не Сабовец... увы..
NIKON-D90, AF-S 18-105, AF-S 14-24, AF-S 24-70
Вернуться к началу
Аватара пользователя
Dbonz
phpBB 2.0.0
Сообщения: 231
Стаж: 14 лет 2 месяца
Благодарил (а): 25 раз
Поблагодарили: 25 раз

Re: Горизонтальный блок на несколько секций

Сообщение Dbonz »

Пчелкин писал(а):Открываем файл content.css и в саааааамом его начале
ИМХО CSS можно чуть проще:

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

#wrapper-2, #wrapper-2 .table1 {
	display:table;
	overflow:hidden;
	width:100%;
	table-layout:fixed;
}

.section-a, .section-b, .section-c, .section-d {
	display:table-cell;
}

#wrapper-2 div + div {
	border-left: 10px solid #fff;
}
И тогда одинаковая ширина блоков будет равномерно распределяться по ширине страницы.
Оно можно и по одной высоте их построить, только спаны выкорчевать нафик…)
Вернуться к началу
Аватара пользователя
Galaxy
phpBB 1.4.3
Сообщения: 77
Стаж: 13 лет 1 месяц
Благодарил (а): 16 раз

Re: Горизонтальный блок на несколько секций

Сообщение Galaxy »

А подскажите куда "копать" чтобы такое же сотворить на subsilver 2 ?
Прошу быть снисходительным ко мне,я начинающий.Мой сайт http://fishclub73.ru/forum/index.php
Вернуться к началу
Аватара пользователя
Татьяна5
Поддержка
Поддержка
Сообщения: 13159
Стаж: 15 лет 1 месяц
Благодарил (а): 236 раз
Поблагодарили: 3750 раз

Re: Горизонтальный блок на несколько секций

Сообщение Татьяна5 »

Galaxy, названия файлов те же, вёрстка будет различаться
Вернуться к началу
Аватара пользователя
Galaxy
phpBB 1.4.3
Сообщения: 77
Стаж: 13 лет 1 месяц
Благодарил (а): 16 раз

Re: Горизонтальный блок на несколько секций

Сообщение Galaxy »

Я наверное сам не смогу пока такое осилить.
Прошу быть снисходительным ко мне,я начинающий.Мой сайт http://fishclub73.ru/forum/index.php
Вернуться к началу
Аватара пользователя
Dbonz
phpBB 2.0.0
Сообщения: 231
Стаж: 14 лет 2 месяца
Благодарил (а): 25 раз
Поблагодарили: 25 раз

Re: Горизонтальный блок на несколько секций

Сообщение Dbonz »

Galaxy
Я субсильвер вообще не ковырял, но должно быть что-то наподобие:
/top_five_body.html

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

<div id="wrapper-2">
<!-- СТАРТ БЛОКА 1 -->
<div class="section-a">
		<table class="tablebg" cellspacing="1" >
		<thead>
		<tr>
			<th>{L_NEWEST_TOPICS}</th>
		</tr>
		</thead>
		<tbody>
			<tr>
					<td class="row1"><!-- BEGIN top_five_topic --><!-- IF top_five_topic.NO_TOPIC_TITLE-->{top_five_topic.NO_TOPIC_TITLE}<!-- ELSE --><a href="{top_five_topic.U_TOPIC}">{top_five_topic.TOPIC_TITLE}</a><br />&nbsp;&nbsp;{top_five_topic.USERNAME_FULL}&nbsp;&nbsp;{top_five_topic.LAST_TOPIC_TIME}<br /><!-- ENDIF --><!-- END top_five_topic --></td>
			</tr>
		</tbody>
		</table>
</div>
<!-- ФИНИШ БЛОКА 1 -->

<!-- СТАРТ БЛОКА 2 -->
<div class="section-b">
		<table class="tablebg" cellspacing="1" >
		<thead>
		<tr>
			<th>{L_TOP_FIVE_ACTIVE}</th>
		</tr>
		</thead>
		<tbody>
			<tr>
					<td class="row1"><!-- BEGIN top_five_active -->{top_five_active.USERNAME_FULL}<br />&nbsp;&nbsp;{L_POSTS}: <a href="{top_five_active.S_SEARCH_ACTION}">{top_five_active.POSTS}</a><br /><!-- END top_five_active --></td>
			</tr>
		</tbody>
		</table>
</div>
<!-- ФИНИШ БЛОКА 2 -->

<!-- СТАРТ БЛОКА 3 -->
<div class="section-c">
		<table class="tablebg" cellspacing="1" >
		<thead>
		<tr>
			<th>{L_TOP_FIVE_NEWEST}</th>
		</tr>
		</thead>
		<tbody>
			<tr>
					<td class="row1"><!-- BEGIN top_five_newest -->{top_five_newest.USERNAME_FULL}<br />&nbsp;&nbsp;{L_JOINED}: {top_five_newest.REG_DATE}<br /><!-- END top_five_newest --></td>
			</tr>
		</tbody>
		</table>
</div>
<!-- ФИНИШ БЛОКА 3 -->

<!-- СТАРТ БЛОКА 4 -->
<div class="section-d">
		<table class="tablebg" cellspacing="1" >
		<thead>
		<tr>
			<th>{L_TOP_THANKED}</th>
		</tr>
		</thead>
		<tbody>
			<tr>
				<td class="row1"><!-- BEGIN top_five_thanked -->{top_five_thanked.USERNAME_FULL}<br /> {top_five_thanked.THANKS}<br /><!-- END top_five_thanked --></td>
			</tr>
		</tbody>
		</table>
</div>
<!-- ФИНИШ БЛОКА 4 -->
</div>
/styles/subsilver2/theme/stylesheet.css

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

#wrapper-2, #wrapper-2 .tablebg {
	display:table;
	overflow:hidden;
	width:100%;
	table-layout:fixed;
	margin-bottom:6px;
}

.section-a, .section-b, .section-c, .section-d {
	display:table-cell;
}

#wrapper-2 div + div {
	border-left: 10px solid #fff;
}
А вот из каких модов Пчёлкин переменные брал – не знаю.
Т.е. обратить внимание на следующие строки:
Скрытый текст
Заголовки:

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

<th>{L_NEWEST_TOPICS}</th>
-------------------------------
<th>{L_TOP_FIVE_ACTIVE}</th>
-------------------------------
<th>{L_TOP_FIVE_NEWEST}</th>
-------------------------------
<th>{L_TOP_THANKED}</th>
-------------------------------
Содержимое блоков:

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

<!-- BEGIN top_five_topic --><!-- IF top_five_topic.NO_TOPIC_TITLE-->{top_five_topic.NO_TOPIC_TITLE}<!-- ELSE --><a href="{top_five_topic.U_TOPIC}">{top_five_topic.TOPIC_TITLE}</a><br />&nbsp;&nbsp;{top_five_topic.USERNAME_FULL}&nbsp;&nbsp;{top_five_topic.LAST_TOPIC_TIME}<br /><!-- ENDIF --><!-- END top_five_topic -->
----------------------------------------
<!-- BEGIN top_five_active -->{top_five_active.USERNAME_FULL}<br />&nbsp;&nbsp;{L_POSTS}: <a href="{top_five_active.S_SEARCH_ACTION}">{top_five_active.POSTS}</a><br /><!-- END top_five_active -->
----------------------------------------
<!-- BEGIN top_five_newest -->{top_five_newest.USERNAME_FULL}<br />&nbsp;&nbsp;{L_JOINED}: {top_five_newest.REG_DATE}<br /><!-- END top_five_newest -->
----------------------------------------
<!-- BEGIN top_five_thanked -->{top_five_thanked.USERNAME_FULL}<br /> {top_five_thanked.THANKS}<br /><!-- END top_five_thanked -->
А... это из мода Top Five on Index
Вернуться к началу

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