Таблица. HTML.

Сообщений 11 страница 16 из 16

Поделиться1113.01.13 09:25

Автор: Бу
Призрак
Последний визит:
04.02.13 13:28
Уважение: +298

верх

Код:

<style>
.container1 {width: 770px; margin: 0 auto; padding: 0;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 40px;
    width:770px;
    
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 40px;
  width: 130px;   
line-height: 40px;
    border: 0px;
border-top: 1px solid #000000;
    border-bottom: 0px solid #000000;
        border-right: 1px solid #000000;
        border-left: 1px solid #000000;
    margin-bottom: -2px;
    background: url();
    overflow: hidden;
    position: relative;
}

ul.tabs li a {
    text-decoration: none;
    color: transparent;
    display: block;
    padding: 0 5px;
    background: url();
    outline: none;
   }

ul.tabs li a:hover {
   
}    

html ul.tabs li.active  {
     
 border-bottom: 0px dashed #000000;
        border-top: 1px dashed #000000;    
        border-left: 1px dashed #000000;    
        border-right: 1px dashed #000000;  }  

html ul.tabs li.active a:hover  {
        background: url();
    border-bottom: 0px solid #160f0a;
}

.tab_container1 {
    clear: both;
    float: left; 
    width: 770px;
    height: 390px;
    
    border-bottom: 1px solid #000000;
        border-top: 1px solid #000000;    
        border-left: 1px solid #000000;    
        border-right: 1px solid #000000;  

}

.tab_content {
    padding: 5px;
}

.tab_content h2 {
    font-weight: normal;
    padding-bottom: 2px;
}
</style>

низ

Код:

<script type="text/javascript">
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>
<script type="text/javascript">

$(document).ready(function() {


	$(".tab_content").hide(); 
	$("ul.tabs li:first").addClass("active").show();
	$(".tab_content:first").show();
	
	$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn();
    return false;
	});

});

</script>

объявление

Код:

<div class="container">
    <div class="html-box">

<ul class="tabs">
    <li class="active"><a href="#tab1">Вкладка 1</a></li>
    <li><a href="#tab2">Вкладка 2</a></li>
    <li><a href="#tab3">Вкладка 3</a></li>
    <li><a href="#tab4">Вкладка 4</a></li>
    <li><a href="#tab5">Вкладка 5</a></li>
</ul>

      <div class="tab_container1">

<div style="display: block;" id="tab1" class="tab_content">
<table height="360"  width="100%" >
 <tr><td width="60%" valign="top" ><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; height: 180px; ">
<br><font size="4">текст приветствия
</font></div>
</td>
<td width="40%" valign="top" rowspan="2">
<b>заголовок</b>
<br><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; overflow: scroll; overflow-x: hidden; height: 350px;"><br>  
текст</div></td>
 </tr>
<tr><td width="60%" valign="top" >
<table height="70%"  width="90%" >
 <tr><td width="50%" valign="top" ><center><b>Ссылки 1</b><br>
<a href="ссылка">ссылка название</a>
</center></td>
<td width="50%" valign="top" ><center><b>Ссылки 2</b><br>
<a href="ссылка">ссылка название</a>
</center></td>
</tr>
</table>
</td>
</tr>
</table>
</div>


<div style="display: none;" id="tab2" class="tab_content">
<table height="360"  width="100%" >
 <tr><td width="50%" valign="top" rowspan="2"><b>заголовок</b>
<br><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; overflow: scroll; overflow-x: hidden; height: 350px;"><br>  
текст 1</div>
</td>
<td width="50%" valign="top" >
<b>Игрок недели</b>
<br><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; height: 100px;"><br>  
текст 2</div></td>
 </tr>
<tr><td width="50%" valign="top" ><br><br>
<b>Активист недели</b>
<br><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 90%; height: 160px;"><br>  
текст 3</div>
</td>
</tr>
</table>
</div>


<div style="display: none;" id="tab3" class="tab_content"> 
<table width="100%" height="350">
<tr>
    <td width="50%" height="110">
<table border="1" width="100%" height="110">
<tr>
<td>Фото</td>
<td bgcolor="#c9a0dc"><center><b>заголовок</b>
<br>текст 1</td> 
</tr>
</table>
     </td>
    
     <td height="110">
<table border="1" width="100%" height="110">
<tr>
<td bgcolor="#c9a0dc"><center><b>заголовок</b>
<br>текст 2</center></td>
<td>Фото</td> 
</tr>
</table>
     </td>
</tr>
<tr>
    <td height="110">
<table border="1" width="100%" height="110">
<tr>
<td>Фото</td>
<td bgcolor="#c9a0dc"><center><b>заголовок</b>
<br>текст 3</center></td> 
</tr>
</table>
     </td>

    <td height="110">
<table border="1" width="100%" height="110">
<tr>
<td bgcolor="#c9a0dc"><center><b>заголовок</b>
<br>текст 4</center></td>
<td>Фото</td> 
</tr>
</table>
     </td>
    
</tr>
<tr>
   <td height="110">
<table border="1" width="100%" height="110">
<tr>
<td>Фото</td>
<td bgcolor="#c9a0dc"><center><b>заголовок</b>
<br>текст 5</center></td> 
</tr>
</table>
     </td><td height="110">
<table border="1" width="100%" height="110">
<tr>
<td bgcolor="#c9a0dc"><center><b>заголовок</b>
<br>текст 6</center></td>
<td>Фото</td> 
</tr>
</table>
     </td>
 </tr>
</table>
</div>


<div style="display: none;" id="tab4" class="tab_content">
<table height="360"  width="100%" >
 <tr> <td bgcolor="#c9a0dc"  width="30%" height="85" ><center>1</center></td><td bgcolor="#c9a0dc" width="30%"><center>2</center></td>
<td rowspan="4"><div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 95%; height:350px; ">
<br>Текст очереди</div></td>
 </tr>
 <tr> <td bgcolor="#c9a0dc"  width="30%" height="85"><center>3</center></td>
<td bgcolor="#c9a0dc" width="30%"><center>4</center></td></tr>
<tr> <td bgcolor="#c9a0dc"  width="30%" height="85"><center>5</center></td>
<td bgcolor="#c9a0dc" width="30%"><center>6</center></td></tr>
<tr> <td bgcolor="#c9a0dc"  width="30%" height="85"><center>7</center></td>
<td bgcolor="#c9a0dc" width="30%"><center>8</center></td></tr>
</table>
</div>


<div style="display: none;" id="tab5" class="tab_content"> 
<table height="360"  width="100%" >
 <tr>
<td width="50%" >
<div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 95%; height:250px; ">
<br>Конкурс 1
</div>
</td>
<td width="50%" >
<div style="text-align: center; border: 1px solid #160f0a; border-radius: 10px; padding: 5px; width: 95%; height:250px; ">
<br>Конкурс 2
</div>
</td>
</tr>
<tr>
<td width="50%" ><br>
<table border="1" width="85%" height="100">
<tr>
<td>Фото</td>
<td bgcolor="#c9a0dc"><center>
<br>текст 1</td> 
</tr>
</table></td>
<td width="50%" ><br><table border="1" width="85%" height="100">
<tr>
<td>Фото</td>
<td bgcolor="#c9a0dc"><center>
<br>текст 2</td> 
</tr>
</table></td></tr>
</table>
</div>
      </div>
    </div>
</div>

Подпись автора: При заказе таблицы, пожалуйста, сразу указывайте ее ширину и длину, а также другие подробности важные при оформлении таблицы(ширину границ, фон и прочее). Заказы, в которых сразу не будет указано всех подробностей, не переделываются по просьбам: "еще фон сделайте", "а края закруглить можно", " и цвет текста другой сделайте" и прочее в том же духе.

Поделиться1213.01.13 14:13

Автор: Kiev
Призрак
Последний визит:
19.09.13 07:45
Уважение: +28

У меня тут такая проблема с контейнером "Управление"
Выделеная часть сползает, может всю эту часть выделить?
http://ass.mybb.ru/

Поделиться1313.01.13 15:45

Автор: Бу
Призрак
Последний визит:
04.02.13 13:28
Уважение: +298

Kiev, замените код третьего контейнера
либо так. должно исправить сдвиг

Код:

<div style="display: none;" id="tab3" class="tab_content"> 
<table width="100%" height="350">
<tr>
    <td width="50%" height="110">
<table border="1" width="100%" height="110">
<tr>
<td><img src="http://s3.uploads.ru/BbX4Z.jpg"/></td>
<td  width="60%" bgcolor="#d0f0c0"><center><b>заголовок</b>
<br>текст 1</td> 
</tr>
</table>
     </td>
    
     <td height="110">
<table border="1" width="100%" height="110">
<tr>
<td width="65%" bgcolor="#d0f0c0"><center><b>заголовок</b>
<br>текст 2</center></td>
<td>Фото</td> 
</tr>
</table>
     </td>
</tr>
<tr>
    <td height="110">
<table border="1" width="100%" height="110">
<tr>
<td>Фото</td>
<td width="65%" bgcolor="#d0f0c0"><center><b>заголовок</b>
<br>текст 3</center></td> 
</tr>
</table>
     </td>

    <td height="110">
<table border="1" width="100%" height="110">
<tr>
<td width="65%" bgcolor="#d0f0c0"><center><b>заголовок</b>
<br>текст 4</center></td>
<td>Фото</td> 
</tr>
</table>
     </td>
    
</tr>
<tr>
   <td height="110">
<table border="1" width="100%" height="110">
<tr>
<td>Фото</td>
<td width="65%" bgcolor="#d0f0c0"><center><b>заголовок</b>
<br>текст 5</center></td> 
</tr>
</table>
     </td><td height="110">
<table border="1" width="100%" height="110">
<tr>
<td width="65%" bgcolor="#d0f0c0"><center><b>заголовок</b>
<br>текст 6</center></td>
<td>Фото</td> 
</tr>
</table>
     </td>
 </tr>
</table>
</div>

либо так. должно исправить сдвиг и выделить всю часть

Код:

<div style="display: none;" id="tab3" class="tab_content"> 
<table width="100%" height="350">
<tr bgcolor="#d0f0c0">
    <td width="50%" height="110">
<table border="1" width="100%" height="110">
<tr >
<td><img src="http://s3.uploads.ru/BbX4Z.jpg"/></td>
<td  width="65%" ><center><b>заголовок</b>
<br>текст 1</td> 
</tr>
</table>
     </td>
    
     <td height="110">
<table border="1" width="100%" height="110">
<tr>
<td width="65%" ><center><b>заголовок</b>
<br>текст 2</center></td>
<td>Фото</td> 
</tr>
</table>
     </td>
</tr>
<tr bgcolor="#d0f0c0">
    <td height="110">
<table border="1" width="100%" height="110">
<tr>
<td>Фото</td>
<td width="65%" ><center><b>заголовок</b>
<br>текст 3</center></td> 
</tr>
</table>
     </td>

    <td height="110">
<table border="1" width="100%" height="110">
<tr>
<td width="65%" ><center><b>заголовок</b>
<br>текст 4</center></td>
<td>Фото</td> 
</tr>
</table>
     </td>
    
</tr>
<tr bgcolor="#d0f0c0">
   <td height="110">
<table border="1" width="100%" height="110">
<tr  >
<td>Фото</td>
<td width="65%"><center><b>заголовок</b>
<br>текст 5</center></td> 
</tr>
</table>
     </td><td height="110">
<table border="1" width="100%" height="110">
<tr>
<td width="65%"><center><b>заголовок</b>
<br>текст 6</center></td>
<td>Фото</td> 
</tr>
</table>
     </td>
 </tr>
</table>
</div>

Подпись автора: При заказе таблицы, пожалуйста, сразу указывайте ее ширину и длину, а также другие подробности важные при оформлении таблицы(ширину границ, фон и прочее). Заказы, в которых сразу не будет указано всех подробностей, не переделываются по просьбам: "еще фон сделайте", "а края закруглить можно", " и цвет текста другой сделайте" и прочее в том же духе.

Поделиться1413.01.13 20:12

Автор: Kiev
Призрак
Последний визит:
19.09.13 07:45
Уважение: +28

Бу
Спасибо, вышло. И ещё, как убрать вот эту границу:

Поделиться1514.01.13 13:16

Автор: Бу
Призрак
Последний визит:
04.02.13 13:28
Уважение: +298

хтмл верх

Код:

<style>
.container1 {width: 770px; margin: 0 auto; padding: 0;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 40px;
    width:770px;
    
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 40px;
  width: 130px;   
line-height: 40px;
    border: 0px;
border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
        border-right: 1px solid #000000;
        border-left: 1px solid #000000;
    margin-bottom: -2px;
    background: url();
    overflow: hidden;
    position: relative;
}

ul.tabs li a {
    text-decoration: none;
    color: transparent;
    display: block;
    padding: 0 5px;
    background: url();
    outline: none;
   }

ul.tabs li a:hover {
   
}    

html ul.tabs li.active  {
     
 border-bottom: 1px dashed #000000;
        border-top: 1px dashed #000000;    
        border-left: 1px dashed #000000;    
        border-right: 1px dashed #000000;  }  

html ul.tabs li.active a:hover  {
        background: url();
    border-bottom: 0px solid #160f0a;
}

.tab_container1 {
    clear: both;
    float: left; 
    width: 770px;
    height: 390px;
    
    border-bottom: 0px solid #000000;
        border-top: 0px solid #000000;    
        border-left: 0px solid #000000;    
        border-right: 0px solid #000000;  

}

.tab_content {
    padding: 5px;
}

.tab_content h2 {
    font-weight: normal;
    padding-bottom: 2px;
}
</style>

Подпись автора: При заказе таблицы, пожалуйста, сразу указывайте ее ширину и длину, а также другие подробности важные при оформлении таблицы(ширину границ, фон и прочее). Заказы, в которых сразу не будет указано всех подробностей, не переделываются по просьбам: "еще фон сделайте", "а края закруглить можно", " и цвет текста другой сделайте" и прочее в том же духе.

Поделиться1614.01.13 14:03

Автор: Kiev
Призрак
Последний визит:
19.09.13 07:45
Уважение: +28

Бу
Спасибо, закрывайте:)

ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Меню навигации

Пользовательские ссылки

Объявление

🎧 Подкаст «НЕТЕРОЛЕВЫЕ»

🍁 Что такое осень? Конкурс осенних дизайнов!

🔥 Акция! Осенние скидки на Мгновенные уведомления

❤️ Поддержи проект! Стань модератором!

💌 Акция! Подписка, лайк, коммент, репост!

🌟 SPECIAL OFFER: We distribute designs for free

❤️ Support the project

Информация о пользователе

Таблица. HTML.

Сообщений 11 страница 16 из 16

Поделиться1113.01.13 09:25

Поделиться1213.01.13 14:13

Поделиться1313.01.13 15:45

Поделиться1413.01.13 20:12

Поделиться1514.01.13 13:16

Поделиться1614.01.13 14:03