Sun, 2012-07-08 23:43
Below is my code; the following issues I have and need fixed
1. on the left home is not right up against the left hand side of the menu
2. After the last home I get the darker background, I want the lighter background to carry on till the end (the darker background should form the barrier between menu items
3. the text on each menu item is not centered
can someone please help
.menubar{ background-image:url(top-nav.png); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } ul { list-style-type: none; height: 37px; width: 980px; margin: auto; } ul a { background-image:url(top-nav.png); background-repeat: no-repeat; background-position: right; padding-right: 32px; padding-left: 0px; display: block; line-height: 37px; text-decoration: none; font-size: 13px; color: #FFF; } ul a:hover { background-position:left -72px; } li { float: left; padding-left: 1px; text-indent: 5px; }
<div class="menubar"> <ul> <li ><a href="#" >Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#" class="right">Home</a></li> </ul> </div>
Mon, 2012-07-09 00:46
#1
Hi kiwis, Most likely
Hi kiwis,
- Most likely padding and margin on the UL or li.
- UL is a block level element so it will fill all available horizontal space unless told otherwise. You can either set the with of the ul or float it to reduce it's width.
- remove te text-indent from the LI and use text-align:center;
Mon, 2012-07-09 02:13
#2
I made it worse, I'm trying
I made it worse, I'm trying to get a menu looking just like this (without the search bar)
can someone please help
Mon, 2012-07-09 04:00
#3
kiwis, can you provide a link
kiwis, can you provide a link to what you have, it will make it much easier to help.
Mon, 2012-07-09 04:11
#4
http://rugbyleaguenz.com/css/
Mon, 2012-07-09 04:21
#5
Try ul a{ padding:0
Try
ul a{ padding:0 20px; }
Mon, 2012-07-09 04:25
#6
Thanks, that made the menu
Thanks, that made the menu items centered.
how can i make the read of the menu the lighter colour leaving the dark background between each item with padding?
Mon, 2012-07-09 04:47
#7
They use borders left and
They use borders left and right as the background between each item.
I think that is what you mean.
.menubar a { border-right: 1px black solid; border-left: 1px dimGray solid; }
Mon, 2012-07-09 08:43
#8
okay, all is working now. I
okay, all is working now. I just don't have the first home button on the very left hand side.
Mon, 2012-07-09 09:04
#9
Set the padding left on the
Set the padding left on the UL to 0
Mon, 2012-07-09 20:00
#10
no that didn't change
no that didn't change anything.
Mon, 2012-07-09 20:01
#11
I've updated my link
I've updated my link
Mon, 2012-07-09 20:13
#12
Ok so it must be margin
Ok so it must be margin 
Try
UL{ padding:0; margin:2px; }
then to remove the first border:
li:first-child a{ border-left:none; }
Mon, 2012-07-09 20:26
#13
wow, so awesome! I'm not sure
wow, so awesome!
I'm not sure how you got that but it's worked.
Mon, 2012-07-09 20:32
#14
Although it's removed my
Although it's removed my rounded corners.
Mon, 2012-07-09 20:51
#15
woops, put the padding of 2px
woops, put the padding of 2px on the UL instead of margin.
Mon, 2012-07-09 22:21
#16
no still no rounded corners
no still no rounded corners
Mon, 2012-07-09 22:22
#17
and I should add, it's there
and I should add, it's there in Chrome but not IE.
Mon, 2012-07-09 23:15
#18
And you should add what
And you should add what version of IE 
Border-radius should work in IE9+
Are the corners working at the other end?