Помогите с меню

[Tornado]

Подскажите, пожалуйста, как сделать такое меню, целый день мучаюсь. Вроде получилось, но не могу сделать границу слева!

 <div id="menu_bottom">
    <div class="left">
            <a href="#"><div class="top"><span>Пункт 1</span></div></a>
            <a href="#"><div><span>Пункт 1</span></div></a>
            <a href="#"><div><span>Пункт 1</span></div></a>
            <a href="#"><div><span>Пункт 1</span></div></a>
            <a href="#"><div><span>Пункт 1</span></div></a>
            <a href="#"><div class="bottom"><span>Пункт 1</span></div></a>
    </div>
    </div>

#menu_bottom{
	width:175px;
	background:#fae2d3 url(image/menu_border_vert.jpg)  right repeat-y;
	display:block;
}

#menu_bottom .left{
	width:175px;
	background:url(image/menu_border_vert.jpg) left repeat-y;
}

#menu_bottom .top{
	background:url(image/menu_top.jpg) no-repeat top;
	border-top:none;
}

#menu_bottom a:hover .top{
	background:#e66d24 url(image/menu_top_h.jpg) no-repeat top;
}

#menu_bottom .bottom{
	background:url(image/menu_bottom.jpg) no-repeat bottom;
}

#menu_bottom a:hover .bottom{
	background:#e66d24 url(image/menu_bottom_h.jpg) no-repeat bottom;
}

#menu_bottom div{
	width:100%;
	background:url(image/delimeter_menu.gif) no-repeat;
	padding-bottom:10px;
	padding-top:10px;
	border-top:1px solid #e66d24;
}

#menu_bottom span{
	padding-left:15px;
}
	
#menu_bottom a{
	text-decoration:none;
	outline:none;
	color:#000000;
}

#menu_bottom a:hover{ 
	background:#e66d24; 
	color:#FFFFFF; 
}

#menu_bottom a:hover div{ 
	background:#e66d24; 
	color:#FFFFFF;
}

 

[tigra60]

Во вложенном архиве решение вашего вопроса (язык не поворачивается назвать это проблемой).

Посмотреть вложение simple_menu.zip


И никогда так не пишите:

<a href="#"><div class="top"><span>Пункт 1</span></div></a>

Нельзя вкладывать блочный элемент (DIV) в строковый (А).

А меню нужно писать списком UL (см. исходный код в архиве).

 

[marker]

Нельзя вкладывать блочный элемент (DIV) в строковый (А).

Валидатору это конечно не понравиться, но я могу сделать из <a> - блочный элемент если добавлю display:block;, я не прав? :laugh:

http://htmlbook.ru/css/display

 

[Tornado]

Во вложенном архиве решение вашего вопроса (язык не поворачивается назвать это проблемой).
Посмотреть вложение 1388
Посмотреть вложение 1389


И никогда так не пишите:

<a href="#"><div class="top"><span>Пункт 1</span></div></a>

Нельзя вкладывать блочный элемент (DIV) в строковый (А).

А меню нужно писать списком UL (см. исходный код в архиве).

Спасибо большое!!! Вы - волшебник.

Во вложенном архиве решение вашего вопроса (язык не поворачивается назвать это проблемой).
Посмотреть вложение 1388
Посмотреть вложение 1389


И никогда так не пишите:

<a href="#"><div class="top"><span>Пункт 1</span></div></a>

Нельзя вкладывать блочный элемент (DIV) в строковый (А).

А меню нужно писать списком UL (см. исходный код в архиве).

Спасибо большое!!! Вы - волшебник.

Сорри, сразу не заметила. Я думала, что не желательно использовать отрицательные margin или padding. Или все таки допустимо?