[Help] Which line to modify - Very simple problem :(

KHer0 · Apr 8, 2012

Well , I know this is very simple problem but I can't remember which thing to change to make two things in the same line

Let me explain in photos to make it easier

If this is the situation now

I want to move the main-menu to be next to the Logo. Like this

There was ad in the place of the menu in the second page which I disabled.

Now to the CSS-Style

The Logo, Ad & Main-Menu :

Code:

/*************************************************
header area
*************************************************/
#page-highlight {width:1200px;margin:0px auto;height:312px;background:url(images/page-highlight.png) no-repeat 0px -50px;position:absolute;z-index:-1;}
#page-wrapper {width:1000px;margin:0px auto;}
#logo-bar {padding:10px 20px 10px 20px;}
#logo-wrapper {float:left;}
#logo {float:left}
.subtitle {padding-top:5px;}
#ad-header {float:right;padding:15px 0px 0px 0px;}

#main-menu-wrapper {width:960px;margin:0px auto;padding:5px 20px 0px 20px;}
#main-menu {float:left;}
#main-menu a.left-cap {display:block;width:65px;height:44px;background:url(images/main-menu-left-cap.png) no-repeat 0px 0px;float:left;}
#main-menu a.left-cap:hover {background:url(images/main-menu-left-cap.png) no-repeat 0px -44px;}
#main-menu .right-cap {width:9px;height:44px;background:url(images/main-menu-right-cap.png) no-repeat 0px 0px;float:left;margin-left:-1px;position:relative;z-index:180;}
#main-menu ul {float:left;list-style-type:none;margin:0px;padding:0px;position:relative;z-index:170;background:url(images/main-menu-bg.png) repeat-x 0px 0px;}
#main-menu div.menu { float:left; }
#main-menu ul li {float:left;padding:0px;margin:0px;position:relative;padding:2px 0px 2px 0px;}
#main-menu ul li a {display:block;padding:12px 18px 11px 18px;text-align:center;font-size:.75em;height:17px;color:#7D7D7D;border-right:1px solid #E8E8E8;border-left:1px solid #FFF;}
#main-menu ul li a:hover, 
#main-menu ul li.current_page_item a, 
#main-menu ul li.current_page_ancestor a, 
#main-menu ul li.current_page_parent a {background:url(images/main-menu-highlight.png) repeat-x 0px 0px;color:#FFF;}

Which line to change to allow this ( blocks the Menu and Logo getting next to each other ?

)

Thanks in advance.

Comii · Apr 8, 2012

Well it's not that easy to visualise where all those divs are located spatially, but I would suggest you take the menu div and put it in the place of the ad div (in the template), also swapping out the code in the css for the location of the divs from menu to ad. Hopefully that way you'll manage to replace them.

I am mentioning the above as I can't see in the css that anyone moved the menu up by say a -100px push or something..

KHer0 · Apr 8, 2012

Tried it be4 asking , moving the DIV in the PHP files. Didn't work and every thing went in a mess. I remember when I was studying CSS there was an order(don't really know what designer call) which job clearing the line. So that an object can't take any other object next to it. But I can't remember what it was and as a result I can't remove it

Thnx for replying and help

marusia · Apr 8, 2012

Try changing position to absolute and add this:

left: 150px; top: 100px;

More specifically, it's the top you need to adjust.

Those are random, but you can tweak them as you need them be, otherwise hit me up and I'll help you once I can see your code.

extremephp · Apr 8, 2012

How about changing

this

Code:

#main-menu-wrapper {width:960px;margin:0px auto;padding:5px 20px 0px 20px;}

to

Code:

#main-menu-wrapper {width:960px;margin-top:150px auto;padding:5px 20px 0px 20px;}

crashed · Apr 8, 2012

All are good suggestions, though how about this...

You get firefox http://www.mozilla.org/en-US/
You get Firebug http://getfirebug.com/

Then you goto the site, right click on the menubar that is in the wrong place and click Inspect Element with Firebug. In the dev panel that opens look at the CSS that is related to it, and try the changes suggested here (either padding-top or margin-top).

KHer0 · Apr 8, 2012

Try changing position to absolute and add this:

left: 150px; top: 100px;

More specifically, it's the top you need to adjust.

Those are random, but you can tweak them as you need them be, otherwise hit me up and I'll help you once I can see your code.

Better than the answer is that Marusia is the one answered me

. Thank you very much

How about changing

this
Code:

#main-menu-wrapper {width:960px;margin:0px auto;padding:5px 20px 0px 20px;}
to

Code:

#main-menu-wrapper {width:960px;margin-top:150px auto;padding:5px 20px 0px 20px;}

Thank you Extremephp, I guess I got the idea

. Will play on it right now.

All are good suggestions, though how about this...

You get firefox http://www.mozilla.org/en-US/
You get Firebug http://getfirebug.com/

Then you goto the site, right click on the menubar that is in the wrong place and click Inspect Element with Firebug. In the dev panel that opens look at the CSS that is related to it, and try the changes suggested here (either padding-top or margin-top).

I use DW for modifying my site but this is a nice add. Gonna install plugin right away as Mozilla my main browser.

Glad that all ppl here agreed on one solution and all are heavy ones. No problem can runaway from such a team

Will start working right now and comeback with the results

hurricane51g · Apr 8, 2012

left: 150px; top: 100px;

crashed · Apr 9, 2012

The good thing about firebug is changes are realtime, so you change something in source it automatically appears on site so u can try moving the bar and find the best number

xxpaigexx · Apr 9, 2012

btw mate if you got chrome then u dont need to install firebug..chrome can do all that within itself

geomuss · Apr 9, 2012

Probably check your CSS for a line like one of these below
.nav ul li
#nav ul li

and add the following line of code to it - margin-top: 60px; (approx size)
If you have chrome do right click on the element and change the inline style
this will tell you immediately if it works and you have the right div
new Firefox does not need the firebug addon

KHer0 · Apr 9, 2012

For all replies, Thnx guyz. I learnt a lot from all the answers. I have now many ways to modify the page. Thnx for sharing for u all

. And of course the problem solved btw

nethead01 · Apr 9, 2012

Most defiantly should use firebug to figure this out. I would try editing #access { css }

SYAWEDIS · Jul 6, 2012

I'm not entirely sure why people recommend it this way - left: 150px; it seems like a lot more trial and error to get it in the right spot.

I would use right: 0; (with position:absolute, of course).

[Help] Which line to modify - Very simple problem :(

KHer0

Elite Member

Comii

Newbie

KHer0

Elite Member

marusia

Compromised Account

extremephp

BANNED

crashed

Senior Member

KHer0

Elite Member

hurricane51g

Newbie

crashed

Senior Member

xxpaigexx

Registered Member

geomuss

Regular Member

KHer0

Elite Member

nethead01

Power Member

SYAWEDIS

Regular Member

Main Menu

Marketplace

Making Money

BlackHat World