1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need help centering top navigation buttons - Wordpress

Discussion in 'CSS' started by tibor28, Aug 22, 2009.

  1. #1
    Hello guys. I am new to wordpress and I am trying to create my first wordpress blog. I downloaded a nice theme that I am trying to tweak to my expectations.

    Right now I am trying to figure out how to move the top-menu navigation buttons to the center of the page. I am not very good with CSS codes and the codes for the navigation menu are really complex. When I tried moving the navigation menu to center I ended up messing up my whole page :D

    This is my site: http://getbackexgirlfriendadvice.com/

    I am trying to move the blue navigation menu (home, articles, contact me...) to the exact center of the page.

    Here is the CSS code that belongs to the navigation menu. I can provide the whole style.css code if necessary.

    I will be forever greatful if someone is kind enough to help me with this. Of course rep+ to anyone who figures this out :)
     
    tibor28, Aug 22, 2009 IP
  2. MhW

    MhW Active Member

    Messages:
    370
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    85
    #2
    Find:
    #nav-wrap1{
    background: transparent url(images/nav-left.png) no-repeat left top;
    padding-left: 25px;
    position: absolute;
    z-index: 100;
    top: 170px;
    left: 1em;
    height: 64px;
    }
    Code (markup):
    Replace with:
    #nav-wrap1{
    background: transparent url(images/nav-left.png) no-repeat left top;
    padding-left: 25px;
    position: absolute;
    z-index: 100;
    top: 170px;
    left: [COLOR="Red"]27%[/COLOR];
    height: 64px;
    }
    Code (markup):
    Honestly...it's not perfect, but it pretty much gets the job done. There are better ways of doing this, but this one is simple and is almost what you need. Tried in Firefox, not sure about IE. :eek:
     
    MhW, Aug 23, 2009 IP
    tibor28 likes this.
  3. MYND

    MYND Active Member

    Messages:
    136
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    60
    #3
    I think adding a "wrap" would be enough, the two wraps (wrap1 & wrap2) aren't really holding the navigation but rather styling them. So, we'll add another DIV.

    Find:
    
         <div id="nav-wrap1">
          <div id="nav-wrap2">
            <ul id="nav">
    
    Code (markup):

    Replace with:
    <div id="nav-m-wrap">
         <div id="nav-wrap1">
          <div id="nav-wrap2">
            <ul id="nav">
    Code (markup):
    Find:
         </div>
         <!-- /main navigation -->
    
    Code (markup):
    Replace with:
    (here we added a DIV named nav-m-wrap that contains rest of navigation styling)

    Open style.css. Add a rule for nav-m-wrap, you may need to play the width value.

    Add this set of rule:
    #nav-m-wrap{
    height: 81px;
    margin: 0 auto;
    width: 527px;
    }
    Code (markup):
    Find #nav-wrap1. Change the position to relative, top value to 128px, and remove left property.

    Find:
    
    #nav-wrap1 {
    background: url(images/nav-left.png) no-repeat left top;
    height:64px;
    left:1em;
    padding-left:25px;
    position:absolute;
    top:170px;
    z-index:100;
    }
    Code (markup):
    Replace with:
    
    #nav-wrap1 {
    background:url(images/nav-left.png) no-repeat left top;
    height:64px;
    padding-left:25px;
    position:relative;
    top:128px;
    z-index:1000;
    }
    Code (markup):
    Important: Before you edit anything, make sure you have backup copy of those files.
     
    MYND, Aug 23, 2009 IP
    tibor28 likes this.
  4. sudharsan

    sudharsan Active Member

    Messages:
    164
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #4
    hope..this will resolve..add left padding

    #nav-wrap1{
    background: transparent url(images/nav-left.png) no-repeat left top;
    padding-left: 225px;
    position: absolute;
    z-index: 100;
    top: 170px;
    left: 1em;
    height: 64px;
    }
     
    sudharsan, Aug 23, 2009 IP
    tibor28 likes this.
  5. tibor28

    tibor28 Peon

    Messages:
    342
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks a lot guys! Rep+ for everyone ;) MYNDs method seemed to work the best. Now its in the exact center for both Firefox and IE. The only problem now is that in IE the navigation menu is about 1cm lower than in firefox :( Open the page in IE to see what I mean.

    I discovered that there is a CSS file called ie6.css with codes specificalyl to fix IE bugs. Perhaps somethig has to be added to this file too?

    Thanks a lot so far guys. You are geniouses, especially you MYND. I would have never figured out this myself.
     
    tibor28, Aug 23, 2009 IP
  6. MYND

    MYND Active Member

    Messages:
    136
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    60
    #6
    ie6.css is for uh... IE6. Did check the site on the IE7, seems to have the same problem.

    Try this:
    
    #nav-wrap1 {
    background:url(images/nav-left.png) no-repeat left top;
    height:64px;
    padding-left:25px;
    z-index:1000;
    }
    
    #nav-m-wrap{
    height:81px;
    margin:0 auto;
    position:relative;
    top: 136px;
    width:527px;
    }
    
    Code (markup):
    Or, it could the paddings in #pagetitle rule. Remove them (padding: 3em 0 0 1em;), and increase top property value to about 167px.
     
    MYND, Aug 23, 2009 IP
  7. tibor28

    tibor28 Peon

    Messages:
    342
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Removing the pagetitle paddings did the trick. Thanks a lot ;)
     
    tibor28, Aug 23, 2009 IP