Nav Bar--please Help!

[jwpmeinen]

Hello friends,

My current site looks like this:
http://jwpmeinen.smugmug.com/

I am trying to create a site that looks like andy's demo site: http://andydemo.smugmug.com/.

My main problem is with the nav bar. (I can figure-out the slideshow.) I have followed Ivan's tutorial and everytime the nav bar gets stuck at the very top of the page; it is also very elongated. I would love for the nav bar to be in the upper right hand corner. (Again, see andy's demo site.) Please help!

Unfortunately, I'm not good at HTML--not good at all!

Thanks!
John

[Allen]

Hello friends,

My current site looks like this:
http://jwpmeinen.smugmug.com/

I am trying to create a site that looks like andy's demo site: http://andydemo.smugmug.com/.

My main problem is with the nav bar. (I can figure-out the slideshow.) I have followed Ivan's tutorial and everytime the nav bar gets stuck at the very top of the page; it is also very elongated. I would love for the nav bar to be in the upper right hand corner. (Again, see andy's demo site.) Please help!

Unfortunately, I'm not good at HTML--not good at all!

Thanks!
John
I don't see any navbar. If you want help put the html back in and we'll see
what we can do for you.

[jwpmeinen]

I don't see any navbar. If you want help put the html back in and we'll see
what we can do for you.

Dear Allen,

Thank you for taking the time to help! Here is the code I typed into the box labeled "custom header":

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="<A href="http://jwpmeinen.smugmug.com/Portfolio/">Portfolio</a></li">http://jwpmeinen.smugmug.com/Portfolio/">Portfolio</a></li>
<li><a href="<A href="http://jwpmeinen.smugmug.com/Photo%20Diary/">Photo">http://jwpmeinen.smugmug.com/Photo%20Diary/">Photo Diary</a></li>
<li><a href="<A href="http://jwpmeinen.smugmug.com/Travel/">Travel</a></li">http://jwpmeinen.smugmug.com/Travel/">Travel</a></li>
<li><a href="<A href="http://jwpmeinen.smugmug.com/United%20States%20&%20Canada/">United">http://jwpmeinen.smugmug.com/United%20States%20&%20Canada/">United States & Canada</a></li>
<li><a href="<A href="http://jwpmeinen.smugmug.com/Outward%20Bound/">Outward">http://jwpmeinen.smugmug.com/Outward%20Bound/">Outward Bound</a></li>
<li><a href="<A href="http://jwpmeinen.smugmug.com/TFC%20Fellows/">TFC">http://jwpmeinen.smugmug.com/TFC%20Fellows/">TFC Fellows</a></li>
<li><a href="<A href="http://jwpmeinen.smugmug.com/Friends%20&%20Family/">Friends">http://jwpmeinen.smugmug.com/Friends%20&%20Family/">Friends & Family</a></li>
<li><a href="<A href="http://jwpmeinen.smugmug.com/People/">People</a></li">http://jwpmeinen.smugmug.com/People/">People</a></li>
<li><a href="<A href="http://jwpmeinen.smugmug.com/Nature/">Nature</a></li">http://jwpmeinen.smugmug.com/Nature/">Nature</a></li>
</ul>
</div>

Two problems:

1) I would like to move the nav-bar to the right so that it matches andy's demo site: http://andydemo.smugmug.com/
2) When I input that code into the "custom header" box, I lose "J.W.P. Meinen Photography" which was previously at the top. Here is what I have inputed into my C.S.S. box:

.smuglogo {
width: 200px !important;
height: 25px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://www.smugmug.com/photos/451983019_LbPJm-S.png') !important;
}
.smuglogo[class] {
background-image: url(http://www.smugmug.com/photos/451983019_LbPJm-S.png) !important;
}
/* turn map this button off */
.map_this {
display: none;
}
/* hides your name (including any 's) */
#userName {
display: none;
}
/* hides the word home */
#userHome {
display: none;
}
#bioBox .photo {
display: none;
}
#categoriesBox .boxTop {
display: none;
}
#feeds {
display:none;
}
#photoKeywords {
display: none;
}
#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: #fff;
background-color: #036;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
}

I will leave my site in a state of disrepair until we fix it. Thanks so much!!!

Kind,
John

[Allen]

Dear Allen,

Thank you for taking the time to help! Here is the code I typed into the box labeled "custom header":
...

I will leave my site in a state of disrepair until we fix it. Thanks so much!!!

Kind,
John
Replace your whole header box with this. I put your nav on two lines, it is
really long and interfered with the banner.


<div id="my_header">

<div id="my_Banner"></div>

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/Portfolio/">Portfolio</a></li>
<li><a href="/Photo%20Diary/">Photo Diary</a></li>
<li><a href="/Travel/">Travel</a></li>
<li><a href="/United%20States%20&amp;%20Canada/">United States &amp; Canada</a></li>
<br />
<li><a href="/Outward%20Bound/">Outward Bound</a></li>
<li><a href="/TFC%20Fellows/">TFC Fellows</a></li>
<li><a href="/Friends%20&amp;%20Family/">Friends &amp; Family</a></li>
<li><a href="/People/">People</a></li>
<li><a href="/Nature/">Nature</a></li>
</ul>
</div> <!-- closes navcontainer -->

</div> <!-- closes my_header -->

Replace you whole CSS with this.

#my_header {
height: 45px;
border-bottom: 1px solid #ccc;
margin: 0 10px 15px; /* top right/left bottom*/
padding: 0 20px;
}

#my_Banner {
width: 200px;
height: 35px;
margin: 0;
background: url(/photos/451983019_LbPJm-S.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/451983019_LbPJm-S.png');
}

#navcontainer {
float: right;
margin: -30px 0 0; /* top right/left bottom */
}

#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: #fff;
background: none;
line-height: 20px;
}

#navcontainer ul li a:hover {
color: #ccc;
background: none;
}


/* turn map this button off */
.map_this {display: none;}

/* hides your name (including any 's) */
#userName {display: none;}

/* hides the word home */
#userHome {display: none;}
#bioBox .photo {display: none;}

#categoriesBox .boxTop {display: none;}

#feeds {display:none;}

#photoKeywords {display: none;}

[jwpmeinen]

[quote=Allen]Replace your whole header box with this. I put your nav on two lines, it is
really long and interfered with the banner...]

Wow, Allen, you are really, really good! You are also a huge help! I suppose I have only two questions left:

1) In the upper-left hand corner, "J.W.P. Meinen Photography" is being cut-off a little bit.

2) How do I remove the "Your bio" in the upper-left hand corner of the slideshow?

That should do it. Truly, how to say thank you enough?! I am in your debt.

Kind,
John

[jwpmeinen]

[quote=jwpmeinen][quote=Allen]Replace your whole header box with this. I put your nav on two lines, it is
really long and interfered with the banner...]

Nevermind question #2. Still, how do I get "J.W.P. Meinen Photography" all onto one line without it being cut-off at the bottom? Thanks again!!!

J

[Allen]

[quote=jwpmeinen][quote=Allen]Replace your whole header box with this. I put your nav on two lines, it is
really long and interfered with the banner...]

Nevermind question #2. Still, how do I get "J.W.P. Meinen Photography" all onto one line without it being cut-off at the bottom? Thanks again!!!

J
Increase the banner width in the CSS to that actual banner size
#my_Banner {
width: 400px;
height: 35px;
margin: 0;
background: url(/photos/451983019_LbPJm-S.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/451983019_LbPJm-S.png');
}

[jwpmeinen]

[quote=jwpmeinen][quote=jwpmeinen]
Increase the banner width in the CSS to that actual banner size
#my_Banner {
width: 400px;
height: 35px;
margin: 0;
background: url(/photos/451983019_LbPJm-S.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/photos/451983019_LbPJm-S.png');
}

Allen, you are a God-send! Thank you!

J