Демо (скриншот):
Блок подключения:
<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 меню (начало).
Комментариев нет:
Отправить комментарий