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
  • 113 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by drewpark88

Dani AI

Generated

Good troubleshooting so far — the symptom you described (one button sitting where expected, the others stacked beneath it) is exactly what happens when list items remain block-level and layout relies on margin hacks. and pointed you toward inline/floating fixes that will work in older layouts. A more robust, future‑proof approach is to treat the header as a single flex row and make each anchor the visible, clickable button. That removes fragile left-margin positioning and keeps the logo and nav aligned reliably across browsers.

Example markup and CSS (uses flexbox and puts backgrounds on the links so the whole area is clickable):

<header class="site-header">
  <img class="site-logo" src="foliologo.jpg" alt="Folio logo">
  <nav class="main-nav">
    <ul class="nav-list">
      <li class="nav-item"><a class="nav-link" href="#" aria-label="Home">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#" aria-label="Work">Work</a></li>
      <li class="nav-item"><a class="nav-link" href="#" aria-label="Contact">Contact</a></li>
    </ul>
  </nav>
</header>

.site-header { display:flex; align-items:center; justify-content:space-between; }
.nav-list    { display:flex; gap:0; margin:0; padding:0; list-style:none; }
.nav-link    { display:block; width:140px; height:60px; background-repeat:no-repeat; background-size:contain; text-indent:-9999px; }

Practical tips: make the logo an inline block or block-level image (img { display:block }) to avoid baseline gaps. If you must keep image-sliced buttons, assign unique classes (or target nth-child) and set different background-position/background-image on the .nav-link. Use aria-label or a visually-hidden technique instead of removing text completely for accessibility.

If you prefer to stick with floats, apply a clearfix to the header so its height contains floated children (inspect the computed box in devtools). The flex approach shown avoids float/clear issues and is easier to maintain. Thanks to and for the quick fixes that reveal why the items were stacking; converting to flex simply makes the intent explicit and reliable.

Recommended Answers

All 3 Replies

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.