После редактирования меню, появилось слева свободное место, которое не должно быть.
Нажмите для увеличения
Подробности кода:
html меню:CODE (
html):
скопировать код в буфер обмена
<ul class="menu">
<li><a class="active" href="index.html">Главная</a></li>
<li class="newmenu"><a href="services.html">Наши работы</a></li>
<li class="newmenu"><a href="faq.html">FAQ</a></li>
<li class="newmenu"><a href="prices.html">Наши цены</a></li>
<!-- <li><a href="staff.html">Our Staff</a></li> -->
<li class="last"><a href="contacts.html">Контакты</a></li>
</ul>
А вот CSS:CODE (
htmlphp):
скопировать код в буфер обмена
.menu {
padding:0 0 0 0;
width:100%;
margin-top:-9px;
position:relative;
z-index:2;
}
.menu li {
float:left;
position:relative;
padding-right:2px;
background:url(../images/menu-spacer.gif) right top repeat-y;
display: inline-block;
}
.newmenu {
white-space: nowrap; /* блок может содержать не более одной строки */
float:left;
width:25%;
position:relative;
/* padding-right:2px; */
background:url(../images/menu-spacer.gif) right top repeat-y;
}
.menu li.last {
background:none;
padding:0;
text-align: center;
width:20%;
float:left;
}
.menu li a {
display:block;
font-size:15px;
font-weight:400;
line-height:2em;
padding:6px 64px 8px 65px;
color:#fff;
text-transform:capitalize;
letter-spacing:-1px;
background:#2b2b2b;
}
.menu li:first-child a {
padding:6px 0 8px;
width:65px;
text-indent:-9999px;
background:url(../images/menu-home-icon.png) center center no-repeat #2b2b2b;
border-radius:9px 0 0 9px;
-moz-border-radius:9px 0 0 9px;
-webkit-border-radius:9px 0 0 9px;
}
.menu li.last a {
padding:6px 0 8px;
border-radius:0 9px 9px 0;
-moz-border-radius:0 9px 9px 0;
-webkit-border-radius:0 9px 9px 0;
}
.menu li a.active,
.menu > li > a:hover {background-color:#222}
Задачка такая, надо чтобы первый пункт меню имел ширину
65px, а остальные эллементы меню чтобы равномерно распределились по ширине.
Подскажите, как такое можно сделать?
Проблемная страничка с меню