...

View Full Version : centering but not quite, question



william783
02-11-2012, 07:55 PM
im updating a site, and figure ill start from scratch just using nice tidy css.
im keeping all the design elements (well for the most part), just updating the code.(its pretty cluncky and haphazard as it is) Its been hashed apart by different folks working on it.

there is a design strip that's supposed to always sit on the left of the page, the menu bar and content is suposed to be centered but not cross over the design strip on the left. the design strip is styled in the body tag
here is link www.fernsplace.biz

any help is appreciated


william

Excavator
02-11-2012, 08:27 PM
Hello william783,
Look what a min-width setting can do for you -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
background: #fff;
}
body {
min-width: 1058px;
background: url(http://home.cablerocket.com/%7Eferns_place/images/mainimage.jpg) no-repeat fixed left top;
}
#container {
height: 994px;
width: 554px;
margin: 0 auto;
background: #999;
border: 10px solid #8A4561;
}
</style>
</head>
<body>
<div id="container">
<!--end container--></div>
</body>
</html>

william783
02-11-2012, 11:22 PM
I really appreciate the help but I dont think this will work. Maybe Im missing something. I guess the left most design element is akin to a watermark. I need some sort of css rule that centers the main container but always shifts the container about 300 pixels to the right, or rather centers the container always 300px + depending on the monitor the site is viewed in.
I tried margin: auto +300px; and that sort of works, but still doesnt center the container

Excavator
02-12-2012, 12:20 AM
I need some sort of css rule that centers the main container but always shifts the container about 300 pixels to the right, or rather centers the container always 300px + depending on the monitor the site is viewed in.
I tried margin: auto +300px; and that sort of works, but still doesnt center the container

It kind of sounds like you didn't really try that code I posted. Did you copy/paste the entire code into a new .html document and view it in your browser?
That code I posted centers #container when the browser is opened wider than 1058px. When narrower than that, it stops #container from covering the graphic on the left side of the screen... of course, that results in an x scrollbar so the remaining width is viewable.

That may not be the 300px you were looking for but you can adjust that easy enough.

william783
02-12-2012, 07:07 PM
Yup I pasted the code in a new doc

When I zoom out, in the browser to 75% it does move the container to the center!
My mistake.Maybe its my tiny monitor, I didnt notice any changes
. I also noticed the x bar at the bottom as well, I can live with that.

That may not be the 300px you were looking for but you can adjust that easy enough.
Now I have to figure out why your code works, and why it doesnt cross over the 300px

tnx again
William

Excavator
02-12-2012, 07:11 PM
Now I have to figure out why your code works, and why it doesnt cross over the 300px


Remove the min-width (http://www.w3schools.com/cssref/pr_dim_min-width.asp) from the body and see what it does.

william783
02-12-2012, 07:52 PM
If I get rid of the min-width the container still centers itself but will cross over the watermark.
So if I increase the min-width, the container pulls itself further from the left. And when I increase the size of the browser the container centers itself.
Ideally I was trying to center the container between the edge of the watermark and the right edge of the browser. With this new code, the container is centered on the screen and doesnt take into account of the width of the watermark. But I'm happier with the way it works now. Its a silly fussy thing anyways

Excavator
02-12-2012, 08:17 PM
center the container between the edge of the watermark and the right edge of the browser


That can be done also:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
background: #fff;
}
body {background: url(http://home.cablerocket.com/%7Eferns_place/images/mainimage.jpg) no-repeat fixed left top;}
#outer_container {
margin: 0 0 0 300px;
background: #f00; /*for demonstration only*/
}
#container {
height: 994px;
width: 554px;
margin: 0 auto;
background: #999;
border: 10px solid #8A4561;
}
</style>
</head>
<body>
<div id="outer_container">
<div id="container">
<!--end container--></div>
<!--end outer_container--></div>
</body>
</html>

william783
02-12-2012, 08:43 PM
Well, thats exactly what Im looking for, Awsome!
Thanks so much.
Again Ill have to mess with it to figure out why it works.....
William



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum