CSS "абсолютно" позиционирует границу-изображение

#hover #absolute #css

#наведите #абсолютный #css

Вопрос:

Вот уже полтора дня у меня проблема с дизайном CSS, и это сводит меня с ума. У меня есть горизонтальная панель навигации с одним неупорядоченным списком внутри. Каждый элемент списка содержит привязку (или гиперссылку) к странице на веб-сайте, CSS выглядит следующим образом:

 nav#main{
    background:#000;
    width:100%;
    overflow:auto;
}
nav#main ul{
    list-style:none;
}
nav#main li{
    float:left;
    display: block;
    overflow:auto;
}
nav#main a{
    display:block;
    padding:1em;
    color:#FFF;
    text-transform:uppercase;
    font-size:1.6em;
}
nav#main a:hover{
    background:#EF7E05;
    background-clip:padding-box;
    border-width:0 0 15px 0;
    border-image:
        url('../images/nav.png')
        0 
        0
        25
        stretch;
}

И HTML:

 <nav id="main">
    <ul>
        <li><a href="#">Link text</a></li>
        <li><a href="#">Link text</a></li>
        <li><a href="#">Link text</a></li>
    </ul>
</nav>
<div id="contentArea">
    <!-- DIFFERENT DIVS, COLUMS ARTICLES ETC. -->
</div>

Все это работает так, как и должно работать.

Однако я пытаюсь добиться того, чтобы изображение границы отображалось за пределами навигационной панели и чтобы оно не уменьшало область содержимого на 25 пикселей. Есть идеи?

Я также попытался абсолютное позиционирование блока с помощью.hover::after . Это прекрасно работает, однако ширину блока нельзя установить равной a. Возможно, есть идеи и по этому поводу?

1. у вас есть ссылка? трудно представить проблему.. где именно вы хотите, чтобы отображалось изображение границы? вне панели навигации, но не в потоке документов?

2. используйте z-index: 2; это должно сработать. [IP-адрес]

3. jsfiddle.net/WcA2J попробуйте отредактировать здесь

Ответ №1:

Вам нужно очистить плавающие элементы, используя clear, а не overflow:visible

Если вы сделаете это, вы можете использовать свое абсолютное позиционирование для создания границы:

 nav#main{
    background:#000;
    width:100%;
}
nav#main:after {
    content:'';
    display:block; 
    clear:both;
}
nav#main ul{
    list-style:none;
}
nav#main li{
    float:left;
    display: block;
    overflow:visible;
}
nav#main a{
    display:block;
    padding:1em;
    color:#FFF;
    text-transform:uppercase;
    font-size:1.6em;
    position:relative;
    overflow:visible;
}
nav#main a:hover{
    background:#EF7E05;
}
nav#main a:hover:after{
    background-clip:padding-box;
    content:'';
    position:absolute;
    top:100%;
    left:0; 
    right:0;
    border-width:0 0 15px 0;
    border-image:
        url('../images/nav.png')
        0 
        0
        25
        stretch;
}

Пример

Я заметил, что функция border image не работает в Firefox или ie, так что это даст вам тот же эффект и будет более удобным для браузера:

 nav#main a:hover:after{
    background-clip:padding-box;
    content:'';
    position:absolute;
    top:100%;
    left:0; 
    right:0;
    height:15px;
    background: url('../images/nav.png') left top no-repeat;
    background-size: 100% 15px;
}

Пример