CSS-навигация с фоновыми изображениями

#html #css

#HTML #css

Вопрос:

У меня есть CSS-навигация, которая выглядит следующим образом:

         <div id="header_nav">
            <div class="header_nav_left"></div>
            <div class="header_nav_item"><span class="header_nav_item_span">Menu 1</span></div>
            <div class="header_nav_item"><span class="header_nav_item_span">Menu 2</span></div>
            <div class="header_nav_item"><span class="header_nav_item_span">Menu 3</span></div>
            <div class="header_nav_item"><span class="header_nav_item_span">Menu 4</span></div>
            <div class="header_nav_item"><span class="header_nav_item_span">Menu 5</span></div>
            <div class="header_nav_item"><span class="header_nav_item_span">Menu 6</span></div>
            <div class="header_nav_item"><span class="header_nav_item_span">Menu 7</span></div>
            <div class="header_nav_item_last"><span class="header_nav_item_span"></span></div>
            <div class="header_nav_right"></div>
        </div>

Визуально меню выглядит так:

Меню 1 Меню 2 Меню 3 Меню 4 Меню 5 Меню 6 Меню 7

Я добиваюсь эффекта «» за счет использования фонового изображения в каждом div. CSS для меню следующий:

 .header_nav_left {
width:144px;
height:24px;
float:left;
background: url('/images/header_nav/left_cap.jpg') no-repeat;
background-position: right;
}

.header_nav_item {
height:24px;
font-size: 15px;
text-align:left;
float:left;
background: url('/images/header_nav/divider.jpg') no-repeat #fc7a06;
background-position: right;
min-width:75px;
}

.header_nav_item_span {
vertical-align:middle;
padding-left:5px;
}

.header_nav_item_last {
height:24px;
font-size: 15px;
float:left;
background:#fc7a06;
}

.header_nav_right {
height:24px;
float:left;
background: url('/images/header_nav/right_cap.jpg') no-repeat;
background-position: left;
min-width:24px;
}

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

Menu 1 Меню 2 Меню 3 Меню 4 Меню 5 Меню 6 Меню 7

Это имеет смысл: поскольку изображение разделителя не является изображением уровня блока, текст в пределах диапазона просто отображается поверх него. Вероятно, я могу решить эту проблему, добавив встроенное изображение к каждому nav_item, но я надеялся сохранить навигацию как можно более чистой. Есть ли у меня какой-нибудь способ применить стиль, который будет учитывать изображение разделителя без необходимости добавления встроенного изображения? Если это имеет значение, разделитель изображения имеет ширину 24 пикселя.

1. попробуйте обновить свои изображения куда-нибудь и создать живую демонстрацию, показывающую точную проблему, с которой вы столкнулись, или, по крайней мере, изображение, показывающее, что проблема в порядке.

Ответ №1:

Самый простой способ сделать это — поместить правильные отступы в пункты меню и поместить фоновое изображение в эту область отступов. Например.

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

#header_nav {
    list-style: none;
    margin: 0;
    padding: 0 0 0 144px;
    background: url('/images/header_nav/left_cap.jpg') no-repeat;
    overflow: hidden;
}

#header_nav li {
    float: left;
    padding-right: 30px;
    background: #fc7a06 url('/images/header_nav/divider.jpg') no-repeat right;
    text-align: center;
    min-width: 75px;
}

</style>
</head>
<body>

<ul id="header_nav">
    <li><a href="">Menu 1</a></li>
    <li><a href="">Menu 2</a></li>
    <li><a href="">Menu 3</a></li>
    <li><a href="">Menu 4</a></li>
    <li><a href="">Menu 5</a></li>
    <li><a href="">Menu 6</a></li>
    <li><a href="">Menu 7</a></li>
    <li><a href="">Menu 8</a></li>
</ul>

</body>
</html>