Member Avatar for drewpark88

*Thoght I fixed it, I was wrong : (

Hey Guys,

Ok so here is my problem. I have created a three button horizontal navigational bar and want it to float to the right of my logo. My fist button the home button is in the spot i want it, although the other two are below the first button. Here is some of the css and html code that i am using:

Here is the css:

#navcontainer
{
margin: 0px 20px 0px 0px;
float: right;
width: 554px;
}

#navcontainer ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: left;
}

#home
{
text-decoration: none;
background: url('myhomebutton.jpg') no-repeat top left;
margin: 0px 0px 0px 0px;
padding-top: 0px;
width: 192px;
height: 198px;
}

#home:hover
{
background: url('overmyhomebutton.jpg') no-repeat top left;
}

#work
{
text-decoration: none;
background: url('workbutton.jpg') no-repeat top left;
margin: 0px 0px 0px 192px;
width: 156px;
height: 198px;
}

#work:hover
{
background: url('overworkbutton.jpg') no-repeat top left;
}

#contact
{
text-decoration: none;
background: url('mycontactbutton.jpg') no-repeat top left;
margin: 0px 0px 0px 156px;
padding-top: 0px;
width: 206px;
height: 198px;
}

#contact:hover
{
background: url('myovercontactbutton.jpg') no-repeat top left;
}

Here is the HTML code:

<div id="header">
  <img src="foliologo.jpg" width="324" height="198" />
  
  <div id="navcontainer">
<ul id="navlist">
<li id="home"><a href="#" id="current"></a></li>
<li id="work"><a href="#"></a></li>
<li id="contact"><a href="#"></a></li>
</ul>
</div>


  </div>
  • 3 Contributors
  • 3 Replies
  • 92 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by drewpark88
Member Avatar for Larry_b

Try putting this in your css.

#navcontainer li 	{
                        display:inline;
		 	}
commented: Thanks for the help : ) +1
Member Avatar for macneato

Try these changes;

#home {
    text-decoration: none;
    background: url('myhomebutton.jpg') no-repeat top left;
    margin: 0px 0px 0px 0px;
    padding-top: 0px;
    width: 192px;
    height: 198px;
	float:left
}

#work {
    text-decoration: none;
    background: url('workbutton.jpg') no-repeat top left;
    margin: 0px 0px 0px 192px;
    width: 156px;
    height: 198px;
	position:relative;
	float:left;
}

#contact {
    text-decoration: none;
    background: url('mycontactbutton.jpg') no-repeat top left;
    margin: 0px 0px 0px 156px;
    padding-top: 0px;
    width: 206px;
    height: 198px;
	position:relative;
}
commented: Great Job! +1
Member Avatar for drewpark88

Thanks everyone, I guess I overlooked some of the stuff you mentioned. I appreciate you helping out! : )

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.