Форум Сайтостроение Веб-строительство

Верстка. Застрял на создании горизонтального меню

12
ISDN :)
На сайте с 28.02.2006
Offline
84
ISDN :)
1153

Помогите решить на первый взгляд простую проблему по верстке горизонтального меню (меню в вложениях).

Задача. Разбить картинку на 3 файла: бекграунд в спокойном состоянии, бекраунд когда наводим и линия разделитель. Вывести меню как показано на картинке.

Интересует любое решение.

ПС: в поиск не посылайте, уже все и вся перерыл в сети …

jpg hepl_verstka.jpg
[Удален]
#1

ISDN :), http://94.31.169.103/kupimena/trunk/

тут в исходниках глянь ;)

ixRock
На сайте с 14.11.2006
Offline
46
ixRock
#2

линию разделитель сделай через border-right:1px solid gray; типа так.

а бэкграунд в две линии файл создай, чтобы потом при наведении просто поднимать его вверх через background-position..

ну и сами ссылки для меню можешь сделать через дисплэй:блок + флоат:лэфт..

Работаю [S]за еду и секас[/S] с XHTML, CSS, XSLT, JS, PHP. Если что, вот тут (http://www.mintdesign.ru/) некоторые мои работы. Контакты: ася 344-ноль86-276, мыло ixrock@gmail.com
ISDN :)
На сайте с 28.02.2006
Offline
84
ISDN :)
#3

bearman, ixRock, все супер, но тут и загвоздка, линия должна быть не через border, а через картинку.

[Удален]
#4

ISDN :), блин как в школе ... <span> вставляешь в li да задаешь бекграунды нужные ;)

Ткач
На сайте с 29.04.2007
Offline
95
Ткач
#5

а что мешает создать линию в бэкграунде? или действительно вставить картинку дополнительную. чето не понимаю проблему

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)
Prior
На сайте с 03.03.2008
Offline
184
Prior
#6

Статья

Пример

...может это поможет.

Ответы на вопрос - https://answers.net.pl
ISDN :)
На сайте с 28.02.2006
Offline
84
ISDN :)
#7

CSS 


.menu {

	height: 27px;

	background: url(images/mbg.png) repeat-x;

}



.menu a {

	font-size:13px;

	color: #fff;

	display: block;

	float: left;

	padding: 5px 20px 0px 20px;

	height: 27px;

	background: url(images/mbg.png) repeat-x;

	text-decoration: none;

	font-weight: bold;

}



.menu a:hover {

	background-position: 0px -27px;

}

HTML 

<div class="menu"> <a href="#">ГЛАВНАЯ</a> <a href="#">АКТУАЛЬНЫЕ ТЕМЫ</a> <a href="#">ТЕСТ</a> </div>

И как тут можно вставить картинкой линию, если слой не дает этого сделать?

Ткач
На сайте с 29.04.2007
Offline
95
Ткач
#8

ISDN :), так а Вы код правильно перепишите просто или бэкграунд вырежте иначе

ixRock
На сайте с 14.11.2006
Offline
46
ixRock
#9

бэкграунд слепите так, чтобы вертикальный разделитель был с правой стороны, и тогда в цсс просто выравнивание делать по правому краю..

ISDN :)
На сайте с 28.02.2006
Offline
84
ISDN :)
#10
ixRock:
бэкграунд слепите так, чтобы вертикальный разделитель был с правой стороны, и тогда в цсс просто выравнивание делать по правому краю..

Нельзя. Идет растяжка на 100% файла ширина 3px и высота 27px

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий