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 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Positioning: Issues Centering Div's

    I'm trying to set my nav bar and my content to display in the center of my page. I'm having trouble finding the right bit of code to use for each part. I think it has something to do with positioning and I'm not very clear on how it's effecting my page. I've been playing around with relative and static positioning but I still can't get my stuff to stay centered regardless of screen width.

    Here is a link to my site.
    http://www.wararmada.com/tdb/test.php

    Here is the important part of my css code and some comments.

    Code:
    /* The contentBox wraps around my nab bar. NOTE: I can set a width = to the nav bar and move it via this div */
    
    #contentBox {
    	width:100%; 
    	height:20px;
    	padding-top:100px;
    	padding-left:25%;
    }
    
    /* My Navbar the first thing i'm trying to center. The contentBox ul moves my nav bar within the contentBox */
    
    #contentBox ul {
    	margin:0px;
    	padding:0px; 
    	position:static; 
    	width:100%;
    }
    
    /* Random code */
    
    #contentBox ul li {
    	display:inline; 
    	float:left; 
    	background-color:#000;
    	color:#FFFFFF;
    }
    
    /* Random code */
    
    .titleCell {
    	width:75px;
    	height:20px; 
    	position:relative; z-index:1000; 
    	margin:0px; padding:0px;  
    	cursor:pointer;
    }
    
    /* Random code */
    
    .titleCell strong {
    	font-size:14px;
    	position:absolute; z-index:1000;
    	width:73px;  height:18px; 
    	text-align:center; 
    	border:#000 solid; border-width:1px;
    }
    
    /* Random code */
    
    #contentBox ul ul {
    	position:absolute; left:0px;
    	display:none; 
    	z-index:100;
    }
    
    /* My Content the 2nd thing I'm trying to center. The contentBox ul ul li moves the actual content on my page */
    
    #contentBox ul ul li {
    	border:#000 solid; 
    	border-width:1px; 
    	-moz-border-radius: 1em;
    	-webkit-border-radius: 1em;
    	border-radius:1em;	
    	width:700px;
    	padding:10px;
    	margin-top:50px;
    	margin-left:27%;
    	color:#F0F0F0;
    	background-color: rgba(255,0,0,0.3);
    }

  • #2
    New Coder
    Join Date
    Feb 2011
    Posts
    41
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by Barons View Post
    I'm trying to set my nav bar and my content to display in the center of my page. I'm having trouble finding the right bit of code to use for each part. I think it has something to do with positioning and I'm not very clear on how it's effecting my page. I've been playing around with relative and static positioning but I still can't get my stuff to stay centered regardless of screen width.

    Here is a link to my site.
    http://www.wararmada.com/tdb/test.php

    Here is the important part of my css code and some comments.

    Code:
    /* The contentBox wraps around my nab bar. NOTE: I can set a width = to the nav bar and move it via this div */
    
    #contentBox {
    	width:100%; 
    	height:20px;
    	padding-top:100px;
    	padding-left:25%;
    }
    
    /* My Navbar the first thing i'm trying to center. The contentBox ul moves my nav bar within the contentBox */
    
    #contentBox ul {
    	margin:0px;
    	padding:0px; 
    	position:static; 
    	width:100%;
    }
    
    /* Random code */
    
    #contentBox ul li {
    	display:inline; 
    	float:left; 
    	background-color:#000;
    	color:#FFFFFF;
    }
    
    /* Random code */
    
    .titleCell {
    	width:75px;
    	height:20px; 
    	position:relative; z-index:1000; 
    	margin:0px; padding:0px;  
    	cursor:pointer;
    }
    
    /* Random code */
    
    .titleCell strong {
    	font-size:14px;
    	position:absolute; z-index:1000;
    	width:73px;  height:18px; 
    	text-align:center; 
    	border:#000 solid; border-width:1px;
    }
    
    /* Random code */
    
    #contentBox ul ul {
    	position:absolute; left:0px;
    	display:none; 
    	z-index:100;
    }
    
    /* My Content the 2nd thing I'm trying to center. The contentBox ul ul li moves the actual content on my page */
    
    #contentBox ul ul li {
    	border:#000 solid; 
    	border-width:1px; 
    	-moz-border-radius: 1em;
    	-webkit-border-radius: 1em;
    	border-radius:1em;	
    	width:700px;
    	padding:10px;
    	margin-top:50px;
    	margin-left:27%;
    	color:#F0F0F0;
    	background-color: rgba(255,0,0,0.3);
    }
    Hi,
    Try giving
    code below
    #box
    {
    background-image:url("assets/images/spiderbg.png");
    background-repeat:no-repeat;
    height:850px;
    margin:0 auto;
    width:800px;
    }

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,687
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Hello Barons,
    You already center #box just fine with the left/right margins set to auto.
    I do see a problem with your box model that may show up in some browsers though - See the box model here. The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all could when figuring width/height.

    When you make #contentBox 100% wide and add 25% left padding, you make that element 125% wide.
    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

  • #4
    New Coder
    Join Date
    Feb 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Nice! Thanks for that info. I'm just now starting to grasp how positioning works.

    I think it's sorted out.
    My backgound or #box has been centered no matter what your screen width is
    Code:
    #box {
    	width:800px;
    	height:760px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-top:0px;
    	background-image:url('assets/images/spiderbg.png');
    	background-repeat:no-repeat;
    }
    I made the div around my nav bar so small that its the exact some size as the nav bar then positioned it relative to my #box div thus centering the nav bar

    Code:
    #contentBox {
    	width:375px; 
    	height:20px;
    	padding-top:100px;
    	position:relative;
    	margin-left:auto;
    	margin-right:auto;	
    }
    I removed the margin and padding from the nav bar

    Code:
    #contentBox ul {
    	margin:0px;
    	padding:0px;
    }
    Then I positioned my content relative to my home button??? I'm sure it has something to do with the JS i used to get the onhover content but anyways I pulled the content box to the left -170px and verifed it was center with a screen shot and an image editor. I tried adding 170px right margin but it didn't move any. I'm thinking it has something to do with the JS but idk.

    Code:
    #contentBox ul ul li {
    	border:#000 solid; 
    	border-width:1px; 
    	-moz-border-radius: 1em;
    	-webkit-border-radius: 1em;
    	border-radius:1em;	
    	width:700px;
    	padding:10px;
    	position:relative;
    	margin-top:50px;
    	margin-left:-170px;
    	color:#F0F0F0;
    	background-color: rgba(255,0,0,0.3);
    }

    As far as i can tell its sorted =)

    Do you see anything I should have done differently?
    Last edited by Barons; 02-22-2011 at 08:49 AM.

  • #5
    New Coder
    Join Date
    Feb 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    On 2nd thought I'm still having an issue. I want to give my content box a fluid width so that it changes size depending on how much text and other stuff i have inside.

    I've got a lot of short comments related to search functions or navigation that look really with that really wide box.

    Something like

    Code:
    max-width:700px;
    width:auto;
    Would like my content box expand and shrink with the text inside of it. My issues is back to centering. Since I have the content box positioned relative to the home button its moving off center. The right side of the content back is the only side that moves when the box expands or shrinks. The life side stays in the same place.

    If I changed the code below to positioned strict that "should" make it its own entity correct? Then I would plug in my width and my margin autos and it "should" be center right?

    Code:
           #contentBox ul ul li {
    	border:#000 solid; 
    	border-width:1px; 
    	-moz-border-radius: 1em;
    	-webkit-border-radius: 1em;
    	border-radius:1em;	
    	width:700px;
    	padding:10px;
    	position:relative;
    	margin-top:50px;
    	margin-left:-170px;
    	color:#F0F0F0;
    	background-color: rgba(255,0,0,0.3);
    }
    It doesn't, its still aligned with the home button. It seems like it position strict would break the connection to the home key. Is that how it should work?

    If so this could be a side effect of the way I've got the content to display on hover. I guess technically my content boxes are inside of the nav bar. They are just hover text that I've added some style to and then a bit of javascript to keep it from closing when your take your mouse off the button.

    Any idea on how I can get around this? It could just be that I'm not very good with css.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,687
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    Quote Originally Posted by Barons View Post
    Would like my content box expand and shrink with the text inside of it. My issues is back to centering. Since I have the content box positioned relative to the home button its moving off center. The right side of the content back is the only side that moves when the box expands or shrinks. The life side stays in the same place.
    It's hard to center an unknown width. Maybe percentages would work better for you?
    Try something like this -
    Code:
    #contentBox ul ul li {
    width: 75%;
    max-width:700px;
    margin: 50px 0 0 25%;
    padding:10px;
    	border:#000 solid; 
    	border-width:1px; 
    	-moz-border-radius: 1em;
    	-webkit-border-radius: 1em;
    	border-radius:1em;	
    /*
    width:700px;
    margin-left:-170px;
    position: relative;
    margin-top:50px;
    */
    	color:#F0F0F0;
    	background-color: rgba(255,0,0,0.3);
    }
    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 Coder
    Join Date
    Feb 2011
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for that bit of code.

    I've updated it here
    www.wararmada.com/tdb/test2.php

    I've been playing around with it and i'm starting to think i'm not going to be able to pull this off. With the % the box moves like it should as far as expanding but its also changing position to where it's always off center in a different position. Some times to the left some times to the right depending on the size of the box.

    If you have any more ideas let me know. I'm going to keep playing around with this for a while then try to look at it from another angel and maybe figure something out.


    EDIT:

    I've been playing around with adding in another div around my content box and I think I see one of if not the issue. I glanced over at the design view in dream weaver and it looks like all the content on my page is inside this div. Its what hold my nav bar.

    Code:
    #contentBox {
    	width:375px; 
    	height:20px;
    	padding-top:100px;
    	position:relative;
    	margin-left:auto;
    	margin-right:auto;	
    }


    I think I'm already over filling the 375x20 box.
    Last edited by Barons; 02-23-2011 at 02:28 AM.


  •  

    Posting Permissions

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