Каталог Java скриптов!Онлайн сервисов!Всё для Веб-мастера!
Новые сообщения · Участники · Правила форума · Поиск · RSS
  • Страница 1 из 1
  • 1
Модератор форума: Diego543  
Растянуть фон
Axerel Дата: Пятница, 24.04.2009, 1:08:24 AM | Сообщение # 1
Сообщений: 2
Статус: OF
Столкнулись с трудностью в оформлении дизайна сайта, нужно растянуть фон который, указан на рисунке кнопкой, на ширину 100% и при этом чтобы кнопочки остались посередине.

Вот код этой панельки ссылок, брал кстати у вас.
Фон который надо растянуть: http://www.icq-z.ru/pro_eight_back.gif

CSS

Code
<style>
#container {

    float: left;
    position: relative;
    left: 50%;
}
#container ul {

    list-style: none;
    position: relative;
    left: -50%;
}

#container li {

    float: left;
    position: relative; /* For IE */
}

/* IE Mac only styles \*//*/
#container {
    float: none;
    position: static;
}

#container ul {
    position:static;
    text-align: center;
}

#container li {
    float: none;
    position: static;
    display: inline-block;
}
/* End of IE Mac style*/
</style>
<style type="text/css">

.pro8 {background:#fff url(http://www.icq-z.ru/pro_eight_back.gif); position:relative;margin:0; list-style:none; height:25px; border:1px solid #000; border-width:0 1px 1px 1px; border-bottom-color:#444;}
.pro8 li {float:left;background:#fff url(http://www.icq-z.ru/pro_eight_back.gif); position:relative;}
.pro8 li a {display:block; float:left; height:25px; line-height:23px; background:url(http://www.icq-z.ru/pro_eight_0.gif); color:#fff; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 12px; cursor:pointer;}
.pro8 li a b {float:left; display:block; padding:0 12px 0 0; background:url(http://www.icq-z.ru/pro_eight_0.gif) right top;}
.pro8 li.current a {color:#fff; background:url(http://www.icq-z.ru/pro_eight_2.gif);}
.pro8 li.current a b {background:url(http://www.icq-z.ru/pro_eight_2.gif) right top;}
.pro8 li a:hover {color:#000; background:url(http://www.icq-z.ru/pro_eight_1.gif);}
.pro8 li a:hover b {background:url(pro_eight_1.gif) right top;}
.pro8 li.current a:hover {color:#fff; background:url(http://www.icq-z.ru/pro_eight_2.gif); cursor:default;}
.pro8 li.current a:hover b {background:url(http://www.icq-z.ru/pro_eight_2.gif) right top;}

</style>

HTML

Code
<div id="container">
<ul class="pro8">
<li class="current"><a href="http://www.icq-z.ru/"class="top_link"><span><b>Главная</b></span></a></li>    
<li class="top"><a href="/publ/1"class="top_link"><span><b>Статьи</b></span></a></li>    
<li class="top"><a href="/load/1"class="top_link"><span><b>Раздачи ICQ</b></span></a></li>    

<li class="top"><a href="/forum/"class="top_link"><span><b>Форум</b></span></a></li>    
<li class="top"><a href="http://www.icq-z.ru/contacts.html"class="top_link"><span><b>Помощь в учёбе</b></span></a></li>    
<li class="top"><a href="/gb/"class="top_link"><span><b>Отзывы</b></span></a></li>    
</ul>
</div>
Прикрепления: 5826829.jpg (35.2 Kb)
Страна:
scriptozna Дата: Воскресенье, 26.04.2009, 11:39:59 AM | Сообщение # 2
Смотреть профиль scriptozna
Admin
Сообщений: 441
Статус: OF
Axerel, Ставьте так
ксс
Code
<style type="text/css">

.pro8 {padding:0 0 0 32px; margin:0; list-style:none; height:25px;background:#fff url(http://www.icq-z.ru/pro_eight_back.gif);  height:25px; }
.pro8 li {float:left;background:#fff url(http://www.icq-z.ru/pro_eight_back.gif); position:relative;}
.pro8 li a {display:block; float:left; height:25px; line-height:23px; background:url(http://www.icq-z.ru/pro_eight_0.gif); color:#fff; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 12px; cursor:pointer;}
.pro8 li a b {float:left; display:block; padding:0 12px 0 0; background:url(http://www.icq-z.ru/pro_eight_0.gif) right top;}
.pro8 li.current a {color:#fff; background:url(http://www.icq-z.ru/pro_eight_2.gif);}
.pro8 li.current a b {background:url(http://www.icq-z.ru/pro_eight_2.gif) right top;}
.pro8 li a:hover {color:#000; background:url(http://www.icq-z.ru/pro_eight_1.gif);}
.pro8 li a:hover b {background:url(pro_eight_1.gif) right top;}
.pro8 li.current a:hover {color:#fff; background:url(http://www.icq-z.ru/pro_eight_2.gif); cursor:default;}
.pro8 li.current a:hover b {background:url(http://www.icq-z.ru/pro_eight_2.gif) right top;}

</style>

html
Code

<ul class="pro8">
<li class="current"><a href="http://www.icq-z.ru/"class="top_link"><span><b>Главная</b></span></a></li>     
<li class="top"><a href="/publ/1"class="top_link"><span><b>Статьи</b></span></a></li>     
<li class="top"><a href="/load/1"class="top_link"><span><b>Раздачи ICQ</b></span></a></li>     

<li class="top"><a href="/forum/"class="top_link"><span><b>Форум</b></span></a></li>     
<li class="top"><a href="http://www.icq-z.ru/contacts.html"class="top_link"><span><b>Помощь в учёбе</b></span></a></li>     
<li class="top"><a href="/gb/"class="top_link"><span><b>Отзывы</b></span></a></li>     
</ul>


В личке отвечаю только на ЛИЧНЫЕ вопросы.
Страна:
Axerel Дата: Четверг, 18.06.2009, 2:13:48 AM | Сообщение # 3
Сообщений: 2
Статус: OF
scriptozna, большое спасибо
Страна:
  • Страница 1 из 1
  • 1
Поиск:

Рейтинг@Mail.ru Rambler's Top100
Хостинг от uCoz