- This topic is empty.
-
AuthorPosts
-
March 5, 2011 at 10:51 pm #31902Ethan27Member
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
Menu
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…
March 5, 2011 at 11:00 pm #56422soapParticipantGive your elements widths and heights.
Try floating instead of using inline.
March 6, 2011 at 2:24 am #56403Ethan27MemberThanks,
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..?
March 6, 2011 at 6:08 am #56404MortenParticipantYou should give height, width and float to
March 6, 2011 at 6:43 am #56407Ethan27Memberah right… excuse me for being amateur, do I just write a new rule for ‘list’ on its own then…?
Thanks
March 6, 2011 at 12:34 pm #56373Ethan27MemberBoth of your methods didn’t work but thanks for trying.
Can anyone give me soemthing that will work….
March 6, 2011 at 5:25 pm #56386jhlMembernav shouldnt be display inline, you can use font-size to increase the text size
March 7, 2011 at 8:47 am #56314Ethan27MemberThanks 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…?
March 7, 2011 at 8:11 pm #56140jhlMembernav ul li {
width: 40px;
height: 20px
}
if that doesn’t work use !important
March 7, 2011 at 8:28 pm #56142richtestaniMemberyou 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.