Susy, Что там насчет окантовки? Закругленные края принципиальны, или хватит пунктира?
Скругление не все браузеры поддерживают.
Код:
<table width="100%" height="400" border="0" cellspacing="1" cellpadding="0" style="text-align: center;"> <tr height="250"> <td width="190" style="border: 1px #000 dotted;" valign="top"><div style="width: 99%; height: 248px; overflow: auto;"> <img src="картинка админов"> <br/><br/> <img width="30" height="40" src="фото 1"> <img width="30" height="40" src="фото 2"> <br/><br/> <img src="картинка модеров"> <br/><br/> <img width="30" height="30" src="фото 3"> <img width="30" height="30" src="фото 4"> <br/><br/> <img src="картинка топы"> <br/><br/> <img width="88" src="счетчик 1"> <img width="88" src="счетчик 2"> </div></td> <td valign="top"> <table width="100%" height="100%" border="0" cellpadding="1" cellspacing="2"> <tr height="50"><td colspan="3" style="border: 1px #000 dotted; font-size: 12px; font-weight: bold;"> Приветствие </td></tr> <tr height="45"> <td width="33%" style="border: 1px #000 dotted;"> <img src="картинка новостей"> </td> <td width="33%" style="border: 1px #000 dotted;"> <img src="картинка погоды"> </td> <td width="34%" style="border: 1px #000 dotted;"> <img src="картинка ссылок"> </td> </tr> <tr height="250"> <td style="border: 1px #000 dotted;"><div style="overflow: auto; width: 100%; height: 248px;"> Текст новостей </div></td> <td style="border: 1px #000 dotted;"><div style="overflow: auto; width: 100%; height: 248px;"> Текст погоды </div></td> <td style="border: 1px #000 dotted;"> <a href="ссылка на тему 1"><img src="ссылка на картинку"></a> <br/> <a href="ссылка на тему 2"><img src="ссылка на картинку"></a> <br/> <a href="ссылка на тему 3"><img src="ссылка на картинку"></a> <br/> <a href="ссылка на тему 4"><img src="ссылка на картинку"></a> <br/> <a href="ссылка на тему 5"><img src="ссылка на картинку"></a> <br/> <a href="ссылка на тему 6"><img src="ссылка на картинку"></a> <br/> <a href="ссылка на тему 7"><img src="ссылка на картинку"></a> <br/> <a href="ссылка на тему 8"><img src="ссылка на картинку"></a> </td> </tr> </table> </td> </tr> <tr height="50"><td colspan="2" style="border: 1px #000 dotted;"><marquee onmouseover="this.stop()" onmouseout="this.start()"> Бегущая строка баннеров </marquee></td></tr> </table>
Прокрутка явится, как только содержимое превысит заданный лимит. Бегущая строка останавливается при наведении курсора.
Hitsugi, кнопки с выплывающим контентом:
В html-верх:
Код:
<style>
.splLink {
width: 150px;
height: 20px;
color: #fff;
border: 1px solid #666;
text-align: center;
font-size: 14px;
font-weight: bold;
padding: 5px;}
.splCont {
height: auto;
width: 200px;
background: #8D9296;
padding: 5px;
margin-top: 5px;
margin-left: -25px;
border: 2px solid #3F4549;
font-size: 12px;
text-align: center;}
</style>В объявление:
Код:
<center><table style="width: 95%"> <tr> <td><DIV><div class=splLink>Новости</div> <DIV style="DISPLAY: none; position: absolute;" class=splCont><div style="width: 100%; height: 200px; overflow: auto;"> Контент 1 </div></DIV></DIV></td> <td><DIV><div class=splLink>Для новичков</div> <DIV style="DISPLAY: none; position: absolute;" class=splCont><div style="width: 100%; height: 200px; overflow: auto;"> Контент 2 </div></DIV></DIV></td> <td><DIV><div class=splLink>Время и Погода</div> <DIV style="DISPLAY: none; position: absolute;" class=splCont><div style="width: 100%; height: 200px; overflow: auto;"> Контент 3 </div></DIV></DIV></td> <td><DIV><div class=splLink>Администрация</div> <DIV style="DISPLAY: none; position: absolute;" class=splCont><div style="width: 100%; height: 200px; overflow: auto;"> Контент 4 </div></DIV></DIV></td> </tr> </table></center>
В html-низ:
Код:
<!--Спойлер - контейнер-->
<script type="text/javascript">
$(document).ready(function(){
$('.splLink').click(function(){
$(this).parent().children('div.splCont').toggle('normal');
return false;
});
});
</script>antuanna написал(а):
я ж дала..
antuanna, уже третий раз попадаются такие заказы... Я могу сделать вам таблицу с кнопками по правой, или по левой стороне...
L-sama, здравствуйте.
В html-верх:
Код:
<style>
#menu {
margin-top: -9px;
width: 135px;
height: 100px;}
#menu span {
font-size: 16px;
text-align: center;
display: block;
margin: 22px 0;
padding: 23px;}
#submenu, #menu span {
border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
background:#fff;}
#menu .tabactive {
color: #2662DF;}
#submenu {
padding: 3px;
text-align: center;
font-size: 12px;
width: 500px;
}
.submenutext {
display: none;
height: 300px;}
</style>В объявление:
Код:
<center><table style="width: 675px; height: 450px; background-image: url("ссылка на картинку");" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="MenuTxT" align="center" valign="top">
<div id="submenu" align="center">
<div id="sm1" class="submenutext" style="display:block;"><br/>
Контент 1-й кнопки
</div>
<div id="sm2" class="submenutext"><br />
Контент 2-й кнопки
</div>
<div id="sm3" class="submenutext"><br />
Контент 3-й кнопки
</div>
<div id="sm4" class="submenutext"><br />
Контент 4-й кнопки
</div>
<div id="sm5" class="submenutext"><br />
Контент 5-й кнопки
</div>
</div>
<table style="width: 96%; height: 120px; margin-top: 3px; text-align: center;" border="0" cellpadding="0" cellspacing="2">
<tr height="10"><td>
<b>Партнеры</b>
</td></tr>
<tr height="110"><td style="background-color: #fff; border: 1px solid #fff; border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px;">
Баннеры
</td></tr>
</table>
</td>
<td valign=top>
<div id="menu"> <b>
<span alt="#sm1" style="cursor: pointer;">1</span>
<span alt="#sm2" style="cursor: pointer;">2</span>
<span alt="#sm3" style="cursor: pointer;">3</span>
<span alt="#sm4" style="cursor: pointer;">4</span>
<span alt="#sm5" style="cursor: pointer;">5</span>
</b>
</div>
</td>
</tr>
</tbody>
</table></center>В html-низ:
Код:
<script type="text/javascript">
$(document).ready(function() {
$("td.#MenuTxT div.submenutext").hide();
<!--$(".tabs span:first").addClass("active").show(); -->
$("td.#MenuTxT div.submenutext:first").show();
$("div.#menu span").click(function() {
$("div.#menu span").removeClass("tabactive");
$(this).addClass("tabactive");
$("td.#MenuTxT div.submenutext").hide();
var activeDiv = $(this).attr("alt");
$("div."+activeDiv).fadeIn();
return false; });
});
</script>Coffe, здравствуйте.
Уточните пожалуйста размеры картинок, что будут в таблице?
Отредактировано Rion Leonheart (Пн, 19 Дек 2011 17:01:46)
посмотрим, что можно сотворить)
