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 13 of 13
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS Containers and Positioning

    Hi all,

    I am very new to the web coding scene and am having a bit of trouble with my containers and positioning to have the site function as I would like.

    I have the core background images spanning the length of the browser as I would like. However I would like my content to be centered on the page with the effect of when the browser window becomes too small the content is "fixed" and the shrinking window stops "swallowing" the content.

    In essence I want my site to function like this: http://store.steampowered.com/

    Notice that when you shrink the browser beyond the centered content, the content becomes "fixed" at the left hand side. I imagine I need another container somewhere, but after doing research, I am a bit lost.

    Here is my code thus far:

    Code:
    body {
    	margin: 0;
    	background-color:#FFF
    }
    #container {
    	width: 100%;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    	padding-top: 0px;
    	padding-right: 0px;
    	padding-bottom: 0px;
    	padding-left: 0px;
    	height: auto;
    }
    .top_nav {
    	background-image: url(../images/top_nav.jpg);
    	background-repeat: repeat-x;
    	margin: 0px;
    	padding: 0px;
    	height: 43px;
    	width: 100%;
    	clear: left;
    }
    .body_bg {
    	background-image: url(../images/body_bg.jpg);
    	background-repeat: repeat-x;
    	margin: 0px;
    	padding: 0px;
    	float: left;
    	height: auto;
    	width: 100%;
    }.title_bg {
    	height: 179px;
    	background-color: #FFF;
    	background-image: url(../images/title_bg.jpg);
    	background-repeat: no-repeat;
    	background-position: center;
    }
    .nav_bg {
    	background-image: url(../images/nav_bg.jpg);
    	background-repeat: repeat-x;
    	height: 41px;
    	width: 100%;
    }
    HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
    <link href="css/main.css" rel="stylesheet" type="text/css" />
    <link href="css/top_nav.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="container">
      <div class="top_nav"></div>
      <div class="title_bg"></div>
      <div class="nav_bg"></div>
      <div class="body_bg"></div>
    </div>
    </body>
    </html>
    Thank you for your time!

    -Mike

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,987
    Thanks
    15
    Thanked 231 Times in 231 Posts
    For starters try this:
    Code:
    body {
    	margin: auto;
            width: 960px;
    	background-color: #FFF
    }
    That will set a fixed width for the body and the containing divs, and center the page.

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    DrDOS -

    I took your suggestion and the concept works. However, if I set the body width to a fixed px, my background images stop spanning the entire browser window.

    Therefore I set the body width to 100% and left the margin at auto. Although it gave me another idea which was to set a width of the title image.

    I did try to set the title image to have a specific width (i.e. 1095px) but then the "centered" alignment stopped functioning...

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,987
    Thanks
    15
    Thanked 231 Times in 231 Posts
    Quote Originally Posted by mtdon1 View Post
    DrDOS -

    I took your suggestion and the concept works. However, if I set the body width to a fixed px, my background images stop spanning the entire browser window.

    Therefore I set the body width to 100% and left the margin at auto. Although it gave me another idea which was to set a width of the title image.

    I did try to set the title image to have a specific width (i.e. 1095px) but then the "centered" alignment stopped functioning...
    OK, in that case set the width of the container div to 960px and margin:auto, set the body to 100% again with margin: 0. I just gave 960px as a compromise for those people who are still using 1024x768 displays.

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This still limits the container - therefore the top_nav and nav_bg images do not span the length of the browser because the #container has been limited to a certain amount of pixels.

    Do I need another div inside of my title_bg div? Then maybe I can constrain the pixels there without limiting the other divs to span the entire browser.

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,987
    Thanks
    15
    Thanked 231 Times in 231 Posts
    The stuff you want to span the full width needs to be outside the fixed container. The can have their own divs if needed.

  • #7
    New Coder
    Join Date
    Nov 2010
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So essentially it would be a "master" container with the spanning background images and then a "sub-master" container that will have a fixed width?

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Anything you want to limit the width to, put into the container div. Any div outside the container you can give width 100% to. That will stretch them to 100% of the body or screen width.

  • #9
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,987
    Thanks
    15
    Thanked 231 Times in 231 Posts
    Actually there is a way to 'break out' a div that's in a container. You set

    width:100%;left:0;position:absolute

    on the div you want to break out. But is comes at the expense of using position:absolute, which may cause more problems than it cures.

  • #10
    New Coder
    Join Date
    Nov 2010
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks guys, this makes it a bit easier to grasp. Unfortunately I am still a bit confused.

    I still don't necessarily understand how I am going to get the background images I want stretched "inline" or behind this new fixed container.

    For instance if I create a new container above #container (which is now fixed width) should I absolute position #container on top of the stretched container? How do I build a stretched container outside of #container but also inline with the elements I want stretched?
    Last edited by mtdon1; 11-02-2010 at 02:46 AM.

  • #11
    New Coder
    Join Date
    Nov 2010
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts
    From Steampowered.com CSS:

    Code:
    div#global_header {
    	background-image: url( http://cdn.store.steampowered.com/public/images/v5/globalheader_bg.jpg);
    	background-color: #000000;
    	border-bottom: 1px solid #4D4B48;
    	background-position: center top;
    }
    
    /**/
    div#global_header .content {
    	background-image: url( http://cdn.store.steampowered.com/public/images/v5/globalheader_bg.jpg);
    	background-position: center top;
    	position: relative;
    	width: 940px;
    	height: 104px;
    	margin: 0px auto;
    	
    	z-index: 402;

    Looks like I do have to do something with a relative position? Relatively position it on top of the container...

  • #12
    New Coder
    Join Date
    Nov 2010
    Posts
    26
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Resolving...

    I figured it out.

    Basically like I originally figured. I need a master container and then specify another container inside the master with a fixed width.

    Thanks for the fixed width idea DOS, definitely helped me along. Here is the code for just the header for others viewing and looking for the answer.

    CSS:

    Code:
    body {
    	margin: 0;
    	background-color:#FFF
    }
    
    #top_nav {
    	background-image: url(../images/top_nav.jpg);
    	background-repeat: repeat-x;
    	height: 34px;
    	width: 100%;
    }
    
    #top_nav_content {
    	width: 1095px;
    	margin: 0px auto;
    	height: 100%;
    	min-height: 100%
    }
    HTML:

    Code:
    <body>
    <div id="top_nav">
      <div id="top_nav_content">Header goes here</div>
    </div>
    </body>
    </html>
    Resolved.

  • #13
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    The body tag can act as a "master" container. But glad you got it figured out.


  •  

    Posting Permissions

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