The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Positioning: Centering with unknown/fulid width., Strict / Relative
Barons
post Feb 22 2011, 02:35 PM
Post #1


Member
***

Group: Members
Posts: 70
Joined: 7-November 10
Member No.: 13,091



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th April 2024 - 03:30 PM