Help positioning links over background image

[chris_s]

I currently have a background image that spans across the top of the page. As you can see, there is an extended box that will contain 2 links with background button images. I have create a couple DIVs to hold the links, and I am trying to position them over that extended box. But as you can guess, with the relative positioning, when I reduce the size of the browser, the links don’t stay within the extended box on the background image spanning the top of the page. I believe my approach is wrong, and I am hoping someone can give me the correct workaround. Here is the HTML and CSS I have so far, along with images of my current positioning problems.

HTML:

// Add top apply and client login

function add_top_nav() {

echo '
';

echo '
';

echo '
Apply Now
';

echo '';

echo '
Client Login
';

echo '
';

echo '
';

}

add_action('thematic_aboveheader', 'add_top_nav');

CSS:

#top-bg {

background: url(images/top-bg.png) no-repeat center top;

bottom: 2px;

float: left;

height: 58px;

position: relative;

width: 100%;

}



#top-nav-container {

bottom: 50px;

position: relative;

left: 950px;

width: 200px;

}



#apply-top {

float: left;

}

What it should look like:

[Senff]

No need to make the #top-nav-container position relative. Just put the three elements in there and make them all display:block; and float:left. Add a little margin to some elements here and there and that should do it.

Here’s a basic setup that I would use: http://jsfiddle.net/SgAZy/

[chris_s]

If I take the position:relative out then the links go back to the left side of the page, making the left: 950px not push them into that box on the background image. The links go move at all when the page expands or contracts and I can’t seem to figure out why.

[Senff]

Position the #top-nav-container with either:

margin-left:850px;

or:

float:right;

margin-right:150px;

or something like that, change those values if needed.

[Miker]

Hi Chris,

Senff is pretty much on the money. However I’d simply the CSS a little, so that you can easily add more stuff to your menu should the need arise:
http://jsfiddle.net/SgAZy/3/

[chris_s]

the div containing the links still doesn’t move synonymously with the box when I contract the browser. I think I am going to need to cut that box out of that top bar and make it the background of #top-nav-container, allowing it to move along that top bar. I want that box to remain in the same vertical line as the right side of my main nav menu below, which is where it is currently positioned.

[Senff]

To see how it behaves in its own environment (so far, we’ve only seen the menu in its own contained environment), better give us a link so we can see for ourselves how it interacts with the browser size and nav menu and everything.

[Miker]

Chris, can you post an example of this?

[chris_s]

I tried replicating it in jsfiddle, but since I can’t add the bg image I can’t really give an exact example and unfortunately I’m building this locally… thanks for the help guys.

[Senff]

You should be able to use the bg image if you it’s located anywhere on the web (put it on Photobucket, if needed?) and use the full URL in the CSS background declaration…..?

[chris_s]

Good call. Senff. Here’s the link and the fullscreen http://jsfiddle.net/pvMKn/1/embedded/result/

[Senff]

If the wrapper is full width, and the top bar is centered, then you can make the two menu items position correctly by using something like this (may need to add some margins on top and left):

#top-nav-container {

width: 200px;

left: 50%;

position: absolute;

margin-left: 200px;

}

[chris_s]

Senff, worked like a charm. Thanks for clearing that up. I’ve run into this problem before but was not able to fix it because I wasn’t understanding what was really going on.

[Author]

Posts