Button text is off-center, won't align center... (3 posts)

  1. Yukon Cornelius
    Posted 6 years ago #


    The text won't seem to centre properly in my navigation bar. It's not aligned left, but just off-center enough to look awful. I've tried applying text-align: center; to the Lis, but it doesn't correct the problem. I'm sure something must be overriding the command.

    Can anyone see what the problem might be?

    My style sheet is pasted below.

    If it helps, the site-in-progress is http://www.aeringuy.com

    If anyone can point me in the right direction, I'd be really grateful!


     font-family:verdana, arial, Helvetica, sans-serif;

    [Mod note - trimmed lots of style code, if you wish to post a lot of code please use a pastebin]

  2. Michael
    Forum Moderator
    Posted 6 years ago #

    no need to post a loo roll full of styles - nobody can read them anyway and make sense of it.

    having a link to a live site nad using firefox with the web developer add-on, for instance, is a better and quicker way to debug css.

    the space in your buttons in #nav (width:50px;) is simply not wide enough to allow the text to center freely;

    increase the width to 70px and adjust the padding accordingly;
    width:70px;padding: 18px 15px 20px 15px;
    (only use this different one for the 'home' button because of the height:
    width:70px;padding: 38px 15px 40px 15px;)

    and most of all - remove the   from your button texts:
    (apart from where it is neccessary to get a line break -
    What     is     Project X?
    Meet     the     Characters
    - )

    that should be all

    adapted styles in total:

    #nav {
    	width: 400px;
             margin-left: 0px;
             margin-right: auto;
             margin-top: -70px;
             line-height: 20px;
    	height: 100px;
             text-align: center;
             font-size: 12px;}
    #nav ul {list-style-type: none;}
    #nav li {display: block; float:left; text-align: center; width: 70px; padding: 38px 15px 40px 15px; border: none; background: url("images/DBD.jpg") no-repeat;} 
    #nav li.page-item-6 {padding: 18px 15px 20px 15px; border: none; background: url("images/PU.jpg") no-repeat;}
    #nav li.page-item-6.current_page_item {background: url("images/PD.jpg") no-repeat;}
    #nav li.current_page_item {background: url("images/DBD.jpg") no-repeat;}
    #nav li.page-item-51 {padding: 18px 15px 20px 15px; border: none; background: url("images/GreenUpCentre.png") no-repeat;}
    #nav li.page-item-51.current_page_item {background: url("images/GD.jpg") no-repeat;}

    edit the following for padding-bottom to show the full X

    #navright li.page-item-13 {padding: 20px 25px 55px 25px; border: none; background: url("images/contact.jpg") no-repeat;}
  3. Yukon Cornelius
    Posted 6 years ago #

    Hi alchymyth,

    Thanks so much for helping me out. Your solution worked a treat.

    The &nbsp thing was just early hour desperation, no need for that garbage now, thanks to you.

    Hope you have the luckiest week ever.


Topic Closed

This topic has been closed to new replies.

About this Topic