1 reply [Last post]
phatphish
Offline
newbie
South Africa
Last seen: 2 years 20 weeks ago
South Africa
Timezone: GMT+2
Joined: 2011-11-23
Posts: 1
Points: 2

Hi. This is my first time posting here. I hope I make sense and provide all relevant info needed. I'm still learning the finer points of CSS and tend to struggle with positioning. I'm never sure when to use float vs relative vs absolute.

Here's my issue:

I have created image rollovers for the main navigation bar on my site. I want the entire menu to be aligned to the right of the div.
When I use plain text navigation the layout works fine:
http://www.onderoinvestments.com/lab/index.html

When I use the image rollovers, it drops the div down on the page and aligns everything left. If I include float:right in the li properties it switches the menu items as well (so that contact is first and home is last):
http://www.onderoinvestments.com/lab/index-nav.html

My CSS for the div looks like this:

#nav-top {
	width: 100%;
	height: 45px;
	background:url(img/bg-nav-bar.jpg) center top;
	z-index: 700;
	top: 0px;
}
#container-nav {
	width: 1024px;
	height: 45px;
	line-height: 1.8em;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	z-index: 750;
	text-align: right;
	top: 0px;
	img: text
}

For the list looks like this:

li 
{
  float:right;
  list-style: none;
  padding: 0;
  margin: 0;
}
a#home:link,a#home:visited { 
	color: #ffffff; 
	text-decoration: none; 
	background: url(img/btn/btn-home.png) no-repeat 0 0; 
	display: block; 
	padding: 0px; 
	width: 66px; 
	height: 45px }
a#home:hover,a#home:active 
{
	background-position: 0 -45px;
}
a#about:link,a#about:visited { 
	color: #ffffff; 
	text-decoration: none; 
	background: url(img/btn/btn-about.png) no-repeat 0 0; 
	display: block; 
	padding: 0px; 
	width: 102px; 
	height: 45px }
a#about:hover,a#about:active 
{
  background-position: 0 -45px;
}
a#business:link,a#business:visited { 
	color: #ffffff; 
	text-decoration: none; 
	background: url(img/btn/btn-business.png) no-repeat 0 0; 
	display: block; 
	padding: 0px; 
	width: 188px; 
	height: 45px }
a#business:hover,a#business:active 
{
  background-position: 0 -45px;
}
a#csr:link,a#csr:visited  { 
	color: #ffffff; 
	text-decoration: none; 
	background: url(img/btn/btn-csr.png) no-repeat 0 0; 
	display: block; 
	padding: 0px; 
	width: 225px; 
	height: 45px }
a#csr:hover,a#csr:active 
{
  background-position: 0 -45px;
}
a#stakeholders:link,a#stakeholders:visited { 
	color: #ffffff; 
	text-decoration: none; 
	background: url(img/btn/btn-stakeholders.png) no-repeat 0 0; 
	display: block; 
	padding: 0px; 
	width: 156px; 
	height: 45px }
a#stakeholders:hover,a#stakeholders:active
{
  background-position: 0 -45px;
}
a#contact:link,a#contact:visited { 
	color: #ffffff; 
	text-decoration: none; 
	background: url(img/btn/btn-contact.png) no-repeat 0 0; 
	display: block; 
	padding: 0px; 
	width: 99px; 
	height: 45px }
a#contact:hover,a#contact:active
{
  background-position: 0 -45px;
}
}

And my HTML looks like this:

<div id="nav-top">
<div id="container-nav"><ul>
<li><a id="home" href="index.html"></a></li>
<li><a id="about" href="about.html"></a></li>
<li><a id="business"href="business.html"></a></li>
<li><a id="csr"href="csr.html"></a></li>
<li><a id="stakeholders"href="stakeholders.html"></a></li>
<li><a id="contact"href="contact.html"></a></li>
</ul></div>
</div>

Bhuvani
Bhuvani's picture
Offline
Regular
Last seen: 1 year 19 hours ago
Timezone: GMT+5.5
Joined: 2011-05-18
Posts: 16
Points: 16

Hi, In li tag remove

Hi,

In li tag remove float:right; and add display:inline-block;.
And adjust equal ancher tag width.