1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Web Design' started by KHer0, Apr 8, 2012.

  1. KHer0

    KHer0 Senior Member

    Joined:
    Mar 22, 2011
    Messages:
    876
    Likes Received:
    947
    Occupation:
    Architect
    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
    [​IMG]

    I want to move the main-menu to be next to the Logo. Like this
    [​IMG]


    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.
     
  2. Comii

    Comii Newbie

    Joined:
    Sep 13, 2011
    Messages:
    45
    Likes Received:
    7
    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..
     
    • Thanks Thanks x 1
  3. KHer0

    KHer0 Senior Member

    Joined:
    Mar 22, 2011
    Messages:
    876
    Likes Received:
    947
    Occupation:
    Architect
    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 :)
     
    Last edited: Apr 8, 2012
  4. marusia

    marusia Senior Member

    Joined:
    Oct 25, 2010
    Messages:
    1,122
    Likes Received:
    2,320
    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.
     
    • Thanks Thanks x 1
    Last edited: Apr 8, 2012
  5. extremephp

    extremephp BANNED BANNED

    Joined:
    Oct 19, 2010
    Messages:
    1,293
    Likes Received:
    1,272
    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;} 
     
    • Thanks Thanks x 1
  6. crashed

    crashed Jr. VIP Jr. VIP Premium Member

    Joined:
    Aug 13, 2008
    Messages:
    958
    Likes Received:
    1,198
    Occupation:
    Guru-slayer
    Location:
    Behind the VPN...
    Home Page:
    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).
     
    • Thanks Thanks x 1
  7. KHer0

    KHer0 Senior Member

    Joined:
    Mar 22, 2011
    Messages:
    876
    Likes Received:
    947
    Occupation:
    Architect
    Better than the answer is that Marusia is the one answered me;) . Thank you very much

    Thank you Extremephp, I guess I got the idea :D. Will play on it right now.

    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 :p

    Will start working right now and comeback with the results :)
     
    Last edited: Apr 8, 2012
  8. hurricane51g

    hurricane51g Newbie

    Joined:
    Apr 8, 2012
    Messages:
    8
    Likes Received:
    2
    left: 150px; top: 100px;
     
    • Thanks Thanks x 1
  9. crashed

    crashed Jr. VIP Jr. VIP Premium Member

    Joined:
    Aug 13, 2008
    Messages:
    958
    Likes Received:
    1,198
    Occupation:
    Guru-slayer
    Location:
    Behind the VPN...
    Home Page:
    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
     
    • Thanks Thanks x 1
  10. xxpaigexx

    xxpaigexx Registered Member

    Joined:
    Apr 6, 2009
    Messages:
    83
    Likes Received:
    27
    btw mate if you got chrome then u dont need to install firebug..chrome can do all that within itself :)
     
    • Thanks Thanks x 1
  11. geomuss

    geomuss Regular Member

    Joined:
    May 19, 2011
    Messages:
    243
    Likes Received:
    110
    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
     
    • Thanks Thanks x 1
    Last edited: Apr 9, 2012
  12. KHer0

    KHer0 Senior Member

    Joined:
    Mar 22, 2011
    Messages:
    876
    Likes Received:
    947
    Occupation:
    Architect
    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 :cool:. And of course the problem solved btw :D
     
  13. nethead01

    nethead01 Regular Member

    Joined:
    Sep 21, 2009
    Messages:
    424
    Likes Received:
    229
    Most defiantly should use firebug to figure this out. I would try editing #access { css }
     
  14. SYAWEDIS

    SYAWEDIS Jr. VIP Jr. VIP

    Joined:
    Mar 7, 2012
    Messages:
    320
    Likes Received:
    21
    Location:
    Somewhere
    Home Page:
    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).