CSS positioning help - relative to background image

sj2as · #1 (**permalink**) Sep 11th, 2007, 19:56

Hi all,
I have setup my page so that the background image is part of the body and always sets itself to the middle of the browser window.
I have now used CSS to setup a div containing my rollover links. The spacing of the images within the divs is now perfect, but I am really struggling to position the div so that the links always look in the right position when the browser window is expanded/minimised/maximised.
For some reason, the default position of the div is well off to the bottom-right of the page.
Can anyone offer any tips??

CSS

Code: Select all

#linkbar {
    background:#FFFFFF;
    position:relative;
    margin:auto;
    width:279px;
    height:150px;
    left:-250px;
    z-index:1;
}

br    {
line-height:80%;
}


#home    {
    display:block;
    width:279px;
    height:17px;
    background: url("images/Broc_Home_Black.jpg") no-repeat center center;
}

#home:hover        {
    background: url("images/Broc_Home_Purple.jpg") no-repeat center center;
}

#concepts    {
    display:block;
    width:279px;
    height:17px;
    background: url("images/Broc_Concepts_Black.jpg") no-repeat center center;
}

#concepts:hover        {
    background: url("images/Broc_Concepts_Purple.jpg") no-repeat center center;
}

#sampling    {
    display:block;
    width:279px;
    height:17px;
    background: url("images/Broc_Sampling_Black.jpg") no-repeat center center;
}

#sampling:hover        {
    background: url("images/Broc_Sampling_Purple.jpg") no-repeat center center;
}

#projectmanagement    {
    display:block;
    width:279px;
    height:17px;
    background: url("images/Broc_Projmanagement_Black.jpg") no-repeat center center;
}

#projectmanagement:hover        {
    background: url("images/Broc_Projmanagement_Purple.jpg") no-repeat center center;
}

#using    {
    display:block;
    width:279px;
    height:17px;
    background: url("images/Broc_Using_Black.jpg") no-repeat center center;
}

#using:hover        {
    background: url("images/Broc_Using_Purple.jpg") no-repeat center center;
}

#contact    {
    display:block;
    width:279px;
    height:17px;
    background: url("images/Broc_Contact_Black.jpg") no-repeat center center;
}

#contact:hover        {
    background: url("images/Broc_Contact_Purple.jpg") no-repeat center center;
}

HTML

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Broccoli Marketing &brvbar; HOME</title>
<style type="text/css">
</style>
<link href="homecss.css" rel="stylesheet" type="text/css" />
<link href="links.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="linkbar">
<a id="home" href="home.html" title="Home"><span></span></a><br />
<a id="concepts" href="concepts.html" title="Concepts"><span></span></a><br />
<a id="sampling" href="sampling.html" title="Sampling"><span></span></a><br />
<a id="projectmanagement" href="printmanagement.html" title="Project Management"><span></span></a><br />
<a id="using" href="using.html" title="Using"><span></span></a><br />
<a id="contact" href="contact.html" title="Contact"><span></span></a><br />
</div>
</body>
</html>

Lchad · #2 (**permalink**) Sep 12th, 2007, 01:27

I don't have a lot of time to spend on this as it's getting late.
But my guess is that it's the relative positioning of this:

Quote:

#linkbar {
background:#FFFFFF;
position:relative;
margin:auto;
width:279px;
height:150px;
left:-250px;
z-index:1;
}

If you could change that to a float or something other than relative, it will be free to move with the width of the window.

If you struggle with this post back and I'll try to help you in the morning.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
positioning - relative or absolute?	google	Web Page Design	13	Nov 8th, 2007 16:00
relative Positioning Problem	Dunce	Web Page Design	6	Jun 8th, 2007 10:54
Background color problems with relative positioning	kirkham85	Web Page Design	3	May 12th, 2007 22:53
Background image overlaping footer image at bottom of div	lw_d	Web Page Design	4	Mar 21st, 2006 00:27
Positioning image absolutely	timmytots	Web Page Design	1	Jan 10th, 2006 02:27

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS positioning help - relative to background image