Container Help (HTML/CSS)

[~XS]

UPDATE:

This is what I am trying to accomplish. The only thing that is going to be a problem for me is the navbar. What I want for the navbar is for when someone rollsover one of the buttons, the subpage links (Signatures, avatars, etc in example) appear, but differ depending on the button you are rolling over. I can make the buttons change color on rollover, but I cant do the bar that appears underneath it. If anyone knows how to do it please contact me. Thank you.

/UPDATE
Well I tried describing it, but I couldn't. So I drew a picture.

Basically the area titled 1 is a picture I have that is being repeated infinity along the X axis, and the area titled 2 is my navbar. Both are in CSS, but the navbar has some html to it for obvious reasons. What I want to do is move the navbar (which is also being repeated infinity along the X axis, it is just constrained by a container) to become a sort of "layer" that overlaps the header, but does not hide the header. This way, the navbar is on top of the header image. Is there a way to do this? If not, can you explain an alternative so I can get the same effect? Another option that I could do is create a whole new container on top of the previous one. I just don't know how to do that either.

The yellow dotted lines are the container parameters. The containers are placed by an external CSS file, as is most of the page. I am using Dreamweaver CS3

 

[SuF]

So you want to make the header slightly bigger and have the navbar have text that shows up over the header image with overlaps the navbar?

 

[~XS]

ill just show you the actual layout. I wasnt going to do it but whatever.

this is what I currently have

This is what I want. At least to some degree. I might end up changing the navbar to individual buttons. But that isnt the point. Basically just a container on top of another container which contains a repeated image.

something along those lines

 

[TDD]

Show a better mockup of what you want, perhaps the desired outcome in photoshop, and i'll give you the xHTML/CSS

 

[~XS]

Edit: Thanks TDD. I have posted a concept. Hopefully you haven't gotten started on the last one I posted. It doesn't matter as its just some graphic tweaks. If you need the .psd, I updated it.

Thanks a ton by the way.

Download .psd (Updated)

 

[TDD]

Basically this is what you need as the BASIC xHTML - i cbf to code up your dropdown/onhover sub-menu... have fun with that... did this off the top of my head:

<div class="header">
<div class="inner top">
<a href="/"><img src="images/logo.png" alt="Logo for XSafire" /></a>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">Gallery</a></li>
<li><a href="/">Games</a></li>
<li><a href="/">Downloads</a></li>
</ul>
</div><!-- end of inner top -->

<div class="inner bottom">
<!-- here's where you'd put your code for the google search -->
</div><!-- end of inner bottom -->
</div><!-- end of header -->

<div class="content">

</div><!-- end of content -->


and for your css:
body {
background-color: #141414;
}

div.header {
width: 100%;
position: relative;
background-image: url(images/blue-header-bg.gif);
background-repeat: repeat-x;
}

div.header inner top {
position: relative;
left: 50%;
}

div.header inner top ul {
position: relative;
margin-left: 5px;
}

div.header inner top ul li {
list-style-type: none;
display: inline;
width: 100px;
height: 8px;
background-image: url(images/list-background.gif);
background-repeat: no-repeat;
margin-right: 2px;
}

div.header inner bottom {
position: relative;
width: 100%;
height: 90px;
text-align: right;
background-image: url(header-background-gray.jpg);
background-repeat: repeat-x;
}

div.content {
position: relative;
left: 50%;
margin-left: -388px;
width: 775px;
margin-top: 40px;
background-color: #fff;
background-image: url(images/content-top-bg.gif);
background-position: top;
background-repeat: no-repeat;
}

Take note, this is just my assumption of what it would be, I coded this straight into here, no testing no nothing, and is incomplete, it's up to you to fill in the gaps - i'm not going to do it all for you, just steer you in the right direction.

 

[~XS]

I love you.

Thanks.