Css menu help.

[Ethan27]

Hi

I am having a few problems with my designing of my menu. I must mention that I am building my site bit by bit so on this page there is no other code.

Im trying to make my buttons look bigger but am not having much luck. They only get bigger by adding padding, is there not a way to set a width and a height for each…? I have tried but cant figure it out.

I am also having some trouble getting my buttons into its container. The ‘nav’ just looks like a black line running through the back of it. I have used black to identify it.

Here is the HTML

Why


Home


Contact


Resources

This the css

}

ul, ol, dl {

margin: 0px;

padding: 0px;



}



nav{

display:inline;

width:500px; /* not sure I should have done this*/

background:#000;



}

nav ul {

display:inline;

list-style: none;



}



nav ul li {

display:inline;

list-style-type: none;





}



nav ul a, nav ul a:visited {

padding: 10px 10px 10px 10px;

display: inline;

text-decoration: none;

background: #00F;





}



nav ul a:hover, nav ul a:active, nav ul a:focus {

background:#F00;

color: #00F;

border-radius:10px 10px 10px 10px;

-moz-border-radius: 10px 10px 10px 10px;





}

Any ideas why this is happening guys…

[soap]

Give your elements widths and heights.

Try floating instead of using inline.

[Ethan27]

Thanks,

Can I ask which elements I should give width and height and should I float all of them..?

Also how would this increase button size or put the menu in the nav element properly..?

[Morten]

You should give height, width and float to

[Ethan27]

ah right… excuse me for being amateur, do I just write a new rule for ‘list’ on its own then…?

Thanks

[Ethan27]

Both of your methods didn’t work but thanks for trying.

Can anyone give me soemthing that will work….

[jhl]

nav shouldnt be display inline, you can use font-size to increase the text size

[Ethan27]

Thanks JHL that did help a bit

Thing is although my buttons/link boxes are now bigger, they are all different sizes. Looking at my code above how can I make them all the same size…?

[jhl]

nav ul li {

width: 40px;

height: 20px

}

if that doesn’t work use !important

[richtestani]

you need to display your anchors as block, else the width and height will do nothing. The float your li elements. Your ul will lose it’s height because of the floats inside, so you insert an element to clear them, or apply overflow:hidden to the ul. You could also float the ul too depending on your positioning.

[Author]

Posts