Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Justifying or Centering Pagebar

  1. barleymchops
    Member

    Any help with this seemingly minor issue would be much appreciated. My blog (aleheads.wordpress.com) has a nav bar under the header. Currently, the buttons are all floated to the left with a large, blank space after the Contact Us button.

    I would like to have the nav buttons justified so that on any browser, the buttons simply spread themselves out evenly across the bar. If that is not possible, my second preference would be to at least have the nav bar centered on the page with equal margins on each side.

    In the past, I set the padding so that the buttons fit "perfectly" across the page. Unfortunately, on some browsers (particularly Safari), the font would revert to something I didn't specify (say Helvetica) that was wider than my set choice (currently Arial). The wider font would then bump the last button down to another row. Hence why I want the buttons justified or centered...so that different browsers using different fonts won't alter the overall look.

    Here is the CSS which (I believe) controls my nav bar:

    #pagebar {
    width:960px;
    height:30px;
    border-top:1px black solid;
    border-bottom:1px black solid;
    margin:0;
    padding:0;
    }

    #pagebar a {
    font-family:Arial, Sans-Serif;
    color:#333;
    font-size:1.3em;
    border-left:1px #CECECE solid;
    display:block;
    float:left;
    text-align:center;
    text-transform:uppercase;
    height:16px;
    padding:7px 10px;
    }

    #pagebar a:hover {
    background-color:#CECECE;
    text-decoration:none;
    }

    #pagebar li {
    list-style:none;
    }

    The blog I need help with is aleheads.com.

  2. devblog
    Member

    Replace all that with this:

    #pagebar li:first-child a {border: none;}

#pagebar {
width:960px;
height:30px;
border-top:1px black solid;
border-bottom:1px black solid;
margin:0;
padding:0;
clear: both;
overflow: hidden;
}

#pagebar li {
list-style:none;
margin: 0 -4% 0 4%;
overflow: hidden;
padding: 0; float: left; width: auto;
}

#pagebar a {
font-family:Arial, Sans-Serif;
color:#333;
font-size:1.3em;
border-left:1px #CECECE solid;
display: block;
text-align:center;
text-transform:uppercase;
height:16px;
padding:7px 10px;
}

#pagebar a:hover {
background-color:#CECECE;
text-decoration:none;
}

    Also, delete from your CSS this selector and its definition:

    #pagebar li.page_item {
display:inline;
}

    This should (decently) center your navbar.

  3. barleymchops
    Member

    Thank you, Devblog. That's great!

    It does seem to center it, however when I alter the padding, it moves the entire bar to the left or right (it doesn't stay centered). This gets back to my initial issue. If someone uses a browser that defaults to a different font than I have specified, it will shift the navbar to the left or right depending on whether their font is wider or narrower than mine.

    I was hoping to hit on a solution that adjusted the navbar "on the fly" so that anyone looking at it would either see a justified or centered bar.

    I very much appreciate your help either way. Thank you so much for your response.

  4. devblog
    Member

    When I get home, I'll look further into this.

  5. barleymchops
    Member

    I look forward to hearing from you. Thank you very much for taking time out of your day to help me with this fairly trivial (but vexing) issue.

    I hope I'm explaining my concern properly and what the "ideal" solution would be. Essentially, I would love it if all of my Pagebar (Nav Bar) buttons were evenly spaced across the bar no matter what font or font size a visitor is using. I've specified Arial as the default for the Pagebar, but one of my authors uses a new Macbook (which defaults to something other than Arial) and has noticed that the last option (Contact Us) drops off the page if I have it spaced perfectly to the right. If I build in a little buffer area (as I have right now), there's no problem, but I don't like the blank space at the end of the Pagebar.

  6. devblog
    Member

    The thing is that centering floats can be tricking, especially since there is not element enveloping the "ul" tags.

    This markup would be ideal:

    <div>
   <ul>
      <li>Menu Item  1</li>
      <li>Menu Item  2</li>
      <li>Menu Item  3</li>
   </ul>
</div>

    The parent "div" would make things a lot easier, but in your theme, that is not the case...

    I'll see what I can do when I get home.

  7. devblog
    Member

    Okay, I came up with something but it doesn't work in all browsers.

    It works well in these:

    MAC
    * Opera 9.27
    * Firefox 3.6.3
    * Chrome 5.0.375.55

    Windows
    *IE7 (don't have IE8)
    (this should work in Fx, Opera and Chrome too)

    It doesn't work in this browsers:
    Safari 4.0.5
    Konqueror 4.2.2
    IE6

    If after reading the compatibility list you still want to give it a try, then do the following:

    a) Replace the code you posted above with the following:

    #pagebar li:first-child a {border: none;}

#pagebar {
list-style:none;
width: auto;
height:30px;
margin:0;
padding:0;
clear: both;
float: left;
position: relative;
left: 50%;
background: none !important;
}

#pagebar li {
overflow: hidden;
padding-left: 0; float: left; width: auto;
position: relative; right: 50%;
}

#pagebar a {
font-family:Arial, Sans-Serif;
color:#333;
font-size:1.3em;
border-left:1px #CECECE solid;
display: block;
text-align:center;
text-transform:uppercase;
height:16px;
padding:7px 10px;
}

#pagebar a:hover {
background-color:#CECECE;
text-decoration:none;
}

#header, #content, #grad{clear: both;}

    b) Replace the "#page" and "#header" selectors with the following:

    #page {
text-align:left;
background: #fff url(http://s2.wp.com/wp-content/themes/pub/contempt/images/blue_flower/pagebar.jpg) 0 130px repeat-x;
width:960px;
border:0;
margin:0 auto;
padding:0;
overflow: hidden;
}

#header {
height:130px;
width:100%;
background-color:black;
margin:0 auto;
padding:0;
border-bottom: solid 1px #000;
}

    c) Add the following selecotr (below the #header selector above)

    #grad {border-top: solid 1px #000;}

    I have to admit that I'm having a mental block... sorry I cannot give you a better solution at the moment; maybe another volunteer will offer you a better one.

  8. devblog
    Member

    It doesn't work in this browsers:

    should read

    "It doesn't work in THESE browsers:"

  9. barleymchops
    Member

    Regardless of the solution, you have clearly spent more than enough time on my issue and I very much appreciate it. I tried your changes and while it looked great in my PC's browser, we had the same issue with another one of our author's Macs.

    Thanks so much for trying...I may just look into altering the appearance a little bit and not worrying so much about justifying. I don't want to waste anyone else's time on this minor little problem.

  10. devblog
    Member

    Think nothing of it.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags