Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Question CSS naviagation bar code problem

Options
  • 19-03-2007 5:51pm
    #1
    Registered Users Posts: 44


    Hi everyone,

    I am not sure if i am on the right forum, if I'm not my apologies.

    I am trying to write the CSS for a vertical navigation bar.

    The problems lies in the fact that the buttons are not regulated in size. ie. the "home" part is just the width of home, and the "most wanted" is being displayed as "most
    wanted".

    Can you regulate the width of the buttons - links.

    here is the code
    div.vmenu {
    margin: 0;
    padding: 0;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
    padding: .1;
    border: solid 2px #fcdbe4;
    background: #f9c8d8;
    width: 25%;
    }

    div.vmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    padding: .1em;
    }

    div.vmenu ul li {
    margin: 0;
    padding: 0;
    }

    div.vmenu ul a {
    margin: 0;
    padding: 0;
    padding-left: .1em;
    padding-right: .1em;
    padding-top: .1em;
    padding-bottom: .1em;
    text-decoration: none;
    background: #fcdbe4;
    border: solid 2px #c2c2c2;
    font-weight: bold;
    font-size: medium;
    display: block;
    }

    div.vmenu ul a:link, div.vmenu ul a:visited {


    } div.vmenu ul a:hover, div.vmenu ul a:focus {
    background: #c2c2c2;
    color: #ffffff;
    border: solid 2px #eec;
    }

    Thank you for your help and again apologies if i am not in the right space.
    c.


Comments

  • Closed Accounts Posts: 4,655 ✭✭✭Ph3n0m


    what does your html look like?

    As i have tested the code as you posted it with the following html
    <div class="vmenu">
    <ul>
    
    <li><a href="#">test</a></li>
    <li><a href="#">test test test</li>
    <li><a href="#">test</li>
    <li><a href="#">test</li>
    <li><a href="#">test</li>
    </div>
    

    and it works fine


  • Registered Users Posts: 8,488 ✭✭✭Goodshape


    Crescent wrote:
    Can you regulate the width of the buttons - links.
    Sure you can, just put 'width : 200px' in the CSS for either li or a.

    Are you sure the 'width: 25%;' for the vmenu div is wide enough for your link text?


  • Registered Users Posts: 44 Crescent


    Thanks Ph3nOm thanks goodshape,

    Yip it seemed correct just needed the width specified.
    Thank you both so much for your help.

    C.


Advertisement