之前和之后“导航”图像
问题描述:
我有一点脑屁。我需要将这个图像分成三部分,分别放置在导航div(“nav”)的左侧和右侧。出于某种原因,我不记得完成这项任务的语义方式。之前和之后“导航”图像
这可能是一个容易的,但所有和任何帮助将不胜感激。 (顺便说一句:我能处理的切片,只需要与CSS的定位有所帮助。)
答
真的,你只需要两个切片和至少一个包含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的背景图像。
您甚至可以返回并编辑第一片(长片)并将背景克隆为额外的几百像素,以防您的导航栏水平增长。
答
我认为你正在寻找显示:内联。
东西沿着
#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>
线可能必须与边缘有点乱。
答
CSS3的边框图像可能工作,但它不是很好的支持。
在你的情况,你可以前后pseudoelements之后创建,并给他们的背景图像,例如:
<!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>
这是完美的,它的工作!谢谢你们的帮助。有时走开一点会产生变化。我甚至无法考虑这个解决方案。再次感谢! – Brock 2012-02-06 20:00:14
很高兴帮助! – chipcullen 2012-02-06 20:30:47