Check this navbar HTML before I do it, please!

[ReneesEyes]

Hi guys!

I finally got around to doing the navbar, which really was simple. I wish I had done it sooner. But before it goes live, (hopefully in the next day or two), I am going to move some galleries around, do my new blog, and such. I would like someone to make sure it will work before I use it. And the tutorial (thanks!)
http://css.maxdesign.com.au/listamatic/horizontal02.htm says to place this portion in the HTML section. What section of the customization page is that?


<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.reneesumner.smugmug.com" id="current">Home</a></li>
<li><a href="http://reneesumner.smugmug.com/Portraits">Portraits</a></li>
<li><a href="#">Weddings</a></li>
<li><a href="http://reneesumner.smugmug.com/Client%20Area">Client area</a></li>


<li><a href="http://reneesumner.smugmug.com/Specialty%20Items">Boutique Items</a></li>
<li><a href="http://reneesumner.smugmug.com/gallery/740077">About</a></li>
<li><a href="http://reneesumner.smugmug.com/gallery/1515928">Contact Us</a></li>
<li><a href="http://blog.reneesumner.com”>Blog</a></li>
<li><a href="http://www.reneesumner.smugmug.com/links">Links</a></li>
</ul>
</div>
and this portion in the CSS:

ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited
{
color: #000000;
background-color: #8aa0e;
text-decoration: none;
}

#navlist a:hover
{
color: #000000;
background-color: #C0C0C0;
text-decoration: none;
}

I want the boxes to be blue, then silver when you hover, and the text always BLACK.

My goal is to have less galleries on the home page, and move clients' wedding and portrait images from the general "Wedding and Engagement" and Portrait galleries to the "Client Area"...and then put selected images in a portfolio under Weddings. Weddings will then be on my home page, and accessible through the link on the nav bar as well. I am going to link to some HTML only pages for links, wedding resources, availability, policies, session info, etc. I am trying to increase ease of locating information and decrease the number of clicks. Eventually I may like a slideshow on the homepage. But for now I am going to keep my other categories because I like them. Maybe I could make them look a little fancier somehow, though?

Thank you!

Renee

MOD EDIT: I made it so it is easier to read :thumb

[ivar]

Hi guys!

I finally got around to doing the navbar, which really was simple. I wish I had done it sooner. But before it goes live, (hopefully in the next day or two), I am going to move some galleries around, do my new blog, and such. I would like someone to make sure it will work before I use it. And the tutorial (thanks!)
http://css.maxdesign.com.au/listamatic/horizontal02.htm says to place this portion in the HTML section. What section of the customization page is that?


I want the boxes to be blue, then silver when you hover, and the text always BLACK.

My goal is to have less galleries on the home page, and move clients' wedding and portrait images from the general "Wedding and Engagement" and Portrait galleries to the "Client Area"...and then put selected images in a portfolio under Weddings. Weddings will then be on my home page, and accessible through the link on the nav bar as well. I am going to link to some HTML only pages for links, wedding resources, availability, policies, session info, etc. I am trying to increase ease of locating information and decrease the number of clicks. Eventually I may like a slideshow on the homepage. But for now I am going to keep my other categories because I like them. Maybe I could make them look a little fancier somehow, though?

Thank you!

ReneeHi Renee,

The HTML goes in your header box. The CSS, well in your CSS box :D, both can be found on the control panel > customize page. Code seems okay, just put it in there and look what it does. I promise you won't break the internet. :thumb After you put it in there, it's alot easier to check for errors, or changes you want to make.

[ReneesEyes]

Well, I put it in there, and nothing happened. Why is that? Wrong cascading order, or something?

[ReneesEyes]

Anyone know why it doesn't work?

Thanks,

Renee

[ReneesEyes]

BUMP!

I'm sure somebody can tell me what is wrong. I did it like the tutorial said. Please?

[ivar]

BUMP!

I'm sure somebody can tell me what is wrong. I did it like the tutorial said. Please?that is one big bump :D You are actually very close :thumb In fact, the navbar is already there, but it is black, so you don't see it :D



your HTML (in your header box)
<div id="navcontainerlist">
<ul id="navlist">
<li id="active"><a href="http://www.reneesumner.smugmug.com"id="current">Home</a></li>
<li><a href="http://reneesumner.smugmug.com/Portraits">Portraits</a></li>
<li><a href="http://reneesumner.smugmug.com/Weddings">Weddings</a></li>
<li><a href="http://reneesumner.smugmug.com/Client%20Area">Client Area</a></li>

<li><a href="http://reneesumner.smugmug.com/Specialty%20Items">Boutique Items</a></li>
<li><a href="http://reneesumner.smugmug.com/gallery/740077">The Photographer</a></li>
<li><a href="http://reneesumner.smugmug.com/gallery/1515928">Contact Us</a></li>
<li><a href=”http://blog.reneesumner.com”>Blog</a></li>
<li><a href=”http://www.reneesumner.com/links”>Links</a></li>
</ul>
</div>
Your CSS:
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited
{
color: #000000;
background-color: #8aa0e;
text-decoration: none;
color: #fff;
}

#navlist a:hover
{
color: #000000;
background-color: #C0C0C0;
text-decoration: none;
}

Add the green, and remove the red, and you should be there!

[ReneesEyes]

Oh my....

First, thanks...I did what you said and it's there! I fixed the quotation marks that were in italic in the part where my links were typed in and now they work. I am going to fix it so the blog pops up in a separate window. And the menu items were supposed to be in the gray/blue boxes with black text, but it is OK and it works. Thank you for responding. I can't seem to figure this stuff out easily. It was a cut and paste from Listmatic.

BUT!....I opened it in MF and it looks awful! That is why I am afraid to mess around sometimes. It is white, with bright blue and even some purple in there, logged in and logged out. What is that and how do I fix that before a potential client sees it LOL...makes me think I should only do this at like 2am or something.

[ivar]

Oh my....

First, thanks...I did what you said and it's there! I fixed the quotation marks that were in italic in the part where my links were typed in and now they work. I am going to fix it so the blog pops up in a separate window. And the menu items were supposed to be in the gray/blue boxes with black text, but it is OK and it works. Thank you for responding. I can't seem to figure this stuff out easily. It was a cut and paste from Listmatic.

BUT!....I opened it in MF and it looks awful! That is why I am afraid to mess around sometimes. It is white, with bright blue and even some purple in there, logged in and logged out. What is that and how do I fix that before a potential client sees it LOL...makes me think I should only do this at like 2am or something.what's MF? :D

[ReneesEyes]

Sorry, Mozilla Firefox!

[ivar]

Sorry, Mozilla Firefox!Ah, sorry, we usually call that FF around here. Allright, hold on a sec, let me have a look

Okay.

I changed the code around quite a bit. Behind some of the lines, i put a comment. That is where you can set the color as you would like it to see. For the colors you can use hex codes (#000000 = black, #ffffff = white, #808080 = great, etc...)
Replace the CSS code you have, by this.
#navlist ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navlist ul li a {
text-decoration: none;
padding: .1em 1em;
color: #ffffff; /* set the color of the links here */
background-color: #345345; /* set the background color of the links here */
}

#navlist ul li a:hover {
color: #ffffff; /* set the link color on hover here */
background-color: #456456; /* set the background color of the links on hover here */
}

#navlist ul li {
display: inline;
}

[ReneesEyes]

Thanks, Ivar! I changed the green and got it to look good on IE and on my Yahoo browser. I still don't know why the FF (sorry) has a white background instead of black, with the medium blue borders and the purple for clicked links. I can start another thread on that. I appreciate the time you took to help!

Renee