18 replies [Last post]
kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 35 weeks 23 hours ago
Timezone: GMT+12
Joined: 2009-03-07
Posts: 68
Points: 108

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>

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi kiwis, Most likely

Hi kiwis,

  1. Most likely padding and margin on the UL or li.
  2. 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.
  3. remove te text-indent from the LI and use text-align:center;
kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 35 weeks 23 hours ago
Timezone: GMT+12
Joined: 2009-03-07
Posts: 68
Points: 108

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)

http://www.airnelson.co.nz/

can someone please help

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

kiwis, can you provide a link

kiwis, can you provide a link to what you have, it will make it much easier to help.

kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 35 weeks 23 hours ago
Timezone: GMT+12
Joined: 2009-03-07
Posts: 68
Points: 108

http://rugbyleaguenz.com/css/

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Try ul a{ padding:0

Try

ul a{
  padding:0 20px;
}

kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 35 weeks 23 hours ago
Timezone: GMT+12
Joined: 2009-03-07
Posts: 68
Points: 108

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?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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;
}

kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 35 weeks 23 hours ago
Timezone: GMT+12
Joined: 2009-03-07
Posts: 68
Points: 108

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.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Set the padding left on the

Set the padding left on the UL to 0

kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 35 weeks 23 hours ago
Timezone: GMT+12
Joined: 2009-03-07
Posts: 68
Points: 108

no that didn't change

no that didn't change anything.

kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 35 weeks 23 hours ago
Timezone: GMT+12
Joined: 2009-03-07
Posts: 68
Points: 108

I've updated my link

I've updated my link

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Ok so it must be margin

Ok so it must be margin Smile
Try

UL{
  padding:0;
  margin:2px;
}

then to remove the first border:
li:first-child a{
  border-left:none;
}

kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 35 weeks 23 hours ago
Timezone: GMT+12
Joined: 2009-03-07
Posts: 68
Points: 108

wow, so awesome! I'm not sure

wow, so awesome!

I'm not sure how you got that but it's worked.

kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 35 weeks 23 hours ago
Timezone: GMT+12
Joined: 2009-03-07
Posts: 68
Points: 108

Although it's removed my

Although it's removed my rounded corners.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

woops, put the padding of 2px

woops, put the padding of 2px on the UL instead of margin.

kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 35 weeks 23 hours ago
Timezone: GMT+12
Joined: 2009-03-07
Posts: 68
Points: 108

no still no rounded corners

no still no rounded corners

kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 35 weeks 23 hours ago
Timezone: GMT+12
Joined: 2009-03-07
Posts: 68
Points: 108

and I should add, it's there

and I should add, it's there in Chrome but not IE.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

And you should add what

And you should add what version of IE Wink
Border-radius should work in IE9+

Are the corners working at the other end?