Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Positioning: Centering with unknown/fulid width.

Posted by: Barons Feb 22 2011, 02:35 PM

I would like my content box expand and shrink with the text inside of it. My issues is getting it to center as well.

My content box appears to be positioned relative to the home button and that's causing it to move off center. I'm not sure why its tied into the home button. It most have something to do with the way I'm displaying my content with the on-hover effect. The right side of the content box is the only side that moves when the box expands or shrinks. The left side stays in the same place in line with the home button.

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?

http://www.wararmada.com/tdb/test.php

CODE

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

It doesn't, its still aligned with the home button. It seems like position strict would break the connection to the home key. Is that how it would normaly 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 box is 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 you take your mouse off the button. I could make it would if the middle of the content box was the anchor point but its not its the far left side.

I'm just getting my feet wet with positioning. Relitive makes it move within its parent div and Strict should make allow it to move freely as far as i know? I'm not sure what it's not working. Seems like no matter what I do the content box is still tied into the home button.

I've also tried

http://www.wararmada.com/tdb/test2.php

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;
    color:#F0F0F0;
    background-color: rgba(255,0,0,0.3);
}

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

Posted by: Darin McGrew Feb 22 2011, 04:38 PM

With test.php, the right edge changes places because you haven't specified a width. Thus, the element's width adjusts for the width of its content.

Posted by: Barons Feb 22 2011, 05:00 PM

Yes. I'm trying to get the box to stay fluid like that. So that its changing size depending on the content inside of it.

I just can't figure out how to center it at the same time. The left edit of the content box is linked to the left edge of the navbar so all of the code i've tried adding to move the content box moves it how ever many px or % from the left edige of the navbar.

I'm going to try putting another div around the content box and giving it width and centering it then positioning the content box from within it and see if that changes anything.

Posted by: Barons Feb 23 2011, 02:14 AM

I've been playing around with it and I'm starting to think I'm not going to be able to pull this off. When I use a % the box moves like it should as far as expanding and shrinking on both sides but its also changing position to where it's off center in a different position. Sometimes to the left sometimes to the right depending on the size of the box.

I'm trying to look at this from another angel and maybe figure something out. 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 holds my navbar.

CODE

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

Do you think the box model stuff about "code inside a box can't be bigger than the box its in" applies to my site? I think I'm already over filling the 375x20 box.

Any idea or things I can try?

Posted by: Christian J Feb 23 2011, 09:41 AM

QUOTE(Barons @ Feb 22 2011, 08:35 PM)

My content box appears to be positioned relative to the home button and that's causing it to move off center. I'm not sure why its tied into the home button.

The Home button (and all other content) is inside div#contentBox.

BTW the code indentation makes it very hard to follow, did Dreamweaver produce that?

QUOTE

It most have something to do with the way I'm displaying my content with the on-hover effect.

Yes all content is marked up as nested lists inside the nav menu. Is that really what you want?

I suggest rethinking the HTML structure first of all.

Posted by: Barons Feb 23 2011, 01:21 PM

No Dreamweaver didn't indent the code that way. I thought it would be easier to look at until after i changed it =(

As for the nested lists. That's kinda how it ended up happening. I started off trying to get all the content to display when you hover over the button. I did that just using css.

Then I noticed how easy it was to let the content window close. If you didnt keep the mouse hovered over the content box it closes. I have some small boxes related to the search functions.

So I added that java script to make the content stay open until a new page was selected.