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 12 of 12
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts

    help centering content

    I have a test page that is css frame based and position: fixed. The content is based on width: 770. (Client wants 800x600) and the content needs to be centered in the window.

    I'm thinking the position: fixed is keeping everything aligned left but I'm not sure. What am I doing wrong????

    Any help is much appreciated

    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>
            <style type="text/css">
              #header {
                position: fixed;
                left: 155px;
                right: 0;  top: 0;
               height: 120px; /*Height of top frame div*/width: 620px;overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/background-color: #000;color: #FFF;}
              
              #footer {
                position: fixed;
                left: 155px;
                right: 0;
                bottom: 0;
    						height: 110px; /*Height of bottom frame div*/width: 620px;overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/background-color: #000;color: #FFF;
              }
              #mainmenu {
                position: fixed;
                left: 0px;
                top: 0px;
    
                overflow: auto;
    						width: 155px; /*Width of left frame div*/height: 100%;/*Disable scrollbars. Set to "scroll" to enable*/background-color: #000;color: #FFF;
              }
              #content {
                position: fixed;
                left: 155px;
                right: 0px;
                top: 64px;
                bottom: 24px;
                width: 620px;overflow: scroll; overflow-x: hidden;background: #E4DFD0 url("images/bgd_main.gif") repeat-y left top;font-size: 100%;}
            </style>
          </head>
          <body>
          <div id="wrap" style="width:770px; margin: 0 auto;">
            <div id="header">Header (64 pixels high).</div>
            <div id="mainmenu">MainMenu (150 pixels wide).</div>
            <div id="content">Content.</div>
            <div id="footer">Footer (24 pixels high).</div>
            </div>
          </body>
        </html>

  • #2
    New Coder
    Join Date
    Mar 2009
    Location
    Canada
    Posts
    66
    Thanks
    5
    Thanked 2 Times in 2 Posts
    From what I can see just by removing the position: fixed setting in your content div your problem should be solved.

    Good luck
    My web site can be view here
    http://robinsden.com

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I thought that might be it but when I remove the position: fixed the layout gets wacky. I've attached screenshots of both versions. (Sorry for the low quality)

    I thought floats would work but I'm having issues with that as well
    Attached Thumbnails Attached Thumbnails help centering content-fixed.jpg   help centering content-nofixed.jpg  

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Hi finstah1

    It's sort of hard to tell exactly what you're trying to end up with but I'm assuming it's something like the left hand of your two images but centred. So this is basically a two column layout, in which case floating your menu is the answer.

    You don't need all the position:fixed as earlier posting, and you don't need all the left and top positioning either - you're already using #wrap to centre the page.

    A good explanation of a two-column layout is here.

    But anyway, this isn't exactly as your layout, and I needed a bit of brain exercise, so had a bit of a play around with your code and came up with this - you'll need to re-apply your background images.

    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>
            <style type="text/css">
            	*{margin:0;padding:0}/*set everything to 0 at the start to avoid different browser defaults*/
            
              #wrap{
              width:770px;
              margin:0 auto;
              background-color:blue;
              }
              
              #right_column{
              margin-left:150px /*margin equal to the width of the floated menu*/
              }
              
              #header {
              background-color:red;
              height: 120px; 
              width: 620px;
              overflow: hidden; 
              color: #FFF;}
              
              #footer {
              background-color:brown;
    	  height: 110px; 
              }
              
              #mainmenu {
              background-color:blue;
              float:left;
    	  width: 150px; 
    		  }
    		  
              #content {
              background-color: lightgrey;
              font-size: 100%;
              height:200px;/* guessed at this to fit in an 800 by 600 window */
              overflow-y:scroll}
           
            </style>
          </head>
          <body>
          <div id="wrap" >
            <div id="mainmenu">MainMenu (150 pixels wide).</div>
            <div id="right_column">
            	<div id="header">Header (64 pixels high).</div>
            	<div id="content"><p>Content.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porttitor, nulla nec vehicula vestibulum, ante lorem faucibus enim, condimentum lobortis diam ligula in mauris. Curabitur eget nulla in velit luctus ultricies vehicula nec sapien. Mauris dignissim congue turpis, ut tincidunt enim interdum ut. Duis at diam at nisl malesuada imperdiet ultricies id leo. Morbi dui tellus, gravida a eleifend ut, rhoncus in leo. Sed sed odio lectus. Integer sollicitudin vestibulum erat, eleifend dapibus massa dapibus et. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam ornare dapibus lobortis. Aliquam erat volutpat. Nullam semper, est tempus adipiscing ultricies, dui odio iaculis augue, eu condimentum quam mauris vel mauris. Sed porta tincidunt est, in dapibus risus iaculis quis. Nulla ac erat id arcu interdum facilisis.
    
    Donec semper ornare odio, et placerat dolor blandit vel. Sed ultricies velit in libero feugiat fermentum. Phasellus in imperdiet mauris. Aenean tempus elementum lacus, et suscipit magna facilisis a. Cras nisi nulla, luctus in mattis vel, commodo sit amet ipsum. Curabitur pretium sapien id odio hendrerit iaculis. Etiam in elit at neque porta gravida nec eget odio. Fusce ornare purus sit amet diam malesuada gravida. Curabitur non lorem non tellus porttitor lobortis. Sed volutpat condimentum lacus nec eleifend. In ipsum orci, ultricies at lobortis quis, fringilla quis eros. Aliquam mattis dignissim eros, vel porttitor nisl placerat ac. Donec vitae neque ut velit consectetur hendrerit. Curabitur sit amet purus tortor, a ullamcorper lacus. Aenean et dui justo, at elementum purus.
    
    Nunc ultrices sagittis congue. Praesent iaculis, leo id lobortis dapibus, arcu quam tincidunt nulla, non hendrerit ante massa vel dui. Nunc tempor est eget purus congue facilisis. Nam adipiscing sagittis adipiscing. Vivamus auctor sem sit amet tortor tincidunt congue. Maecenas orci leo, auctor vitae cursus ut, consequat sit amet risus. Suspendisse auctor massa at eros venenatis ac facilisis erat lacinia. Morbi fringilla magna nibh, sit amet aliquam elit. Curabitur laoreet quam vitae ipsum adipiscing ac bibendum nisi imperdiet. Sed vitae nulla nisi.
    
    Donec scelerisque aliquam magna. Vivamus lorem tortor, adipiscing at dignissim at, posuere non arcu. Phasellus aliquet aliquet pharetra. Donec eget metus eu diam egestas dictum sit amet varius ante. Nam sit amet dolor diam. Nulla volutpat pellentesque arcu, sit amet aliquam eros laoreet sodales. Curabitur et leo in lacus facilisis dictum in nec magna. Praesent a sollicitudin libero. Proin lectus mauris, placerat sed rutrum et, dictum nec orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec lorem lorem, porttitor euismod condimentum sed, placerat et quam. Quisque imperdiet odio nec ante laoreet mollis pretium lorem mattis. Nulla nisi tellus, volutpat in interdum at, congue in dui. Pellentesque sodales accumsan bibendum. Vestibulum tincidunt, elit sed accumsan molestie, justo ligula aliquet ligula, vel imperdiet tellus mauris vitae nibh. Vivamus ut mi justo. Praesent vehicula pellentesque laoreet.</p> </div>
            	<div id="footer">Footer (24 pixels high).</div>
            </div>
          </div>
          </body>
        </html>

  • Users who have thanked SB65 for this post:

    finstah1 (06-10-2009)

  • #5
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    BEAUTIFUL!! that's exactly it. Thanks.

    So it looks like all I had to do was float the menu and remove all the positioning.

    Either way thanks for the help

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Works great in FF and IE7 but there seems to be an issue with IE6. See attachment
    Attached Thumbnails Attached Thumbnails help centering content-swwaie6.jpg  

  • #7
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    here's a link to the test page if that helps.

    http://www.6linds.com/atsea/test1.html

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Good old IE6!

    My old friend the 3px bug!!

    Take the width off #header.

  • Users who have thanked SB65 for this post:

    finstah1 (06-10-2009)

  • #9
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I know I hate developing for IE6.

    thanks for the help that worked!

    Last question and I think I'm on my way.

    Can you see this in IE6? The content is sticking out to the left a wee bit (couple of pixels)

    Can I margin or pad that over or set a width so it fits correctly?

  • #10
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts
    looks like if I add content to the left menu it fixes the alignment. But then the footer is bleeding left a couple of pixels.

    Is there a way to get the left menu to span 100%?

    I tried height: 100% and min-height: 100% but to no avail.

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    You'd need to use faux columns
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Can you see this in IE6? The content is sticking out to the left a wee bit (couple of pixels)
    Yes, that's the IE6 3px bug again, less easily fixed this time. You could add a conditional comment to your css, or worse, a hack, but in this case the bug can be avoided by applying float:right and width:620px to #right_column. Shouldn't really need to do this...

    Re left-menu - is the whole "frame" supposed to be a fixed height - it is at the moment, and I'm assuming that's why you wanted scrollbars on #content. If so you could add height: 430px to #mainmenu as a simple solution.

    EDIT: And, take the margin-left off of #right-column as well.
    Last edited by SB65; 06-10-2009 at 04:45 PM.


  •  

    Posting Permissions

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