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 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts

    Question Centering Problem, but not how to center - help?

    Hi,

    When i start to minimize my page, in IE and FF, the left content side (on my page) will continue to pass the left browser side... I don't really know how to explain it so i went to find examples on the web because my site isn't online yet.

    These were the first sites that came to mind that i checked.

    If you look at www.myspace.com;

    When you minimize the site the background will continue off the left side of the browser, which is what i do not want my center content div to do.

    But if you look at the 'today on myspace' box, right below it, it will stop moving left when it hits the left browser wall, which is what i want my site to do.

    A good example of what i want my site to is:
    www.yahoo.com

    when you minimize yahoo, all the tables and everything will hit the left browser wall and then stop moving left.

    I can't seem to figure out why my page is doing this.

    Any help is welcome.

    Thanks in advance

    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-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled 1</title>
    <link rel="stylesheet" type="text/css" href="external2.css" />
    </head>
    
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <div id="layout">
    	<div id="bgHeaderStripe">
    	</div>
    	<div id="bgContainer">
    		<div id="center">
    		
    				<!--site nav section divisions-start-->
    				<div id="sctNavigation">
    					<div id="siteNav">
    						<div id="banner">
    						a</div>
    						<div id="navButton">
    						a</div>
    						<div id="dirHeader">
    						a</div>
    					</div>
    					<div id="siteHeader">
    					</div>
    				</div>
    				<!--site nav section divisions-end-->
    				
    				<!--site content section divisons-start-->
    				<div id="sctMdlContent">
    				</div>
    				<div id="sctBtmContent">
    				a</div>
    				<!--site content section divisions-end-->
    				
    		</div>
    	</div>
    </div>
    
    </body>
    
    </html>
    Code:
    /*LAYOUT PARAMS*/
    * {
    	margin:0;
    	padding:0;
    }
    
    html, body {
    	height:100&#37;;
    	width:100%;
    }
    #bgHeaderStripe {
    	height: 100px;
    	background-color: #00FFFF;
    	margin-top: 125px;
    	width: 100%;
    	border: 1px dashed #000000;
    }
    #layout {
    	width: 100%;
    	height: 1000px;
    }
    #center {
    	width: 800px;
    	margin: 0 auto;
    	height: 1000px;
    }
    #sctNavigation {
    	height: 225px;
    	width: 100%;
    }
    #siteHeader {
    	border: 1px dashed #000000;
    	width: auto;
    	height: 100px;
    	background-image: url('images/contentHeaderStripe.gif');
    }
    #siteNav {
    	height: 125px;
    	width: auto;
    }
    #bgContainer {
    	width: 820px;
    	position: absolute;
    	margin: 0 auto 0 -410px;
    	left: 50%;
    	height: 1000px;
    	background-color: #FFFFFF;
    	top: 0px;
    }
    #dirHeader {
    	width: auto;
    	height: 30px;
    }
    #navButton {
    	width:auto;
    	height:30px;
    }
    #banner {
    	width:auto;
    	height:65px;
    }
    #bgHeaderStripe {
    	height: 100px;
    	background-color: #666666;
    	margin-top: 125px;
    	width: 100%;
    	border: 1px dashed #000000;
    }

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You'll need to lose the absolute positioning.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts
    thanks aerospace, i tried what you said, but i cant overlap the two divs if i remove the absolute position.

    Also i am using the negative margin method of centering the overlapping div. When i left the div with absolute position and tried to center with margin: 0 auto; it would not center the overlapped div

    But i can't figure it out, either i get rid of the absolute position and find another way to overlap divs (?)
    Code:
    #bgContainer {
    	width: 820px;
    	margin: 0 auto;
    	height: 1000px;
    	background-color: #FFFFFF;
    	top: 0;
    }
    This doesn't overlap...

    or i leave absolute position and find another way to center (?) that doesn't involve 'margin: 0 auto' or 'negative margin centering'.
    Code:
    #bgContainer {
    	width: 820px;
    	position: absolute;
    	margin: 0 auto;
    	height: 1000px;
    	background-color: #FFFFFF;
    	top: 0;
    }
    This doesn't center...

    Both of which kind of solve the problem, although i don't know how to implement the second half of either method...

    thanks in advance

  • #4
    New Coder
    Join Date
    Jul 2008
    Location
    Indonesia
    Posts
    13
    Thanks
    0
    Thanked 1 Time in 1 Post
    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-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled 1</title>
    <style>
    /*LAYOUT PARAMS*/
    * {
    	margin:0;
    	padding:0;
    }
    
    html, body {
    	height:100%;
    	width:100%;
    }
    
    #layout {
    	width: 100%;
    	height: 1000px;
    }
    #center {
    	width: 800px;
    	margin: 0 auto;
    	height: 1000px;
    }
    #sctNavigation {
    	height: 225px;
    	width: 100%;
    }
    #siteHeader {
    	border: 1px dashed #000000;
    	width: auto;
    	height: 100px;
    	background-image: url('images/contentHeaderStripe.gif');
    }
    #siteNav {
    	height: 125px;
    	width: auto;
    }
    #bgContainer {
    	position:relative;
    	width: 820px;
    	border:1px solid red;
    	margin: 0 auto;
    	height: 1000px;
    	background: #Ff0;
    }
    #dirHeader {
    	width: auto;
    	height: 30px;
    	border:1px solid black;
    }
    #navButton {
    	width:auto;
    	height:30px;
    	border:1px solid black;
    }
    #banner {
    	width:auto;
    	height:65px;
    	border:1px solid black;
    }
    #bgHeaderStripe {
    	position:absolute;
    	height: 100px;
    	background-color: #f0f;
    	margin-top: 125px;
    	width: 100%;
    }
    </style>
    </head>
    
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <div id="layout">
    	<div id="bgHeaderStripe">bgHeaderStripe</div>
    	
    	<div id="bgContainer">
    		<div id="center">
    		
    				<!--site nav section divisions-start-->
    				<div id="sctNavigation">
    					<div id="siteNav">
    						<div id="banner">Banner here</div>
    						<div id="navButton">navigation button</div>
    						<div id="dirHeader">header</div>
    					</div>
    					<div id="siteHeader">site header</div>
    				</div>
    				<!--site nav section divisions-end-->
    				
    				<!--site content section divisons-start-->
    				<div id="sctMdlContent">middle content</div>
    				<div id="sctBtmContent">bottom content</div>
    				<!--site content section divisions-end-->
    				
    		</div>
    	</div>
    </div>
    
    </body>
    
    </html>
    try to fix it ... is it work??

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Don't forget that z-index (controls the layers.) will help you to overlap. But I believe; only if you set the position selector.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    New Coder
    Join Date
    Jul 2008
    Posts
    71
    Thanks
    7
    Thanked 3 Times in 3 Posts

    answered the question almost =]

    ok, so i looked at what kuse posted and it answered my first problem, but created more. IE and FF both had problems so i played with it a little and deleted (on a 2nd test page) everything that wasn't the problem.

    also effpeetee the z-index was a good idea, but i realized i didn't need it with the code that kuse posted. Thanks to both of you for your help.

    Kuse mainly changed the bgHeaderStripe position to absolute and the bgContainer position to relative.

    I was able to fix the problem with the help of kuse, aerospace, and effpeetee, but i'm worried that the code in this css is a little awkward. Is this alright...code?

    Because if you take the two lines out of the block below the header will line up its left side with the left side of the center column.

    Thanks people for your help

    Right here:
    Code:
    margin-left: -50%;
    	left: 50%;
    It came from this block:
    Code:
    #bgHeaderStripe {
    	position: absolute;
    	height: 100px;
    	background-color: #0099FF;
    	margin-top: 125px;
    	width: 100%;
    	margin-left: -50%;
    	left: 50%;
    }


    This is the entire code
    I came up with:

    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-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>bgHeaderStripe</title>
    <style>
    /*LAYOUT PARAMS*/
    * {
    	margin:0;
    	padding:0;
    }
    
    html, body {
    	height:100%;
    	width:100%;
    }
    
    #layout {
    	width: 100%;
    	height: 1000px;
    }
    #bgContainer {
    	position: relative;
    	width: 820px;
    	margin: 0 auto;
    	height: 1000px;
    	background: #Ff0;
    }
    #bgHeaderStripe {
    	position: absolute;
    	height: 100px;
    	background-color: #0099FF;
    	margin-top: 125px;
    	width: 100%;
    	margin-left: -50%;
    	left: 50%;
    }
    </style>
    </head>
    
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <div id="layout">
    	<div id="bgHeaderStripe">bgHeaderStripe
    	</div>
    	<div id="bgContainer">
    	bgContainer</div>
    </div>
    
    </body>
    
    </html>


  •  

    Posting Permissions

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