Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #17147

    Hi everybody! I have just finished the layout on a new Velvet themed website and I can not for the life of me figure out how to make the menu titles centered so that the space between each menu title is even. Does anybody know how I can make this happen? Any help much appreciated ASAP :)

    #94354

    Hey minxgraphics,

    Can we take a look at your site live? You can try adding the following css to your style.css (all the way at the bottom) but I’m not sure its what you are trying to do for sure:

    #header, #header a {
    text-align: center;
    }

    Regards,

    Devin

    #94355

    Hi Devin! Thank you very much for your help. I had already tried your suggestion, every which way I could think of! I tried it all the way at the bottom of my style.css file as you suggested as well and still no luck :( I can not make the site live for you to look at until my client has approved it unfortunately. Below is the code for the menu – As you can see below I have tried putting the text-align: code in various places of the head and menu sections with no luck:

    /************************************************************************

    -) HEAD

    *************************************************************************/

    #header{ /*head area, which contains main menu and logo*/

    z-index: 100;

    }

    #header .container{

    /*height:90px;*/ /*uncomment this is you want a specific height for the header. otherwise it will adjust to the logo size*/

    overflow: hidden;

    padding: 40px 0;

    z-index: 100;

    }

    #header .fancyborder{

    width:100%;

    height:5px;

    position: absolute;

    top:0;

    left:0;

    }

    #top .logo, .logo a{

    display:block;

    position:relative;

    border: none;

    padding: 0;

    margin:0;

    float:left;

    }

    #top .logo a, #top .logo a:hover{

    top:0;

    left:0;

    outline:none;

    border: none;

    }

    #top .logo img{

    border:none;

    }

    #top .bg-logo, #top .bg-logo a{

    text-indent: -9999px;

    height:100px;

    width:190px;

    }

    /*menu*/

    .main_menu .menu{

    float: right;

    position: relative;

    top:93px;

    }

    .main_menu .menu > li{

    float:left;

    width:120px;

    line-height: 1.6em;

    text-align:center;

    }

    .main_menu .menu > li:first-child{

    text-align:center;

    }

    .main_menu .menu a{

    text-decoration: none;

    text-transform: uppercase;

    display: block;

    text-align: center;

    }

    .main_menu .menu a:hover{

    text-decoration: none;

    }

    .main_menu .menu > li > a{

    font-weight: bold;

    font-size:11px;

    letter-spacing: 1.5px;

    padding-bottom:0px;

    text-align:center;

    }

    .main_menu .menu li li a{

    font-size:11px;

    text-transform: none

    }

    .main_menu .menu li li ul{

    display:none;

    overflow: hidden;

    }

    .main_menu .menu li li{

    display:block;

    width:120px;

    overflow: hidden

    }

    .main_menu .menu li li li{

    width:120px;

    }

    .main_menu .menu li li li li{

    width:120px;

    }

    .main_menu .menu li li li li li{

    width:120px;

    }

    .main_menu .menu li li ul.showblock{

    display:block;

    }

    .main_menu .menu li li:hover > ul{

    display:block;

    }

    Very frustrating indeed! I was hoping to get this sorted out by the end of this coming weekend, will just have to keep chipping away at it and see if I can solve the puzzle :)

    #94356

    Hi minxgraphics,

    Unfortunately just seeing the css doesn’t help. The actual html for the menu/location and what elements are all taking effect on it are unnecessary to try and target it specifically.

    The only other thing I can suggest is adding !important to the above css as it works for me in-browser testing. So:

    #header, #header a {
    text-align: center !important;
    }

    Regards,

    Devin

    #94357

    Thank you Devin. The website will be going live tomorrow so I would love you to have a look tomorrow evening at around 7pm (AEDST) and you will be able to see what I mean. I just want the spaces between each menu item to be even and I thought that centering the text would do that but it obviously does not as each menu title is in a column I think anyway so they will never be able to have even space between them :( The website to look at is:

    http://www.dragonflycustombooks.com.au

    #94358

    Imho you just need to set the width of the menu items to auto and then add a margin to them – eg like:

    .main_menu .menu > li {
    margin-left: 40px;
    width: auto;
    }

    The space will be 40px between the items.

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Help me figure out how to center the menu!’ is closed to new replies.