The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
Darin McGrew
post Feb 22 2011, 04:38 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Barons
post Feb 22 2011, 05:00 PM
Post #3


Member
***

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



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Barons
post Feb 23 2011, 02:14 AM
Post #4


Member
***

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



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


IPB Image

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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 23 2011, 09:41 AM
Post #5


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



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? sad.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Barons
post Feb 23 2011, 01:21 PM
Post #6


Member
***

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



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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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: 18th March 2024 - 09:33 PM