标签导航与图像渗透通过

我正在寻找一种方式来创建一个带有标签导航的网站，图像背景“流血”主要div到活动标签。我做了一个小ASCII艺术品来形容这一点：标签导航与图像渗透通过

+-----------+-----------+-----------+ |//Tab 1 /| ! !Tab 2! | & &Tab 3& | |/////+-----------+-----------+----------------+ |//////////////////////////| |//////////////////////////| |//////////////////////////| |//////////////////////////| |//////////////////////////| |//////////////////////////| |/////// Main div here//////////// | |//////////////////////////| |//////////////////////////| |//////////////////////////| |//////////////////////////| |//////////////////////////| |//////////////////////////| |//////////////////////////| |//////////////////////////| |//////////////////////////| +----------------------------------------------------+

我一个解决方案，尝试如下。

<html> 
<head> 
    <link rel="stylesheet" href="style.css" type="text/css" /> 
</head> 
<body> 
    <div id="body"> 
     <div id="nav"> 
      <a href="#home" class="L1 current">Tab 1 >></a><!-- 
     --><a href="#welcome" class="L2">Tab 2 >></a><!-- 
     --><a href="#setup" class="L3">Tab 3 >></a><!-- 
     --><div id="floater">&nbsp;</div> 
     </div> 
     <div id="main"> 
      <br><br><br>Body conent here<br><br><br> 
     </div> 
    </div> 
</body> 
</html>

而且在style.css中：

body { width: 650px; margin: auto; font: 12px "Arial", sans-serif; } 
a { text-decoration: none; } 

#body { background-image: url('bg.jpg'); } 

#nav a, #nav div { display: inline-block; width: 90px; height: 18px; border: 1px black solid; color: black; background-color: #C7E9ED;} 
#nav .current { background-color: transparent; border-bottom: 0px; padding-bottom: 1px;} 
#nav #floater { background-color: white; width: 375px; padding-top: 1px; border: 0; border-bottom: 1px black solid; } 

#main { border: 1px black solid; border-top: 0px; text-align: center; }

但是，这不适合我的需要，我打算还利用这些标签作为面包屑导航，所以它会从改变页面到页面。

有没有办法将float的宽度设置为从最后一个tab到nav的边缘？还是有更好的方法？

来源

2010-11-04 Michaelll

仅仅因为它引起了我的问题（不是指垃圾邮件）：也许看看wildcard.pinkgothic.com的CSS源代码 - 看起来这种方法可能会解决您的问题？ – pinkgothic 2010-11-04 08:18:38

有一个简单的解决方案，需要了解background-position属性。

你需要做的是为每个标签的背景图像，与background-position: 0;

对于每个页面，确保正确的背景设置为主要区域，但使用background-position: 0 -20px你已经设置两个元素的背景，但他们应该无缝连接。您当然需要将背景位置的y偏移调整为该选项卡的（内部）高度。

来源

2010-11-04 17:45:13 zzzzBov

可能是更好地设置标签容器（id ='nav'在你的情况）背景颜色与最后一个标签相同？

来源

2010-11-04 07:27:27 heximal

也许我应该让自己更清楚。主div的背景是图像，而不是纯色。 – Michaelll 2010-11-04 07:56:48

嗯，对不起，我为你的问题尝试了不同的方式，但只看到一个。由于您知道整个div（650px）的宽度和两个宽度为90px的选项卡，所以我们可以将最后一个宽度设置为650-90 * 2。 – heximal 2010-11-04 08:04:37

当然，如果选项卡数量不变 – heximal 2010-11-04 08:05:13

标签导航与图像渗透通过

回答

相关问题