Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    centering but not quite, question

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,693
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    Hello william783,
    Look what a min-width setting can do for you -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,693
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    Quote Originally Posted by william783 View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,693
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    Quote Originally Posted by william783 View Post
    Now I have to figure out why your code works, and why it doesnt cross over the 300px
    Remove the min-width from the body and see what it does.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,693
    Thanks
    22
    Thanked 1,831 Times in 1,815 Posts
    Quote Originally Posted by william783 View Post
    center the container between the edge of the watermark and the right edge of the browser

    That can be done also:
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •