...

View Full Version : Positioning: Issues Centering Div's



Barons
02-22-2011, 02:56 AM
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.



/* 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);
}

shankar.adodis
02-22-2011, 04:17 AM
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.



/* 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;
}

Excavator
02-22-2011, 04:44 AM
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 (http://www.w3.org/TR/CSS2/box.html). 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.

Barons
02-22-2011, 07:47 AM
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



#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


#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


#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.


#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?

Barons
02-22-2011, 11:08 AM
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



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?



#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.

Excavator
02-22-2011, 06:48 PM
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 -

#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);
}

Barons
02-22-2011, 08:28 PM
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.


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

http://i914.photobucket.com/albums/ac341/WarArmada/demo.jpg

I think I'm already over filling the 375x20 box.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum