I'm stuck

[flash01]

Hello DGrinners,

I am a bit confused. I have reached a road block and I am hoping you can get me back on track:scratch

1.
How can I place a chrome line underneath the header & navbar and keep them both on the same level? I would like to position the navbar even with photography in my logo.
2.
How can I remove the grey box around the slide show. It appears that the slideshow is place on top of a grey box. I would like to see only the picture on a black background with a thin chrome border around the pictures.
3.
How do you create a page where I can include services, about us and link the page to my navbar.
4.
Is it possible to play music on the webpage?

My site is http://kdrmemories.smugmug.com/

Thanks
flash01

[jfriend]

I'll start with the first question.

First, make a banner graphic that is the right size. Yours is 650x350. That's way too big for a good layout. You take all the empty space out around the actual graphic and end up with something that is no more than 200 x 100. We can position it easily with CSS so you don't need empty space in the graphic for positioning.

Change your custom header to this (we need the navcontainer first, so it can be floated to the right before anything else is positioned) and we need the whole header surrounded with a div for the bottom border:

<div id="myHeader">
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">About Us</a></li>
<li><a href="/galleries">Portfolio</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">Services</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">Contacts</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">Clients</a></li>
</ul>
</div>
<div id="my_banner"> </div>
</div>


And, then hook up the new graphic into your banner CSS and change the height and width in that CSS to match your new graphic.

Then, add these new CSS rules:

#navcontainer {float:right; margin: 110px 15px 0 0;}
#myHeader {padding-bottom: 10px; border-bottom: 1px solid #777777;}

At this point, we might need to do a little position tweaking, but I can't advise you exactly on that until you put in the new smaller graphic.

[jfriend]

On the other questions:

You can remove the gray background on the slideshow with this CSS:

#bioBox {background:none;}

For a guestbook, see item #29 in the FAQ (http://www.smugmug.com/help/customize-faq).

Here's a wiki page (http://wiki.smugmug.net/display/SmugMug/How+To+Add+Music) about putting music on a Smugmug page.

[DrDavid]

Here's a wiki page (http://wiki.smugmug.net/display/SmugMug/How+To+Add+Music) about putting music on a Smugmug page.
BTW.. Even though you CAN put music on your page.... For the love of god... Please don't! Some of us listen to iTunes as we work.. Your site music is 1) probably not my taste in music, 2) interrupts my music, and 3) makes me really annoyed. Music on websites is a BAD thing.

Just saying.....

[jfriend]

BTW.. Even though you CAN put music on your page.... For the love of god... Please don't! Some of us listen to iTunes as we work.. Your site music is 1) probably not my taste in music, 2) interrupts my music, and 3) makes me really annoyed. Music on websites is a BAD thing.

Just saying..... I think it's OK and appropriate in some circumstances. I suggest it default to off and let the user turn it on if they want it.

[flash01]

I'll start with the first question.

First, make a banner graphic that is the right size. Yours is 650x350. That's way too big for a good layout. You take all the empty space out around the actual graphic and end up with something that is no more than 200 x 100. We can position it easily with CSS so you don't need empty space in the graphic for positioning.

Change your custom header to this (we need the navcontainer first, so it can be floated to the right before anything else is positioned) and we need the whole header surrounded with a div for the bottom border:

<div id="myHeader">
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">About Us</a></li>
<li><a href="/galleries">Portfolio</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">Services</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">Contacts</a></li>
<li><a href="/gallery/XXXXXXX_YYYYY">Clients</a></li>
</ul>
</div>
<div id="my_banner"> </div>
</div>


And, then hook up the new graphic into your banner CSS and change the height and width in that CSS to match your new graphic.

Then, add these new CSS rules:

#navcontainer {float:right; margin: 110px 15px 0 0;}
#myHeader {padding-bottom: 10px; border-bottom: 1px solid #777777;}

At this point, we might need to do a little position tweaking, but I can't advise you exactly on that until you put in the new smaller graphic.




I have made the changes to the banner and applied the new code. Can you explain the following:

1.How to move the banner over an inch to the right and sitting on the grey border.
2.How can I have my navbar running horizontal across the top of the grey border.
3.How can I remove the bullet points from the navbar and the underlines in the navbar.
4.Is it possible to show breadcrumbs in navbar. Meaning when you hover over portfolio with the curser, sub categories will appear; for example: Pets, familes, couples, babies. There would be the different categories under portfolio. I only want the breadcrumbs in to appear under portfolio.



My site is http://kdrmemories.smugmug.com/

Thanks
flash01

[jfriend]

I have made the changes to the banner and applied the new code. Can you explain the following:

1.How to move the banner over an inch to the right and sitting on the grey border.
2.How can I have my navbar running horizontal across the top of the grey border.
3.How can I remove the bullet points from the navbar and the underlines in the navbar.
4.Is it possible to show breadcrumbs in navbar. Meaning when you hover over portfolio with the curser, sub categories will appear; for example: Pets, familes, couples, babies. There would be the different categories under portfolio. I only want the breadcrumbs in to appear under portfolio.



My site is http://kdrmemories.smugmug.com/

Thanks
flash01
Replace all of your CSS with this CSS:

#my_banner {
display: none;
width: 200px;
height: 50px;
margin: 15px 0 0 30px;
background: url(http://kdrmemories.smugmug.com/photos/466066120_7QboC-O.jpg) no-repeat;
}

.homepage #my_banner {display: block;}

#myHeader {border-bottom: 1px solid #777777; position:relative;}
#navcontainer {position:absolute; right:0; bottom:0; margin:0 10px 10px 0;}

#bioBox .photo {display: none;}
#userBio {text-align: center !important;}
#bioBox {background: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;
}

If you want to change the color of your navbar, you can modify the values I've shown in red.

You can play with the two non-zero margin values in the my_banner block if you want to tweak the positioning of your banner.

It is possible to do drop-down menus with categories in them, but that isn't something I'm familiar with. There are threads here that discuss that if you want to do a search.

[flash01]

Replace all of your CSS with this CSS:

#my_banner {
display: none;
width: 200px;
height: 50px;
margin: 15px 0 0 30px;
background: url(http://kdrmemories.smugmug.com/photos/466066120_7QboC-O.jpg) no-repeat;
}

.homepage #my_banner {display: block;}

#myHeader {border-bottom: 1px solid #777777; position:relative;}
#navcontainer {position:absolute; right:0; bottom:0; margin:0 10px 10px 0;}

#bioBox .photo {display: none;}
#userBio {text-align: center !important;}
#bioBox {background: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;
}

If you want to change the color of your navbar, you can modify the values I've shown in red.

You can play with the two non-zero margin values in the my_banner block if you want to tweak the positioning of your banner.

It is possible to do drop-down menus with categories in them, but that isn't something I'm familiar with. There are threads here that discuss that if you want to do a search.


I have copied the css code onto my site however, the navibar is not showing up on the site now. I'm not sure what to do next.

My site is http://kdrmemories.smugmug.com/

Thanks
flash01

[jfriend]

I have copied the css code onto my site however, the navibar is not showing up on the site now. I'm not sure what to do next.

My site is http://kdrmemories.smugmug.com/

Thanks
flash01 Are we talking about the same thing? I see your navbar just fine:

http://content.screencast.com/users/jfriend/folders/Jing/media/268a5697-1e45-4053-a6b2-2462b72e0ca2/2009-02-02_1738.png

[flash01]

Are we talking about the same thing? I see your navbar just fine:

http://content.screencast.com/users/jfriend/folders/Jing/media/268a5697-1e45-4053-a6b2-2462b72e0ca2/2009-02-02_1738.png


I logged out and logged back in. Now I can see the navbar. Thanks you for your help. :bow