Positioning Help

[Arjun]

Hi all.

I'm using WordPress and I'm trying to figure out something.

If you visit [ www.ramp-it.ca/ ], you'll notice that there's a navbar at the top right. I want to move that over closer to the center of the page. How would I go about doing that?

[Charles Stover]

It'd require quite a lot of edits to the style.css file, which I'm not entirely sure wouldn't break the layout of the page itself. In short, I don't think there is a definitive way of center it unless it has a fixed width. Now, if you want it to just be "close to the center" and not exactly centered, that'll be quite a bit easier.

#header { padding-right : 24pt; }

Adjust the number to make it larger/smaller.

[Arjun]

The variables for the header menu are as noted below:

/* ----- header-menu --------------------------------------------------------------------------------------------------------------------------- */
#header_menu { float:right; display:inline; margin:20px 0 0 0; height:52px; background:url(img/header_menu_right.gif) no-repeat right top; }

#menu { float:left; background:url(img/header_menu_left.gif) no-repeat left top; font-size:11px; height:52px; margin:0; }
#menu, #menu ul { line-height:1; margin:0; padding:0; }
#menu li { position:relative; float:left; border-left:1px solid #444; height:48px; margin:2px 0 0 0; z-index:10; }
#menu ul li { height:auto; border-left:none; padding:0; left:auto; margin:0; }
#menu a:link, #menu a:visited { color:#999; display:block; padding:19px 30px 14px; position:relative; }
#menu a:hover { color:#f3193d; text-decoration:none; background:#333; }
#menu ul { position:absolute; top:48px; left:0; display:none; opacity:0; width:200px; }
#menu ul ul { margin:0 0 0 189px; top:0; }

#menu ul a:link, #menu ul a:visited,
#menu .current_page_item ul a:link, #menu .current_page_item ul a:visited,
#menu ul .current_page_item a:link, #menu ul .current_page_item a:visited,
#menu ul .current_page_item ul a:link, #menu ul .current_page_item ul a:visited,
#menu .current-cat ul a:link, #menu .current-cat ul a:visited,
#menu ul .current-cat a:link, #menu ul .current-cat a:visited,
#menu ul .current-cat ul a:link, #menu ul .current-cat ul a:visited
{ color:#999; background:#282828; line-height:140%; padding:9px 28px 7px; border:1px solid #444; width: 132px; margin:-1px 0 0 0; }
#menu ul a:hover, #menu .current_page_item ul a:hover, #menu .current-cat ul a:hover,
#menu .first_menu ul a:hover, #menu .last_menu ul a:hover
{ color:#f3193d; background:#333; }

#menu .current_page_item, #menu .current-cat { background:url(img/stripe2.gif) left top; z-index:9;}
#menu .current_page_item a:link, #menu .current_page_item a:visited,
#menu .current-cat a:link, #menu .current-cat a:visited
{ color:#f3193d; padding-bottom:21px; background:url(img/header_menu_arrow.gif) no-repeat center bottom; }
#menu ul .current_page_item a:link, #menu ul .current_page_item a:visited,
#menu ul .current-cat a:link, #menu ul .current-cat a:visited
{ color:#f3193d; background:#282828 url(img/stripe2.gif) left top; }
#menu ul .current_page_item ul a:link, #menu ul .current_page_item ul a:visited,
#menu ul .current-cat ul a:link, #menu ul .current-cat ul a:visited
{ color:#999; background:#282828; }
#menu ul .current_page_item ul a:hover, #menu ul .current-cat ul a:hover { color:#f3193d; background:#333; }

#menu .first_menu { border:none; background:none; }
#menu .first_menu_active { background:url(img/header_menu_first_active.gif) no-repeat left top; }
#menu .first_menu a:hover { background:url(img/header_menu_first_hover.gif) no-repeat left top; }
#menu .last_menu { background:none; }
#menu .last_menu_active { background:url(img/header_menu_last_active.gif) no-repeat right top; }
#menu .last_menu a:hover { background:url(img/header_menu_last_hover.gif) no-repeat right top; }

#menu ul .parent_menu > a:link, #menu ul .parent_menu > a:visited { background:#282828 url(img/arrow4.gif) no-repeat right 14px; }
#menu ul .parent_menu > a:hover { background:#333 url(img/arrow4.gif) no-repeat right 14px; }

The only problem is that I can't find a padding var that will move the menu.

[Charles Stover]

I just gave you it...

[Arjun]

Oh, I'm supposed to add it .

[Arjun]

Thanks alot, I got it.

Another potential situation.

Think back to when the navbar was aligned to the right. If I wanted to swap the position of the title and navbar, how would I do that?

[Arjun]

Bump?

[carbine]

Well, you didn't post the CSS that includes the logo positioning, but I'd guess that if you changed this:

#header_menu { float:right; display:inline; margin:20px 0 0 0; height:52px; background:url(img/header_menu_right.gif) no-repeat right top; }

to this:

#header_menu { float:left; display:inline; margin:20px 0 0 0; height:52px; background:url(img/header_menu_right.gif) no-repeat right top; }

And change the float of the logo div to right instead of left, assuming that's what it's set to (Didn't look at site CSS) that you'd swap them.

--EDIT--

Logo CSS:

#logo { float:left; display:inline; margin:26px 0 0 0px; }


Change that float to a right and the float for the nav to a left as I said above. See if that works.

#logo { float:right; display:inline; margin:26px 0 0 0px; }


[Arjun]

I've already tried that. The result is as follows:

... -.-''

Obviously I wasn't doing it right, because now it works.

Thanks for all your help

[carbine]

Glad you got it all working.