Мы делаем фон (прямоугольник с закруглёнными углами) на нём размещаем меню, между ссылок ставим картинку как бы пробел для кнопок, эта картинка конец одной кнопки и на чало второй. Всё просто, приступим к реализации. В фотошопе я нарисовал такую заготовку Далее с помощью инструмента "Раскройка" порезал картинку. Нам нужны 4 части, зачёркнутое выкидываем. Html код - вставляем "Главная страница форума" куда вам надо: Code <div class="l"></div> <div class="p"></div> <div class='c'>
<a href="/">Главная</a> <img src="images/x.jpg" alt=""> <a href="/">Форум</a> <img src="images/x.jpg" alt=""> <a href="/">Последние сообщения</a> <img src="images/x.jpg" alt=""> <a href="/">Пользователи</a> <img src="images/x.jpg" alt=""> <a href="/">Пользователи</a> <img src="images/x.jpg" alt=""> <a href="/">rss - ленты</a>
</div> Css код в самый низ в Таблица стилей (CSS) или вашего *.css Файла . Code .l {background:url(images/l.jpg) no-repeat /*не растягивающийся бекгроунд*/; height:40px /*высота*/; width:24px /*ширина*/; float:left /*сам элемент с лева всё обтекание с права*/;}/*левая часть*/
.p {background:url(images/p.jpg) no-repeat;height:40px;width:30px;float:right;}/*правая часть*/ .c {background:url(images/c.jpg) repeat-x;height:40px;width:100%;} /*фон*/
.c a, .c img {float:left;} /*ставим обтекание картинкам и ссылкам, для того чтобы всё было в ряд*/ .c a {margin:13px 6px 0 5px;} /*выравниваем ссылки*/ всё что в /**/ можно убрать. Также можно посмотреть демо по этой ссылки -> DEMO
|