4 replies [Last post]
JerkedPig
Offline
Regular
Last seen: 15 years 37 weeks ago
Joined: 2003-11-05
Posts: 14
Points: 0

Is it possible to have the entire site center and stay centered as the browser is resized, and still have overlappping layers?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 21 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Center a site in the browser and layers

Hi JerkedPig,
It should be possible I'm just not sure exactly what you want.
Can you give a little more info on what you are trying to achieve.

JerkedPig
Offline
Regular
Last seen: 15 years 37 weeks ago
Joined: 2003-11-05
Posts: 14
Points: 0

Center a site in the browser and layers

Thanks for the reply, I thought I was going to be in no-man's land on this one. Anyway, I wanted to use the attached image as a header for the page and put a layer on top of it with a transparent background and the same with border, as the image, on all sides but the top. So the red border will be around all site content. Does that make sense?
I also wanted top ad a layer on top of the gray line running acroos the image, so I could add text there.
So I wanted all of this and still be able to have the site centered in whatever browser it is in.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 21 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Center a site in the browser and layers

Hi JerkedPig,
Just do as you said, use the image as the background of the page centered and no-repeat. It's easier to show then explain so I have attached a start for you.
Hope that helps

adrianrowbotham
Offline
newbie
London, UK
Last seen: 15 years 36 weeks ago
London, UK
Joined: 2003-11-10
Posts: 3
Points: 0

Center a site in the browser and layers

This is the best way I know:

CSS:

div#wrap
{
width: 740px;
margin-left:auto;margin-right:auto;
}

div#content
{
width: 740px;
background-color: #cccccc;
text-align: center;
}

HTML:
<html>
<body>
<div id="wrap">
<div id="content>My page content goes in here</div>
</div>
</body>
</html>