I searched, I really did...navbar question

[sthig]

okay I am going to implement the navbar and I looked over the forums however I was unsuccessful with what I wanted.

Take Jenny's site:
http://jennyc.smugmug.com/


and here is the tutorial on how to do that:
http://css.maxdesign.com.au/listutorial/horizontal09.htm

Basically I want to do that, but have the appearance of one long bar all across (with the links/text centered). I have been trying to get it to work in dreamweaver but my html/css skills are pitiful (but I do know other things!! like how to ask 3,000 questions in a 24 hour span!)

thanks
scott
http://www.scojobo.com

[Andy]

okay I am going to implement the navbar and I looked over the forums however I was unsuccessful with what I wanted.

Take Jenny's site:
http://jennyc.smugmug.com/


and here is the tutorial on how to do that:
http://css.maxdesign.com.au/listutorial/horizontal09.htm

Basically I want to do that, but have the appearance of one long bar all across (with the links/text centered). I have been trying to get it to work in dreamweaver but my html/css skills are pitiful (but I do know other things!! like how to ask 3,000 questions in a 24 hour span!)

thanks
scott
http://www.scojobo.com

Moved, to SmugMug Customization forum.

[sthig]

okay so I answered my own question with this code:

html
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

css
#navcontainer ul
{
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
background-color: #036;
color: white;
width: 100%;
font-family: Arial,Helvetica,sans-serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */
}

#navcontainer ul li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
/* matches link padding except for left and right */
padding-top: 5px;
}

#navcontainer ul li a
{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: white;
text-decoration: none;
border-right: 1px solid #fff;
}

#navcontainer ul li a:hover
{
background-color: #369;
color: white;
}

#navcontainer #active { border-left: 1px solid #fff; }

It works wonderfully in the footer but something's wrong in the header. I know one reason is that it's because of all the customizing I've done but for some reason I'm at a lost as to what to do. How could I get it to the very top just above my logo (or placeholder at the moment)?

thanks!

[Mike Lane]

Just say no to dreamweaver. You don't need it for smugmug. In fact, it will make your smugmug sites more difficult.

You will very likely find that your navbar will have problems because of your header. That's not to say we can't fix those problems easily, but you have to know what you're doing first. My recommendation is that you should really work on getting that header image done first. Then once you do that start work on the navbar. Baby steps. Baby steps.

[sthig]

good deal, thanks!

I'll have my logo done by late next week