Простое css меню (продолжение)

Готовое css меню для нижней части страницы.


Демо (скриншот):

Блок подключения:
<ul id="footer-corp">
<li><a href="ссылка">Ссылка1</a></li>
<li><a href="ссылка">Ссылка2</a></li>
<li><a href="ссылка">Ссылка3</a></li>
<li><a href="ссылка">Ссылка4</a></li>
<li><a href="ссылка">Ссылка5</a></li>
<li><a href="ссылка">Ссылка6</a></li>
<li><a href="ссылка">Ссылка7</a></li>
<li><a href="ссылка">Ссылка8</a></li>
</ul>

Пояснение:
в href="ссылка" вместо слова "ссылка" подставляем url страницы.

+ стили:
<style>
#footer-corp{
position:absolute;
bottom:0;left:10%;
width:960px;
height:40px;
margin:0 0 0 -20px;
padding:0;
list-style:none;
text-align:center;
background:transparent url(http://planeta.omg-linux.ru/docs/brk-corp-footer-bg.png) 0 0 no-repeat;}

#footer-corp li{
display:inline;
padding:0 15px;
text-align:center;
font:normal 16px/42px arial;
border-right:1px solid #b9cfdc;
}
#footer-corp li.last{
border-right:none;}
#footer-corp a{
color:#fff;text-decoration:none;
}
#footer-corp a:hover{
color:#b9cfdc;
text-decoration:underline;
}
.footer-precis{
height:50px;
overflow:hidden;
margin:0;
padding-top:10px;
color:#b9cfdc;
font:normal 13px arial;
}
.footer-precis a{
color:#b9cfdc;
border-bottom:1px solid #b8cce8;
text-decoration:none;}
.footer-precis a:hover{
border-bottom:0;
}
</style>

Обращаю внимание на background:transparent url(http://planeta.omg-linux.ru/docs/brk-corp-footer-bg.png). Кладём картинку на свой хостинг! Если требуется уменьшить размеры, пользуемся фоторедатором.
В position:absolute;bottom:0;left:10%; подстраиваем расположение меню на странице.

См. также "Простое css меню (начало).

Комментариев нет:

Отправить комментарий