- This topic is empty.
-
AuthorPosts
-
July 21, 2010 at 7:15 pm #29692ZeeSquaredMember
I’m working on a simple navigation menu that uses the -moz and -webkit border radius properties. I noticed that once I hover over a menu item the round box appears, but it nudges the other links slightly to the right. It’s also not aligned perfectly to where it looks like a round box appeared over the link / text, but rather it appears to "pop" out, which is not the effect I’m looking for. It’s kind of difficult to explain – please check it out here:
Here’s the code below:
Code:#navigation {
float: right;
margin: 0px;
padding: 98px 100px 0px 30px;
width: 256px;
height: 100px;
}#navigation ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 320px;
}#navigation li {
float: left;
margin: 5px 20px 5px 0px;
padding: 0px;
}#navigation a {
color: #012245;
font: bold 1.5em Tahoma, Sans-Serif;
display: block;
}#navigation a:hover {
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
background: #45accd;
border: 1px solid #45accd;
color: #fff;
margin: 0px;
padding: 2px;
}Some of the navigation code might look strange like the widths & padding. This navigation menu is going to be part of a header and page wrap that has a 1000px width. I just took the navigation code and put it here. Please let me know if you need the code for the whole website.
I know I’m missing something, I just can’t for the life of me figure it out. If someone can explain what’s going on, I’d appreciate it ten-fold.
Thanks in advance!
– z^2
July 21, 2010 at 8:22 pm #80194virtualParticipantAdd a width (floated elements should specify a width) and text-align: center to #navigation li
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.