8 replies [Last post]
sj2as
Offline
newbie
Last seen: 6 years 44 weeks ago
Timezone: GMT+1
Joined: 2007-09-03
Posts: 7
Points: 0

Ok, bit hard to explain as I am relatively new to CSS.

I have a page which contains a large background image, which is in a div container, which I have managed to setup with 'auto margins' so it is always in the centre of the page, whatever size the browser window is set to... easy.

Now, the 'links' (which are rollover images) that are going to be on top of this div need to stay in position relative to this main image.
I seem to have managed this somewhat, but wondered if it was possible to set the div up so that when the browser window is closed small, the link images don't move all the way left? That is, can I set a minimum left margin, so that when the browser window is opened up and the main image has to centre itself, the link images just move with the main image?

Broccoli Marketing ¦ HOME

0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i

CSS

body { background-color: #C3D1B7; } #mainimage { width:933; height:700; z-index:0; margin: auto; position: relative; margin-left: auto; margin-top: auto; text-align: center; } #homelink { position:relative; left:-100px; top:-580px; width:48px; height:14px; z-index:1;

margin-left: auto;
margin-top: auto;
margin: auto;
float: none;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}

Any help / advice greatly appreciated!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 28 weeks 4 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

Give the body a fixed width

Give the body a fixed width and auto margins, and set your big image to be the background-image of body. Magic.

Verschwindende wrote:
  • CSS doesn't make pies

sj2as
Offline
newbie
Last seen: 6 years 44 weeks ago
Timezone: GMT+1
Joined: 2007-09-03
Posts: 7
Points: 0

thanks pineapple head but

thanks pineapple head but i'm having a bit of trouble making it work...

I have set the CSS for the body up as

body { background-color: #C3D1B7; background-image: url(images/Broc_P1_main.jpg); margin: auto; margin-top: auto; margin-left: auto; position: relative; width: 1024px; }

but the background image isn't positioning itself in the centre of the browser window, or adjusting itself when the browser window is opened up.

Any tips?

Thanks

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 28 weeks 4 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

What if you use: body

What if you use:

body { background: #C3D1B7 url(images/Broc_P1_main.jpg) no-repeat center center; margin: auto; position: relative; width: 1024px; }

?

Verschwindende wrote:
  • CSS doesn't make pies

sj2as
Offline
newbie
Last seen: 6 years 44 weeks ago
Timezone: GMT+1
Joined: 2007-09-03
Posts: 7
Points: 0

Brill, that works great,

Brill, that works great, thanks.

I have now started adding my link buttons to the page... Basically I am using 2 jpgs of the same image (different colour) for the rollover, but need to position them so they always look in the 'right' place on the page, and so that these buttons move relative to what the background image is doing.

I have used the following CSS to work the rollover aspect, which seems to be working great, but I am really struggling to position the buttons, and get them to position themselves relatively.

#home { display:block; width:48px; height:15px; background: url("images/Broc_Home_Bla.jpg") no-repeat center center; position:relative; margin:auto; margin-left:auto; left:-200px; top:-550px; }

#home:hover {
background: url("images/Broc_Home_Pur.jpg") no-repeat center center;
position:relative;
margin:auto;
margin-left:auto;
left:-200px;
top:-550px;
}

Not sure why I am having to set the 'left' and 'top' values to such high negative values either?

Any ideas would be great, thanks.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 28 weeks 4 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

You shouldn't need to bother

You shouldn't need to bother with any kind of positioning.

Have you got the site online anywhere?

If not, post all your current HTML and CSS here for us to have a look at.

Verschwindende wrote:
  • CSS doesn't make pies

sj2as
Offline
newbie
Last seen: 6 years 44 weeks ago
Timezone: GMT+1
Joined: 2007-09-03
Posts: 7
Points: 0

Yep, I have put a page

Yep, I have put a page online at

http://www.broccolimarketing.com/home.html

hopefully you will see what I mean about the positioning of the links div.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 28 weeks 4 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

First thing's first, remove

First thing's first, remove all the absolute positioning.

Verschwindende wrote:
  • CSS doesn't make pies

sj2as
Offline
newbie
Last seen: 6 years 44 weeks ago
Timezone: GMT+1
Joined: 2007-09-03
Posts: 7
Points: 0

Just been through everything

Just been through everything and don't think there is any absolute positioning? Unless the images for the links automatically default to absolute positioning?

body { background: #C4D1B6 url(images/Broc_P1_main.jpg) no-repeat center center; margin: auto; margin-left:auto; margin-top:700px; position: relative; width: 1024px; }

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

}

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;
}