Deceptively simple CSS problem

Hey everyone, I’ve come across something that should be easier than it seems to be.

I could very well be over-complicating this, but I can’t seem to figure out how to do it. The image is fairly self-explanatory, but I’ll go into further detail.

  1. There should be a navigation array centered on screen. This array is variable, meaning it won’t always contain the same number of elements and its width could vary.

  2. The highlighted/active tab should be transparent such that the page background shows through.

  3. The entire navigation bar should span the width of the page, but still allow the background to show through the current active/selected tab.

I can accomplish steps 1 and 2 easily, but step 3 is where I get stuck. I don’t know how to make the navigation bar span the full width of the page without covering the tab which is meant to be transparent.

Any thoughts?

put width:100%; for navigation bar element.

That won’t fix the problem though, because then the active tab won’t show the background through it. It will just show the navigation bar.

I need the navigation bar needs to have flanks on either side of it that extend all the way to the edges of the screen, WITHOUT covering up the background.

Will the “image” on the hovered <li> be a continuation of the bottom purple image? Aka on strategies it looks like the tree might overlap, will the strategies hover image be able to have a tree finishing it up?

Completely ignore this CSS, it isn’t meant to help. I have to get going to class soon and I doubt I"ll have motivation to write up this again (even if it i small/crappy)

<!doctype html>
<html>
<head>
<title>d</title>
<style>
*{margin:0;padding:0;color:#FFF;}
ul{list-style:none;}
body{background:black;}
div{background:purple;width:400px;margin:0 auto;}
ul{overflow:hidden;}
li{float:left;padding:0 5px; text-align:center;background:green;}
li:hover{opacity:1;}
p{clear:both;}
</style>
</head>
<body>
<div>
<ul>
<li> text</li>
<li> text</li>
<li> text</li>
<li> text</li>
</ul>
<p>e</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
</div>
</body>
</html>

Hi,

You could do something like this depending on your setup of course.

It won’t work in IE6 though but will still be usable.

If you want to support IE6 you could do something like this although it’s a little more complex.

Paul, thank you VERY much. This is a much more elegant solution than the one I eventually came up with lol.

The first example you posted is exactly what I am looking for for a bunch of reasons I won’t get into. The second example is a good solution as well, but the background of the nav bar will have a slight texture to it, so using a solid color border to fill up the space on the left and right wouldn’t have worked for me.

I actually tried your first method (that is, setting the same background image in the active tab, as in the page background, rather than trying to make the background image physically show through), but I could never make it line up. The magic sauce was the “fixed” attribute, which guarantees both images are fixed relative to the browser.

Further, I was planning on making this background fixed anyway, so it’s pure serendipity that your method uses a fixed background to keep the alignment the same between the background and the tab.

Lack of IE6 support doesn’t concern me as the site I’m developing this for, does not officially support IE6 anymore anyway.

You are a genius, thanks again :smiley:

Sorry for the double post, but I’m totally combining this with vertical parallax scrolling :smiley:

It is fortuitous that you were intending to use fix positioning as part of your overall design. However, fixed bg position has the downside of not being flexible if you have variable height header or content above the div in which you are doing the effect. I wanted to offer up this solution, just in case you (or some one reading this thread in the future) wanted to do the same effect but w/o fixed bg.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>d</title>
<style>
*{margin:0;padding:0;color:#FFF;}
ul{list-style:none;  display:table;  background:url(the-nightmare_before_christmas.jpg) top center no-repeat; margin:0 auto; letter-spacing:0; word-spacing:-1em}
ul li{display:table-cell; padding:10px; background:#000}
ul li:hover{background:none;}
#content{background:url(the-nightmare_before_christmas.jpg);width:1024px; min-height:800px;}
#nav_wrap{background:#000; color:red; width:100%; }
</style>
</head>
<body>
<div id="content">
     <div id="nav_wrap">
          <ul>
               <li> <a href="#">text</a></li>
               <li> <a href="#">text</a></li>
               <li> <a href="#">text</a></li>
               <li> <a href="#">text</a></li>
               <li> <a href="#">text</a></li>
               <li> <a href="#">text</a></li>
               <li> <a href="#">text</a></li>
               <li> <a href="#">text</a></li>
               <li> <a href="#">text</a></li>
          </ul>
     </div>
</div>
</body>
</html>

Obviously you need to replace the “the-nightmare_before_christmas.jpg” with your own BG image… :slight_smile:

Thanks dresden. Another very simple and creative solution.

See, I knew this was easier than I was making it out to be :stuck_out_tongue:

Thanks a TON for the help guys!

Yes that’s a good solution also :slight_smile: Well done.

The only downside I see (apart from not working in IE7 and 6) is that it ties the element to being fixed to the picture. In my first example the nav can slide across the image or even be moved down the image and it will still work. This means you could have a fixed width centered nav that slides across while the image remains centered and it will still work. Of course the downsides of my first method are as you already mentioned.:slight_smile:

Here is another solution that works all the way back to IE6 (and probably beyond) and doesn’t need the double image. It can also have a textured background image for the nav.

http://www.pmob.co.uk/temp/nav-transparent-current3.htm

It’s similar to my second example except I changed the border to padding so that a background color or image could be applied.

Awesome :smiley:

The lack of a need for double image might help me with the parallax scrolling effect I’m trying to achieve, which would need to have both images scroll in sync.

Yay, more things to try. So many good solutions :smiley:

Thanks again Paul :slight_smile: