До и после "Nav" изображения - PullRequest
Новая
       10

До и после "Nav" изображения

0 голосов
/ 06 февраля 2012

У меня немного мозговый пердеть.Мне нужно нарезать это изображение на три части, поместив концы слева и справа от навигационного элемента («nav») соответственно.По какой-то причине я не могу вспомнить семантический способ решения этой задачи.

Это может быть легко, но все и любая помощь будет принята с благодарностью.(кстати: я могу справиться с нарезкой, просто нужна помощь с позиционированием с помощью css.)

Предварительный просмотр http://artjustice.brocknunn.com/q/nav.png

Ответы [ 3 ]

0 голосов
/ 06 февраля 2012

На самом деле, вам просто нужно два слайса и хотя бы один, содержащий div.Итак, если вы используете разметку, это выглядит так: 

<div id="nav">
    <ul class="nav_ul">
        <li>Nav Item</li>
        <li>Nav Item</li>
        <li>Nav Item</li>
    </ul>
</div>

У вас действительно есть все, что вам нужно.Затем вы разрезаете это изображение на две части: первая часть составляет 90% ширины, а затем последние 10% ширины (примерно - достаточно, чтобы получить ограничение).Вы применяете первый срез к div, затем второй к ul.Вроде как: 

#nav {
   background-image: url(slice_left.jpg);
 }
.nav_ul {
   background-image: url(slice_right.jpg);
}

Мысль о том, что фоновое изображение ul появится поверх фонового изображения div.

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

0 голосов
/ 07 февраля 2012

CSS3 border-image может работать, но не очень хорошо поддерживается.

В вашем случае вы можете создавать псевдоэлементы до и после и давать им фоновые изображения, например: 

<!DOCTYPE HTML>
<html>
<head>
<title>example</title>
<style type="text/css">
nav {
    position : relative;
    width : 600px;
    height : 89px;
    background : url(/q/nav.png) top center no-repeat;
    z-index : 1;
}
nav:before, nav:after {
    position:absolute;
    top : 0;
    width : 50px;
    height : 100%;
    z-index : 2;
    content : "";
}
nav:before {
    left : 0;
    background : url(/q/nav.png) top left no-repeat;
}
nav:after {
    right : 0;
    background : url(/q/nav.png) top right no-repeat;
}
</style>
</head>
<body>
<nav>
  whatever you need here properly positioned
</nav>
</body>
</html>
0 голосов
/ 06 февраля 2012

Я думаю, что вы ищете дисплей: встроенный.

что-то вроде 

#navbar { display: inline; }
<div id="navbar">
     <div id="right-image"><img src=rightimage></div>
     <div id="center-image"><img src=centerimage></div>
     <div id="left-image"><img src=leftimage></div>
</div>

Возможно, вам придется немного повозиться с полями.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...