Нужна помощь с CSS на сайте

0

Я создаю сайт, используя свой собственный дизайн, и у меня недавно возникло осложнение. Это о том, как позиционируется стиль меню. Я затрудняюсь объяснить эту проблему, поэтому, во-первых, я покажу изображения.
Он должен выглядеть так: http://i.imgur.com/XINIlXC.jpg
Это выглядит так: http://i.imgur.com/RKrFZVz.jpg
Как вы можете видеть, это простое горизонтальное меню с разделителями между пунктами меню, но сложной частью является угол. На изображении, где все работает отлично, я использую грязный код, который не совместим со списками, которые мне понадобятся для выпадающих меню позже.
Итак, это грязный код:

<div class="menu" id="menu-item">

<img src="images/top_menu_edge.png" style="margin-left:-23px;"/> <span style="margin-right:10px"> 1aaaa <span class="ms"></span> 2bbbb <span class="ms"></span> 3 </span>

</div>

Span.ms - это просто селектор меню. Что касается всех остальных частей, я покажу код css.

#menu-item
{
position: absolute; /* The absolute position shouldn't be a problem, because everything is contained in div#header, and it position is relative. */
bottom: 12px;
right: 0;
height: 34px;
background-position: bottom right;
z-index: 5;
color: #192c51;

}
.menu
{
position: absolute;
bottom: 0;
right: 0;
height: 34px;
background-image: url('images/top_menu_bg.png');
background-position: bottom right;
z-index: 5;
color: #192c51;

}
И это код, который был исправлен, но по какой-то причине изображение не работает:

<div class="menu" id="menu-item">

<div class="menu-item">

<img src="images/top_menu_edge.png" style="margin-left:-23px;"/>

<ul id="nav">

<li>  Pagrindinis </li>
<li> Apie mus </li>
<li> Paslaugos </li>
<li> Kontaktai </li>
</ul>
</div>
</div>

И дополнительные строки css для ul и li:

#nav
{
list-style:none;
float:left;
}
#nav > li {
float: left;
}
#nav li+li
{
background:url('images/top_menu_sep.png') no-repeat top left;
padding-left:10px;
}

Это в значительной степени это, и я действительно не понимаю, почему тег разрушает все это, но мне нужно это сделать. У кого-нибудь есть какие-либо подходы, как исправить это или показать мне путь? Я был бы очень благодарен.
Приветствия :)

Теги:

1 ответ

0
Лучший ответ

Если вы укажете элементы float, они не будут иметь ширины, если вы поместите вместо него неплавающий элемент. Удалите все поплавки и переключитесь на отображение: встроенный блок или дайте все поплавок

Ещё вопросы

Сообщество Overcoder
Наверх
Меню