Need to Center layout

[juneegirl]

I'ved designed a layout for work based on a CSSPlay design (http://www.cssplay.co.uk/layouts/frame.html), but want it to be centered on the page, not to stretch the full width. With new extra-wide monitors, the layout extends beyond what works! I've used lots of position:absolute and z-index and have attempted lots of tweaks. Nothing seems to work.

View the page at www.juneeonline.com (http://www.juneeonline.com/index.html)

[BLiZZaRD]

Set the proper div width as needed.



<div align="left" width="30&#37;" class="content"(or "pad" or which ever is used for the text box :D ) >


changing the width as needed to fit your measurements.

[juneegirl]

Thanks, that centers the content, but I want the whole site to appear centered, with perhaps a 30px margin left and right. I've tried various container divs, but it doesn't work. It needs to be wide enough to include the search box.

[BLiZZaRD]

If by margin you mean no content on either side for the first and last 30 (or so) pixels on the screen try adding padding-left: 30em; and padding-right: 30em;

to the body portion of your CSS?

I have a wide screen laptop, if you still have the problem when I turn it on here in a little bit I will look at it through there. :)

[juneegirl]

Changing the padding on the body style only seems to change the content text. An example of something I've tried is template.html (http://www.juneeonline.com/template.html), where I've added an outer div. However, the rest of the css is not displaying correctly.

[BLiZZaRD]

I looked at it through my WS laptop and it all seemed fine to me.

I am guessing what you want though is not fixed. Since I am not seeing it, I will step back and let someone else feild this one. SOrry I couldn't be more help :(

[parijaatp]

It will be nice if you could paste the section of the code enclosing your text.

My guess is that if you are using the <font> tag. Don't. Place your text inside the <p> tag and add the following code to the css.

p{
margin-left: 20px
margin-right: 20px
}

Hope that helps!!

[juneegirl]

Thankyou, it's not the text I want centered. I'd like the left sidebar to be off the edge of the screen and the whole page, including the header, sidebar and content text to be centered in the browser window, with white space either side of a border surrounding the whole lot.

I've tried using wrapper divs to center the page but the fixed position of the header and sidebard stays fixed to top and left side.

Here is the CSS:


/* commented backslash hack v2 \*/
* html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
/* hide overflow:hidden from IE5/Mac */
/* */
overflow: hidden;
/* */ }
/* end of hack */

body {background:url(blank.gif); background-repeat:repeat-y; background-color:#ffffff; background-attachment:fixed; margin:0; padding:0; border:0; height:100%;}
* html body {overflow-y:scroll;}
#menu {position:fixed; display:block; top:160px; left:20px; width:160px; background-color:transparent; z-index:20;}
* html #menu {position:absolute;}
#banner {position:fixed; display:block; top:108px; left:210px; width:571px; height:92px; background-color:transparent; z-index:100;}
* html #banner {position:absolute;}
#side {position:fixed; display:block; bottom:0px; left:0px; width:118px; height:408px; background-color:transparent; z-index:20;}
* html #side {position:absolute;}
#top {position:fixed; display:block; top:0px; left:0px; width:782px; height:83px; background-color:transparent; z-index:20;}
* html #top {position:absolute;}
#junee {position:fixed; display:block; top:83px; left:0px; width:168px; height:42px; background-color:transparent; z-index:20;}
* html #junee {position:absolute;}

body {font-family:arial, sans-serif; font-size:12px; letter-spacing:1px;}

#content {position:relative; display:block; margin:0 0 0 185px; background:transparent; overflow:hidden; letter-spacing:.08em; z-index:10;}
.fulltext {display:block; padding:10px 10px 10px 10px; width:92%; margin-left:5px; text-align:justify; float:left; color:#000;}
.fulltext img {float:right;}
#content ul li {list-style: none; padding-left: 15px; background-image: url(lbulletgray.gif); background-repeat: no-repeat; background-position: 0 7px; margin-left: 15px; margin-bottom: 10px;}

#content2 {position:relative; display:block; margin:0 0 0 185px; background:transparent; overflow:hidden; letter-spacing:.08em; z-index:10;}
.text {display:block; padding:10px 10px 10px 10px; width:44%; margin-left:5px; text-align:justify; float:left; color:#000;}
.text {width/* */:/**/44%;
width: /**/44%;}
.text img {float:right;}
#content2 ul li {list-style: none; padding-left: 15px; background-image: url(lbulletgray.gif); background-repeat: no-repeat; background-position: 0 7px; margin-left: 15px; margin-bottom: 10px;}

td ul li {list-style: none; padding-left: 10px; background-image: url(lbulletgray.gif); background-repeat: no-repeat; background-position: 0 7px; margin-left: 10px; margin-bottom: 5px;}

#content_contact {position:relative; display:block; margin:0 0 0 250px; background:transparent; overflow:hidden; letter-spacing:.08em; z-index:10;}

#topper {position:fixed; display:block; top:0; right:0; width:100%; height:82px; background:url(topedge.gif); background-repeat:repeat-x; font-size:20px; font-style:italic; line-height:60px; font-family:"times new roman", serif; overflow:hidden; color:#262a75; z-index:12;}
* html #topper {position:absolute; right:0;
right/* */:/**/17px;
right: /**/17px;}
#topper img {margin-top:30px; float:right; border-top-style:none; margin-right:40px; border-right-style:none; border-left-style:none; border-bottom-style:none;}
.clear {clear:both; height:1px;}

#search {position:fixed; display:block; top:10px; left:810px; width:60px; background-color:transparent; z-index:30;}
* html #search {position:absolute;}
#search div {background:transparent;}
#search .input {cursor:text;}
#search .submit { font-family: Verdana,Tahoma,Arial,Helvetica,Sans-serif; font-size: 12px; color:#c39625; font-weight: bold; clear: none; background-color:transparent; background-image: none; border-left-style: none; border-top-style: none; border-right-style: none; border-bottom-style: none;}

#foot {display:block; padding:10px 10px 0 100px; text-align:justify; background:transparent; font-size:10px; color:#000; text-align:center;}
.h2 {font-size:32px; color:#225e92; margin-bottom:5px; border-bottom:1px solid #225e92; letter-spacing:1px; font-weight:bold;}
.h4 {font-size:24px; color:#225e92; letter-spacing:1px; font-weight:bold; padding: 15px 0 5px 0;}
#header {position:fixed; display:block; top:15px; left:480px; width:500px; height:60px; font-size:24px; line-height:90px; font-family:verdana, arial, sans-serif; overflow:hidden; color:#c39625; z-index:30; font-weight:bold;}
* html #header {position:absolute;}

#links {display: block; background:#fff; font-weight: bold; font-size: 12px; z-index: 12; left: 209px; overflow: hidden; width: 760px; color: #c39625; line-height: 30px; font-family: arial, verdana, sans-serif; position: fixed; top: 82px; height: 130px;}
* html #links {position: absolute;}
#links div {margin-top: -28px;}
#links a, #links a:link {color:#c39625; text-decoration:none;}
#links a:visited {color:#c39625;}
#links a:hover {font-weight:bold; color:#262a75;}
#links a:active {font-weight:bold; color:#262a75;}

.bold {font-weight: bold; font-size: 14px;}
#pad {display: block; height: 200px;}
img {border-top-width: 0; border-left-width: 0; border-bottom-width: 0; border-right-width: 0;}

dl, dt, dd, ul, li {margin: 0; padding: 0; list-style-type: none;}

dl#menu {width: 160px;}
dl#menu dt {cursor:pointer; margin-top:5px; height:25px; line-height:25px; text-align:center; font-weight:bold; border:2px solid #225e92; background: #fff;}
dl#menu dd {border:2px solid #225e92;}
dl#menu li {text-align: center; background:#fff;}
dl#menu li a, dl#menu dt a {color: #c39625; text-decoration:none; display:block; border:0 none; height:100%;}
dl#menu li a:hover, dl#menu dt a:hover {background:#fff; font-weight:bold; color:#262a75;}

.contactform {position: static; overflow: hidden;}
.contactleft {width: 25%; text-align: right; clear: both; float: left; display: inline; padding: 4px; margin: 5px 0; font-weight: bold;}
.contactright {width: 70%; text-align: left; float: right; display: inline; padding: 4px; margin: 5px 0;}
.contacterror { border: 1px solid #ff0000;}

#page-container {margin: 0 auto; width: 750px; text-align: left;}
.pg {width: 750px; list-style: none none;}
.pg:after {clear: both; display: block; content: "."; height:0; visibility: hidden;}
.pg li {list-style: none none; display: inline; }
.pg li a {margin: 2px; border: 1px solid #c39625; padding: 4px; position: relative; float: left; display: block; width: 100px; height: 75px;}
.pg li a:hover {font-size: 100%; z-index: 110;}
.pg li a img {border: 0 none; position: absolute; width: 100px; height: 75px;}
.pg li a:hover img,.pg li a:active img,.pg li a:focus img {width: 200px; height: 150px; left: -25px; top: -15px; z-index: 100;}




And here is a template page:

http://www.juneeonline.com/template.html or index.html, comments.html, disclaimer.html (sorry, there wasn't enough room here to copy the html over.

The site looks in okay with browser windows up to 1024 wide. I have just purchased a 19" monitor, and have a friend with a 21" monitor, and the site looks like crap, with the content stretched to fill the screen, but the header stops about half way. I'd like to keep the width at about 800 and center it on the screen no matter the monitor size.

[parijaatp]

I have had a look at the style sheet however didn't get a chance to loot at the actual html.

However with the website it appears completely different from what you described. All I see is a centered layout with only the text and links that are aligned left.

In stylesheet I saw that at a few places the position or float property is set to 'left'. Changing that might resolve the issue.

I will have a look at the html pages and come up with a solution possibly.

[BekahRuth]

I want to start this off with a disclaimer that I'm really new at webdesign and am not sure if I can help at all, but I went through a similar problem with my website and here's what I did:

Created a div tag with a set width, and set the left and right margins to auto.
Then arranged the other page elements inside the first div tag.

Hope that helps?!

[juneegirl]

Thankyou for taking the trouble to look at the site. I think the CSS is too complex to get it to do what I want, so will leave as is for now. The best option is to rezise the browser window for any monitor larger than 15 inch. I only realised I had a problem when viewed full-screen on a 19" monitor.

Because it's a job for work I'm under pressure to get it finished. Later I might look at playing again with the CSS.

Thanks to everyone who offered help.