http://michellegallery.smugmug.com
Okay, I am working on putting a second nav bar on the site listed above. Here is my issue. The second bar is showing up as an top down list and not a side to side nav bar. I am missing a code somewhere but am unsure which one it is and where it supposed to go (java? css?)
Michelle
Try it this way.
Replace your nav html in the header to this.
<div id="navcontainer" class="menu">
<ul>
<li><a href="http://michellegallery.smugmug.com">Home</a></li>
<li><a href="http://michellegallery.smugmug.com/ABOUT%20YOU%20PHOTOGRAPHY">Weddings & Portrait Gallery</a></li>
<li><a href="http://michellegallery.smugmug.com/gallery/2625350">Wedding Packages</a></li>
<li><a href="http://michellegallery.smugmug.com/gallery/2626927">Senior Packages</a></li>
<li><a href="http://michellegallery.smugmug.com/Rudland%20Equine%20Photography">Equine</a></li>
<li><a href="http://michellegallery.smugmug.com/gallery/2630682">Equine Packages</a></li>
<li><a href="http://michellegallery.smugmug.com/Fine%20Art%20By%20Michelle%20Rudland">Art</a></li>
</ul>
</div>
<br />
<div id="navcontainer2" class="menu">
<ul>
<li><a href="http://michellegallery.smugmug.com/gallery/2627155">Flip Top Albums</a></li>
<li><a href="http://michellegallery.smugmug.com/gallery/2627155">Flip Top Albums</a></li>
</ul>
</div>
Change this in your CSS
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #000000;
background-color: #ffffff;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
}
<div id="navcontainer> << does not go in CSS
V duplicates V
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #000000;
background-color: #ffffff;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
}
to this
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.menu ul li {
display: inline;
}
.menu ul li a {
text-decoration: none;
padding: .2em 1em;
color: #000000;
background-color: #ffffff;
}
.menu ul li a:hover {
color: #fff;
background-color: #369;
}