Question CSS naviagation bar code problem

Crescent

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.

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

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?

Crescent

Thanks Ph3nOm thanks goodshape,

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

C.