Navbar help thread [Sitemap] - Page 19 - Digital Grin Photography Forum

InOverMyHead

Jan-26-2010, 11:00 AM

Did you add the new code I posted previously for Portfolio in your Custom Header Box between your HOME Tab code & your INFORMATION code?

The nopick in that code makes it un-clickable -- so that they click your drop-downs.

quote=InOverMyHead]Would anyone be willing to help me out with a nav bar? I would like my portfolio tab to drop down and show all of my galleries, having the word, "portfolio" be un-clickable and the names of the galleries click right to them. Monica listed some code a few threads back but I can't seem to get it to work. Any help would be greatly appreciated!!![/quote]

Here's a copy of exactly how my Custom Header box is set up with the code you gave me. With that, the home page literally shows all of the code.

<div id="my_banner"> </div>

<div id="navcontainer">
<ul> <li><a href="/">Home</a></li>
<li><a href="<A href="http://jessicaceasonphotography.blogspot.com"/>Blog</a></li">http://jessicaceasonphotography.blogspot.com"/>Blog</a></li>

<li><a class="drop" href="#nopick">Portfolio
</a> 
<ul>
<li><a href="<A href="<A href="http://www.jjceason.com/Photography/Dotsons/10866903_qYXjH#758260205_7ktAT">Dotsons</a></li">http://www.jjceason.com/Photography/Dotsons/10866903_qYXjH#758260205_7ktAT">Dotsons</a></li">http://www.jjceason.com/Photography/Dotsons/10866903_qYXjH#758260205_7ktAT">Dotsons</a></li">http://www.jjceason.com/Photography/Dotsons/10866903_qYXjH#758260205_7ktAT">Dotsons</a></li>
<li><a href="<A href="<A href="http://www.jjceason.com/Other/Swancey-Family/10425540_h7woS#722720506_SJzoY">Swancey_Family</a></li">http://www.jjceason.com/Other/Swancey-Family/10425540_h7woS#722720506_SJzoY">Swancey_Family</a></li">http://www.jjceason.com/Other/Swancey-Family/10425540_h7woS#722720506_SJzoY">Swancey_Family</a></li">http://www.jjceason.com/Other/Swancey-Family/10425540_h7woS#722720506_SJzoY">Swancey_Family</a></li>
<li><a href="<A href="<A href="http://www.jjceason.com/Photography/EKS/10196093_2LWLa#702332567_nQ9W9">EKS</a></li">http://www.jjceason.com/Photography/EKS/10196093_2LWLa#702332567_nQ9W9">EKS</a></li">http://www.jjceason.com/Photography/EKS/10196093_2LWLa#702332567_nQ9W9">EKS</a></li">http://www.jjceason.com/Photography/EKS/10196093_2LWLa#702332567_nQ9W9">EKS</a></li>
<li><a href="<A href="<A href="http://www.jjceason.com/Other/Dawn-and-Corey/10559270_CAmLe#733416996_oiidd">Dawn_and_Corey</a></li">http://www.jjceason.com/Other/Dawn-and-Corey/10559270_CAmLe#733416996_oiidd">Dawn_and_Corey</a></li">http://www.jjceason.com/Other/Dawn-and-Corey/10559270_CAmLe#733416996_oiidd">Dawn_and_Corey</a></li">http://www.jjceason.com/Other/Dawn-and-Corey/10559270_CAmLe#733416996_oiidd">Dawn_and_Corey</a></li>
<li><a href="<A href="<A href="http://www.jjceason.com/Photography/Ashley/9652044_TWUNH#651270080_Zq4qv">Ashley</a></li">http://www.jjceason.com/Photography/Ashley/9652044_TWUNH#651270080_Zq4qv">Ashley</a></li">http://www.jjceason.com/Photography/Ashley/9652044_TWUNH#651270080_Zq4qv">Ashley</a></li">http://www.jjceason.com/Photography/Ashley/9652044_TWUNH#651270080_Zq4qv">Ashley</a></li>
<li><a href="<A href="<A href="http://www.jjceason.com/Photography/LaKendra/9618545_9XkBb/1/648165773_tRrKo">LaKendra</a></li">http://www.jjceason.com/Photography/LaKendra/9618545_9XkBb/1/648165773_tRrKo">LaKendra</a></li">http://www.jjceason.com/Photography/LaKendra/9618545_9XkBb/1/648165773_tRrKo">LaKendra</a></li">http://www.jjceason.com/Photography/LaKendra/9618545_9XkBb/1/648165773_tRrKo">LaKendra</a></li>
<li><a href="<A href="<A href="http://www.jjceason.com/Photography/Boudoir/10867517_9hDEp">Boudoir</a></li">http://www.jjceason.com/Photography/Boudoir/10867517_9hDEp">Boudoir</a></li">http://www.jjceason.com/Photography/Boudoir/10867517_9hDEp">Boudoir</a></li">http://www.jjceason.com/Photography/Boudoir/10867517_9hDEp">Boudoir</a></li>
</ul> 
</li>
<li><a href="/gallery/9782737_Pwowf">Information</a></li>
</ul> </div>

InOverMyHead

Jan-26-2010, 11:01 AM

When I put that in, it just shows all of it on my home page- yikes!

marchex

Jan-26-2010, 11:25 AM

Put your navbar before your banner, then make it float:right, then adjust the top and right margin to position it. For the banner, take out the auto margin so it won't center. If you want to set the width of the overall header, then put the whole header inside a div and set the width of that div and center it.

All this is done automatically for you when you check the right boxes in the easy customizer.

Alright well I tried doing it automatically.... But I'm having some trouble.

I deleted my original navbar and header from my custom customization. I uploaded a banner in the easy customization and made a test navbar for now, that seemed to work fine, for the homepage.

I can't seem to link it to the categories page I use to have, I can only link it directly to one gallary.

I linked it to my contact page and when i go there the header and navbar aren't in place, the strechy feature is set.

So.. how can i link to a page with all my categories, also remove the strechy feature... thanks

Speakoff

Jan-26-2010, 12:41 PM

Hi,

One last question (hopefully)... is there a way to put my navbar (which is currently on the bottom of every page) on the top of just two pages - the "Contact" and "Bio" pages.
The "Contact" and "Bio" pages are longer, so visitors would have to scroll all the way down to find the navbar...

Any help would be appreciated. :)

jfriend

Jan-26-2010, 01:00 PM

Alright well I tried doing it automatically.... But I'm having some trouble.

I deleted my original navbar and header from my custom customization. I uploaded a banner in the easy customization and made a test navbar for now, that seemed to work fine, for the homepage.

I can't seem to link it to the categories page I use to have, I can only link it directly to one gallary.

I linked it to my contact page and when i go there the header and navbar aren't in place, the strechy feature is set.

So.. how can i link to a page with all my categories, also remove the strechy feature... thanks The contact link in your navbar seems to work perfectly fine for me.

I don't know what else you are trying to link in your navbar. You can link to your galleries page with this URL:

http://marchex.smugmug.com/galleries

or to your Photoshoots category with this URL:

http://marchex.smugmug.com/Photoshoots

I just copied these from the URL bar int he browser when viewing those pages. You can do that with any page you want to link to.

marchex

Jan-26-2010, 01:52 PM

hmm I'm lost now... I put marchex.smugmug.com/gallaries and it just ends up back on my homepage.

I did delete all my navbar content also my header content from custom cuzomization so i possibly messed something up?

I'm confused now.

Does the advanced customization work with the easy customizer? Like if i wanted to add some drop down menu's on the navbar?

If there are any threads or tutorais I can follow that would be great, I don't know were to go from now...

thanks for your help.

jfriend

Jan-26-2010, 02:04 PM

hmm I'm lost now... I put marchex.smugmug.com/gallaries and it just ends up back on my homepage.

I did delete all my navbar content also my header content from custom cuzomization so i possibly messed something up?

I'm confused now.

Does the advanced customization work with the easy customizer? Like if i wanted to add some drop down menu's on the navbar?

If there are any threads or tutorais I can follow that would be great, I don't know were to go from now...

thanks for your help. You spelled it wrong. It's:

http://marchex.smugmug.com/galleries

marchex

Jan-26-2010, 04:06 PM

oh... haha , english isn't my first language :rofl
it worked now.

but. . . on my contact page it's strechy, also in any of my categories it strechy, also in a gallary. I would like to have it the same doesn't matter on the page.... or if I could do something like have it alighned on my homepage and on the rest of the page have it smaller...

let me know if that can be done, or if there are any tutorials if any CSS is required.

thanks again

HoofClix

Jan-26-2010, 04:29 PM

I have this new "Contact the Pro" set up to click from my drop-down menu. When I'm logged out I have 4 things:

1. No banner.
2. Message Boxes overlay my photo.
3. Double Cancel.
4 Doesn't activate from the footer.

When I log back in, the banner shows and I can click it from the footer, but the double cancel is still there and the photo still overlaid.

:scratch

jfriend

Jan-26-2010, 04:31 PM

oh... haha , english isn't my first language :rofl
it worked now.

but. . . on my contact page it's strechy, also in any of my categories it strechy, also in a gallary. I would like to have it the same doesn't matter on the page.... or if I could do something like have it alighned on my homepage and on the rest of the page have it smaller...

let me know if that can be done, or if there are any tutorials if any CSS is required.

thanks again

I would suggest you add this CSS code to make your header the same fixed width everywhere (including your contact page) except image galleries:

#customHeaderContainer {width:950px;}
.galleryPage #customHeaderContainer {width: auto;}
.gallery_10950184 #customHeaderContainer {width:950px;}

I think you want your image galleries to be stretchy because they you get to show larger images (which is generally good for viewer impression and sales). So, if the galleries are stretchy, then the header should be stretchy in just that one style.

Runtscal

Jan-26-2010, 04:39 PM

Jessica -----INOVERMYHEAD

I'm going to email you your original code from yesterday. I would suggest changing everything that you altered back. I noticed that you've got
my sm link in your code too -- it View Source and scan through what is there now.

What I sent/posted originally should go in your Custom Header Box.

Don't replace or change anything else in that box ----- just insert the info I sent you beginning with the line

<li><a class="drop" href = "#nopick">Portfolio......................................... ....................

through the ending </li>

This is the addition on non-clickable portfolio and dropdowns that are clickable to the galleries you specifically designated like Boudoir.

After that </li> ---- the code should be just fine as is for your Information Tab.

marchex

Jan-26-2010, 06:21 PM

I would suggest you add this CSS code to make your header the same fixed width everywhere (including your contact page) except image galleries:

#customHeaderContainer {width:950px;}
.galleryPage #customHeaderContainer {width: auto;}
.gallery_10950184 #customHeaderContainer {width:950px;}

I think you want your image galleries to be stretchy because they you get to show larger images (which is generally good for viewer impression and sales). So, if the galleries are stretchy, then the header should be stretchy in just that one style.

Oh, I do want the gallaries page strechy like it is originally, but I would like to have the top header and navbar 950px wide even in the gallaries page... if that is possible?

thanks

jfriend

Jan-26-2010, 06:38 PM

Oh, I do want the gallaries page strechy like it is originally, but I would like to have the top header and navbar 950px wide even in the gallaries page... if that is possible?

thanks OK, I don't think it looks very good that way, but it's your opinion that matters so you can choose. Just use the first of the three CSS lines to have a single fixed width everywhere - no need for the other two.

philtography

Jan-26-2010, 08:09 PM

Can someone please help me get my navabr right. In this gallery http://prints.phillipnorman.com/Weddings the "Pricing" Link should be in line with the other links. Please can you check this on both Firefox and IE7...

Thanks
Phil

jfriend

Jan-26-2010, 08:14 PM

Can someone please help me get my navabr right. In this gallery http://prints.phillipnorman.com/Weddings the "Pricing" Link should be in line with the other links. Please can you check this on both Firefox and IE7...

Thanks
Phil Get rid of the <span> and </span> around your pricing item and change the pricing tag to this:

<li class="navNoShow"><a href="http://www.phillipnorman.com/assets/PNP%20Wedding%20Package.pdf" title="Wedding Package Investment" target="_blank">Pricing</a></li>

Runtscal

Jan-26-2010, 08:39 PM

John -- can you take a look my post #4499 and see what I can do to resolve this minor issue.

Thanks, Monica

jfriend

Jan-26-2010, 08:48 PM

I noticed that my navbar text is bold in FF and also that my last tab Private Galleries -- loses the Galleries and displays Private centered.

Any FF hack that I can enter in my code to fix this?

ThanksI don't see the problem. Please describe in more detail and/or include a screen shot. I'm looking at it in Firefox 3.5.7, IE7 and IE8 and don't see a problem.

Runtscal

Jan-26-2010, 09:55 PM

I don't see the problem. Please describe in more detail and/or include a screen shot. I'm looking at it in Firefox 3.5.7, IE7 and IE8 and don't see a problem.

Sorry John -- It's in Safari

Tried copying and pasting screen shot here -- no luck.

The last box on the left Private Galleries -- only displays Private centered in the middle of the tab on Safari and the fonts in all tabs looks bold.

jfriend

Jan-26-2010, 10:08 PM

Sorry John -- It's in Safari

Tried copying and pasting screen shot here -- no luck.

The last box on the left Private Galleries -- only displays Private centered in the middle of the tab on Safari and the fonts in all tabs looks bold. What page are you on? I see a Private Galleries in your navbar on the "right", not on the left. I don't see any issues on your homepage in Safari.

Can you make sure that your zoom level in Safari is set to normal size, not larger or smaller?

InOverMyHead

Jan-26-2010, 10:42 PM

Jessica -----INOVERMYHEAD

I'm going to email you your original code from yesterday. I would suggest changing everything that you altered back. I noticed that you've got
my sm link in your code too -- it View Source and scan through what is there now.

What I sent/posted originally should go in your Custom Header Box.

Don't replace or change anything else in that box ----- just insert the info I sent you beginning with the line

<li><a class="drop" href = "#nopick">Portfolio......................................... ....................

through the ending </li>

This is the addition on non-clickable portfolio and dropdowns that are clickable to the galleries you specifically designated like Boudoir.

After that </li> ---- the code should be just fine as is for your Information Tab.

I have my Custom Header box with my own original code for now and just go back to that if I make changes that don't work.

What I did this time was took everything from <li><a class="drop" ..... to </li> and just put it below all of the code that I already have. What that did was kept the original nav bar PLUS a bulleted nav bar on the left side of the screen. So, thats an improvement over yesterday

If I'm really not getting it and am totally wrong can you just screen shot how you would put it in there? I just have a feeling I'm putting it in the wrong place completely.

InOverMyHead

Jan-27-2010, 07:40 AM

I have my Custom Header box with my own original code for now and just go back to that if I make changes that don't work.

What I did this time was took everything from <li><a class="drop" ..... to </li> and just put it below all of the code that I already have. What that did was kept the original nav bar PLUS a bulleted nav bar on the left side of the screen. So, thats an improvement over yesterday

If I'm really not getting it and am totally wrong can you just screen shot how you would put it in there? I just have a feeling I'm putting it in the wrong place completely.

SM did upgrades this morning and wow... did my page ever look awful for a while! I hit 'update' after scribbling some code and was given the "system maintenance message of death" and had a home page that looked like an amateur got after it... wait... yeah...

Once I could log back in, I changed everything back to my original code. BUT, I played with some of the code from dseidman's site and inserted my own stuff. When I entered it (in place of the Portfolio line) I ended up with a nav bar that was missing "portfolio" and a bulleted "portfolio" link between my header and slide show. That's progress. Here is what I used:

</div>

<div align="center">
<div class="menu">
<ul>

<li><a class="drop" href="/Navigate/Portfolio/">Portfolio ▾
</a> 
<ul>
<li><a href="/keyword/favorite"><font color="#f1f1f1"><b>Dotsons</b></font></a></li>

<li><a href="/Dotsons">Dotsons</a></li>
<li><a href="/Dawn and Corey">Dawn and Corey</a></li>
<li><a href="/Swancey Family/">Swancey Family</a></li>
<li><a href="/EKS/">EKS</a></li>
<li><a href="/LaKendra/">LaKendra</a></li>
<li><a href="/Boudoir/">Boudoir</a></li>
</ul> 
</li>
</div>
I have no idea why it is black. I hope you can see it.

If I could have help making it right... I'll take everyone out to dinner.

InOverMyHead

Jan-27-2010, 07:42 AM

Sorry about the "times new roman" stuff...

philtography

Jan-27-2010, 08:09 AM

Get rid of the <span> and </span> around your pricing item and change the pricing tag to this:

<li class="navNoShow"><a href="http://www.phillipnorman.com/assets/PNP%20Wedding%20Package.pdf" title="Wedding Package Investment" target="_blank">Pricing</a></li>

Thanks John,

That has the link in the right place but it is showin up on all pages and it's only supposed to show in the Weddings category and galleries i.e. the display show/block isn't working without the <span??
.navNoShow {display: none;}
.category_Weddings .navNoShow {display: block;}

philtography

Jan-27-2010, 09:34 AM

Thanks John,

That has the link in the right place but it is showin up on all pages and it's only supposed to show in the Weddings category and galleries i.e. the display show/block isn't working without the <span??
.navNoShow {display: none;}
.category_Weddings .navNoShow {display: block;}

I think I have fixed it. I added the span back in so the hide would work and changed the {display: block;} to {display: inline;} which seems to be keeping it in the right place. I have checked it on Firefox and IE7.

If someone could have a look for me on IE8, that would be great.
Go from my home page to the weddings gallery and a "Pricing" link should get added to the navbar and stay inline...

Cheers
Phil

jfriend

Jan-27-2010, 10:47 AM

I think I have fixed it. I added the span back in so the hide would work and changed the {display: block;} to {display: inline;} which seems to be keeping it in the right place. I have checked it on Firefox and IE7.

If someone could have a look for me on IE8, that would be great.
Go from my home page to the weddings gallery and a "Pricing" link should get added to the navbar and stay inline...

Cheers
Phil OK, that's another way to do it. The <span> was not needed because you can just hide the <li> tag directly, but if you got it to work, that's fine.

miltronix

Jan-27-2010, 11:52 AM

Can someone help me move my navbar so that it's right aligned with equal spacing between the different menu options? It's a little too close to the middle right now and the menu options have different sized spacing between each other.

www.miltonyangphotography.com (http://www.miltonyangphotography.com/)

Runtscal

Jan-27-2010, 02:06 PM

What page are you on? I see a Private Galleries in your navbar on the "right", not on the left. I don't see any issues on your homepage in Safari.

Can you make sure that your zoom level in Safari is set to normal size, not larger or smaller?

Duh --- Yes John -- on the right! Braindead in Texas.

I checked the zoom level in Safari ---- on Normal is shows only Private centered in the nav tab on the right in bold (drops the word galleries). If I switch it to small the galleries reappears -- but all the text on the page smaller than I prefer to view.
Just weird that only that one box changes.

Here's a link to the screen shot ----

http://monicamanning.smugmug.com/Other/Safari-Navbar/11069496_3Mvhj#774920856_pukJe

jfriend

Jan-27-2010, 03:02 PM

Duh --- Yes John -- on the right! Braindead in Texas.

I checked the zoom level in Safari ---- on Normal is shows only Private centered in the nav tab on the right in bold (drops the word galleries). If I switch it to small the galleries reappears -- but all the text on the page smaller than I prefer to view.
Just weird that only that one box changes.

Here's a link to the screen shot ----

http://monicamanning.smugmug.com/Other/Safari-Navbar/11069496_3Mvhj#774920856_pukJe Please try not to use black text. I have trouble reading it on my normal black background for dgrin.

There appear to be some zoom settings or system font settings where you don't have enough space for the text in your navbar. When that happens, it wraps to two lines, but because the height is controlled, you can't see the second line of text. Probably the best thing to do is to give your navbar items more room.

You can make each navbar item wider by increasing the value in red in this part of your CSS:

.menu ul li a,
.menu ul li a:visited {
display: block;
font-size: 10pt; /* main buttons */
color: #ffffff ; /* main buttons text non-hover*/
text-decoration:none;
text-align: center; /* centers text in buttons */
width: 110px; /* main box width */
height: 20px; /* main box height */
border: 2px solid #ccde8a; /* start your design with borders on, easier to position DD's & FO's */
border-width: 2px 2px 2px 2px;
background: #724317; /* main button color */
padding: 0px 18px; /* top/bottom R/L */
line-height: 20px; /* positions text up/down in box */
}

You will then have to make the overall width of the navbar larger too so that all five items fit on one line.

InOverMyHead

Jan-28-2010, 12:00 AM

SM did upgrades this morning and wow... did my page ever look awful for a while! I hit 'update' after scribbling some code and was given the "system maintenance message of death" and had a home page that looked like an amateur got after it... wait... yeah...

Once I could log back in, I changed everything back to my original code. BUT, I played with some of the code from dseidman's site and inserted my own stuff. When I entered it (in place of the Portfolio line) I ended up with a nav bar that was missing "portfolio" and a bulleted "portfolio" link between my header and slide show. That's progress. Here is what I used:

</div>

<div align="center">
<div class="menu">
<ul>

<li><a class="drop" href="/Navigate/Portfolio/">Portfolio ▾
</a> 
<ul>
<li><a href="/keyword/favorite"><font color="#f1f1f1"><b>Dotsons</b></font></a></li>

<li><a href="/Dotsons">Dotsons</a></li>
<li><a href="/Dawn and Corey">Dawn and Corey</a></li>
<li><a href="/Swancey Family/">Swancey Family</a></li>
<li><a href="/EKS/">EKS</a></li>
<li><a href="/LaKendra/">LaKendra</a></li>
<li><a href="/Boudoir/">Boudoir</a></li>
</ul> 
</li>
</div>
I have no idea why it is black. I hope you can see it.

If I could have help making it right... I'll take everyone out to dinner.

Bumping my question.

HoofClix

Jan-28-2010, 08:12 AM

Not sure if this belongs in this "navbar" thread or if in the drop-down "menu" thread, but here goes...

Through all of y'all's advice I've been able to really spiffy up my site by adding a drop-down menu up at the top. What I am having trouble doing it to add a Smugsearch box that stays in line with the menu and doesn't also extend out past the banner. I want it to look like it belongs there. At this point it's out there to the right of the end of the menu, but it's dropped and offset. I currently used the html and css from this post:
http://www.dgrin.com/showthread.php?t=154609&highlight=search+button

I have two of them in there as an example right now, one set outside the <div> for the menu, and one set inside. Neither is exactly what I want it to look like.

Is there a way to either make it line up flush with the drop-down menu, or preferably to make it an element of the drop-down menu that will stay within the box dimensions of the menu and in line with it out to the right?

(Since posting the above I have tinkered and found a workaround that's nice for now when viewing in IE, but not quite right in FF. If anyone comes up with a solution that closes the gap, please let me know.

InOverMyHead

Jan-28-2010, 11:24 AM

I too would love some advice on how to create a drop down nav bar. Please?

HoofClix

Jan-28-2010, 11:55 AM

I too would love some advice on how to create a drop down nav bar. Please?
Go to this thread:
http://www.dgrin.com/showthread.php?t=42747
On page 13, posts 127 and 128, there is the css and the html you need for a drop-menu, same as is on my page, but I'm still tweaking it and getting help.

In your customizer, send an e-mail to yourself so yo have a copy of what it is right now, and then you need to get to work making the changes to the css and html that you copy so that it all goes to your own site, not to the on in the copies..

InOverMyHead

Jan-28-2010, 12:17 PM

Go to this thread:
http://www.dgrin.com/showthread.php?t=42747
On page 13, posts 127 and 128, there is the css and the html you need for a drop-menu, same as is on my page, but I'm still tweaking it and getting help.

In your customizer, send an e-mail to yourself so yo have a copy of what it is right now, and then you need to get to work making the changes to the css and html that you copy so that it all goes to your own site, not to the on in the copies..

So you suggest making changes to the email copy or in the customizer itself? I usually just copy and paste my current code into a word document and repaste it when I totally screw up. So kindergarten.

HoofClix

Jan-28-2010, 12:36 PM

:rofl Kindergarten ist wo alles gelernt wird!!

I guess you could start some standard process whenever you go about changing your script. I personally keep a notepad file, not a word file, of all of the customized script that I have on my site. Before I start changing any of the script in the advanced customizer, I always make sure that the copy is fresh. One way to do that it so send yourself an e-mail. Most real scripters in here will tell you to use notepad, not Word..

I also just think that it keeps it on a big screen so you can see all of it. Just the way I do it..

I suggest you do the work to create that menu per "posts 127/128," and then come back here when you can't figure out how to get it exact.. Here is the web-hex that I use:
http://html-color-codes.com/

See you in a day or two!!:rofl :rofl

InOverMyHead

Jan-28-2010, 01:19 PM

:rofl Kindergarten ist wo alles gelernt wird!!

I guess you could start some standard process whenever you go about changing your script. I personally keep a notepad file, not a word file, of all of the customized script that I have on my site. Before I start changing any of the script in the advanced customizer, I always make sure that the copy is fresh. One way to do that it so send yourself an e-mail. Most real scripters in here will tell you to use notepad, not Word..

I also just think that it keeps it on a big screen so you can see all of it. Just the way I do it..

I suggest you do the work to create that menu per "posts 127/128," and then come back here when you can't figure out how to get it exact.. Here is the web-hex that I use:
http://html-color-codes.com/

See you in a day or two!!:rofl :rofl

More like, see you in an hour or two.

Ok, this is the best I could come up with. I only did two of my galleries just to test it. I seriously have no idea what to do beyond this.

davidmunden

Jan-28-2010, 02:16 PM

I am very new to this and apologize if this seems like an elementary question...

I have made a navbar using the easy customizer. I added a link to the ezprints catalog and I am wondering if there is a way to make only that link open in a new window?

Any and all other suggestion for the site are also welcome as this is a brand new site and my first time trying to do any of this :D

www.munden-photography.com (http://www.munden-photography.com)

HoofClix

Jan-28-2010, 06:02 PM

Since posting the above in #4530 I have tinkered and found a workaround that's nice for now when viewing in IE, but not quite right in FF. If anyone comes up with a solution that closes the gap, please let me know.

Speakoff

Jan-29-2010, 04:52 AM

Dude! I visited my site this morning and saw this at the bottom of my "Contact" page! What is it and how do I get rid of it?!

http://www.elizabethdavisphoto.com/Menu/contact/10669255_a7g5C

ToxMox

Jan-29-2010, 04:58 AM

Dude! I visited my site this morning and saw this at the bottom of my "Contact" page! What is it and how do I get rid of it?!

http://www.elizabethdavisphoto.com/Menu/contact/10669255_a7g5C
Try adding this to your CSS:
.gallery_10669255 #photos { display: none;}

Speakoff

Jan-29-2010, 05:04 AM

Try adding this to your CSS:
.gallery_10669255 #photos { display: none;}

THANK YOU, TOXMOX!
:whew

deepakvg

Jan-29-2010, 09:01 AM

I am not sure if this belongs here, but I thought I'd start here as the banner was customized along with navbar. If this does not belong here, please let me know and I will move it.

Everything was fine until last night, but since this morning, the logo on my banner is displaying very small. The size of the original gif is 348x70, but it is displayed very small in the banner.

Please let me know how to fix this.

Thanks in advance for the help!

Regards,

deepakvg

Jan-29-2010, 09:05 AM

I am not sure if this belongs here, but I thought I'd start here as the banner was customized along with navbar. If this does not belong here, please let me know and I will move it.

Everything was fine until last night, but since this morning, the logo on my banner is displaying very small. The size of the original gif is 348x70, but it is displayed very small in the banner.

Please let me know how to fix this.

Thanks in advance for the help!

Regards,

Never mind, fixed it!

Daddy0

Jan-30-2010, 07:59 PM

I know just enough about CSS and HTML to royally mess things up. I have been thru the various threads and copied/pasted into notepad the css and html codes. Then I have tried to modify with my info and I have done nothing but create a huge mess. I'm trying to learn, but I guess I'm not learning fast enough. Especially since I am having to do this at midnight after my wife and kids have finally passed out. I have a simple nav bar, but my SM site is definitely a work in progress right now. Any help will be greatly appreciated.

MParnell

Feb-01-2010, 06:28 PM

I too am having problems with the CSS and html coding in sm. I've worked and worked, and got my nav bar as far as I can go, and I REALLY need some minor code help. I just can't figure out what's wrong. Please see my site at parnellstudios.smugmug.com. Three things that don't make sense:
> 1) The second level nav links under "Purchase Art" and "About Us" are built EXACTLY as the "Galleries" link, BUT these second level links are appearing as first level links and are visible.
> 2) Although the code specifically is clearing out bullets in the list, you see that 4 of my nav titles have bullets - ???
> 3) The second level links under "Home" are wider than the 125 pixels they are set at. What's with that?
> ANY help with coding at this point will be extremely appreciated!
> Thanks!
MParnell

nwdogshots

Feb-04-2010, 07:42 PM

Hello,

I cannot seem to make my navbar extend all the way across my banner. The widths are set the same, but something in the CSS is wrong. I want it to look like my blog site. Any help would be apprecitated

Blog site: http://www.nwdogshots.com/blog

Thanks,
Bruce

jfriend

Feb-04-2010, 07:57 PM

Hello,

I cannot seem to make my navbar extend all the way across my banner. The widths are set the same, but something in the CSS is wrong. I want it to look like my blog site. Any help would be apprecitated

Blog site: http://www.nwdogshots.com/blog

Thanks,
Bruce First, take this HTML out of your HEAD section and put it in the Custom Header section of your site-wide-customization. Once it's in the right place, then add the line of CSS in red:

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
width: 960px;
height: 31px;
background-color: #000;
margin: 0 auto;
}

and then we can see if you need to do anything further.

J Allen

Feb-04-2010, 08:40 PM

I know just enough about CSS and HTML to royally mess things up. I have been thru the various threads and copied/pasted into notepad the css and html codes. Then I have tried to modify with my info and I have done nothing but create a huge mess. I'm trying to learn, but I guess I'm not learning fast enough. Especially since I am having to do this at midnight after my wife and kids have finally passed out. I have a simple nav bar, but my SM site is definitely a work in progress right now. Any help will be greatly appreciated.

I think your banner is way to big :huh

But if you're looking for a drop-down nav-bar, give this one a try.......

Add this to your custom header box:

<ul class="menu5">
<li class="home"><a href="/">Home</a></li>
<li class="products"><a class="drop" href="#nogo">Galleries</a>

<ul>
<li class="subprod"><a href="/Other">Open Galleries</a></li>
<li class="subprod2"><a href="/Family">Secure Galleries</a></li>
<li class="subprod2"><a href="#nogo">Testing</a></li>
<li class="subprod"><a href="#nogo">Testing</a></li>

</ul>

</li>
<li class="services"><a class="drop" href="#nogo">Services</a>

<ul>
<li class="subserv4"><a href="#nogo">Testing</a></li>
<li class="subserv3"><a href="#nogo">Testing</a></li>
<li class="subserv"><a href="#nogo">Testing</a></li>
<li class="subserv5"><a href="#nogo">Testing</a></li>
<li class="subserv2"><a href="#nogo">Testing</a></li>
</ul>

</li>
<li class="contact"><a href="#nogo">Contact us</a></li>
<li class="site"><a href="#nogo">Site Map</a></li>
<li class="news"><a class="drop" href="#nogo">News</a>

<ul>
<li class="subnews3"><a href="#nogo">Testing</a></li>
<li class="subnews"><a href="#nogo">Testing</a></li>
<li class="subnews"><a href="#nogo">Testing</a></li>

</ul>

</li>
</ul>

Then add this to your CSS box:

.menu5
{text-align:center; font-family: verdana, sans-serif;margin:0 auto;width:600px;
position:relative; font-size:0.9em;height:2.5em; margin:0 padding:0; list-style-type:none;}

.menu5 ul
{padding:0; margin:0; list-style-type:none;}

.menu5 li
{float:left; position:relative;}

.menu5 li a, .menu5 li a:visited
{display:block; text-decoration:none; width:6em;
color:#000; float:left; padding-right:1em; height:3em; line-height:3em; color:#8E8F00;}

* html .menu5 li a, .menu5 li a:visited
{width:7em; w\idth:6em; }

.menu5 li a.drop, .menu5 li a.drop:visited
{font-weight:normal;}

.menu5 li ul
{visibility:hidden; position:absolute; top:2.5em; left:0; height:0; overflow:hidden;}

.menu5 table
{margin:-1px; border-collapse:collapse; font-size:1em; }

/* fist line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menu5 li:hover a,
.menu5 li a:hover
{text-decoration:underline; border:0;}
.menu5 li:hover ul,
.menu5 li a:hover ul
{visibility:visible; height:auto; width:10em; background:#fff;
border:1px solid #ddd; left:0; top:2.5em; overflow:visible;}

.menu5 li:hover ul li a,
.menu5 li a:hover ul li a
{display:block; font-weight:normal; background:transparent;
text-decoration:none; height:auto; line-height:1.5em; padding:0.5em; width:9em;}

* html .menu5 li a:hover ul li a
{width:10em; w\idth:9em; }

.menu5 li:hover ul li a.drop,
.menu5 li a:hover ul li a.drop
{font-weight:bold;}

.menu5 li:hover ul li ul,
.menu5 li a:hover ul li a ul
{visibility:hidden; position:absolute; top:0; left:9.5em; height:0; overflow:hidden;}

.menu5 li:hover ul li a:hover,
.menu5 li a:hover ul li a:hover
{text-decoration:underline;}

.menu5 li:hover ul li:hover ul,
.menu5 li a:hover ul li a:hover ul
{visibility:visible; color:#000; border:1px solid #777;
height:auto; background:#fff; width:9.5em;}

.menu5 li:hover ul li:hover ul.left,
.menu5 li a:hover ul li a:hover ul.left
{left:-9.3em;}

.menu5 li:hover ul li:hover ul li a,
.menu5 li a:hover ul li a:hover ul li a
{display:block; height:auto;}

.menu5 li:hover ul li:hover ul li:hover a,
.menu5 li a:hover ul li a:hover ul li a:hover
{text-decoration:underline;}

nwdogshots

Feb-04-2010, 09:08 PM

That did the trick! Thanks!

First, take this HTML out of your HEAD section and put it in the Custom Header section of your site-wide-customization. Once it's in the right place, then add the line of CSS in red:

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
width: 960px;
height: 31px;
background-color: #000;
margin: 0 auto;
}
and then we can see if you need to do anything further.

klphoto

Feb-05-2010, 07:20 AM

I posted this in the easy dropdown nav thread...but I am not sure which one the smugmug folks keep up with.

Instead of using a pure CSS dropdown, I thought I would try to use Yahoo's YUI dropdown nav plugin (javascript)

The menu is working..minus a few oddities here and there. However, whenever I navigate to another page, the menu is shown as a simple list before the YUI has time to transform it into the dropdown menu.

I am assuming this can't be fixed which is why we have to use a pure CSS menu in the first place? My guess is that it this happens because the YUI code is in the customer header instead of top javascript section. Its in the custom header because the menu needs:
******** src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></********

and the only place to put it would be the custom header(not top javascript). Since it has to go in the custom header the YUI javascript code must also go in the custom header instead of the top javascript section.

Any thoughts?

EDIT--I will just end my experiment and go with a pure CSS dropdown...Thanks.

WhateverWorks

Feb-05-2010, 09:00 AM

I have read and re-read all the help on these forums. In fact I actually did a custom Nav bar this morning!

I need my banner and Nav bar to show on all pages. I seem to be missing something!

Also, on my guestbook page, I need the picture to be on the left hand side and the caption off to the right of the picture.

Thanks for all your help. This is a great forum.

www.texasdanceanddrill.smugmug.com (http://www.texasdanceanddrill.smugmug.com)
images/statusiconDefault/user_online.gif

Daddy0

Feb-05-2010, 07:37 PM

I think your banner is way to big :huh

But if you're looking for a drop-down nav-bar, give this one a try.......

Add this to your custom header box:

<ul class="menu5">
<li class="home"><a href="/">Home</a></li>
<li class="products"><a class="drop" href="#nogo">Galleries</a>

<ul>
<li class="subprod"><a href="/Other">Open Galleries</a></li>
<li class="subprod2"><a href="/Family">Secure Galleries</a></li>
<li class="subprod2"><a href="#nogo">Testing</a></li>
<li class="subprod"><a href="#nogo">Testing</a></li>

</ul>

</li>
<li class="services"><a class="drop" href="#nogo">Services</a>

<ul>
<li class="subserv4"><a href="#nogo">Testing</a></li>
<li class="subserv3"><a href="#nogo">Testing</a></li>
<li class="subserv"><a href="#nogo">Testing</a></li>
<li class="subserv5"><a href="#nogo">Testing</a></li>
<li class="subserv2"><a href="#nogo">Testing</a></li>
</ul>

</li>
<li class="contact"><a href="#nogo">Contact us</a></li>
<li class="site"><a href="#nogo">Site Map</a></li>
<li class="news"><a class="drop" href="#nogo">News</a>

<ul>
<li class="subnews3"><a href="#nogo">Testing</a></li>
<li class="subnews"><a href="#nogo">Testing</a></li>
<li class="subnews"><a href="#nogo">Testing</a></li>

</ul>

</li>
</ul>

Then add this to your CSS box:

.menu5
{text-align:center; font-family: verdana, sans-serif;margin:0 auto;width:600px;
position:relative; font-size:0.9em;height:2.5em; margin:0 padding:0; list-style-type:none;}

.menu5 ul
{padding:0; margin:0; list-style-type:none;}

.menu5 li
{float:left; position:relative;}

.menu5 li a, .menu5 li a:visited
{display:block; text-decoration:none; width:6em;
color:#000; float:left; padding-right:1em; height:3em; line-height:3em; color:#8E8F00;}

* html .menu5 li a, .menu5 li a:visited
{width:7em; w\idth:6em; }

.menu5 li a.drop, .menu5 li a.drop:visited
{font-weight:normal;}

.menu5 li ul
{visibility:hidden; position:absolute; top:2.5em; left:0; height:0; overflow:hidden;}

.menu5 table
{margin:-1px; border-collapse:collapse; font-size:1em; }

/* fist line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menu5 li:hover a,
.menu5 li a:hover
{text-decoration:underline; border:0;}
.menu5 li:hover ul,
.menu5 li a:hover ul
{visibility:visible; height:auto; width:10em; background:#fff;
border:1px solid #ddd; left:0; top:2.5em; overflow:visible;}

.menu5 li:hover ul li a,
.menu5 li a:hover ul li a
{display:block; font-weight:normal; background:transparent;
text-decoration:none; height:auto; line-height:1.5em; padding:0.5em; width:9em;}

* html .menu5 li a:hover ul li a
{width:10em; w\idth:9em; }

.menu5 li:hover ul li a.drop,
.menu5 li a:hover ul li a.drop
{font-weight:bold;}

.menu5 li:hover ul li ul,
.menu5 li a:hover ul li a ul
{visibility:hidden; position:absolute; top:0; left:9.5em; height:0; overflow:hidden;}

.menu5 li:hover ul li a:hover,
.menu5 li a:hover ul li a:hover
{text-decoration:underline;}

.menu5 li:hover ul li:hover ul,
.menu5 li a:hover ul li a:hover ul
{visibility:visible; color:#000; border:1px solid #777;
height:auto; background:#fff; width:9.5em;}

.menu5 li:hover ul li:hover ul.left,
.menu5 li a:hover ul li a:hover ul.left
{left:-9.3em;}

.menu5 li:hover ul li:hover ul li a,
.menu5 li a:hover ul li a:hover ul li a
{display:block; height:auto;}

.menu5 li:hover ul li:hover ul li:hover a,
.menu5 li a:hover ul li a:hover ul li a:hover
{text-decoration:underline;}

JAllen,

Thanks for replying.

1. I know the banner is too big, but I needed something just to get started. I am trying to work on something new now. Do you have any suggestions on a program to make a logo/banner. I do not have PS4 and can't afford it right now.

2. Before I add the new code above, what codes do I need to remove?

3. If possible, I would like to have an intro page with my banner(new one of course) and a slideshow. Nothing else showing. To enter the site, you would click the banner and it would take you to the homepage. Can this be accomplished?

4. I tried tonight to follow the tutorial on making a separate galleries page from the homepage, but I'm not sure it is working right.

I apologize for heaping all this on you, but I only get to work on this after the wife and kids have gone to bed, which means getting about 30 good minutes in before I pass out.

Any and all help will be greatly appreciated. My site address is http://foym.smugmug.com/:D :D :D

J Allen

Feb-05-2010, 09:15 PM

1. I know the banner is too big, but I needed something just to get started. I am trying to work on something new now. Do you have any suggestions on a program to make a logo/banner. I do not have PS4 and can't afford it right now.

Try this free program: The Gimp (http://www.gimp.org/)

You should be able to make something with that..if not I'd be willing to make you a simple banner.

2. Before I add the new code above, what codes do I need to remove?

Remove everything from your custom header box, and replace it with the first set of codes......

Then just add the second set of codes to your CSS box.

3. If possible, I would like to have an intro page with my banner(new one of course) and a slideshow. Nothing else showing. To enter the site, you would click the banner and it would take you to the homepage. Can this be accomplished?

Start a new thread for this, and I'll see if me or someone can get you headed in the right direction for this.

4. I tried tonight to follow the tutorial on making a separate galleries page from the homepage, but I'm not sure it is working right.

Looks good to me :thumb

I apologize for heaping all this on you, but I only get to work on this after the wife and kids have gone to bed, which means getting about 30 good minutes in before I pass out.

I know the feeling..

Daddy0

Feb-06-2010, 09:48 AM

Try this free program: The Gimp (http://www.gimp.org/)

You should be able to make something with that..if not I'd be willing to make you a simple banner.

Remove everything from your custom header box, and replace it with the first set of codes......

Then just add the second set of codes to your CSS box.

Start a new thread for this, and I'll see if me or someone can get you headed in the right direction for this.

Looks good to me :thumb

I know the feeling..

JAllen,

Thanks a lot for the help. What you did in obviously a few minutes would have took me a week(if it would have worked), if not longer.

1. Got gimp downloaded. Thanks.

2. Made changes. Now I need to get both slideshows off homepage and remove navbar hanging under the big banner.

3. I'll start new thread as soon as possible. 2 yr old just woke up.

4. Ultimately, I would like layout as follows(at least for now):

a. intro page with logo and slideshow
b. home page
c. gallery section
d. bio
e. services

Thanks for all your help.

mrwilson31

Feb-07-2010, 08:44 AM

It has been a while since I have worked on my site and I am looking to do some updates.

Where in the CSS nav bar section do I change the font style? Do I need to add this. I am sure this is simple just not sure what to do.

I am looking to get away from the arial fonts an ddo something a little more bold.

ANy help would be appreciated.
thanks,
Mike

TPshooter

Feb-07-2010, 02:30 PM

Any one can help me with this. I new to smugmug and would really know hoe to do this. My site is under construction http://jmj.smugmug.com
Thank a bunch:clap

J Allen

Feb-09-2010, 07:36 AM

Any one can help me with this. I new to smugmug and would really know hoe to do this. My site is under construction http://jmj.smugmug.com
Thank a bunch:clap

Have a look HERE (http://www.allen-steve.smugmug.com/gallery/2011077) for a tutorial.

Allen

Feb-09-2010, 02:46 PM

It has been a while since I have worked on my site and I am looking to do some updates.

Where in the CSS nav bar section do I change the font style? Do I need to add this. I am sure this is simple just not sure what to do.

I am looking to get away from the arial fonts an ddo something a little more bold.

ANy help would be appreciated.
thanks,
Mike
Add it to this rule.

#navcontainer ul li a {
text-decoration: none;
padding: .3em 5em;
color: #fff;
background-color: #none;
font-family: Comic Sans MS, verdana, tahoma, helvetica, arial, sans-serif;
font-weight: bold;
}

nancy622

Feb-11-2010, 09:20 AM

I need help with the navbar...Look at my site I want the letter in white and the bar in red and I need it placed under and centered thank janis Hi Can you please show me how to make a dropdown navbar. I would like to change my page. check out my page and if you could give me some advise on how to rearrange my page i will appreciate it.

Thank You..

www.nancyproductions.org (http://www.nancyproductions.org)

Allen

Feb-12-2010, 03:20 PM

Hi Can you please show me how to make a dropdown navbar. I would like to change my page. check out my page and if you could give me some advise on how to rearrange my page i will appreciate it.

Thank You..

www.nancyproductions.org (http://www.nancyproductions.org)
This will get your started. See this page (http://allen-steve.smugmug.com/gallery/2327835) as reference for how it's structured
and this page (http://www.dgrin.com/showpost.php?p=1302836&postcount=4386) to troubleshoot.

Replace your navcontainer div in your header with this.

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/9747745_aUbsD">About Me</a></li>
<li><a class="drop" href="/galleries">Galleries
</a>

<ul>
<li><a href="/gallery/9747770_75SSk">Portfolio</a></li>
<li><a href="/gallery/9747813_oK4YU">Video</a></li>
</ul> 
</li>
<li><a href="/gallery/9747816_BakgV">News</a></li>
<li><a href="/gallery/9747819_GfVEE">Contact</a></li>
<li><a href="/gallery/9984111_vPGKn">My Guestbook</a></li>
</ul> 
</div>
Add this to your CSS, it has your current colors.

/* CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of*/
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
.menu {
z-index:99;
margin: 0 auto 20px;
position:relative; /*Make the container moveable*/
width:630px; /*Main bar total width*/
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

.menu ul ul {
width:100px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
text-align:center;
width:100px; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0 2px;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:9pt;
text-decoration:none;
color:#fff;
font-family: Century Gothic, Arial !important
width:100px; /* Defines the main box dimensions. */
height:20px; /*How tall your cells are*/
background:#999;
line-height:21px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
{width:100px; w\idth:100px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#333;}

/* style the second level hover */
.menu ul ul a.drop:hover{background:#333;}
.menu ul ul :hover > a.drop {background:#333;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#333;}

/* style the third level hover */
.menu ul ul ul a:hover {background:#333;}
.menu ul ul ul :hover > a {background:#333;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:20px;
left:0;
width:80px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html .menu ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* position the third level flyout menu */
.menu ul ul ul {
left:100px;
top:0;
width:100px;
}

/* position the third level flyout menu for a left flyout */
/* .menu ul ul ul.left {left:-100px;} */

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#999;
color:#fff;
height:auto;
line-height:1em;
padding:5px 10px;
width:80px
}

/* yet another hack for IE5.5 */
* html .menu ul ul a
{width:100px; w\idth:100px;}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background:#999;
}

/* main when hover drop */
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#333;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

/* End Navbar Code */

nancy622

Feb-12-2010, 04:27 PM

This will get your started. See this page (http://allen-steve.smugmug.com/gallery/2327835) as reference for how it's structured
and this page (http://www.dgrin.com/showpost.php?p=1302836&postcount=4386) to troubleshoot.

Replace your navcontainer div in your header with this.

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/9747745_aUbsD">About Me</a></li>
<li><a class="drop" href="/galleries">Galleries
</a>

<ul>
<li><a href="/gallery/9747770_75SSk">Portfolio</a></li>
<li><a href="/gallery/9747813_oK4YU">Video</a></li>
</ul> 
</li>
<li><a href="/gallery/9747816_BakgV">News</a></li>
<li><a href="/gallery/9747819_GfVEE">Contact</a></li>
<li><a href="/gallery/9984111_vPGKn">My Guestbook</a></li>
</ul> 
</div>
Add this to your CSS, it has your current colors.

/* CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of*/
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
.menu {
z-index:99;
margin: 0 auto 20px;
position:relative; /*Make the container moveable*/
width:630px; /*Main bar total width*/
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

.menu ul ul {
width:100px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
text-align:center;
width:100px; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0 2px;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:9pt;
text-decoration:none;
color:#fff;
font-family: Century Gothic, Arial !important;
width:100px; /* Defines the main box dimensions. */
height:20px; /*How tall your cells are*/
background:#999;
line-height:21px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
{width:100px; w\idth:100px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#333;}

/* style the second level hover */
.menu ul ul a.drop:hover{background:#333;}
.menu ul ul :hover > a.drop {background:#333;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#333;}

/* style the third level hover */
.menu ul ul ul a:hover {background:#333;}
.menu ul ul ul :hover > a {background:#333;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:20px;
left:0;
width:80px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html .menu ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* position the third level flyout menu */
.menu ul ul ul {
left:100px;
top:0;
width:100px;
}

/* position the third level flyout menu for a left flyout */
/* .menu ul ul ul.left {left:-100px;} */

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#999;
color:#fff;
height:auto;
line-height:1em;
padding:5px 10px;
width:80px
}

/* yet another hack for IE5.5 */
* html .menu ul ul a
{width:100px; w\idth:100px;}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background:#999;
}

/* main when hover drop */
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#333;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

/* End Navbar Code */

Thank you were exactly do i have to go and copy and paste.

CynthiaM

Feb-16-2010, 05:41 AM

Seems that folks are doing navbars left and right. Cool! These are advanced features, that thankfully, a few members of our community are really helping out with! All navbar help issues should go here :)

Thanks!
I changed something on my navbar and now what used to be the last item on the right has dropped down to a second line. I can't figure out how to fix it without getting it completely off-center.

Can someone help me with getting this all on one line and keeping it centered?

TIA,

CynthiaM

Feb-16-2010, 06:36 AM

I changed something on my navbar and now what used to be the last item on the right has dropped down to a second line. I can't figure out how to fix it without getting it completely off-center.

Can someone help me with getting this all on one line and keeping it centered?

TIA,

I think I fixed it? Can someone just double check?

jdgphotoboy

Feb-16-2010, 07:59 AM

Good morning everyone...

Well I'm making a feeble attempt to give this whole CSS and HTML thang a shot... I managed to get my banner working (however, I haven't figured out how to link it to my homepage by clicking on it), as well setting up my navbar with the titles and such...

My main issue is directing the Nav buttons to go where I want them too... I predominately will be using the category view for my clients, using sub-cats to navigate to their actual gallery. However, my issue is directing the categories button on the navbar to go to that page. Here is what I have so far: :dunno

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">About JDG Photography</a></li>
<li><a href="/">Categories</a></li>
<li><a href="/">Services</a></li>
<li><a href="/">Client Access</a></li>
<li><a href="/">Vendors</a></li>
</ul>
</div>

Essentially what I want to do is have a homepage with banner, navbar, and perhaps a slideshow; have separate pages for Bio, Categories, Services, Client Access, and Vendors. Can anyone help me keep moving forward?!

My Smug Website is: www.jdgphotography.com

Thanks in advance for your help...

Wendee

Feb-16-2010, 09:37 AM

To make your banner clickable, see #4 here:
http://www.smugmug.com/help/customize-faq

In your navbar, this is the correct link for your Home button:
<li><a href="/">Home</a></li>

That means your button called Home will go here:
http://www.jdgphotography.com/

But for your other buttons, you need to have something more specific for your link.

For your categories button, you can direct that to all of your galleries and create a Galleries page, if you wanted to:
http://dgrin.smugmug.com/gallery/2160039

For your Bio, Services, etc, you can link your navbar button to an individual gallery. #29 in the Customization FAQ gives help on creating a Guestbook, which you can use for creating your Bio or Services.

Does that help a bit?

The link to a category, in the navbar code, would look like this:
<li><a href="/Weddings/">Categories</a></li>

That will take viewers here:
http://www.jdgphotography.com/Weddings

And to link to a gallery, it would be like this:
<li><a href="/gallery/10044786_uDFTR">Categories</a></li>

That will take viewers here:
http://www.jdgphotography.com/Weddings/Wedding-Album-Example/Flushmountalbums/10044786_uDFTR#688318854_6qEeF

If you have any further questions, the folks here on Dgrin can most definitely help out. :D

Take Care,
Wendee
Support Hero
http://www.smugmug.com/help/emailreal

[quote=jdgphotoboy]Good morning everyone...

chikkutom

Feb-16-2010, 12:13 PM

I dont know y my navbar is overlapping the banner. Can someone help me?
http://chikkubaiju.smugmug.com/

Allen

Feb-16-2010, 01:03 PM

I dont know y my navbar is overlapping the banner. Can someone help me?
http://chikkubaiju.smugmug.com/ See if adding a tad of bottom margin helps.

#my_banner {
width: 750px;
height: 150px;
margin: 0 auto 10px;
background: url(http://chikkubaiju.smugmug.com/photos/783848373_EfWM8-O.jpg) no-repeat;
}

chikkutom

Feb-16-2010, 03:08 PM

See if adding a tad of bottom margin helps.

#my_banner {
width: 750px;
height: 150px;
margin: 0 auto 10px;
background: url(http://chikkubaiju.smugmug.com/photos/783848373_EfWM8-O.jpg) no-repeat;
}

Thank you! that worked.

jdgphotoboy

Feb-17-2010, 06:11 AM

Thanks for your help Wendee...:barb It did help as it gave me better direction in how to customize my Mug. With that said... Now I'm attempting to create a Drop Down Nav Bar with flyouts even before I have my first navbar complete. I'm totally crazy like that! :ivar

So I'm going to big BABY steps and see what I come up with... But thanks again for your guidance.

Have a Smuggy Day! :thumb

To make your banner clickable, see #4 here:
http://www.smugmug.com/help/customize-faq

In your navbar, this is the correct link for your Home button:
<li><a href="/">Home</a></li>

That means your button called Home will go here:
http://www.jdgphotography.com/

But for your other buttons, you need to have something more specific for your link.

For your categories button, you can direct that to all of your galleries and create a Galleries page, if you wanted to:
http://dgrin.smugmug.com/gallery/2160039

For your Bio, Services, etc, you can link your navbar button to an individual gallery. #29 in the Customization FAQ gives help on creating a Guestbook, which you can use for creating your Bio or Services.

Does that help a bit?

The link to a category, in the navbar code, would look like this:
<li><a href="/Weddings/">Categories</a></li>

That will take viewers here:
http://www.jdgphotography.com/Weddings

And to link to a gallery, it would be like this:
<li><a href="/gallery/10044786_uDFTR">Categories</a></li>

That will take viewers here:
http://www.jdgphotography.com/Weddings/Wedding-Album-Example/Flushmountalbums/10044786_uDFTR#688318854_6qEeF

If you have any further questions, the folks here on Dgrin can most definitely help out. :D

Take Care,
Wendee
Support Hero
http://www.smugmug.com/help/emailreal

[quote=jdgphotoboy]Good morning everyone...

jdgphotoboy

Feb-17-2010, 01:15 PM

Hello again...

I am in need of some help from one of the NavBar Guru's out there. I have decided to create a navbar with drop downs... I followed the tutorials from Steve Allen and for the most part I have accomplished what I set out to do. However, I am supposed to have 6 boxes in the navbar, but currently it is only showing 4. I am attaching the "HTML" and "CSS" below to see if anyone can figure out where I went south...

Html:

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a class="drop" href="/">Categories</a>
</a>

<ul>

<li><a href="/Portraits/">Portraits</a></li>
<li><a href="/Weddings/">Weddings</a></li>
<li><a href="/Events/">Events</a></li>
<li><a href="/Digital-Art-and-Design/">Portfolio</a></li>
<li><a href="/Pets/">Pets</a></li>
</ul> 
</li>
<li><a href="/gallery/11262342_6RhFw">Client Access</a></li>
<li><a class="drop" href="/">About JDG Photography</a>
</a>

<ul>
<li><a href="/gallery/11270439_ADtvf">About Me</a></li>
<li><a href="/gallery/11270466_E3sCX">Contact Me</a></li>
</a>

<ul>
<li><a class="drop" href="/">Services</a>
</a>

<ul>
<li><a href="/gallery/10654356_fMMrM">Wedding Price List</a></li>
<li><a href="/gallery/10654348_HewkF">Portrait Pricing</a></li>
<li><a href="/gallery/11270815_R9GCi">Seniors</a></li>
<li><a href="/gallery/11270839_dfxZp">Pet Photography Pricing</a></li>

<ul> 

<li><a href="/gallery/11270853_iv68Y">Service Clients</a></li>

</div>



CSS:

/* CSS Document */
/* CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of*/
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
.menu {
margin: auto;
padding:5px 0px 5px 0px;
position:relative; /*Make the container moveable*/
width:750px; /*Main bar total width*/
font-size:10px;
padding-bottom:30px; /*Padding between the bottom of your mainbar and the rest of your page */
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:125px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:125px; /* Cell size. Divide the main width (750px) by the number of cells you need */
position: relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:10px;
text-decoration:none;
color:#fff;
width:100; /* Defines the main box dimensions. */
height:20px; /*How tall your cells are*/
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#758279;
padding-left:10px;
line-height:20px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:125px;
w\idth:139px;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#949e7c;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#c9ba65;
}
.menu ul ul :hover > a.drop {
background:#c9ba65;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#b2ab9b;
}
.menu ul ul ul :hover > a {
background:#b2ab9b;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0;
width:125px; /* Size of the daughter cells */
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px; /* IE gap between main bar and the dropdown items */
}

/* position the third level flyout menu */
.menu ul ul ul{
left:125px;
top:0;
width:125px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-125px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d4d8bd;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:129px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:125px;
w\idth:129px;
}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background:#949e7c;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#949e7c;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}

/* End Navbar Code */

I hope to hear from someone soon...

Have a Great Day!

Allen

Feb-17-2010, 01:26 PM

Hello again...

I am in need of some help from one of the NavBar Guru's out there. I have decided to create a navbar with drop downs... I followed the tutorials from Steve Allen and for the most part I have accomplished what I set out to do. However, I am supposed to have 6 boxes in the navbar, but currently it is only showing 4. I am attaching the "HTML" and "CSS" below to see if anyone can figure out where I went south...
...

I hope to hear from someone soon...

Have a Great Day!
This should work better, cleaned up some. A few tweaks to your CSS is
needed, esp. the dropdown gap.

<div class="menu">
<ul>
<li><a href="/">Home</a></li>

<li><a class="drop" href="#nopick">Categories
</a>

<ul>
<li><a href="/Portraits/">Portraits</a></li>
<li><a href="/Weddings/">Weddings</a></li>
<li><a href="/Events/">Events</a></li>
<li><a href="/Digital-Art-and-Design/">Portfolio</a></li>
<li><a href="/Pets/">Pets</a></li>
</ul> 
</li>

<li><a href="/gallery/11262342_6RhFw">Client Access</a></li>

<li><a class="drop" href="#nopick">About JDG Photography
</a>

<ul>
<li><a href="/gallery/11270439_ADtvf">About Me</a></li>
<li><a href="/gallery/11270466_E3sCX">Contact Me</a></li>
</ul> 
</li>

<li><a class="drop" href="#nopick">Services
</a>

<ul>
<li><a href="/gallery/10654356_fMMrM">Wedding Price List</a></li>
<li><a href="/gallery/10654348_HewkF">Portrait Pricing</a></li>
<li><a href="/gallery/11270815_R9GCi">Seniors</a></li>
<li><a href="/gallery/11270839_dfxZp">Pet Photography Pricing</a></li>
</ul> 
<li><a href="/gallery/11270853_iv68Y">Service Clients</a></li>

</ul> 
</div>


You do not have to post your CSS and html, most helping have tools that can see it on your site.

Edit: fixed the red missing /

Allen

Feb-17-2010, 01:34 PM

...
Swap your nav CSS with this, added a few preliminary tweaks.

/* CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of*/
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
.menu {
z-index:99;
margin: 0 auto 20px; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:840px; /* Main bar total width, minimize to center */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

.menu ul ul {
width:130px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
text-align:center;
width:auto; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12pt;
text-decoration:none;
color:#ccc;
background:none;
/* border:1px solid #777; */
/* border-width:1px 1px 1px 1px; */
font-family: Comic Sans MS, verdana, tahoma, helvetica, arial, sans-serif;
width:auto; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are*/
line-height:25px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 10px;
min-width: 100px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
{width:130px; w\idth:130px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#000;}

/* style the second level hover */
.menu ul ul a.drop:hover{background:#000;}
.menu ul ul :hover > a.drop {background:#000;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#000;}

/* style the third level hover */
.menu ul ul ul a:hover {background:#000;}
.menu ul ul ul :hover > a {background:#000;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
width:100px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html .menu ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* position the third level flyout menu */
.menu ul ul ul {
left:100px;
top:0;
width:100px;
}

/* position the third level flyout menu for a left flyout */
/* .menu ul ul ul.left {left:-100px;} */

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#000;
color:#ccc;
height:auto;
line-height:1em;
padding:5px 10px;
width:100px
}

/* yet another hack for IE5.5 */
* html .menu ul ul a
{width:120px; w\idth:120px;}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background:#000;
}

/* main when hover drop */
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#000;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

/* End Navbar Code */

Edited to change width in .menu to 840px

jdgphotoboy

Feb-17-2010, 01:44 PM

Thanks so much for your quick response to my question. :bow One last thing though...The last box "Client Services" is still not showing in my Navbar...Do I have to change the size of the cells in CSS in order for it to show? :dunno

This should work better, cleaned up some. A few tweaks to your CSS is
needed, esp. the dropdown gap.

<div class="menu">
<ul>
<li><a href="/">Home</a></li>

<li><a class="drop" href="#nopick">Categories
</a>

<ul>
<li><a href="/Portraits/">Portraits</a></li>
<li><a href="/Weddings/">Weddings</a></li>
<li><a href="/Events/">Events</a></li>
<li><a href="/Digital-Art-and-Design/">Portfolio</a></li>
<li><a href="/Pets/">Pets</a></li>
</ul> 
</li>

<li><a href="/gallery/11262342_6RhFw">Client Access</a></li>

<li><a class="drop" href="#nopick">JDG Photography
</a>

<ul>
<li><a href="/gallery/11270439_ADtvf">About Me</a></li>
<li><a href="/gallery/11270466_E3sCX">Contact Me</a></li>
</ul> 
</li>

<li><a class="drop" href="#nopick">Pricing
</a>

<ul>
<li><a href="/gallery/10654356_fMMrM">Wedding Price List</a></li>
<li><a href="/gallery/10654348_HewkF">Portrait Pricing</a></li>
<li><a href="/gallery/11270815_R9GCi">Seniors</a></li>
<li><a href="/gallery/11270839_dfxZp">Pet Photography Pricing</a></li>
<ul> 

<li><a href="/gallery/11270853_iv68Y">Client Services</a></li>

</ul> 
</div>

You do not have to post your CSS and html, most helping have tools that can see it on yoru site.

Allen

Feb-17-2010, 01:46 PM

...!
You have blank area in the banner at the bottom. You can either crop that off
or lower the height to reduce gap between nav
#my_banner {
width: 750px;
height: 120px;
margin: 0 auto;
padding: 5px;
background: url(http://www.jdgphotography.com/photos/786162201_rsN7c-O.jpg) no-repeat;
}

Allen

Feb-17-2010, 01:50 PM

Thanks so much for your quick response to my question. :bow One last thing though...The last box "Client Services" is still not showing in my Navbar...Do I have to change the size of the cells in CSS in order for it to show? :dunno
Duh, my mistake.
Missing /

...
</ul> 
<li><a href="/gallery/11270853_iv68Y">Service Clients</a></li>
...

Change out your CSS with what I posted and see if you like it.

jdgphotoboy

Feb-17-2010, 02:02 PM

Okay my friend I tried both...and still nothing... I can't figure this out.

You have blank area in the banner at the bottom. You can either crop that off
or lower the height to reduce gap between nav
#my_banner {
width: 750px;
height: 120px;
margin: 0 auto;
padding: 5px;
background: url(http://www.jdgphotography.com/photos/786162201_rsN7c-O.jpg) no-repeat;
}

jdgphotoboy

Feb-17-2010, 02:08 PM

By golly that worked!!! :bow That little missing "/" worked!!!:ivar

Thanks again Steve!

P.s. What CSS posting are you referring too?

Allen

Feb-17-2010, 02:11 PM

By golly that worked!!! :bow That little missing "/" worked!!!:ivar

Thanks again Steve!

P.s. What CSS posting are you referring too?
See post 4571. After the missing / I edited the post to correct the overall nav width.

btw, Steve is long gone working for SmugMug now but the site title is catchy so I left it as is. :D

graham

Feb-17-2010, 05:21 PM

I am missing something simple to get my drop down navbar working but have plowed through every post without luck. I even tried to replicate Allen's source code from his web. My problem is that the 'drop downs' show as 'regular' navbars. What am I doing wrong?
graham

(http://www.grahamwaiting.com)

Allen

Feb-17-2010, 08:01 PM

I am missing something simple to get my drop down navbar working but have plowed through every post without luck. I even tried to replicate Allen's source code from his web. My problem is that the 'drop downs' show as 'regular' navbars. What am I doing wrong?
graham

(http://www.grahamwaiting.com)
I'm having a heck of a time trying to figure out what you want. Can you
post a tree of your nav?

Compose it in notepad using spaces for indents and post here between
code tags. Something like this. Are you also looking to get sections on
different lines

Featured images
Bahamas
Grand Bahama 2008
Grand Bahama 2009
Nassau
Family Islands
Cat Island
My Bahama Journal
Nature
Beach scenes
Manmade
Boats
Environmental
Architectural

btw, you have no CSS supporting it.:D

graham

Feb-18-2010, 06:03 AM

Sorry for the confusion. I am trying to make it look like yours!

I copied the CSS from one of the navbar posts I found here - maybe thats the problem? IT's GONE! Maybe I didn't save or something hiccupped? Can you quickly redirect me to a post that you think may work? That's probably the problem
thx
g

TOP NAVBAR

Featured Images
Bahamas
...........Grand Bahama 2008
............Grand Bahama 2009
...........Nassau
...........Family Islands
........................Cat Island
........................Harbor Island
........................Exumas
...........General
.......................Bahamas scenes
........................Cat island video
........................Bahamas video
My Bahama Journal
Nature
............Beach scenes
............Sunrise sunset
............Flora fauana
............Reflections
Man Made
.............Boats
.............Fireworks
.............Mostly Boston
..............General

BOTTOM NAVBAR
(already works)

Environmental
Architecture
Events
Stock
Search
About me
Rates
Family

Allen

Feb-18-2010, 09:17 AM

Sorry for the confusion. I am trying to make it look like yours!

I copied the CSS from one of the navbar posts I found here - maybe thats the problem? IT's GONE! Maybe I didn't save or something hiccupped? Can you quickly redirect me to a post that you think may work? That's probably the problem
thx
g
...
Try this. Also redid the header using a div.

<div id="myHeader">
<a href="/"><big>B</big>ahama <big>S</big>tock <big>P</big>hotography</a>
</div>

<div id="navTop" class="menu">
<ul>
<li><a href="/gallery/2984625"><b>Featured images</b></a></li>

<li><a class="drop" href="/Bahamas"><b>Bahamas</b>
</a> 
<ul>
<li><a href="/Grand-Bahama-2008/4966260">Grand Bahama 2008</a></li>
<li><a href="/Grand-Bahama/2846327">Grand Bahama 2009</a></li>
<li><a href="/Nassau-Bahamas/3159169">Nassau</a></li>
<li><a class="drop" href="#">Family Islands
</a> 
<ul>
<li><a href="/Islands/10241738">Cat Island</a></li>
<li><a href="/Harbour-Island-Bahama/3173687">Harbour Island</a></li>
<li><a href="/Exumas/6818288">Exumas</a></li>
</ul> 
</li>
<li><a class="drop" href="#">General
</a> 
<ul>
<li><a href="/Bahama-Scenes/2848118">Bahamas scenes</a></li>
<li><a href="Cat-Island-show/10866019">Cat Island video</a></li>
<li><a href="/Bahamas/Bahama-Clips/10351978">Bahamas Video</a></li>
</ul> 
</li>
</ul> 
</li>

<li><a href="http://www.bahamastockphotography.com"><b>My Bahama Journal</b></a></li>

<li><a class="drop" href="/Nature"><b>Nature</b>
</a> 
<ul>
<li><a href="/Beach-scenes/2843302">Beach scenes</a></li>
<li><a href="/Sunrise-sunset/2843245">Sunrise/Sunset</a></li>
<li><a href="/Fauna-Flora/3173612">Flora and Fauna</a></li>
<li><a href="/Reflections/2843274">Reflections</a></li>
</ul> 
</li>
<li><a class="drop" href="/Other"><b>Manmade</b>
</a> 
<ul>
<li><a href="/Boats/3181274">Boats</a></li>
<li><a href="/Fireworks/3101907">Fireworks</a></li>
<li><a href="/Mostly-Boston/2378457">Mostly Boston</a></li>
<li><a href="/General/2347406">General</a></li>
</ul> 
</li>
</ul> 
</div>

<div class="spacer"></div>

<div id="navBot" class="menu">
<ul>
<li><a href="/keyword/environmental">Environmental</a></li>
<li><a href="/keyword/architecture">Architectural</a></li>
<li><a href="/events">Events</a></li>
<li><a href="/keyword/stock">Stock</a></li>
<li><a href="/keyword">Search</a></li>
<li><a href="/gallery/2983909">About Me</a></li>
<li><a href="/gallery/2997942">Rates</a></li>
<li><a href="/family">Family</a></li>
</ul>
</div>
<div class="spacer"></div>

nav CSS

#navTop {z-index:99; width: 650px; margin: 0 auto;}
#navBot {z-index:70; width: 920px; margin: 0 auto 40px;}

#myHeader {
margin: 10px auto;
text-align: center;
}

#myHeader a {
text-align: center;
text-decoration: none;
font-size: 140%;
font-weight: bold;
color: #fff;
}

/* CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of*/
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
.menu {
z-index:99;
margin: 0 auto; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:840px; /* Main bar total width, minimize to center */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

.menu ul ul {
width:130px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
text-align:center;
width:auto; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12pt;
text-decoration:none;
color:#fff;
background:none;
/* border:1px solid #777; */
/* border-width:1px 1px 1px 1px; */
font-family: Comic Sans MS, verdana, tahoma, helvetica, arial, sans-serif;
width:auto; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are*/
line-height:25px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 10px;
min-width: 90px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
{width:130px; w\idth:130px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#0033FF;}

/* style the second level hover */
.menu ul ul a.drop:hover{background:#0033FF;}
.menu ul ul :hover > a.drop {background:#0033ff;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#0033FF;}

/* style the third level hover */
.menu ul ul ul a:hover {background:#0033ff;}
.menu ul ul ul :hover > a {background:#0033FF;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
width:100px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html .menu ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* position the third level flyout menu */
.menu ul ul ul {
left:100px;
top:0;
width:100px;
}

/* position the third level flyout menu for a left flyout */
/* .menu ul ul ul.left {left:-100px;} */

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#0033ff;
color:#fff;
height:auto;
line-height:1em;
padding:5px 10px;
width:100px
}

/* yet another hack for IE5.5 */
* html .menu ul ul a
{width:120px; w\idth:120px;}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#ccc;
background:#0033ff;
}

/* main when hover drop */
.menu :hover > a, .menu ul ul :hover > a {
color:#ccc;
background:#0033ff;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

/* End Navbar Code */

graham

Feb-18-2010, 09:59 AM

Try this. Also redid the header using a div.

<div id="myHeader">
<a href="/"><big>B</big>ahama <big>S</big>tock <big>P</big>hotography</a>
</div>

<div id="navTop" class="menu">
<ul>
<li><a href="/gallery/2984625"><b>Featured images</b></a></li>

<li><a class="drop" href="/Bahamas"><b>Bahamas</b>
</a> 
<ul>
<li><a href="/Grand-Bahama-2008/4966260">Grand Bahama 2008</a></li>
<li><a href="/Grand-Bahama/2846327">Grand Bahama 2009</a></li>
<li><a href="/Nassau-Bahamas/3159169">Nassau</a></li>
<li><a class="drop" href="#">Family Islands
</a> 
<ul>
<li><a href="/Islands/10241738">Cat Island</a></li>
<li><a href="/Harbour-Island-Bahama/3173687">Harbour Island</a></li>
<li><a href="/Exumas/6818288">Exumas</a></li>
</ul> 
</li>
<li><a class="drop" href="#">General
</a> 
<ul>
<li><a href="/Bahama-Scenes/2848118">Bahamas scenes</a></li>
<li><a href="Cat-Island-show/10866019">Cat Island video</a></li>
<li><a href="/Bahamas/Bahama-Clips/10351978">Bahamas Video</a></li>
</ul> 
</li>
</ul> 
</li>

<li><a href="http://www.bahamastockphotography.com"><b>My Bahama Journal</b></a></li>

<li><a class="drop" href="/Nature"><b>Nature</b>
</a> 
<ul>
<li><a href="/Beach-scenes/2843302">Beach scenes</a></li>
<li><a href="/Sunrise-sunset/2843245">Sunrise/Sunset</a></li>
<li><a href="/Fauna-Flora/3173612">Flora and Fauna</a></li>
<li><a href="/Reflections/2843274">Reflections</a></li>
</ul> 
</li>
<li><a class="drop" href="/Other"><b>Manmade</b>
</a> 
<ul>
<li><a href="/Boats/3181274">Boats</a></li>
<li><a href="/Fireworks/3101907">Fireworks</a></li>
<li><a href="/Mostly-Boston/2378457">Mostly Boston</a></li>
<li><a href="/General/2347406">General</a></li>
</ul> 
</li>
</ul> 
</div>

<div class="spacer"></div>

<div id="navBot" class="menu">
<ul>
<li><a href="/keyword/environmental">Environmental</a></li>
<li><a href="/keyword/architecture">Architectural</a></li>
<li><a href="/events">Events</a></li>
<li><a href="/keyword/stock">Stock</a></li>
<li><a href="/keyword">Search</a></li>
<li><a href="/gallery/2983909">About Me</a></li>
<li><a href="/gallery/2997942">Rates</a></li>
<li><a href="/family">Family</a></li>
</ul>
</div>
<div class="spacer"></div>
nav CSS

#navTop {z-index:99; width: 650px; margin: 0 auto;}
#navBot {z-index:70; width: 920px; margin: 0 auto 40px;}

#myHeader {
margin: 10px auto;
text-align: center;
}

#myHeader a {
text-align: center;
text-decoration: none;
font-size: 140%;
font-weight: bold;
color: #fff;
}

/* CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of*/
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
.menu {
z-index:99;
margin: 0 auto; /* top R/L bottom */
position:relative; /* Make the container moveable */
width:840px; /* Main bar total width, minimize to center */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

.menu ul ul {
width:130px; /* Cell size. Divide the main width (750px) by the number of cells you need */
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
text-align:center;
width:auto; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12pt;
text-decoration:none;
color:#fff;
background:none;
/* border:1px solid #777; */
/* border-width:1px 1px 1px 1px; */
font-family: Comic Sans MS, verdana, tahoma, helvetica, arial, sans-serif;
width:auto; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are*/
line-height:25px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 10px;
min-width: 90px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
{width:130px; w\idth:130px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#0033FF;}

/* style the second level hover */
.menu ul ul a.drop:hover{background:#0033FF;}
.menu ul ul :hover > a.drop {background:#0033ff;}

/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#0033FF;}

/* style the third level hover */
.menu ul ul ul a:hover {background:#0033ff;}
.menu ul ul ul :hover > a {background:#0033FF;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
width:100px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html .menu ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* position the third level flyout menu */
.menu ul ul ul {
left:100px;
top:0;
width:100px;
}

/* position the third level flyout menu for a left flyout */
/* .menu ul ul ul.left {left:-100px;} */

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#0033ff;
color:#fff;
height:auto;
line-height:1em;
padding:5px 10px;
width:100px
}

/* yet another hack for IE5.5 */
* html .menu ul ul a
{width:120px; w\idth:120px;}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#ccc;
background:#0033ff;
}

/* main when hover drop */
.menu :hover > a, .menu ul ul :hover > a {
color:#ccc;
background:#0033ff;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{visibility:visible;}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

/* End Navbar Code */

You are awesome. Thanks. I can't tell you how many hours I spent on this. You just paid for my subscription, plus!!!

bobh665

Feb-18-2010, 11:35 AM

:clap:claphttp://www.crfotography.com/

Two things, the navbar should read:

Home About Services Galleries Contact
In IE it displays sometimes normally and other times as a flyout after events. In firefox it doesnt display at all.

The other problem is I would like to display it on the right side of the page but I cant seem to move it. Any help would be greatly appreciated.

jdgphotoboy

Feb-18-2010, 12:09 PM

Okie Dokie...Have another Smugomization question for Mr. Allen, or anyone that might be able to help me out.

I have the navbar situated and now working on customizing some gallery pages that link to the navbar. I copy and pasted from the Simpler Album Description site: http://www.allen-steve.smugmug.com/gallery/3819841

I have followed the directions according to both the HTML and CSS codes but does not do what it is intended to do. Text is on top of the image and doesn't wrap...hovering over link does not change color...but I do have text. However the title doesn't seem to have a gap between itself and the first paragraph. What gives? :dunno

This pertains to both my "About Me" and "Contact Me" gallery pages..

<html>
<div class="myTitle">
Contact Information
</div> 

<div class="myPhoto">
<img src="/photos/761209931_iNYUd-X3" width="1800" height="1200" />
</div> 

<div class="myText">
<p>Thanks for stopping by. </p>

<p></p>

<p></p>

<p>You can contact me by Email at: <a href="JDGphotography@mac.com">
<span class="myEmail">JDG Photography</span></a></p>

</div> 
<div class="spacer"></div>
</html>

/* Contact Me Gallery Page */

/* START gallery 11270466 */

.gallery_11270466 #albumDescription {
margin-top: 40px; /* gap from navbar at top */
background: #ccc; /* background of description box */
padding: 20px 40px 40px 40px; /* top right bottom left */
} /* spacing inside box from edges */

.gallery_11270466 .myPhoto {
float: left; /* allows the text to flow to the right */
padding: 0 30px 10px 0; /* top right bottom left */
} /* spacing of text around photo */

.gallery_11270466 .myPhoto img {
border: 4px ridge #444; /* add border around photo */
}

.gallery_11270466 .myTitle {
font-family: century-gothic, arial, verdana;
font-size: 10px;
color: #444;
font-weight: bold;
text-align: center;
margin: 0 auto 30px auto; /* top right bottom left */
}

.gallery_11270466 .myText {
font-family: Comic Sans MS, verdana;
font-size: 100%;
color: #444;
font-weight: normal;
text-align: justify;
}

.gallery_11270466 .myEmail {color: #444;}
.gallery_11270466 .myEmail:hover {color: red;}

/* things you can hide on page */
.gallery_11270466 .nophotos h3, /* if no photos in gallery */
.gallery_11270466 #albumNav_top,
.gallery_11270466 #albumNav_bottom,
.notLoggedIn .gallery_11270466 .journal_entry, /* hides photos in gallery */
.notLoggedIn .gallery_11270466 #breadcrumb {display: none;}

/* END gallery 11270466 */
Thank you in advance for your help...

Allen

Feb-18-2010, 01:39 PM

Okie Dokie...Have another Smugomization question for Mr. Allen, or anyone that might be able to help me out.

I have the navbar situated and now working on customizing some gallery pages that link to the navbar. I copy and pasted from the Simpler Album Description site: http://www.allen-steve.smugmug.com/gallery/3819841

I have followed the directions according to both the HTML and CSS codes but does not do what it is intended to do. Text is on top of the image and doesn't wrap...hovering over link does not change color...but I do have text. However the title doesn't seem to have a gap between itself and the first paragraph. What gives? :dunno

This pertains to both my "About Me" and "Contact Me" gallery pages..
...
Thank you in advance for your help...
Under gallery settings check no for "hide owner" to enable your
Customization. Also make sure "custom" is checked for appearance.

jdgphotoboy

Feb-18-2010, 02:12 PM

Under gallery settings check no for "hide owner" to enable your
Customization. Also make sure "custom" is checked for appearance.

Hey Allen...I wanted to thank you for all of your help so far as it's keeping me from pulling my hair out (Even though I'm completely Bald). Now I've gone into the gallery settings for each gallery and switched it "NO" for hide owner and made sure that the appearance is set to custom. Now in owner view the picture shows but no text. In visitor view there is absolutely nothing...

Please help me figure this out Allen....Pleeeeeeeaaaaaze! :bow

Allen

Feb-18-2010, 02:15 PM

:clap:claphttp://www.crfotography.com/

Two things, the navbar should read:

Home About Services Galleries Contact
In IE it displays sometimes normally and other times as a flyout after events. In firefox it doesnt display at all.

The other problem is I would like to display it on the right side of the page but I cant seem to move it. Any help would be greatly appreciated. Go into Easy Customizer and remove adding your banner/logo there.
Then replace your whole header with this.

<div id="my_header">

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/Other/About/11271093_kC8YG/">About</a></li>
<li><a href="/Other/Services/11271069_kjGjo/9">Services</a></li>
<li><a class="drop" href="/Images">Galleries
</a>

<ul>
<li><a href="/Images/Weddings">Weddings</a></li>
<li><a href="/Images/Portraits">Portraits</a></li>
<li><a href="/Images/Events">Events</a></li>
</ul> 
<li><a href="/Other/Con/9734194_PGxwL">Contact</a></li>
</ul> 
</div> 

<div id="my_banner">
<a href="/">
<img src="/img/spacer.gif" width="400" height="65" border="0" alt="">
</a>
</div> 

</div> 
CSS changes

[I]Remove these

#my_banner {
width: 800px;
height: 150px;
margin: 0 auto;
background: url(http://bobh665.smugmug.com/Other/Custom-Homepage/9675355_krHfM#653378319_maZpE-A-LB) no-repeat;
}

.smuglogo {
width: 250px !important;
height: 47px !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image src='http://www.smugmug.com/photos/659553630_JKwLR-Ti.png') !important;
}

.smuglogo[class] {
background-image: url(http://www.smugmug.com/photos/659553630_JKwLR-Ti.png) !important;
}

[I]add the red .menu in this

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

Change this existing rule to look like this

/*Navbar CSS*/
/* style the outer div to give it width */
.menu {
float: right;
width:635px;
margin: 25px 0 0; /* top right/left bottom */
}

Add these to your CSS

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

#my_banner {
width: 400px;
height: 75px;
margin: 0;
background: url(http://crfotography.smugmug.com/photos/653497837_aq8GZ-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='/http://crfotography.smugmug.com/photos/653497837_aq8GZ-O.png');
}

Allen

Feb-18-2010, 02:16 PM

Hey Allen...I wanted to thank you for all of your help so far as it's keeping me from pulling my hair out (Even though I'm completely Bald). Now I've gone into the gallery settings for each gallery and switched it "NO" for hide owner and made sure that the appearance is set to custom. Now in owner view the picture shows but no text. In visitor view there is absolutely nothing...

Please help me figure this out Allen....Pleeeeeeeaaaaaze! :bow
Had to get your customization active first, now we can check what's happening. Be Back.

Allen

Feb-18-2010, 02:27 PM

Hey Allen...I wanted to thank you for all of your help so far as it's keeping me from pulling my hair out (Even though I'm completely Bald). Now I've gone into the gallery settings for each gallery and switched it "NO" for hide owner and made sure that the appearance is set to custom. Now in owner view the picture shows but no text. In visitor view there is absolutely nothing...

Please help me figure this out Allen....Pleeeeeeeaaaaaze! :bow
First thing is remove this from your CSS at the bottom.

#albumDescription {visibility: hidden;}

Then fix the photo link in the description in about gallery.

<div class="myPhoto">
<img src="/photos/534879671_PpXBG-S.jpg" height="300" width="200" />
</div> 

Add .jpg and correct sizes to this in contact gallery.

<div class="myPhoto">
<img src="/photos/761209931_iNYUd-S.jpg" height="267" width="400">
</div>

bobh665

Feb-19-2010, 06:39 AM

:barb:barbAllen thank you very much. I would have never figured it out. I was wondering if there is a way to remove the white line underneath the banner or is that there because it is transparent?

Thanks again .......... Bob

http://www.crfotography.com/

jdgphotoboy

Feb-19-2010, 07:19 AM

First thing is remove this from your CSS at the bottom.

#albumDescription {visibility: hidden;}

Then fix the photo link in the description in about gallery.

<div class="myPhoto">
<img src="/photos/534879671_PpXBG-S.jpg" height="300" width="200" />
</div> 

Add .jpg and correct sizes to this in contact gallery.

<div class="myPhoto">
<img src="/photos/761209931_iNYUd-S.jpg" height="267" width="400">
</div> 

Okay...Now I'm getting excited and slowly getting the hang of this. Now my question is do I have to upload that specific size of photo in terms of pixels in order for it to show? I can see the tiny frame where I'm assuming that's the place where the pic is supposed to be. As always I totally appreciate the help and patience you have given me over the past couple of days... You do Bomb Allen!!! :bow :thumb:jose

Allen

Feb-19-2010, 07:31 AM

Okay...Now I'm getting excited and slowly getting the hang of this. Now my question is do I have to upload that specific size of photo in terms of pixels in order for it to show? I can see the tiny frame where I'm assuming that's the place where the pic is supposed to be. As always I totally appreciate the help and patience you have given me over the past couple of days... You do Bomb Allen!!! :bow :thumb:jose Both those galleries already have a photo in them. You just have to use the
correct photo link like this /photos/534879671_PpXBG-S.jpg. You can add
any size you want by changing to -S.jpg, -M.jpg, -TH.jpg, etc.

You now have this

<div class="myPhoto">
<img src="/photos/PancakesBO-S.jpg" height="300" width="200">
</div> 

the link should be like this

<div class="myPhoto">
<img src="/photos/534879671_PpXBG-S.jpg" height="300" width="200" />
</div> 

Don't forget to put in the actual photo sizes.

jdgphotoboy

Feb-19-2010, 07:54 AM

Both those galleries already have a photo in them. You just have to use the
correct photo link like this /photos/534879671_PpXBG-S.jpg. You can add
any size you want by changing to -S.jpg, -M.jpg, -TH.jpg, etc.

You now have this

<div class="myPhoto">
<img src="/photos/PancakesBO-S.jpg" height="300" width="200">
</div> 

the link should be like this

<div class="myPhoto">
<img src="/photos/534879671_PpXBG-S.jpg" height="300" width="200" />
</div> 

Don't forget to put in the actual photo sizes.

:jawdrop How simple was that?! Man am I certainly glad you're on here! :bow

Now I can move on and tackle some projects on my website... Thanks again for being there as I'm sure that I will be bugging you again soon...:ivar:rambo

jdgphotoboy

Feb-19-2010, 12:08 PM

:jawdrop How simple was that?! Man am I certainly glad you're on here! :bow

Now I can move on and tackle some projects on my website... Thanks again for being there as I'm sure that I will be bugging you again soon...:ivar:rambo

Now that I have my Navbar crankin' thanks to you...Now I want to address my Homepage. What's the easiest way to view the categories on my homepage while having that checked in "Homepage Layout" and access them while I'm logged in, but not have it visible for anyone whom might visit my site? I'm sure that there is a string of CSS code that will do that, but as usual I'm back at the beginning of my learning curve when it comes to CSS and the homepage. :dunno

Daddy0

Feb-19-2010, 01:58 PM

JAllen helped me out with getting my navbar to show up on my site, but I now need to be able to get it tweaked so visitor's can use it.

1. Under the Galleries tab, I would like for the following categories to be listed: My Family, Sports and Weddings. Then I need to know where to find the info to setup my galleries so when you would click on one of the above categories, it would take you to a listing of all the galleries in that category.

2. I would like the Services tab to be renamed What We Do and have at least 4 drop-downs, 2 of which would be labeled Weddings and Sports. I assume I would then need to create another gallery similar to the one like Meet FOYM for each of the above.

3. I would like the Contact Us tab to be renamed Meet FOYM. The drop-downs on that tab can be removed.

4. Then if you could give me instructions as to what codes to copy/paste as I add new categories/galleries, then I will try to do so on my own(that is until I screw it up and need help).

Thanks for the help in advance,

Allen

Feb-20-2010, 07:14 AM

Now that I have my Navbar crankin' thanks to you...Now I want to address my Homepage. What's the easiest way to view the categories on my homepage while having that checked in "Homepage Layout" and access them while I'm logged in, but not have it visible for anyone whom might visit my site? I'm sure that there is a string of CSS code that will do that, but as usual I'm back at the beginning of my learning curve when it comes to CSS and the homepage. :dunno
Turn the box on and add this to your CSS.

.notLoggedIn #galleriesBox,
.notLoggedIn #categoriesBox {display:none;}

runway

Feb-23-2010, 08:01 AM

[quote=Andy]Seems that folks are doing navbars left and right. Cool! These are advanced features, that thankfully, a few members of our community are really helping out with! All navbar help issues should go here :)

Thanks![ Hi, Andy. Can I stack the navbar buttons on top of each other, rather than linearlly across the page? I so, how? Thanks, Dave.]

Allen

Feb-23-2010, 08:58 AM

[quote=Andy]Seems that folks are doing navbars left and right. Cool! These are advanced features, that thankfully, a few members of our community are really helping out with! All navbar help issues should go here :)

Thanks![ Hi, Andy. Can I stack the navbar buttons on top of each other, rather than linearlly across the page? I so, how? Thanks, Dave.]
We would need a link to your site to see how this would look and also what your current nav looks like.

runway

Feb-23-2010, 10:28 AM

[quote=Allen][quote=runway]
We would need a link to your site to see how this would look and also what your current nav looks like.[/Hi. My site is http://www.davidscherbel.com/.

I just made a navbar - literally 10 minutes ago. I've had a "training wheels" site for a year and now want to get rid of the clutter on the home page and add a slide show and a navbar. I also want to replace my banner with one that was not centered with the navbar vertically stacked next to it on one side. I also want to replace the galleries on the homepage with a slide show, but I'll get to that after I get the new banner and navbar situated.

What I have to figure out first is why three of my nav buttons don't work. I tried to link them to categories, rather than galleries, and clearly screwed up the code. Dave]

Allen

Feb-23-2010, 10:39 AM

[quote=Allen][quote=runway]
We would need a link to your site to see how this would look and also what your current nav looks like.[/Hi. My site is http://www.davidscherbel.com/.

I just made a navbar - literally 10 minutes ago. I've had a "training wheels" site for a year and now want to get rid of the clutter on the home page and add a slide show and a navbar. I also want to replace my banner with one that was not centered with the navbar vertically stacked next to it on one side. I also want to replace the galleries on the homepage with a slide show, but I'll get to that after I get the new banner and navbar situated.

What I have to figure out first is why three of my nav buttons don't work. I tried to link them to categories, rather than galleries, and clearly screwed up the code. Dave]
You had a little extra in the links. Here it is with relative links.

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/Handmade_Photography_Books">Books</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/Fine_Art_Photography">Fine Art</a></li>
<li><a href="/Fashion">Fashion</a></li>
<li><a href="/gallery/11328970_VScPu">Guestbook</a></li>
</ul>
</div>

runway

Feb-23-2010, 11:00 AM

[quote=runway][quote=Allen]
You had a little extra in the links. Here it is with relative links.

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/Handmade_Photography_Books">Books</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/Fine_Art_Photography">Fine Art</a></li>
<li><a href="/Fashion">Fashion</a></li>
<li><a href="/gallery/11328970_VScPu">Guestbook</a></li>
</ul>
</div>

Boy you're quick. I plugged in the code and still no dice. Then I noticed that the only ones that worked were ones without the underscoring that I added. (Thought I read that somewhere.) I took them out and bingo, working buttons. Thanks Allen

Say hi to my mother in St Louis for me. Just bought her a guitar for her birthday - she wanted to take up the guitar at 88!

Dave

runway

Feb-23-2010, 03:31 PM

[quote=Allen][quote=runway]

Boy you're quick. I plugged in the code and still no dice. Then I noticed that the only ones that worked were ones without the underscoring that I added. (Thought I read that somewhere.) I took them out and bingo, working buttons. Thanks Allen

Say hi to my mother in St Louis for me. Just bought her a guitar for her birthday - she wanted to take up the guitar at 88!

Dave

Thanks, Allen. Now that i have a working navbar (Dah-da), back to my original question: how do I move it to the right or left and how do I stack them vertically? And my new question would be: how do I change the color of the buttons (I've tried with no success) Dave

Allen

Feb-23-2010, 09:13 PM

[quote=runway][quote=Allen]

Thanks, Allen. Now that i have a working navbar (Dah-da), back to my original question: how do I move it to the right or left and how do I stack them vertically? And my new question would be: how do I change the color of the buttons (I've tried with no success) Dave Vertically would not very well in any gallery.
See if you like this.
Change your header like this.

<div id="my_header">

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/Handmade%20Photography%20Books">Books</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/Fine%20Art%20Photography">Fine Art</a></li>
<li><a href="/Fashion">Fashion</a></li>
<li><a href="/gallery/11328970_VScPu">Guestbook</a></li>
</ul>
</div>

<div id="my_banner"> </div>

</div> 
Change the top part of your CSS like this.

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

#my_banner {
width: 350px;
height: 30px;
margin-top: 10px;
background: url(http://www.davidscherbel.com/photos/795131754_7FzaZ-O.jpg) no-repeat;
}

#navcontainer {
float: right;
margin: 10px 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;
}

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

StardustPhoto

Feb-24-2010, 01:09 PM

Sorry if this has been answered already, but this thread is getting massive. I would like to add some sort of division between my header and the rest of the page, maybe a simple white line, maybe something fancier like on www.moonriverphotography.com. Either way, what would I need to put something like that in place?

www.stardustphoto.smugmug.com

Runtscal

Feb-24-2010, 01:13 PM

Hey There -- I know it must be something simple that I'm overlooking.

I attempted to make a navbar for my daughter's smugmug. However, I can't get the navbar to link to the galleries.

Her site: http://ads-n-ash.smugmug.com

1) Get Galleries Tab in Navbar to access galleries (a.k.a. category page)
2) Have Galleries/Categories display on Menu page when Logged In.

Thanks, Monica

Allen

Feb-24-2010, 01:17 PM

Sorry if this has been answered already, but this thread is getting massive. I would like to add some sort of division between my header and the rest of the page, maybe a simple white line, maybe something fancier like on www.moonriverphotography.com (http://www.moonriverphotography.com). Either way, what would I need to put something like that in place?

www.stardustphoto.smugmug.com (http://www.stardustphoto.smugmug.com)
The simplest way is to add <hr> after your nav html.

...
...
<li><a href="/gallery/11324686_v8MDE">Guestbook</a></li>
</ul>
</div>
<hr>

StardustPhoto

Feb-24-2010, 05:01 PM

The simplest way is to add <hr> after your nav html.

...
...
<li><a href="/gallery/11324686_v8MDE">Guestbook</a></li>
</ul>
</div>
<hr>

Simple and effective, thanks!

Runtscal

Feb-24-2010, 05:28 PM

Nevermind ------ apparently when you have the slideshow option enabled from the homepage layout selections (instead of creating one using the biobox etc) It blocks the navbar from going to the galleries.

Hey There -- I know it must be something simple that I'm overlooking.

I attempted to make a navbar for my daughter's smugmug. However, I can't get the navbar to link to the galleries.

Her site: http://ads-n-ash.smugmug.com

1) Get Galleries Tab in Navbar to access galleries (a.k.a. category page)
2) Have Galleries/Categories display on Menu page when Logged In.

Thanks, Monica

Allen

Feb-24-2010, 06:28 PM

Nevermind ------ apparently when you have the slideshow option enabled from the homepage layout selections (instead of creating one using the biobox etc) It blocks the navbar from going to the galleries.
Whoa, never heard of this, there should be a way to do it. Just have to
understand what you want. Enable the slideshow and we'll look.

StardustPhoto

Feb-24-2010, 10:37 PM

www.stardustphoto.smugmug.com

As you can see, when I added another menu item, Contact Us, it bumped it down to the next line. So far, my solution for this was to shrink the font size so that it all fits on one line, but there must be some variable that I'm missing that would just increase the amount of horizontal space the bar has to work with. What am I missing?

Runtscal

Feb-25-2010, 06:21 AM

All is okay now Allen -- thanks though.

I disabled the slideshow and then turned the view galleries/categories back on through homepage layout - then turned the slideshow back on. It is working now.

Whoa, never heard of this, there should be a way to do it. Just have to
understand what you want. Enable the slideshow and we'll look.

Allen

Feb-25-2010, 06:32 AM

www.stardustphoto.smugmug.com (http://www.stardustphoto.smugmug.com)

As you can see, when I added another menu item, Contact Us, it bumped it down to the next line. So far, my solution for this was to shrink the font size so that it all fits on one line, but there must be some variable that I'm missing that would just increase the amount of horizontal space the bar has to work with. What am I missing?
The width of the navcontainer has to be wide enough or the buttons will
wrap to two lines. Change in the width in this, 670 seems to work for Firefox.

#navcontainer {position: absolute;
top: 34px;
_top: 10px;
right: 15px;
width: 670px;
}

StardustPhoto

Feb-25-2010, 07:24 AM

Aha, I knew it had to be one of those, thanks.

TonyL

Feb-27-2010, 01:52 PM

Allan,
I changed my default theme on the website and cannot for the life of me get my navbar to change from blue.
I tried in numerous locations to change the color and I can't figure it out:cry
Can you or anyone else help out?

www.aplphoto.com

jfriend

Feb-27-2010, 01:58 PM

Allan,
I changed my default theme on the website and cannot for the life of me get my navbar to change from blue.
I tried in numerous locations to change the color and I can't figure it out:cry
Can you or anyone else help out?

www.aplphoto.com (http://www.aplphoto.com) Change the background parameter to background-color and change the color number in this part of your CSS (shown in red):

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none;
color:#fff;
width:px; /* Defines the main box dimensions. */
height:30px; /*How tall your cells are*/
border:1px solid #fff;
border-width:1px 1px 1px 1px;
background-color:#336699;
padding-left:10px;
line-height:29px; /*Adjust this to vertically center your text in each cell. Should

be about the same as height. */
}

TonyL

Feb-27-2010, 02:48 PM

Change the background parameter to background-color and change the color number in this part of your CSS (shown in red):

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none;
color:#fff;
width:px; /* Defines the main box dimensions. */
height:30px; /*How tall your cells are*/
border:1px solid #fff;
border-width:1px 1px 1px 1px;
background-color:#336699;
padding-left:10px;
line-height:29px; /*Adjust this to vertically center your text in each cell. Should

be about the same as height. */
}

THANKS!!!
I was doing that and it still wasn't displaying when I hit submit to preview it.
I had to actually hit update to see the change.....
I wonder if it is because I am using Google Chrome?

AliZaman

Feb-27-2010, 04:41 PM

Hey everyone, this is my first post here, so take it easy on a newbie :)

i have designed a navbar in photoshop and i was wondering if there is anyway to just code it so that it works as a navbar.

to elaborate, heres the navbar-
http://www.alizaman.com/photos/798463710_xJM9Y-XL.png

i was wondering if i can just put that image on my website and have that behave as my navbar.

for reference, heres my website - www.alizaman.com

thanks in advance!

rileyshiloh

Feb-27-2010, 06:11 PM

I need to add a simple black box across the top of my site so users can actually see the text of my navbar. I have a black box under the "Images by Gabrielle" text in the upper left corner, but would like it continued underneath the navbar. Is there a simple way to do this?
Thanks for all your help!!! :clap
Shahna

www.gabrielleimages.com (http://www.gabrielleimages.com)

EDIT:
Actually I think I might have figured it out....I just added a black box to the picture (except now there's a black box halfway down the page). I'm still tweaking. Any suggestions though would be appreciate! My husband thinks the background collage photo is distracting. :-(

TonyL

Feb-27-2010, 06:13 PM

I need to add a simple black box across the top of my site so users can actually see the text of my navbar. I have a black box under the "Images by Gabrielle" text in the upper left corner, but would like it continued underneath the navbar. Is there a simple way to do this?
Thanks for all your help!!! :clap
Shahna

www.gabrielleimages.com (http://www.gabrielleimages.com)

why not create a black box in your background image and have the text inside of it as white, then have them turn to grey when hovering?

rileyshiloh

Feb-27-2010, 08:28 PM

why not create a black box in your background image and have the text inside of it as white, then have them turn to grey when hovering?

That's pretty much what I ended up doing. Thanks!:clap

bobh665

Mar-01-2010, 08:10 AM

http://www.crfotography.com/

Under Services I tried to add Weddings and Portraits. After I did that Galleries and Contact ended up under Services and what was under Galleries now looks like a flyout in space. I repositioned the navbar from what Allen had done for me because it didnt display properly on a laptop. Everything worked fine until I added Weddings and Portraits under Services. Ant help will be greatly appreciated.

Thanks,
Bob

Allen

Mar-01-2010, 08:15 AM

http://www.crfotography.com/

Under Services I tried to add Weddings and Portraits. After I did that Galleries and Contact ended up under Services and what was under Galleries now looks like a flyout in space. I repositioned the navbar from what Allen had done for me because it didnt display properly on a laptop. Everything worked fine until I added Weddings and Portraits under Services. Ant help will be greatly appreciated.

Thanks,
Bob You missed the closings. Also clean up the end.

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/Other/About/11271093_kC8YG/">About</a></li>
<li><a class="drop" href="/Services">Services
</a>

<ul>
<li><a href="/Services/Weddings">Weddings</a></li>
<li><a href="/Services/Portraits">Portraits</a></li>
</ul> 
</li>
<li><a class="drop" href="/Images">Galleries
</a>

<ul> 
<li><a href="/Images/Weddings">Weddings</a></li>
<li><a href="/Images/Portraits">Portraits</a></li>
<li><a href="/Images/Events">Events</a></li>
</ul> 
</li>
<li><a href="/Other/Con/9734194_PGxwL">Contact</a></li>
</ul>
</div>

bobh665

Mar-01-2010, 08:41 AM

You missed the closings. Also clean up the end.

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/Other/About/11271093_kC8YG/">About</a></li>
<li><a class="drop" href="/Services">Services
</a>

<ul>
<li><a href="/Services/Weddings">Weddings</a></li>
<li><a href="/Services/Portraits">Portraits</a></li>
</ul> 
</li>
<li><a class="drop" href="/Images">Galleries
</a>

<ul> 
<li><a href="/Images/Weddings">Weddings</a></li>
<li><a href="/Images/Portraits">Portraits</a></li>
<li><a href="/Images/Events">Events</a></li>
</ul> 
</li>
<li><a href="/Other/Con/9734194_PGxwL">Contact</a></li>
</ul>
</div> 

That solved the problem ......... Thank you so much

Soppy

Mar-01-2010, 09:36 AM

Hey all,
I almost have my navbar up after much a lot of work on it. Only thing now is the boxes aren't lining up for some reason and it isn't centered. The text isn't in the boxes I need it to be and whatnot. Any help with this is really appreciated. Code is below.

HTML

<center>
<style media="all" type="text/css">@import "/menu/menu_style.css";</style>
<div>
<ul class="menu">
<li class="top"><a href="http://shutterbum.smugmug.com/" target="_self" class="top_link"><span>Home</span></a>
</li>
<li class="top"><a href="http://shutterbum.smugmug.com/galleries" target="_self" class="top_link"><span>Galleries</span></a>
<ul class="sub">
<li><a href="http://shutterbum.smugmug.com/Cars/Automotive-Photography/10583814_Jz3ne#792388620_4e5pD" target="_self">Automotive</a></li>
<li><a href="http://shutterbum.smugmug.com/Airplanes/Aviation/11173358_wPBi2#783235980_kdbbF" target="_self">Air Shows</a></li>
<li><a href="http://shutterbum.smugmug.com/Photography/Classic/10586159_JUtMj#783263713_y3THo" target="_self">Classic</a></li>
<li><a href="http://shutterbum.smugmug.com/Landscapes/Landscape/10586170_mJfxx#783218751_FySdv" target="_self">Landscape</a></li>
<li><a href="http://shutterbum.smugmug.com/People/Porterature/11173275_ZZ7na#783231124_pg6yw" target="_self">Portraits</a></li>
<li><a href="http://shutterbum.smugmug.com/Landscapes/Urban/10586173_u7VBS#736985052_P4Q6j" target="_self">Urban</a></li>
</ul>
</li>
<li class="top"><a href="http://shutterbum.smugmug.com/Portfolio/Portfolio/11385059_8V962" target="_self" class="top_link"><span>Portfolio</span></a>
</li>
<li class="top"><a href="http://shutterbum.smugmug.com/Site-Pages/How-to-Order/11384857_nba4D" target="_self" class="top_link"><span>Shop</span></a>
<ul class="sub">
<li><a href="http://shutterbum.smugmug.com/Site-Pages/How-to-Order/11384857_nba4D" target="_self">How to Order</a></li>
<li><a href="http://shutterbum.smugmug.com/Site-Pages/Products/11384852_oBQCq" target="_self">Product Descriptions</a></li>
<li><a href="http://shutterbum.smugmug.com/Site-Pages/Our-Guarantee/11384845_ZDm5a" target="_self">Our Guaruntee</a></li>
</ul>
</li>
<li class="top"><a href="http://shutterbum.smugmug.com/Other/About-Me/11220466_R3cEu" target="_self" class="top_link"><span>About</span></a>
<ul class="sub">
<li><a href="http://shutterbum.smugmug.com/Other/About-Me/11220466_R3cEu" target="_self">About Me</a></li>
</ul>
</li>
<li class="top"><a href="http://shutterbum.smugmug.com/Other/Contact/11257002_ot49J" target="_self" class="top_link"><span>Contact</span></a>
<ul class="sub">
<li><a href="http://shutterbum.smugmug.com/Other/Contact/11257002_ot49J" target="_self">Contact Me</a></li>
<li><a href="http://shutterbum.smugmug.com/Other/Services/11245177_4GQZp" target="_self">Services</a></li>
</ul>
</li>
</ul>
</div>
</center>

CSS
/*NAVBAR*/

.bg {background: url(http://shutterbum.smugmug.com/photos/800040365_X34Hx-O.gif);
}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px;
background:#fff url(http://shutterbum.smugmug.com/photos/800040352_8AKXE-O.gif)
repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
}
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link
{
splay:block;
float:left;
height:40px;
line-height:33px;
color:#bbb;
text-decoration:none;
font-size:11px;
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span
{
float:left;
font-weight:bold;
display:block;
adding:0 24px 0 12px;
height:40px;
}
.menu li a.top_link span.down
{
float:left;
display:block;
padding:0 24px 0 12px;
height:40px;
background:url(http://shutterbum.smugmug.com/photos/800040404_DM4Xt-O.gif) no-repeat right top;
}
.menu li a.top_link:hover
{
color:#000;
background: url(http://shutterbum.smugmug.com/photos/800040365_X34Hx-O.gif) no-repeat;
}
.menu li a.top_link:hover span
{
background:url(http://shutterbum.smugmug.com/photos/800040365_X34Hx-O.gif) no-repeat right top;
}
.menu li a.top_link:hover span.down
{
background:url(http://shutterbum.smugmug.com/photos/800040378_wCwgb-O.gif) no-repeat right top;
}

.menu li:hover > a.top_link
{
color:#000;
background: url(http://shutterbum.smugmug.com/photos/800040365_X34Hx-O.gif) no-repeat;
}
.menu li:hover > a.top_link span
{
background:url(http://shutterbum.smugmug.com/photos/800040365_X34Hx-O.gif) no-repeat right top;
}
.menu li:hover > a.top_link span.down
{
background:url(http://shutterbum.smugmug.com/photos/800040378_wCwgb-O.gif) no-repeat right top;
}

.menu table
{
border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;
}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul
{
position:absolute;
center:-9999px;
top:-9999px;
width:0;
height:0;
margin:0;
padding:0;
list-style:none;
}

.menu :hover ul.sub
{
left:2px;
top:40px;
right:2px;
background: #fff;
padding:3px 0;
border:1px solid #999999;
white-space:nowrap;
width:200px;
height:auto;}
.menu :hover ul.sub li
{
display:block;
height:20px;
position:relative;
float:left;
width:250px;
}
.menu :hover ul.sub li a
{
font-weight:normal;
display:block;
font-size:11px;
height:20px;
width:192px;
line-height:20px;
text-indent:5px;
color:#000;
text-decoration:none;
border:3px solid #fff;
border-width:0 0 0 3px;
}
.menu :hover ul.sub li a.fly
{
background:#fff url(http://shutterbum.smugmug.com/photos/800040350_MMDAL-O.gif) 80px 7px no-repeat;
}
.menu :hover ul.sub li a:hover
{
background:#999999;
color:#fff;
}
.menu :hover ul.sub li a.fly:hover
{
background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;
}
.menu :hover ul li:hover > a.fly
{
background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;
}

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{
left:90px;
top:-4px;
background: #fff;
padding:3px 0;
border:1px solid 999999;
white-space:nowrap;
width:93px;
-index:200;
height:auto;
}

/*END NAVBAR*/

Soppy

Mar-01-2010, 10:45 AM

Alright, tried messing with it a bit and this is the code now. HTML is the same but CSS is a bit different.

/*NAVBAR*/

.bg {background: url(http://shutterbum.smugmug.com/photos/800106685_eE26A-O.png);
}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px;
background:#fff url(http://shutterbum.smugmug.com/photos/800081475_mUKfw-O.png)
repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
}
.menu li.top {
display:block;
float:left;
position:relative;
}
.menu li a.top_link
{
splay:block;
float:center;
height:40px;
line-height:49px;
color:#bbb;
text-decoration:none;
font-size:15px;
font-weight:bold;
padding:0 0 0 20px;
cursor:pointer;
}
.menu li a.top_link span
{
float:left;
font-weight:bold;
display:block;
adding:0 24px 0 12px;
height:49px;
}
.menu li a.top_link span.down
{
float:left;
display:block;
padding:0 24px 0 12px;
height:40px;
background:url(http://shutterbum.smugmug.com/photos/800040404_DM4Xt-O.gif) no-repeat right top;
}
.menu li a.top_link:hover
{
color:#000;
background: url(http://shutterbum.smugmug.com/photos/800106685_eE26A-O.png) no-repeat;
}
.menu li a.top_link:hover span
{
background:url(http://shutterbum.smugmug.com/photos/800106685_eE26A-O.png) no-repeat right top;
}
.menu li a.top_link:hover span.down
{
background:url(http://shutterbum.smugmug.com/photos/800106689_KxvQS-O.png) no-repeat right top;
}

.menu li:hover > a.top_link
{
color:#000;
background: url(http://shutterbum.smugmug.com/photos/800106685_eE26A-O.png) no-repeat;
}
.menu li:hover > a.top_link span
{
background:url(http://shutterbum.smugmug.com/photos/800106685_eE26A-O.png) no-repeat right top;
}
.menu li:hover > a.top_link span.down
{
background:url(http://shutterbum.smugmug.com/photos/800106689_KxvQS-O.png) no-repeat right top;
}

.menu table
{
border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;
}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul
{
position:absolute;
center:-9999px;
top:-9999px;
width:0;
height:0;
margin:0;
padding:0;
list-style:none;
}

.menu :hover ul.sub
{
left:2px;
top:40px;
right:2px;
background: #fff;
padding:3px 0;
border:1px solid #999999;
white-space:nowrap;
width:200px;
height:auto;}
.menu :hover ul.sub li
{
display:block;
height:20px;
position:relative;
float:left;
width:250px;
}
.menu :hover ul.sub li a
{
font-weight:normal;
display:block;
font-size:11px;
height:20px;
width:192px;
line-height:20px;
text-indent:5px;
color:#000;
text-decoration:none;
border:3px solid #fff;
border-width:0 0 0 3px;
}
.menu :hover ul.sub li a.fly
{
background:#fff url(http://shutterbum.smugmug.com/photos/800040350_MMDAL-O.gif) 80px 7px no-repeat;
}
.menu :hover ul.sub li a:hover
{
background:#999999;
color:#fff;
}
.menu :hover ul.sub li a.fly:hover
{
background:#999999 url(http://shutterbum.smugmug.com/photos/800081473_oKsew-O.png) 80px 7px no-repeat; color:#fff;
}
.menu :hover ul li:hover > a.fly
{
background:#999999 url(http://shutterbum.smugmug.com/photos/800081473_oKsew-O.png) 80px 7px no-repeat; color:#fff;
}

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{
left:90px;
top:-4px;
background: #fff;
padding:3px 0;
border:1px solid 999999;
white-space:nowrap;
width:93px;
-index:200;
height:auto;
}

/*END NAVBAR*/

I am also trying to make the bottom of the navbar have a gradient on it (it is an image after all) but for some reason everytime I do that, instead of a nice gradient under the navbar (to look like a shadow), I get a black line. Any help with all this is really appreciated.

Soppy

Mar-01-2010, 06:22 PM

Alright, well after spending literally all day figuring this out, I have managed to make a suitable navbar for my site. The only thing now is that the last few links don't change to blue when hovered over, and the "CONTACT" box doesn't drop down to "Services" and "Contact Me" like it is supposed to. Any ideas?

Also, if anyone knows how to put a drop shadow under the navbar and the drop down boxes, please let me know as this is something I would really like to do.

P.S. The code has completely changed now so it is reposted below.

HTML
<style media="all" type="text/css">@import "/menu/menu_style.css";</style>
<div class="menu">
<ul>
<li><a href="http://shutterbum.smugmug.com/" target="_self" >HOME</a>
</li>
<li><a href="http://shutterbum.smugmug.com/galleries" target="_self" >GALLERIES</a>
<ul>
<li><a href="http://shutterbum.smugmug.com/Cars/Automotive-Photography/10583814_Jz3ne#792388620_4e5pD" target="_self">Automotive</a></li>
<li><a href="http://shutterbum.smugmug.com/Airplanes/Aviation/11173358_wPBi2#783235980_kdbbF" target="_self">Air Shows</a></li>
<li><a href="http://shutterbum.smugmug.com/Photography/Classic/10586159_JUtMj#783263713_y3THo" target="_self">Classic</a></li>
<li><a href="http://shutterbum.smugmug.com/Landscapes/Landscape/10586170_mJfxx#783218751_FySdv" target="_self">Landscape</a></li>
<li><a href="http://shutterbum.smugmug.com/People/Porterature/11173275_ZZ7na#783231124_pg6yw" target="_self">Portraits</a></li>
<li><a href="http://shutterbum.smugmug.com/Landscapes/Urban/10586173_u7VBS#736985052_P4Q6j" target="_self">Urban</a></li>
</ul>
</li>
<li><a href="http://shutterbum.smugmug.com/Portfolio/Portfolio/11385059_8V962" target="_self" >PORTFOLIO</a>
</li>
<li><a href="http://shutterbum.smugmug.com/Site-Pages/How-to-Order/11384857_nba4D" target="_self" >SHOP</a>
<ul>
<li><a href="http://shutterbum.smugmug.com/Site-Pages/How-to-Order/11384857_nba4D" target="_self">How to Order</a></li>
<li><a href="http://shutterbum.smugmug.com/Site-Pages/Products/11384852_oBQCq" target="_self">Product Descriptions</a></li>
<li><a href="http://shutterbum.smugmug.com/Site-Pages/Our-Guarantee/11384845_ZDm5a" target="_self">Our Guarantee</a></li>
</ul>
</li>
<li><a href="http://shutterbum.smugmug.com/Other/About-Me/11220466_R3cEu" target="_self" >ABOUT ME</a>
</li>
<li><a href="http://shutterbum.smugmug.com/Other/Contact/11257002_ot49J" target="_self" >CONTACT</a>
<ul>
<li><a href="http://shutterbum.smugmug.com/Other/Services/11245177_4GQZp" target="_self">Services</a></li>
<li><a href="http://shutterbum.smugmug.com/Other/Contact/11257002_ot49J" target="_self">Contact Me</a></li>
</ul>
</li>
</ul>
</div>

CSS
/*NAVBAR*/
/*TITLE TEXT*/
.menu
{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

font-size:14px;

font-weight:bold;

}

/*MAIN HEADER BACKGROUND*/
.menu ul
{

background:#333333;

height:35px;

list-style:none;

margin:0;

padding:0;

}

.menu li
{

float:left;

padding:0px;

}

/*TITLE TEXT*/
.menu li a
{

background:#333333 url("http://shutterbum.smugmug.com/photos/800434130_q52Kx-O.gif")/*seperator*/ bottom right no-repeat;

color:#cccccc;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

/*HOVER TEXT*/
.menu li a:hover, .menu ul li:hover a
{

background: #2580a2 url("http://shutterbum.smugmug.com/photos/800434123_PxNFm-O.gif") /*hover*/ bottom center no-repeat;

color:#FFFFFF;

text-decoration:none;

}

.menu li ul
{

background:#333333;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul
{

display:block;

}

.menu li li
{

background:url('images/sub_sep.gif') bottom left no-repeat;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a
{

background:none;

}

.menu li ul a
{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover, .menu li ul li:hover a
{

background:#2580a2 url('http://shutterbum.smugmug.com/photos/800434128_jFcBU-O.gif') /*hover sub*/ center left no-repeat;

border:0px;

color:#ffffff;

text-decoration:none;

}

.menu p
{

clear:left;

}

/*END NAVBAR*/

Soppy

Mar-01-2010, 08:40 PM

Alright so now I got it all working. Turns out the HTML for my header was had a link set as much larger than my header, thus blocking my navbar and making it not work.

The only way I think I can improve the navbar is to add drop shadow like previously mentioned. If anyone else has any suggestions I am open to them!

jdgphotoboy

Mar-02-2010, 06:53 AM

Alright so now I got it all working. Turns out the HTML for my header was had a link set as much larger than my header, thus blocking my navbar and making it not work.

The only way I think I can improve the navbar is to add drop shadow like previously mentioned. If anyone else has any suggestions I am open to them!
Good morning Soppy...

Absolutely the way I want my Navbar to look! :thumb Would you mind if I borrowed your code and change the color around? Also...do you have java written into this navbar? or is it just straight HTML and CSS? :dunno

But seriously like the way your site is flowing and I know that I will have a couple other questions for you as well...

Thanks,

Soppy

Mar-02-2010, 06:57 AM

Good morning Soppy...

Absolutely the way I want my Navbar to look! :thumb Would you mind if I borrowed your code and change the color around? Also...do you have java written into this navbar? or is it just straight HTML and CSS? :dunno

But seriously like the way your site is flowing and I know that I will have a couple other questions for you as well...

Thanks,

It's actually easier than picking through my code to make it work lol. I used a generator to make it and changed the colors around. Check it out here:

http://www.cssmenumaker.com/

I used the one to the top right. Definitely makes it easier. All you need to do is replace the images tags in the code with the url of your images. If you have any questions, feel free to contact me! Oh and there is no javascropt in it, just html and css.

P.S. If anyone knows how to add a border to just the bottom of the bar as well as just the outsides of the drop down boxes, I would really appreciate the code =)

jdgphotoboy

Mar-02-2010, 07:09 AM

It's actually easier than picking through my code to make it work lol. I used a generator to make it and changed the colors around. Check it out here:

http://www.cssmenumaker.com/

I used the one to the top right. Definitely makes it easier. All you need to do is replace the images tags in the code with the url of your images. If you have any questions, feel free to contact me! Oh and there is no javascropt in it, just html and css.

P.S. If anyone knows how to add a border to just the bottom of the bar as well as just the outsides of the drop down boxes, I would really appreciate the code =)

Awesome!!!! :bow Thanks so much Soppy!

I'm pretty happy with the navbar that I have going on right now...Thanks to Allen for guiding me through the whole process... But I really like the look of the horizontal navbar with dropdowns. So again...Thanks for the link and I certainly will contact you with questions that I may have...

jdgphotoboy

Mar-02-2010, 08:07 AM

Awesome!!!! :bow Thanks so much Soppy!

I'm pretty happy with the navbar that I have going on right now...Thanks to Allen for guiding me through the whole process... But I really like the look of the horizontal navbar with dropdowns. So again...Thanks for the link and I certainly will contact you with questions that I may have...

I'm back Soppy...

So I've gone and created my navbar through CSS Menu Maker and getting ready to paste it into my Smugmug... Question is...Where do I get the CSS for this new Navbar of mine? :dunno

Soppy

Mar-02-2010, 08:10 AM

I'm back Soppy...

So I've gone and created my navbar through CSS Menu Maker and getting ready to paste it into my Smugmug... Question is...Where do I get the CSS for this new Navbar of mine? :dunno

If you go into the "menu" folder, there is a file that should say menu_style or something like that. That is the CSS so just copy and paste that into SmugMug. Or you can edit the CSS right from there and click sample to see what you changed, making color changing a lot easier than having to click through so many pages.

jdgphotoboy

Mar-02-2010, 09:39 AM

Hey there again Soppy...

This is what I have as far as CSS coding that was generated from the Menu Maker site. However, it does not have the little black arrows next to the titles of each menu item as well as the border on the side like it's displayed on your site. I have the web developer for Firefox and I can see the changes that are made and where they are made, but am failing at getting those darn little arrows and borders to show...

Could you take a look and see what I am missing here...Thanks again..



<style media="all" type="text/css">@import "/menu/menu_style.css";</style>
<div class="menu">
<ul>
<li><a href="http://jdgphotography.smugmug.com/" target="_self" >Home</a>
</li>
<li><a href="" target="_self" >Categories</a>
<ul>
<li><a href="http://jdgphotography.smugmug.com/Portraits/" target="_self">Portraits</a></li>
<li><a href="http://jdgphotography.smugmug.com/Weddings/" target="_self">Weddings</a></li>
<li><a href="http://jdgphotography.smugmug.com/Events/" target="_self">Events</a></li>
<li><a href="http://jdgphotography.smugmug.com/Digital-Art-and-Design/" target="_self">Portfolio</a></li>
<li><a href="http://jdgphotography.smugmug.com/Pets/" target="_self">Pets</a></li>
</ul>
</li>
<li><a href="http://jdgphotography.smugmug.com/Client-Access/" target="_self" >Client Access</a>
</li>
<li><a href="" target="_self" >JDG Photography</a>
<ul>
<li><a href="http://jdgphotography.smugmug.com/gallery/11270439_ADtvf" target="_self">About Me</a></li>
<li><a href="http://jdgphotography.smugmug.com/gallery/11270466_E3sCX" target="_self">Contact Me</a></li>
</ul>
</li>
<li><a href="" target="_self" >Pricing</a>
<ul>
<li><a href="http://jdgphotography.smugmug.com/gallery/10654356_fMMrM" target="_self">Wedding Price List</a></li>
<li><a href="http://www.smugmug.com/gallery/10654348_HewkF" target="_self">Portrait Pricing</a></li>
<li><a href="http://jdgphotography.smugmug.com/gallery/11270815_R9GCi" target="_self">Senior Picture Pricing</a></li>
<li><a href="http://jdgphotography.smugmug.com/gallery/11270839_dfxZp" target="_self">Pet Portrait Pricing</a></li>
</ul>
</li>
<li><a href="http://jdgphotography.smugmug.com/gallery/11270853_iv68Y" target="_self" >Client Services</a>
</li>
</ul>
</div>



/* New Horizontal Dropdown Navbar */

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}

.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}

.menu li{
float:left;
padding:0px;
}

.menu li a{
background:#333333 url("images/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}

.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}

.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}

.menu li:hover ul{
display:block;

}

.menu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}

.menu li:hover li a{
background:none;

}

.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}

.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

/* End New Horizontal Dropdown Navbar */

Soppy

Mar-02-2010, 10:00 AM

Hey there again Soppy...

This is what I have as far as CSS coding that was generated from the Menu Maker site. However, it does not have the little black arrows next to the titles of each menu item as well as the border on the side like it's displayed on your site. I have the web developer for Firefox and I can see the changes that are made and where they are made, but am failing at getting those darn little arrows and borders to show...

Could you take a look and see what I am missing here...Thanks again..



<style media="all" type="text/css">@import "/menu/menu_style.css";</style>
<div class="menu">
<ul>
<li><a href="http://jdgphotography.smugmug.com/" target="_self" >Home</a>
</li>
<li><a href="" target="_self" >Categories</a>
<ul>
<li><a href="http://jdgphotography.smugmug.com/Portraits/" target="_self">Portraits</a></li>
<li><a href="http://jdgphotography.smugmug.com/Weddings/" target="_self">Weddings</a></li>
<li><a href="http://jdgphotography.smugmug.com/Events/" target="_self">Events</a></li>
<li><a href="http://jdgphotography.smugmug.com/Digital-Art-and-Design/" target="_self">Portfolio</a></li>
<li><a href="http://jdgphotography.smugmug.com/Pets/" target="_self">Pets</a></li>
</ul>
</li>
<li><a href="http://jdgphotography.smugmug.com/Client-Access/" target="_self" >Client Access</a>
</li>
<li><a href="" target="_self" >JDG Photography</a>
<ul>
<li><a href="http://jdgphotography.smugmug.com/gallery/11270439_ADtvf" target="_self">About Me</a></li>
<li><a href="http://jdgphotography.smugmug.com/gallery/11270466_E3sCX" target="_self">Contact Me</a></li>
</ul>
</li>
<li><a href="" target="_self" >Pricing</a>
<ul>
<li><a href="http://jdgphotography.smugmug.com/gallery/10654356_fMMrM" target="_self">Wedding Price List</a></li>
<li><a href="http://www.smugmug.com/gallery/10654348_HewkF" target="_self">Portrait Pricing</a></li>
<li><a href="http://jdgphotography.smugmug.com/gallery/11270815_R9GCi" target="_self">Senior Picture Pricing</a></li>
<li><a href="http://jdgphotography.smugmug.com/gallery/11270839_dfxZp" target="_self">Pet Portrait Pricing</a></li>
</ul>
</li>
<li><a href="http://jdgphotography.smugmug.com/gallery/11270853_iv68Y" target="_self" >Client Services</a>
</li>
</ul>
</div>



/* New Horizontal Dropdown Navbar */

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}

.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}

.menu li{
float:left;
padding:0px;
}

.menu li a{
background:#333333 url("images/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}

.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}

.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}

.menu li:hover ul{
display:block;

}

.menu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}

.menu li:hover li a{
background:none;

}

.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}

.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

/* End New Horizontal Dropdown Navbar */

Alright, it's easy to fix your issue.
First, upload the images in the image folder you got from the generator. Once you do that, make note of the url to each image, and the original name of the image.

Then, you need to go through the css and find places where things like (/images/separator.gif) are and put the corresponding url in instead of those addresses. Right now, it doesn't have the images to base the design off of is all. Do this for all the images. I recommend copying the CSS into word of something and using the find and replace feature so you don't miss anything. Best of luck! If you have any more questions, I'll be here.

Soppy

Mar-02-2010, 10:01 AM

Also, make the HTML size of your banner smaller because right now the banner link is overlapping the navbar, making it not work correctly.

jdgphotoboy

Mar-02-2010, 10:11 AM

Hey there again Soppy...

This is what I have as far as CSS coding that was generated from the Menu Maker site. However, it does not have the little black arrows next to the titles of each menu item as well as the border on the side like it's displayed on your site. I have the web developer for Firefox and I can see the changes that are made and where they are made, but am failing at getting those darn little arrows and borders to show...

Could you take a look and see what I am missing here...Thanks again..

I figured out what you did Soppy... It was a string of .gif's that you had in a few sections. So process of elimination using the Web Developer I was able to figure out how you coded your Navbar. Thanks again for your help my friend.:ivar

Soppy

Mar-02-2010, 10:15 AM

Yup you got it. You do need to resize the html part of your banner though. You can still get the list to drop down but you need to just put your cursor on the bottom most part of the banner as it is now. That's the last thing and your navbar should be done :clap

jdgphotoboy

Mar-02-2010, 10:59 AM

Yup you got it. You do need to resize the html part of your banner though. You can still get the list to drop down but you need to just put your cursor on the bottom most part of the banner as it is now. That's the last thing and your navbar should be done :clap

What size should I make the banner? I'm looking at changing the height correct? :dunno

jdgphotoboy

Mar-02-2010, 11:12 AM

What size should I make the banner? I'm looking at changing the height correct? :dunno

Thanks once again...the HTML height of my banner was set to 150 versus 120 in the CSS section. So the dropdowns work much better now... :devbobo Now I'm cooking with fire!!!

Soppy

Mar-02-2010, 11:12 AM

What size should I make the banner? I'm looking at changing the height correct? :dunno

Yup you got it. It took me a surprising amount of time to figure out that was my issue when I did it yesterday lol. Glad you got it all set up now.

jdgphotoboy

Mar-02-2010, 11:23 AM

Yup you got it. It took me a surprising amount of time to figure out that was my issue when I did it yesterday lol. Glad you got it all set up now.

Now I have to adjust the colors and fonts to polish it up a little bit. But after all of this I'm just going to let the Navbar be...

Soppy

Mar-02-2010, 11:32 AM

Haha, yeah. It took me literally all of yesterday to get mine how it was acceptable. I didn't bother adjusting the colors on the gif files because at that point I figured it wasn't worth messing with any more. Glad to have it as I do now, unless anyone knows how to do a border on the bottom and sides of it...

jdgphotoboy

Mar-03-2010, 12:04 PM

Haha, yeah. It took me literally all of yesterday to get mine how it was acceptable. I didn't bother adjusting the colors on the gif files because at that point I figured it wasn't worth messing with any more. Glad to have it as I do now, unless anyone knows how to do a border on the bottom and sides of it...
What's going on Soppy...

A couple of items for you my friend...First off...How do you have your banner set up to have the gradient at the top? and what are the dimensions to have it stretch all the way across the monitor?

I really like the clean look of your homepage and now that I've been spending practically every waking moment on this frickin' navbar, I have over worked it to a point to where it just looks sloppy. Also, what theme are you using for the background on the rest of your pages including your homepage? I too want to have a little continuity among all the pages on my site. So any thoughts or insight to this would be awesome...:thumb

Lastly...where did you get those cool buttons on the bottom of your homepage. I probably don't have a use for them right now...but I thought they were a nice touch.

Soppy

Mar-03-2010, 12:22 PM

I actually don't remember where I got those buttons (despite that it was like 2 days ago). Just look for social media icons on google. Mine were originally white in the middle and I photoshopped em to be blue like they are now.

I did the header by making a repeating background of about 20px wide and then using css to make it repeat indefinitely (css code is like, repeat: x, or something like that). There are threads on here how to do it, in fact I think I asked about it. The gradient I just did in photoshop, but you can do any repeating design you want really.

Then the header is just a transparent png file with the text, logo, and drop shadows on it that floats over the background.

I am using the basic SmugMug gray theme. Though it went well to make a good photo background as well as not be too dark or bright on the eyes.

Hope this helps out man.

jdgphotoboy

Mar-03-2010, 01:07 PM

:hung:devbobo I CAN'T FLIPPIN' BELIEVE IT! I WENT BACK INTO MY ADVANCED CUSTOMIZER AND MORE THAN HALF OF MY CSS IS MISSING!!!! AAAAAARRRRRRRGGGGGGGHHHHHH! LITERALLY EVERY SINGLE PAGE IS NOW JACKED UP!!!! IT'S LIKE STARTING FROM SCRATCH....

THAT'S WHAT I GET FOR NOT SAVING IT AS I WENT.... TALK ABOUT BEIN PISSED OFF!!!!

SummitPhotoNH

Mar-03-2010, 01:16 PM

Navigation Bar (navbar) on the left...seems to be a relentless challenge...

I want to make good use of my ability to customize my smugmug page. Specifically, I want to have a "navbar" on the left, and place the content (a gallery) on the right.

Somebody out there MUST know how to do this!?

You can visit my own website http://www.summitphotographynh.com (http://www.summitphotographynh.com/) to see a specific example of what I'm looking to build (to see an example of what I'm trying to pull off, once you get to my site click on one of the links on the left, such as "NH DETAILS"..there you'll see what I'm trying to create in Smugmug...by the way, my smug site is www.summitphotonh.smugmug.com) (http://www.summitphotonh.smugmug.com)/).

Sooo....the million dollar question IS:

How do I place my navbar on the left, and my content / gallery on the right instead of letting smugmug utilize the entire width of the browser? :scratch

I know that there must be someone out there who wants a challenge...volunteer suggestions welcome, example sites welcome, but if you want to get paid for this service YOU MUST BE 100% CERTAIN that the end result will look EXACTLY like the example I provided above from my own website...

I await your responses! Private messages okay, my email is matthew@summitphotographynh.com and replies to this thread are cool too...I think!

Cheers!:thumb

Soppy

Mar-03-2010, 01:50 PM

:hung:devbobo I CAN'T FLIPPIN' BELIEVE IT! I WENT BACK INTO MY ADVANCED CUSTOMIZER AND MORE THAN HALF OF MY CSS IS MISSING!!!! AAAAAARRRRRRRGGGGGGGHHHHHH! LITERALLY EVERY SINGLE PAGE IS NOW JACKED UP!!!! IT'S LIKE STARTING FROM SCRATCH....

THAT'S WHAT I GET FOR NOT SAVING IT AS I WENT.... TALK ABOUT BEIN PISSED OFF!!!!

No worries man, we'll get it back up and running. I still have all of my code so we can go off that. I go on break for all of next week so I will be able to help you as well, as I will be finishing my site over that time. We'll get it goin again.

smileabunch

Mar-04-2010, 12:51 PM

Hi. I am really close to finishing this whole customization of my site thing, but I have 2 questions about the navbar.

I am using this both as a site for my soon-to-be-photography-business as well as it's initial use as a sharing/backup site for all my personal pictures. I have worked it out really well so that they are separate, but I would like to only show the navbar on the pages that are client related. I am assuming that means that I need to set it to display:none and then change the display for the 4 pages I want it to show on, but I can't figure out how to get it to show. I have tried display:block and display:inline, but neither have worked. Anyone know what code to use for showing the navbar? The pages I want it on are .homepage .category_the_photos .category_Client_Proofing and .category_Site_tools

Also, I would like to use a graphic for the navbar, and I am sure it has been discussed on the forum, can anyone point me in the right direction of where to find info on using a clickable, graphical navbar?

Thank you!
Jen
www.sethandjen.smugmug.com (http://www.sethandjen.smugmug.com)

bnickeson

Mar-04-2010, 04:21 PM

Hi everyone, I apologize in advance if this question has already been answered elsewhere, but I'm not quite sure I'm in the mood to look through 460 pages of information. :D

I have two questions about my navbar:

1. If you go to my site, open up one of my galleries (one of the Yellowstone ones is fine). Then go to the navbar and hover over galleries, then hover over Trips and Travel. The third level drop down is behind the images on the page! Does someone have the code to rectify this?

2. You'll also notice that the third level drop down does not have the same color formatting as the second level, despite my best efforts to write the CSS identical for both of them. Could someone debug my code below to fix my ignorance? :thumb

Thanks

/******* BEGIN NAVBAR CODE *********/

/*Navbar CSS*/
/* style the outer div to give it width */
.menu {
width:800px;
font-size:0.85em;
padding-bottom:30px;
margin: 0 auto;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
text-align:center;
}
.menu ul ul {
width:150px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:160px;
_width:160px;
position:relative;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12px;
text-decoration:none;
color:#D9D9D9;
width:157px;
_width:157px;
height:25px;
background-color:#111;
line-height:25px;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#111;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#000;
}
.menu ul ul :hover > a.drop {
background:#000;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#111;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#000;
}
.menu ul ul ul :hover > a {
background:#000;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
width:160px;
_width:160px;
}

/* position the third level flyout menu */
.menu ul ul ul{
left:160px;
top:0;
width:160px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-160px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#000;
color:#DDD;
height:auto;
line-height:1em;
padding:10px 5px 10px 5px;
width:150px;
_width:150px;
}

/* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#000;
color:#DDD;
height:auto;
line-height:1em;
padding:10px 5px 10px 5px;
width:150px;
_width:150px;
}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background:#000;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#000;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}

/*********** End Navbar Code ************/

Allen

Mar-04-2010, 04:22 PM

Hi. I am really close to finishing this whole customization of my site thing, but I have 2 questions about the navbar.

I am using this both as a site for my soon-to-be-photography-business as well as it's initial use as a sharing/backup site for all my personal pictures. I have worked it out really well so that they are separate, but I would like to only show the navbar on the pages that are client related. I am assuming that means that I need to set it to display:none and then change the display for the 4 pages I want it to show on, but I can't figure out how to get it to show. I have tried display:block and display:inline, but neither have worked. Anyone know what code to use for showing the navbar? The pages I want it on are .homepage .category_the_photos .category_Client_Proofing and .category_Site_tools

Also, I would like to use a graphic for the navbar, and I am sure it has been discussed on the forum, can anyone point me in the right direction of where to find info on using a clickable, graphical navbar?

Thank you!
Jen
www.sethandjen.smugmug.com (http://www.sethandjen.smugmug.com)
Are you referring to the breadcrumb or navbar?
I see all this referring to the breadcrumb.

.notLoggedIn .homepage #breadCrumbTrail {display: none;}
.notLoggedIn .category_the_photos #breadCrumbTrail {display: none;}
.notLoggedIn .category_Client_Proofing #breadCrumbTrail {display: none;}
.notLoggedIn .category_Site_Tools #breadCrumbTrail {display: none;}

Will this work?

#breadCrumbTrail {display: none;}
.category_Client_Proofing #breadCrumbTrail,
.category_Site_tools #breadCrumbTrail,
.category_the_photos #breadCrumbTrail {display: block;}

toyah

Mar-05-2010, 04:42 AM

I have a custom text banner and navigation bar on my site that I added through the easy customiser.

What I would like to do, is to not display this on the Hawthorn category and the galleries in that category. What is the easiest way to do this?

my site is www.stramash.smugmug.com

Allen

Mar-05-2010, 05:45 AM

I have a custom text banner and navigation bar on my site that I added through the easy customiser.

What I would like to do, is to not display this on the Hawthorn category and the galleries in that category. What is the easiest way to do this?

my site is www.stramash.smugmug.com (http://www.stramash.smugmug.com)
This will hide both, add to "advanced site-wide customization" CSS

.category_Hawthorn #customHeaderContainer {display: none;}

toyah

Mar-05-2010, 03:44 PM

This will hide both, add to "advanced site-wide customization" CSS

.category_Hawthorn #customHeaderContainer {display: none;}

Thank you so much!

hombredelmonte

Mar-07-2010, 03:39 PM

Hi forum,

I'm hoping you can help me please. I'm designing a website and I want to make the transfer from my site to my photos page (hosted on smugmug) as seamless as possible. The body background is now fine, but I need to make the navbar on smugmug as similar as possible to the rest of my site.

Website: www.ayearinmotion.com
Smugmug: photos.ayearinmotion.com

I have entered the following code on my custom css on the Advanced Customisation:

#customNavContainer { background-color:#111; padding-top: 0px; width: auto; line-height:36px; text-align: center; }
#customNav { font-family: Carbontype, Calibri, Georgia, serif !important; font-size: 16px; color: #53F73A !important; list-style-type: none; padding-left: 10px; padding-bottom: 5px; margin: 0; }
#customNav li{ display: inline; }
#customNav li a, #customNav li a:active, #customNav li a:visited, #customNav li a:link { font-family: Carbontype, Calibri, Georgia, serif !important; font-size: 16px; color: #53F73A !important; padding-left: 2px; padding-bottom: 5px; text-decoration: none !important; }
#customNav li a:hover { font-family: Carbontype, Calibri, Georgia, serif !important; font-size: 16px; color: #ffffff !important; text-decoration: none !important; }
#customHeaderContainer { padding-top: 0px; margin: 0 auto; padding-left: 0px; padding-right: 0px; overflow: visible !important; height: 250px; width: auto; }

The fonts and text colour are fine, as is the general height of the header (including both logo & navbar).

1. I am struggling with getting a black bar of 36px height to stretch fully across the screen regardless of resolution / width settings on browsers.
2. No matter what I do, I still have a small grey bar (color: #333333) above my black bar. How can I get rid of that so that the black is at the very top of the screen?
3. I've centred the menu as I grew frustrated of trying to get it to start 10px in from the left of the left handside of my logo. Can this be done?
4. I want each menu option to be as wide as the menu title requires. And I want a 2px space between each menu option. From hovering the mouse, I think the width is setting up nicely. But the space between options is way too wide. How can I fix this?

Dgrin forum, I have been struggling with this for a few days now, and my evolutionary leap came with the custom css today. But, I feel like I could wait a hundred years before making it to the finish. Please help; it would be much appreciated.

Tony, the Man from Del Monte

Allen

Mar-07-2010, 04:34 PM

Hi forum,

I'm hoping you can help me please. I'm designing a website and I want to make the transfer from my site to my photos page (hosted on smugmug) as seamless as possible. The body background is now fine, but I need to make the navbar on smugmug as similar as possible to the rest of my site.

Website: www.ayearinmotion.com (http://www.ayearinmotion.com)
Smugmug: photos.ayearinmotion.com

I have entered the following code on my custom css on the Advanced Customization:

#customNavContainer { background-color:#111; padding-top: 0px; width: auto; line-height:36px; text-align: center; }
#customNav { font-family: Carbontype, Calibri, Georgia, serif !important; font-size: 16px; color: #53F73A !important; list-style-type: none; padding-left: 10px; padding-bottom: 5px; margin: 0; }
#customNav li{ display: inline; }
#customNav li a, #customNav li a:active, #customNav li a:visited, #customNav li a:link { font-family: Carbontype, Calibri, Georgia, serif !important; font-size: 16px; color: #53F73A !important; padding-left: 2px; padding-bottom: 5px; text-decoration: none !important; }
#customNav li a:hover { font-family: Carbontype, Calibri, Georgia, serif !important; font-size: 16px; color: #ffffff !important; text-decoration: none !important; }
#customHeaderContainer { padding-top: 0px; margin: 0 auto; padding-left: 0px; padding-right: 0px; overflow: visible !important; height: 250px; width: auto; }

The fonts and text colour are fine, as is the general height of the header (including both logo & navbar).

1. I am struggling with getting a black bar of 36px height to stretch fully across the screen regardless of resolution / width settings on browsers.
2. No matter what I do, I still have a small grey bar (color: #333333) above my black bar. How can I get rid of that so that the black is at the very top of the screen?
3. I've centred the menu as I grew frustrated of trying to get it to start 10px in from the left of the left handside of my logo. Can this be done?
4. I want each menu option to be as wide as the menu title requires. And I want a 2px space between each menu option. From hovering the mouse, I think the width is setting up nicely. But the space between options is way too wide. How can I fix this?

Dgrin forum, I have been struggling with this for a few days now, and my evolutionary leap came with the custom css today. But, I feel like I could wait a hundred years before making it to the finish. Please help; it would be much appreciated.

Tony, the Man from Del Monte
See if adding the red does it for #3.

#customNav { position: relative; left: -240px;
font-family: Carbontype, Calibri, Georgia, serif !important;
font-size: 16px; color: #53F73A !important; list-style-type:
none; padding-left: 10px; padding-bottom: 5px; margin: 0; }

Not sure about #1 and #2, seems you solved them.
#4 don't quite understand.

hombredelmonte

Mar-07-2010, 04:42 PM

See if adding the red does it for #3.

#customNav { position: relative; left: -240px;
font-family: Carbontype, Calibri, Georgia, serif !important;
font-size: 16px; color: #53F73A !important; list-style-type:
none; padding-left: 10px; padding-bottom: 5px; margin: 0; }

Not sure about #1 and #2, seems you solved them.
#4 don't quite understand.

Hi Allen,

Thanks for the fast response.

For #1, true, the black bar is all across the screen. Success!
For #2, I'm still getting a small grey bar above my black bar.
For #3, I added the red code, but that is not working. The starting point varies depending on which PC I use to view it. Each PC has different resolution settings.
For #4, the space between "Home" and "Who Are We?" is quite wide apart. Can I narrow this with some custom CSS?

Thanks again,

Tony

jdgphotoboy

Mar-08-2010, 09:36 AM

No worries man, we'll get it back up and running. I still have all of my code so we can go off that. I go on break for all of next week so I will be able to help you as well, as I will be finishing my site over that time. We'll get it goin again.
What's going on Soppy?! Hope you had a great weekend out in sunny Florida...

Alright...I've done a considerable amount of work replacing and adding too my site that I had lost late last week. The problem I'm having now is the banner. I mimicked your code, even created a banner .png that should repeat in the background. However, there is something preventing the repeating .png from showing in the CSS that I believe that I can't seem to find. I even used the Web Developer, copied your banner CSS and pasted it into my CSS. Your banner text and logo show up fine...but to no avail, your repeating .png is not showing either. So I don't know what's causing this to happen, or should I say...not to happen. :dunno

smileabunch

Mar-09-2010, 11:41 AM

Are you referring to the breadcrumb or navbar?
I see all this referring to the breadcrumb.

.notLoggedIn .homepage #breadCrumbTrail {display: none;}
.notLoggedIn .category_the_photos #breadCrumbTrail {display: none;}
.notLoggedIn .category_Client_Proofing #breadCrumbTrail {display: none;}
.notLoggedIn .category_Site_Tools #breadCrumbTrail {display: none;}

Will this work?

#breadCrumbTrail {display: none;}
.category_Client_Proofing #breadCrumbTrail,
.category_Site_tools #breadCrumbTrail,
.category_the_photos #breadCrumbTrail {display: block;}

Allen...thanks for chiming in...sorry for the delay in getting back on here...my brain needed a break from html and css and website customizing. I have the breadcrumb set up to display on all of the pages except my client ones (because the navbar takes clients everywhere I want them to have access to) and it is working great that way. I don't want the navbar on the family and friends galleries, though because they wont use the links at all (and the breadcrumb is sufficient for taking them where they need to go). Your suggestion is exactly what I am looking for, but for the navbar.

I tried this code:

#navcontainer {display: none;}
.category_Client_Proofing #navcontainer,
.category_Site_tools #navcontainer,
.category_the_photos #navcontainer,
.homepage #navcontainer {display: block;}

But it didn't work. the navbar showed on all the pages except the client proofing gallery, site tools category pages, and the photos category...exact opposite of what I needed. It did show on the homepage though. I am wondering if the error is happening in the {display:xxxx} setting. With the navbar does it need to be inline or list or something instead of block?

Thanks!

Jen
www.sethandjen.smugmug.com (http://www.sethandjen.smugmug.com)

Allen

Mar-09-2010, 01:34 PM

Allen...thanks for chiming in...sorry for the delay in getting back on here...my brain needed a break from html and css and website customizing. I have the breadcrumb set up to display on all of the pages except my client ones (because the navbar takes clients everywhere I want them to have access to) and it is working great that way. I don't want the navbar on the family and friends galleries, though because they wont use the links at all (and the breadcrumb is sufficient for taking them where they need to go). Your suggestion is exactly what I am looking for, but for the navbar.

I tried this code:

#navcontainer {display: none;}
.category_Client_Proofing #navcontainer,
.category_Site_tools #navcontainer,
.category_the_photos #navcontainer,
.homepage #navcontainer {display: block;}

But it didn't work. the navbar showed on all the pages except the client proofing gallery, site tools category pages, and the photos category...exact opposite of what I needed. It did show on the homepage though. I am wondering if the error is happening in the {display:xxxx} setting. With the navbar does it need to be inline or list or something instead of block?

Thanks!

Jen
www.sethandjen.smugmug.com (http://www.sethandjen.smugmug.com)
You have a nav at the top and the bottom, you can not use the same div
id in both, only one allowed per page. Name the one at the bottom
#navcontainer2. Then maybe we can make some sense out of this.

Assign both the same class so your one set of CSS will apply to both.

top nav
<div id="navcontainer" class="myNav">
Bottom nav
<div id="navcontainerv2" class="myNav">

Then change #navcontainer to .myNav in the CSS

/*------------------------------------------------------
-------Navbar Settings----------------------------------
------------------------------------------------------*/
.myNav ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

.myNav ul li {
display: inline;
}

.myNav ul li a {
text-decoration: none;
padding: .2em 5em;
color: #3689d5;
background-color: #none;
}

.myNav ul li a:hover {
color: #3689d5;
background-color: #none;
}

Do you want both or only one to appear on different pages? And what pages?

smileabunch

Mar-09-2010, 02:38 PM

Do you want both or only one to appear on different pages? And what pages?

I wondered about that. I have made the changes you listed above. I want both navbars to appear ONLY on the following pages (well, sets of pages really...I want them to show in all the galleries within those categories as well):

.homepage
.category_the_photos
.category_Client_Proofing
.category_Site_Tools

Thanks so much for your help!!

Jen
www.sethandjen.smugmug.com (http://www.sethandjen.smugmug.com)

Allen

Mar-09-2010, 02:51 PM

I wondered about that. I have made the changes you listed above. I want both navbars to appear ONLY on the following pages (well, sets of pages really...I want them to show in all the galleries within those categories as well):

.homepage
.category_the_photos
.category_Client_Proofing
.category_Site_Tools

Thanks so much for your help!!

Jen
www.sethandjen.smugmug.com (http://www.sethandjen.smugmug.com)
Try this

#navcontainer,
#navcontainer2 {display:none;}
.homepage #navcontainer,
.homepage #navcontainer2,
.category_the_photos #navcontainer,
.category_the_photos #navcontainer2,
.category_Client_Proofing #navcontainer,
.category_Client_Proofing #navcontainer2,
.category_Site_Tools #navcontainer,
.category_Site_Tools #navcontainer2 {display: block;}

But it might be cleaner to show everywhere and turn off in this one category.
family-and-friends
It looks like that's the only category not covered.

smileabunch

Mar-09-2010, 06:37 PM

Try this

#navcontainer,
#navcontainer2 {display:none;}
.homepage #navcontainer,
.homepage #navcontainer2,
.category_the_photos #navcontainer,
.category_the_photos #navcontainer2,
.category_Client_Proofing #navcontainer,
.category_Client_Proofing #navcontainer2,
.category_Site_Tools #navcontainer,
.category_Site_Tools #navcontainer2 {display: block;}

But it might be cleaner to show everywhere and turn off in this one category.
family-and-friends
It looks like that's the only category not covered.

Yeah...that would definitely be easier, but the "family and friends" isn't one category with subcategories. It is hundreds of galleries in more than 30 categories (and growing more all the time), so it is actually cleaner to turn it on in the 4 sets above. The code you gave me was perfect, with the exception of one page. The .galleries page still has the navbar. I tried adding

.galleries #navcontainer,
.galleries #navcontainer2 {display:none;}

but the navbar was still there. The direct link to the page not working is http://sethandjen.smugmug.com/galleries (there is no other way to get there without a password).

THANK YOU THANK YOU for your help!
Jen Tate

Allen

Mar-09-2010, 08:38 PM

Yeah...that would definitely be easier, but the "family and friends" isn't one category with subcategories. It is hundreds of galleries in more than 30 categories (and growing more all the time), so it is actually cleaner to turn it on in the 4 sets above. The code you gave me was perfect, with the exception of one page. The .galleries page still has the navbar. I tried adding

.galleries #navcontainer,
.galleries #navcontainer2 {display:none;}

but the navbar was still there. The direct link to the page not working is http://sethandjen.smugmug.com/galleries (there is no other way to get there without a password).

THANK YOU THANK YOU for your help!
Jen Tate
Add this after the group.

.galleries #navcontainer,
.galleries #navcontainer2 {display:none;}

The galleries is a duplicate homepage and has two class names, galleries
and homepage. So .homepage will apply to the homepage and all dup
homepages. To apply specifically to the .galleries page it's CSS has to be
after the .homepage CSS.

lizstabbertphoto

Mar-10-2010, 06:48 PM

I've goobered up my navbar and lack the skills to fix it :P The last item is supposed to be "Discuss Your Dream" and be flush with the other items. The navbar is also supposed to be even with the header image. Whenever I change the text it ends up as

Discuss
your dream

and the navbar ends short of where it needs to be :P

Allen

Mar-10-2010, 06:56 PM

I've goobered up my navbar and lack the skills to fix it :P The last item is supposed to be "Discuss Your Dream" and be flush with the other items. The navbar is also supposed to be even with the header image. Whenever I change the text it ends up as

Discuss
your dream

and the navbar ends short of where it needs to be :P No idea where you got your nav CSS where it is but change the red and see if it works.

#menu {
width: 785px;
height: 30px;
margin: -41px auto 0 auto;
}

#menu a {
display: block;
float: left;
width: auto;
padding: 7px 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #ffffff;
font-weight: bold;
background: #402504;
[COLOR=red]min-width: 132px;
}

lizstabbertphoto

Mar-10-2010, 08:20 PM

No idea where you got your nav CSS where it is but change the red and see if it works.

#menu {
width: 785px;
height: 30px;
margin: -41px auto 0 auto;
}

#menu a {
display: block;
float: left;
width: auto;
padding: 7px 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #ffffff;
font-weight: bold;
background: #402504;
[COLOR=red]min-width: 132px;
}

I have no idea how the CSS got that way and I'm probably the one that did it LOL That got the text in line properly but the navbar is still a little short.

Allen

Mar-10-2010, 09:01 PM

I have no idea how the CSS got that way and I'm probably the one that did it LOL That got the text in line properly but the navbar is still a little short.
Oops, notice I left off the [/color] on this. Change the R/L padding to 10px

padding: 7px 10px;
#menu a {
display: block;
float: left;
width: auto;
padding: 7px [color=red]10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #ffffff;
font-weight: bold;
background: #402504;
min-width: 132px;}

Soppy

Mar-10-2010, 09:12 PM

What's going on Soppy?! Hope you had a great weekend out in sunny Florida...

Alright...I've done a considerable amount of work replacing and adding too my site that I had lost late last week. The problem I'm having now is the banner. I mimicked your code, even created a banner .png that should repeat in the background. However, there is something preventing the repeating .png from showing in the CSS that I believe that I can't seem to find. I even used the Web Developer, copied your banner CSS and pasted it into my CSS. Your banner text and logo show up fine...but to no avail, your repeating .png is not showing either. So I don't know what's causing this to happen, or should I say...not to happen. :dunno

Hmmm... It seems that it is repeating, but just below your navbar. Try checking the padding of it, also see if putting the code for the banner before the code for the navbar fixes t. If image location or ordering isn't the issue, I really don't know... Let me know if that works though.

jdgphotoboy

Mar-11-2010, 07:07 AM

Quote:
Originally Posted by jdgphotoboy
What's going on Soppy?! Hope you had a great weekend out in sunny Florida...

Alright...I've done a considerable amount of work replacing and adding too my site that I had lost late last week. The problem I'm having now is the banner. I mimicked your code, even created a banner .png that should repeat in the background. However, there is something preventing the repeating .png from showing in the CSS that I believe that I can't seem to find. I even used the Web Developer, copied your banner CSS and pasted it into my CSS. Your banner text and logo show up fine...but to no avail, your repeating .png is not showing either. So I don't know what's causing this to happen, or should I say...not to happen. :dunno

Hmmm... It seems that it is repeating, but just below your navbar. Try checking the padding of it, also see if putting the code for the banner before the code for the navbar fixes t. If image location or ordering isn't the issue, I really don't know... Let me know if that works though. __________________
ShutterBum Photography

Good morning Allen,

Seeing if I could have some more of your wisdom sent my way being that your the CSS God here on DGrin... :bow

lizstabbertphoto

Mar-11-2010, 10:36 AM

Oops, notice I left off the [/color] on this. Change the R/L padding to 10px

padding: 7px 10px;
#menu a {
display: block;
float: left;
width: auto;
padding: 7px [COLOR=red]10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #ffffff;
font-weight: bold;
background: #402504;
min-width: 132px;}

Ah ha! yep I totally missed that! Plugged that in and now it's working like a charm! Thanks again Allen!:barb

jgrphoto

Mar-13-2010, 01:18 PM

Just trying to get my basic site appearance up and running here - www.josephgrobertson.com (http://www.josephgrobertson.com)

I'm having a couple issues with the navbar, and I haven't been able to figure out the answer.

For the navbar, all I have done is taken the navbar tutorial and inserted the css/html code to produce it. I also have adjusted the font, size, spacing and colors a bit.

The problems I am trying to address:

Currently the navcontainer appears to be cutting off the bottom part of my header graphic. I would like to increase the space between my header and my navbar (also, would like to increase the space above the header as well). The header was simply added via the easy customizer with a .png.

When hovering over any of the links in the navbar, the highlight box is too big for my liking - however I want to keep the overall spacing between the links.

In the very near future, instead of a highlight color when you mouse over, I would like to have a graphic (the same one in the logo) as the highlight mechanism - i have the png for this, just no idea how to implement.

Finally, I would like to add a simple black line below the navbar.

Any help would be appreciated.

thanks,
Joseph Robertson

jfriend

Mar-13-2010, 01:27 PM

Just trying to get my basic site appearance up and running here - www.josephgrobertson.com (http://www.josephgrobertson.com)

I'm having a couple issues with the navbar, and I haven't been able to figure out the answer.

For the navbar, all I have done is taken the navbar tutorial and inserted the css/html code to produce it. I also have adjusted the font, size, spacing and colors a bit.

The problems I am trying to address:

Currently the navcontainer appears to be cutting off the bottom part of my header graphic. I would like to increase the space between my header and my navbar (also, would like to increase the space above the header as well). The header was simply added via the easy customizer with a .png.

When hovering over any of the links in the navbar, the highlight box is too big for my liking - however I want to keep the overall spacing between the links.

In the very near future, instead of a highlight color when you mouse over, I would like to have a graphic (the same one in the logo) as the highlight mechanism - i have the png for this, just no idea how to implement.

Finally, I would like to add a simple black line below the navbar.

Any help would be appreciated.

thanks,
Joseph RobertsonI'd suggest removing the line in red and modifying the line in green to what is shown:

#navcontainer ul li a {
text-decoration: none;
padding: .1em 3em;
color: #000000;
background-color: #ffffff;
font-family: "Adobe Caslon Pro", verdana, tahoma, helvetica, arial, sans-serif;
font-size: 1.25em;
font-weight: bold;
}

jgrphoto

Mar-13-2010, 01:33 PM

I'd suggest removing the line in red and modifying the line in green to what is shown:

#navcontainer ul li a {
text-decoration: none;
padding: .1em 3em;
color: #000000;
background-color: #ffffff;
font-family: "Adobe Caslon Pro", verdana, tahoma, helvetica, arial, sans-serif;
font-size: 1.25em;
font-weight: bold;
}

Removing the background color did fix the overlapping problem (thanks!), but changing the padding affects the spacing of the links (which I want to keep where they are). I'm not sure exactly what those two padding numbers are individually affecting.

jfriend

Mar-13-2010, 01:36 PM

Removing the background color did fix the overlapping problem (thanks!), but changing the padding affects the spacing of the links (which I want to keep where they are). I'm not sure exactly what those two padding numbers are individually affecting. No, I only changed the top and bottom padding number which does not affect the left/right spacing. When two numbers exist for padding, the first is top/bottom and the second is left/right. It was the large top and bottom padding that you used that was causing the navbar to exceed it boundaries so I recommend you make that smaller without impacting the left/right spacing.

jgrphoto

Mar-13-2010, 01:45 PM

No, I only changed the top and bottom padding number which does not affect the left/right spacing. When two numbers exist for padding, the first is top/bottom and the second is left/right. It was the large top and bottom padding that you used that was causing the navbar to exceed it boundaries so I recommend you make that smaller without impacting the left/right spacing.

Hmm. Well it appeared to decrease the spacing between the links. -edit: oh wait, I guess I accidentally lied...the spacing looks good with those numbers, though the highlight box is a bit wide for my taste.

On the header, I discovered the header tutorial and added the css/html, and am now fiddling with it to add some space above and below the header. Except I'm not sure what to do to get it to center.

jfriend

Mar-13-2010, 01:49 PM

Hmm. Well it appeared to decrease the spacing between the links.

On the header, I discovered the header tutorial and added the css/html, and am now fiddling with it to add some space above and below the header. Except I'm not sure what to do to get it to center. It would help you a lot if you knew the basics of margins and padding. A simple Google search will give you lots of helpful pages.

If you just want some space BELOW your banner, then change the line in green:

#my_banner {
width: 750px;
height: 150px;
margin: 0 auto 50px auto; /* top right bottom left */
background: url(http://www.josephgrobertson.com/photos/809272782_QA7nF-S.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://www.josephgrobertson.com/photos/809272782_QA7nF-S.png');
}

Your version of that line told the browser to put 50px around all four edges which ruined the center and added 50px you didn't need at the top too. This new version will have these margins:

top: 0
right: auto
bottom: 50px
left: auto

The two auto values cause it to center.

jgrphoto

Mar-13-2010, 01:59 PM

It would help you a lot if you knew the basics of margins and padding. A simple Google search will give you lots of helpful pages.

If you just want some space BELOW your banner, then change the line in green:

#my_banner {
width: 750px;
height: 150px;
margin: 0 auto 50px auto; /* top right bottom left */
background: url(http://www.josephgrobertson.com/photos/809272782_QA7nF-S.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://www.josephgrobertson.com/photos/809272782_QA7nF-S.png');
}
Your version of that line told the browser to put 50px around all four edges which ruined the center and added 50px you didn't need at the top too. This new version will have these margins:

top: 0
right: auto
bottom: 50px
left: auto

The two auto values cause it to center.

Ok, my bad on the margin/padding situation - think I got the gist of it now. Got the highlighting boxes fair enough.

The banner still doesn't seem to be centering, even with left/right set to auto.

jfriend

Mar-13-2010, 02:04 PM

Ok, my bad on the margin/padding situation - think I got the gist of it now. Got the highlighting boxes fair enough.

The banner still doesn't seem to be centering, even with left/right set to auto.To center, you have to accurately enter the height and width of your banner to match that of the actual image:

#my_banner {
width: 372px;
height: 145px;
margin: 50px auto 30px auto;
background: url(http://www.josephgrobertson.com/photos/809272782_QA7nF-S.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://www.josephgrobertson.com/photos/809272782_QA7nF-S.png');
}

Please add your site link to your dgrin signature so I don't have to scroll back through the thread to find it every time you ask a question.

jgrphoto

Mar-13-2010, 02:10 PM

To center, you have to accurately enter the height and width of your banner to match that of the actual image:

#my_banner {
width: 372px;
height: 145px;
margin: 50px auto 30px auto;
background: url(http://www.josephgrobertson.com/photos/809272782_QA7nF-S.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://www.josephgrobertson.com/photos/809272782_QA7nF-S.png');
}
Please add your site link to your dgrin signature so I don't have to scroll back through the thread to find it every time you ask a question.

Ah yea, figured that out right after I posted...but couldn't get the right width/height values. Where did you find the numbers?

www.josephgrobertson.com

jfriend

Mar-13-2010, 02:28 PM

Ah yea, figured that out right after I posted...but couldn't get the right width/height values. Where did you find the numbers?

www.josephgrobertson.com (http://www.josephgrobertson.com) You can load the actual image into the browser (get the URL from the CSS and paste it in the URL bar in the browser) and look at the properties there. I used the free Firebug add-on for Firefox to look at the image size.

jasonscottphoto

Mar-13-2010, 03:24 PM

I want to change up my site a little bit (specifically the front page) and would like to make my nav bar disappear on the home page only. Can anybody help?

Edit - I also want the header and the text under the nav bar to disappear. So, basically everything in my header.

Edit again - and the footer.

jasonscottphoto

Mar-13-2010, 04:32 PM

I want to change up my site a little bit (specifically the front page) and would like to make my nav bar disappear on the home page only. Can anybody help?

Edit - I also want the header and the text under the nav bar to disappear. So, basically everything in my header.

Edit again - and the footer.

Figured it out...

Acorn

Mar-13-2010, 06:00 PM

Is it possible for a drop down menu? I've seen it done, but I have no idea how to do it.

jasonscottphoto

Mar-13-2010, 06:02 PM

Is it possible for a drop down menu? I've seen it done, but I have no idea how to do it.

I just put a div around my whole heading and made it disappear in css

ashton25

Mar-13-2010, 07:12 PM

I have a nav bar but I don't want it to show in my wedding catagory and all sub catagories. Help.

I've seen a few codes posted but they don't seem to be working.

Ashton
boni-photography.com

Allen

Mar-13-2010, 07:41 PM

I have a nav bar but I don't want it to show in my wedding catagory and all sub catagories. Help.

I've seen a few codes posted but they don't seem to be working.

Ashton
boni-photography.com
Add this to your CSS and only you will see it logged in, visitors will not.

.notLoggedIn .category_WEDDING #navcontainer {display: none;}

iSYTE

Mar-15-2010, 12:52 PM

The text in my Nav Bar is not spacing equally across. Also, when I click to another page the text sometimes wraps to another line. What the heck is happening?

www.isyteimages.com

Thanks!

Qnsphoto

Mar-15-2010, 01:33 PM

So I decided to try and change the homepage of my website (www.chertokphoto.com (http://www.chertokphoto.com)). I went in and added the slide show option but now my link to my Galleries is not working. It won't leave the slideshow on the homepage. What am I doing wrong?

Thanks in advance for any help.

jfriend

Mar-15-2010, 01:50 PM

So I decided to try and change the homepage of my website (www.chertokphoto.com (http://www.chertokphoto.com)). I went in and added the slide show option but now my link to my Galleries is not working. It won't leave the slideshow on the homepage. What am I doing wrong?

Thanks in advance for any help. You don't appear to have the separate gallery page customizations installed. You need both CSS and javascript to make it work. Go to this tutorial (http://dgrin.smugmug.com/gallery/2160039) and start with "The Galleries Page I" and follow those steps.

Qnsphoto

Mar-15-2010, 02:40 PM

You don't appear to have the separate gallery page customizations installed. You need both CSS and javascript to make it work. Go to this tutorial (http://dgrin.smugmug.com/gallery/2160039) and start with "The Galleries Page I" and follow those steps.

thank you for your help. I added that information but now when I click the Galleries button (link) It takes me to a blank page. What am I missing.

Thanks

jfriend

Mar-15-2010, 04:26 PM

thank you for your help. I added that information but now when I click the Galleries button (link) It takes me to a blank page. What am I missing.

Thanks You must enable the display of your galleries in the homepage layout button on the homepage.

Qnsphoto

Mar-15-2010, 05:24 PM

You must enable the display of your galleries in the homepage layout button on the homepage.

Thank you SOOO much! Having a slow brain day...

JBonell

Mar-17-2010, 11:11 AM

I am mildly knowledgeable in html (I use this term loosely), but not at all in CSS, java etc. I have been trying to learn & research how to make a drop down navbar of all my galleries in Smugmug with no luck. My eyes are officially crossing.

Can someone PLEASE help me figure out the code and especially what code to put where in the site-wide customization? I am lost.

* I am also not sure if I need to change something in my file names /gallery names as they are not listed as "gallery/#" but as "Portfolio/Portraits/#"

(In the drop down, I am hoping to have the text in white, background in black, left adjust.)

Here is my site http://www.bonellphotography.com/

Thank you SO much!

Allen

Mar-17-2010, 04:57 PM

I am mildly knowledgeable in html (I use this term loosely), but not at all in CSS, java etc. I have been trying to learn & research how to make a drop down navbar of all my galleries in Smugmug with no luck. My eyes are officially crossing.

Can someone PLEASE help me figure out the code and especially what code to put where in the site-wide customization? I am lost.

* I am also not sure if I need to change something in my file names /gallery names as they are not listed as "gallery/#" but as "Portfolio/Portraits/#"

(In the drop down, I am hoping to have the text in white, background in black, left adjust.)

Here is my site http://www.bonellphotography.com/

Thank you SO much!
Can you map out what you'd like your nav to look like?
Main buttons drops etc. Will be using the example format on this page (http://allen-steve.smugmug.com/gallery/2327835).
There is a slightly different CSS version then the one on that site (see
menu at top), seems to be much easier to work with.

hongmingstudio

Mar-17-2010, 10:56 PM

I need help on navigation bar.
this is my smugmug web: www.hongmingstudio.com (http://www.hongmingstudio.com)
this is my blog: http://hongminstudio.blogspot.com

In my navigation bar, I have a "blog" buton, which link to my blog web ( http://hongminstudio.blogspot.com ), so I want to open it in a new
windows or tab when click it since it is outside of smugmug, and keep original smugmug page active.

I put code in homepage->tools->easy customizer->header-> navigation bar builder:

name Click to URL

... ...
Blog URL <a href="http://hongminstudio.blogspot.com" target="_blank">Blog</a>
... ....

But it seems not work.

JBonell

Mar-17-2010, 11:47 PM

Can you map out what you'd like your nav to look like?
Main buttons drops etc. Will be using the example format on this page (http://allen-steve.smugmug.com/gallery/2327835).
There is a slightly different CSS version then the one on that site (see
menu at top), seems to be much easier to work with.
Here is what I am thinking...

Home...... Portfolio............. Designs.............. Proofs.......Pricing.............................. About......................... Contact........... Blog
...............Landscapes.......... Digital Art........................ Portrait Session.................. Our Photo Sessions
...............Industrial Art....... Enhancements................... Schools,Sports,Events......... Our Products
...............Portraits.......................... ......................... Wedding,Engagement........... Promotions
...............Kids & Families.......................................... . Quinceaneras..................... Sports & Teams
...............Seniors............................ ......................... Portrait Collections.............. Us
...............Sports............................. ......................... Payment Options
...............Events

No Flyouts necessary.
Black background with white Veranda font color for all of it.
Hover {aka roll-over color} to be #7161FF and positioned to the right of my logo/name graphic.
I prefer left justify.
I would like the buttons to look like the current navbar on my website.

I hope this helps. Please let me know if you need more information.

Allen

Mar-18-2010, 07:09 AM

Here is what I am thinking...

Home...... Portfolio............. Designs.............. Proofs.......Pricing.............................. About......................... Contact........... Blog
...............Landscapes.......... Digital Art........................ Portrait Session.................. Our Photo Sessions
...............Industrial Art....... Enhancements................... Schools,Sports,Events......... Our Products
...............Portraits.......................... ......................... Wedding,Engagement........... Promotions
...............Kids & Families.......................................... . Quinceaneras..................... Sports & Teams
...............Seniors............................ ......................... Portrait Collections.............. Us
...............Sports............................. ......................... Payment Options
...............Events

No Flyouts necessary.
Black background with white Veranda font color for all of it.
Hover {aka roll-over color} to be #7161FF and positioned to the right of my logo/name graphic.
I prefer left justify.
I would like the buttons to look like the current navbar on my website.

I hope this helps. Please let me know if you need more information.
Great, be back later with the html.

JBonell

Mar-18-2010, 08:01 AM

I need help on navigation bar.
this is my smugmug web: www.hongmingstudio.com (http://www.hongmingstudio.com)
this is my blog: http://hongminstudio.blogspot.com

In my navigation bar, I have a "blog" buton, which link to my blog web ( http://hongminstudio.blogspot.com ), so I want to open it in a new
windows or tab when click it since it is outside of smugmug, and keep original smugmug page active.

I put code in homepage->tools->easy customizer->header-> navigation bar builder:

name Click to URL

... ...
Blog URL <a href="http://hongminstudio.blogspot.com" target="_blank">Blog</a>
... ....

But it seems not work.

I'm not sure if this is what you are looking for, but let's see.

I use the same blogger. In my navbar builder I entered:
Blog......URL........link to my blog (http://hongminstudio.blogspot.com)
(The first time I clicked on your blog link it literally showed me the html of <a href="http://hongminstudio.blogspot.com" target="_blank">Blog</a> in my window. Now it actually takes me to your blog. Either you just fixed that, or my computer remembered where I wanted to go. )

Yes, this opens in the same window, not a separate one or separate tab from your main website. I am not sure how to do that. So instead in my blog I went to "customize" the page elements and where you place the header, I made the header and description both link to return back to my homepage by using html. For you it would read:
<a href="http://www.hongmingstudio.com/"target="_blank">HongMingStudio</a>

Sorry I cannot tell you how to make the blog open in a separate window or tab. Hopefully someone else can.

Beautiful photos by the way. Gorgeous color!

Allen

Mar-18-2010, 08:24 AM

Here is what I am thinking...

Home...... Portfolio............. Designs.............. Proofs.......Pricing.............................. About......................... Contact........... Blog
...............Landscapes.......... Digital Art........................ Portrait Session.................. Our Photo Sessions
...............Industrial Art....... Enhancements................... Schools,Sports,Events......... Our Products
...............Portraits.......................... ......................... Wedding,Engagement........... Promotions
...............Kids & Families.......................................... . Quinceaneras..................... Sports & Teams
...............Seniors............................ ......................... Portrait Collections.............. Us
...............Sports............................. ......................... Payment Options
...............Events

No Flyouts necessary.
Black background with white Veranda font color for all of it.
Hover {aka roll-over color} to be #7161FF and positioned to the right of my logo/name graphic.
I prefer left justify.
I would like the buttons to look like the current navbar on my website.

I hope this helps. Please let me know if you need more information. See if you like this, might need a few tweaks. Go to Easy Customizer
and remove the banner/logo and navcontainer.

Control Panel > Customize tab >
Easy Customizer > Site-wide. No code required. edit
Remove banner/logo and navcontainer
Control Panel > Customize tab >
Advanced Customizer > Site-wide. Almost no limits. edit
This page you'll see a bunch of boxes for entering your customization code.

Add to the Custom Header (optional)

<div id="my_header">

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><span style="font-size: 13pt;"> | </span></li>
<li><a class="drop" href="/Portfolio">Portfolio
</a>

<ul>
<li><a href="/Portfolio/LivingArt/9901613_3u93v">Landscapes</a></li>
<li><a href="/Portfolio/IndustrialArt/10132682_tFrfs">Industrial Art</a></li>
<li><a href="/Portfolio/Portraits/10095995_iBRAJ">Portraits</a></li>
<li><a href="/Portfolio/Kids-Families/10096005_gd6qi">Kids & Families</a></li>
<li><a href="/Portfolio/Seniors/10096000_RR4Wg">Seniors</a></li>
<li><a href="/Portfolio/Sports/10096002_z54ps">Sports</a></li>
<li><a href="/Portfolio/Events/10096003_nqzrD">Events</a></li>
</ul> 
</li>
<li><span style="font-size: 13pt;"> | </span></li>
<li><a class="drop" href="/Designs">Designs
</a>

<ul>
<li><a href="/Designs/Digital-Art/10060137_UHEcR">Digital Art</a></li>
<li><a href="/Designs/Enhancements/10111795_JCGhN">Enhancements</a></li>
</ul> 
</li>
<li><span style="font-size: 13pt;"> | </span></li>
<li><a href="/Proofs">Proofs</a></li>
<li><span style="font-size: 13pt;"> | </span></li>
<li><a class="drop" href="/Pricing">Pricing
</a>

<ul>
<li><a href="/Pricing/Session-Sitting-Fees/10108484_tfcDs">Portrait Session</a></li>
<li><a href="/Pricing/SpecializedFees/10112386_ve7nL">Schools Sports Events</a></li>
<li><a href="/Pricing/Wedding/11338647_dHzJY">Wedding Engagement</a></li>
<li><a href="/Pricing/Quinceañeras/11527785_UJnoW">Quinceaneras</a></li>
<li><a href="/Pricing/PortraitCollections/10110938_gn29t">Portrait Collections</a></li>
<li><a href="/Pricing/Order-Payment/10126730_8BhEe">Payment Options</a></li>
</ul> 
</li>
<li><span style="font-size: 13pt;"> | </span></li>
<li><a class="drop" href="/About">About
</a>

<ul>
<li><a href="/About/OurSessions/10110424_Lr5Aa">Our Photo Sessions</a></li>
<li><a href="/About/Products/10286887_L2Zrw">Our Products</a></li>
<li><a href="/About/FreeFamilySession/10342275_hMyRj">Promotions</a></li>
<li><a href="/About/Sports/11204207_hZbmh">Sports & Teams</a></li>
<li><a href="/About/Bio/10101332_M3KTq">Us</a></li>
</ul> 
</li>
<li><span style="font-size: 13pt;"> | </span></li>
<li><a href="/gallery/10111831_AVvQC">Contact</a></li>
<li><span style="font-size: 13pt;"> | </span></li>
<li><a href="http://bonellphotography.blogspot.com/" target="_blank">Blog</a></li>
</ul>
</div> 

<div id="my_banner">
<a href="/">
<img src="/img/spacer.gif" width="600" height="125" border="0" alt="">
</a>
</div> 

</div> 

Add this to CSS (optional)

#my_header {
height: 125px;
margin: 0 10px 15px; /* top right/left bottom*/
padding: 0 0 0 20px;
}

#my_banner {
width: 600px;
height: 125px;
margin: -20px 0 0 -40px;
background: url(http://www.bonellphotography.com/photos/780446269_F3PxU-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='http://www.bonellphotography.com/photos/780446269_F3PxU-O.png');
}

/* CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of*/
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
.menu {
float: right;
z-index:99;
margin-top: 75px;
position:relative; /* Make the container moveable */
width: 600px; /* Main bar total width, minimize to center */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}

.menu ul ul {
width:80px;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
text-align:center;
width:auto; /* Cell size. Divide the main width (750px) by the number of cells you need */
position:relative;
padding: 0;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:12pt;
text-decoration:none;
color:#ccc;
background:none;
font-family: verdana, tahoma, helvetica, arial, sans-serif;
width:auto; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are*/
line-height:22px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 2px;
min-width: 40px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited
{width:80px; w\idth:80px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#000;}

/* style the second level hover */
.menu ul ul a.drop:hover{background:#000;}
.menu ul ul :hover > a.drop {background:#000;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:-2px;
width:190px; /* Size of the daughter cells */
}

/* another hack for IE5.5 */
* html .menu ul ul
{top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#000;
color:#ccc;
height:auto;
line-height:1em;
padding:5px 5px;
width:190px;
text-align: left;
}

/* yet another hack for IE5.5 */
* html .menu ul ul a
{width:190px; w\idth:190px;}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background:#000;
}

/* main when hover drop */
.menu :hover > a, .menu ul ul :hover > a {
color:#7161FF;
background:#000;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{visibility:visible;}

/* End Navbar Code */
Your banner/logo has a lot of extra blank space, I twiddled the margins
and height to compensate for this.

JBonell

Mar-18-2010, 10:05 AM

See if you like this, might need a few tweaks. Go to Easy Customizer
and remove the banner/logo and navcontainer.

Control Panel > Customize tab >
Easy Customizer > Site-wide. No code required. edit
Remove banner/logo and navcontainer
Control Panel > Customize tab >
Advanced Customizer > Site-wide. Almost no limits. edit
This page you'll see a bunch of boxes for entering your customization code.

Add to the Custom Header (optional)
[code]
Add this to CSS (optional)
[code]

Your banner/logo has a lot of extra blank space, I twiddled the margins
and height to compensate for this.

Ok... So I followed your instructions to a T.
I removed everything I currently had for the logo & navbar & placed the custom header & css in the correct places, etc.
From looking at the codes you wrote, (and what I DO understand about them) it looks great!
What I ended up with, (viewed in the preview because I hesitated to publish by clicking "update",) was a bulleted list of all the pages and no logo. This is the same issue I had before in creating the drop down list when I tried it previously. Just bullets running down the page.

Any advice? What am I missing or doing wrong?

For now, I reset my logo & original navbar since I may not be able to come back to this until tonight or tomorrow morning.

I really appreciate your help. Thanks!

Allen

Mar-18-2010, 10:30 AM

Ok... So I followed your instructions to a T.
I removed everything I currently had for the logo & navbar & placed the custom header & css in the correct places, etc.
From looking at the codes you wrote, (and what I DO understand about them) it looks great!
What I ended up with, (viewed in the preview because I hesitated to publish by clicking "update",) was a bulleted list of all the pages and no logo. This is the same issue I had before in creating the drop down list when I tried it previously. Just bullets running down the page.

Any advice? What am I missing or doing wrong?

For now, I reset my logo & original navbar since I may not be able to come back to this until tonight or tomorrow morning.

I really appreciate your help. Thanks!
These changes might not show in preview, so I would update and look.
Did you add the CSS? That would show a bulleted list if not.

Cujo

Mar-18-2010, 05:12 PM

Hello, is it possible to set up a nav bar with the picture inserts like this link? http://www.groomysparadise.com/

Thanks for looking.

JBonell

Mar-19-2010, 09:58 AM

These changes might not show in preview, so I would update and look.
Did you add the CSS? That would show a bulleted list if not.

Allen,
This turned out GREAT!!! Exactly what I was looking for.
Now for just a little tweaking...
How can I adjust the margin? I would like it to be about a half inch to an inch further down from the top and have the logo & navbar closer together. (Maybe in about 3 inches from both sides.)

If you simply give me the lines I need to change and what #'s will give me that look, I can play with it. I'm just hesitant to mess the whole thin up now that it looks so beautiful. :)

THANK YOU SO MUCH!!! You are amazing!

Allen

Mar-19-2010, 04:34 PM

Allen,
This turned out GREAT!!! Exactly what I was looking for.
Now for just a little tweaking...
How can I adjust the margin? I would like it to be about a half inch to an inch further down from the top and have the logo & navbar closer together. (Maybe in about 3 inches from both sides.)

If you simply give me the lines I need to change and what #'s will give me that look, I can play with it. I'm just hesitant to mess the whole thin up now that it looks so beautiful. :)

THANK YOU SO MUCH!!! You are amazing!

If you narrow your browser, the nav and banner collide at about 1160px.
Lowering the nav and it would slide underneath.

The red top margin will push the nav down.

/* style the outer div to give it width */
.menu {
float: right;
z-index:99;
margin-top: 100px;
position:relative; /* Make the container movable */
width: 600px; /* Main bar total width, minimize to center */
}

The R/L margin pushes the header containing the banner and nav in from the sides.
The R/L padding also pushes in them inside the my_header div.
Either can be used in your case.

#my_header {
height: 125px;
margin: 0 10px 15px; /* top right/left bottom*/
padding: 0 20px 0; /* top right/left bottom*/
}

levelphoto

Mar-19-2010, 06:18 PM

I'm fairly new to SmugMug and I'm trying to figure out how to create my "About Me", "Contact Me" pages. I saw a tutorial on how to create a nav bar to point to those pages, but how do you create a page where you can write text?

Not sure if I'm making sense, but I guess something like this...http://www.moonriverphotography.com/...o/729385_qbFqd

Thanks for any help you provide!

Patrick

Allen

Mar-19-2010, 06:30 PM

I'm fairly new to SmugMug and I'm trying to figure out how to create my "About Me", "Contact Me" pages. I saw a tutorial on how to create a nav bar to point to those pages, but how do you create a page where you can write text?

Not sure if I'm making sense, but I guess something like this...http://www.moonriverphotography.com/...o/729385_qbFqd

Thanks for any help you provide!

Patrick
Create a new gallery, under gallery settings set it to journal (old) and
unlisted. Add one photo and use the caption for your text. Only a direct
link will get you to an unlisted gallery so in your nav add the link.

levelphoto

Mar-19-2010, 08:00 PM

Create a new gallery, under gallery settings set it to journal (old) and
unlisted. Add one photo and use the caption for your text. Only a direct
link will get you to an unlisted gallery so in your nav add the link.

That worked great! Thanks, also...how do I create the Gallery in the nav bar that goes to my entire gallery as opposed to my gallery being shown on my homepage?

Allen

Mar-19-2010, 08:06 PM

That worked great! Thanks, also...how do I create the Gallery in the nav bar that goes to my entire gallery as opposed to my gallery being shown on my homepage?
See this tutor (http://dgrin.smugmug.com/gallery/2160039) and scroll down to "The Galleries Page" sections.

levelphoto

Mar-20-2010, 11:37 AM

See this tutor (http://dgrin.smugmug.com/gallery/2160039) and scroll down to "The Galleries Page" sections.

Ok, I'm stepping it up a notch...well trying to...

I'd like to have a custom nav bar and this is the code I've got:

/*===== Banner =====*/
#my-banner
{width: 400px;height: 50px;margin: 0 auto;
background: url(XXXXXXX) no-repeat;}

#my-banner
{position:relative;bottom:40px;right:340px}

/*===== Nav-Wrapper =====*/
#my-nav-wrapper
{background: url(http://cdn.smugmug.com/img/themes/wallpaperblack/header_bg.png) !important;
_background: none;
_filter:progid: DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true,sizingmethod=image,src='http://cdn.smugmug.com/img/themes/wallpaperblack/header_bg.png');
margin: 0 auto;background-repeat:repeat-x;height:50px;width:autopx;}

/*===== Nav-Bar =====*/
#navcontainer ul
{margin: 0 auto;padding: 12px;
list-style-type: none;font-size: 14px;
_font-size: 12px;
font-variant: small-caps;text-align:right;}

#navcontainer ul li {display: inline;}

#navcontainer ul li a
{text-decoration: none;
padding: 0px 10px;color: #777;}

#navcontainer ul li a:hover {color: #fff;}

I'd like to do two things with this.

1. Put my logo in the nav bar, just flush left (nav buttons flush right).
2. Change the background color of the nav bar to black.

My website I'm working with is www.level-photography.com

You guys are great with all the support, been very helpful. Thanks for everything!

Patrick

JBonell

Mar-20-2010, 04:49 PM

If you narrow your browser, the nav and banner collide at about 1160px.
Lowering the nav and it would slide underneath.

The red top margin will push the nav down.

/* style the outer div to give it width */
.menu {
float: right;
z-index:99;
margin-top: 100px;
position:relative; /* Make the container movable */
width: 600px; /* Main bar total width, minimize to center */
}

The R/L margin pushes the header containing the banner and nav in from the sides.
The R/L padding also pushes in them inside the my_header div.
Either can be used in your case.

#my_header {
height: 125px;
margin: 0 10px 15px; /* top right/left bottom*/
padding: 0 20px 0; /* top right/left bottom*/
}

Allen,
THANK YOU! THANK YOU! THANK YOU! THANK YOU!
I finally had time to play with the spacing and think I have it right where I wanted it without squashing them on smaller monitors.
The navbar is PERFECT! You are amazing!
http://www.bonellphotography.com/
Also, thanks for the heads up on how to lower the nav to slide it underneath, (it gives me future options.)

Thanks so much!

JBonell

Mar-20-2010, 05:24 PM

Ok, I'm stepping it up a notch...well trying to...

I'd like to have a custom nav bar and this is the code I've got...<remainder of message removed>

Patrick

Patrick,
How or where did you get your contact page form? I have been wanting a set up like that.
~Juli

levelphoto

Mar-20-2010, 05:33 PM

Allen,
THANK YOU! THANK YOU! THANK YOU! THANK YOU!
I finally had time to play with the spacing and think I have it right where I wanted it without squashing them on smaller monitors.
The navbar is PERFECT! You are amazing!
http://www.bonellphotography.com/
Also, thanks for the heads up on how to lower the nav to slide it underneath, (it gives me future options.)

Thanks so much!

Thanks for the input, but I'm still a newbie at the CSS and I'm not sure I completely followed your instructions. First, when I take a look at your website, I see "Bonell Photography" overlapping your navbar, that is until I zoom out on the page...then it looks great! Is there a way to make sure this doesn't happen?

What if I want to change the color of my nav bar...I don't see anywhere in the code to change the color, say to black?

levelphoto

Mar-20-2010, 05:40 PM

Patrick,
How or where did you get your contact page form? I have been wanting a set up like that.
~Juli

It took me a while to uncover it searching online...unfortunately, I didn't bookmark the site. I believe it was here in the navbar help thread. Let me look back to try and trace my steps to see if I can find it for you.

Patrick

JBonell

Mar-20-2010, 06:55 PM

It took me a while to uncover it searching online...unfortunately, I didn't bookmark the site. I believe it was here in the navbar help thread. Let me look back to try and trace my steps to see if I can find it for you.

Patrick

Thanks for looking.
And thanks for the heads up on the banner & navbar overlapping. Thought I had that fixed.

Allen, any suggestions? I currently have it at:

#my_header {
height: 125px;
margin: 0 100px 15px; /* top right/left bottom*/
padding: 0 0 20 0px;
}

#my_banner {
width: 600px;
height: 125px;
margin: 40px 0 0 40px;

But the problem is that it seems so far out on our wide screen monitors. Is there something I can do to make it stay with an estimated 3-4 inches between the banner/logo and the navbar on ALL monitors or do I just have to deal with it looking pulled apart on my monitor?
Thanks.... again.

JBonell

Mar-20-2010, 08:32 PM

I'm fairly new to SmugMug and I'm trying to figure out how to create my "About Me", "Contact Me" pages. I saw a tutorial on how to create a nav bar to point to those pages, but how do you create a page where you can write text?

Not sure if I'm making sense, but I guess something like this...http://www.moonriverphotography.com/...o/729385_qbFqd

Thanks for any help you provide!

Patrick

Patrick,
Love your pics.
Something I recently learned when making these journal pages...
You can also remove the "Gallery Page 1" at the top & bottom of your journal pages (as well as the buttons for slideshow, share, etc) by entering this code into your CSS:

/*===== Name of Page =====*/
.gallery_10101010 #breadCrumbTrail,
.gallery_10101010 .play_slideshow,
.gallery_10101010 .share_button,
.gallery_10101010 #albumNav_top,
.gallery_10101010 #albumNav_bottom,
.gallery_10101010 .pageNav
{display:none;}

The number should be the one found in that page's URL
Yours is http://www.level-photography.com/gallery/11560406_i65NW
therefore the number would be 11560406

levelphoto

Mar-20-2010, 08:54 PM

The number should be the one found in that page's URL
Yours is http://www.level-photography.com/gallery/11560406_i65NW
therefore the number would be 11560406

Thanks for checking out my page, and more importantly, thanks for the helpful advice! I've been going nuts customizing my site (in a good way), and have sort of become addicted to learning how to use CSS :)!

Would you happen to know how to remove the box below my contact form (the box that says "This Gallery has no photos to display yet")? It's located on this page http://www.level-photography.com/gallery/11567188_ct6hu

I look forward to seeing your site develop and hopefully I can be of assistance sooner or later!

JBonell

Mar-20-2010, 09:08 PM

Thanks for checking out my page, and more importantly, thanks for the helpful advice! I've been going nuts customizing my site (in a good way), and have sort of become addicted to learning how to use CSS :)!

Would you happen to know how to remove the box below my contact form (the box that says "This Gallery has no photos to display yet")? It's located on this page http://www.level-photography.com/gallery/11567188_ct6hu

I look forward to seeing your site develop and hopefully I can be of assistance sooner or later!

The only answer I have to that is to add a photo. I know, sounds ridiculous, but even if you simply add your logo as the photo, it will get rid of the box.
Sorry I cant be of better help with that one. I am still pretty new to Smug & CSS as well. (I'm also addicted to customizing.)

P.S. Did you know your Blog is linking to your contact page again?

Allen

Mar-21-2010, 06:33 AM

Thanks for checking out my page, and more importantly, thanks for the helpful advice! I've been going nuts customizing my site (in a good way), and have sort of become addicted to learning how to use CSS :)!

Would you happen to know how to remove the box below my contact form (the box that says "This Gallery has no photos to display yet")? It's located on this page http://www.level-photography.com/gallery/11567188_ct6hu

I look forward to seeing your site develop and hopefully I can be of assistance sooner or later!
Add this to your CSS

.notLoggedIn .emptyGallery {display: none;}

levelphoto

Mar-21-2010, 06:47 AM

Add this to your CSS

.notLoggedIn .emptyGallery {display: none;}

Thanks for getting back with me Al. I added that code to my CSS and nothing happened...

Any idea how to make my nav bar background black As well?

Allen

Mar-21-2010, 07:22 AM

Thanks for getting back with me Al. I added that code to my CSS and nothing happened...

Any idea how to make my nav bar background black As well?
I don't see it in your CSS. Did you log out and look? Or use a different
browser, logged out, to look?

levelphoto

Mar-21-2010, 07:57 AM

I don't see it in your CSS. Did you log out and look? Or use a different
browser, logged out, to look?

Had to log out, thanks.

Any idea about the black color of my navbar? I basically just want the current buttons I have so it looks like it blends in with my black background

Allen

Mar-21-2010, 08:10 AM

Had to log out, thanks.

Any idea about the black color of my navbar? I basically just want the current buttons I have so it looks like it blends in with my black background
I see no nav button background using FF or IE8?

JBonell

Mar-21-2010, 08:29 AM

I don't see it in your CSS. Did you log out and look? Or use a different
browser, logged out, to look?

Allen & Patrick,
Are my banner/logo & navbar still colliding? I played with it again.
http://www.bonellphotography.com/
(Widescreen monitors are great... except for when it comes to this.)

JBonell

Mar-21-2010, 08:32 AM

Add this to your CSS

.notLoggedIn .emptyGallery {display: none;}

Thanks Allen!

levelphoto

Mar-21-2010, 08:39 AM

I see no nav button background using FF or IE8?

I'm using firefox and the color is currently a dark grey. Do you mean that its not possible to change the color of my navbar because you dont see the CSS code?

levelphoto

Mar-21-2010, 08:40 AM

Thanks Allen!

Yes, it still seems to be overlapping on FF...

JBonell

Mar-21-2010, 08:44 AM

Yes, it still seems to be overlapping on FF...

Hmmmm.... and how about now?

I have Firefox too so I don't think that is causing the problems with this or the BG color on your nav you are working on.

levelphoto

Mar-21-2010, 08:56 AM

Hmmmm.... and how about now?

I have Firefox too so I don't think that is causing the problems with this or the BG color on your nav you are working on.

Yes, it's still overlapping :(

JBonell

Mar-21-2010, 09:05 AM

Yes, it's still overlapping :(

Wow! Just a little frustrating! Wish I could see it to know how far off I am.

How about now? (Thanks for looking.)
http://www.bonellphotography.com/

Runtscal

Mar-21-2010, 09:10 AM

Hoping for a little help --- Navbar works & looks fine in Safari, FF etc. However, probs in IE. Can anyone tell where to tweak my code?

When I mouse over the two tabs (Client Galleries & Family Galleries) with drop-downs ----- it messes up the navbar (wraps/becomes disjointed).

Thanks, Monica

Allen

Mar-21-2010, 10:52 AM

Hoping for a little help --- Navbar works & looks fine in Safari, FF etc. However, probs in IE. Can anyone tell where to tweak my code?

When I mouse over the two tabs (Client Galleries & Family Galleries) with drop-downs ----- it messes up the navbar (wraps/becomes disjointed).

Thanks, Monica Try this. Add the red gte's. Also you can use relative links as shown.

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a class="drop" href="#nopick">Client Galleries
</a> 
<ul>
<li><a href="/Animals">Animals</a></li>
<li><a href="/Dance">Dance</a></li>
<li><a href="/Events">Events</a></li>
<li><a href="/People">People</a></li>
<li><a href="/Portraits">Portraits</a></li>
<li><a href="/Nature">Nature</a></li>
<li><a href="/Things">Things</a></li>
<li><a href="/Sports">Sports</a></li>
<li><a href="/Weddings">Weddings</a></li>
</ul> 
</li>
<li><a class="drop" href="#nopick">Family Galleries
</a> 
<ul>
<li><a href="/Family">Family</a></li>
<li><a href="/Family%20Heritage">Family Heritage</a></li>
<li><a href="/Family%20Life%202006-2010">Family Life 06-10</a></li>
<li><a href="/Family%20Life%202000-2005">Family Life 00-05</a></li>
</ul> 
</li>
<li><a href="http://www.monicamanning.com">My Website</a></li>
<li><a href="http://monicamanningtexas.blogspot.com">My Blog</a></li>
</ul>
</div>

Allen

Mar-21-2010, 10:54 AM

Wow! Just a little frustrating! Wish I could see it to know how far off I am.

How about now? (Thanks for looking.)
http://www.bonellphotography.com/
Your nav and banner are behaving like a stretchy page. They can be placed
and locked next to each other and remain same on any browser width.

The first thing to do is crop your banner image to 530x100 which is the size of the text.
Then use "replace" for the photo in the its gallery so the photo number and key doesn't change.

It would then be easier to align things.

Runtscal

Mar-21-2010, 10:58 AM

Worked like a charm -- thanks Allen for the extra set of eyes and the quick response. Monica

Try this. Add the red gte's. Also you can use relative links as shown.

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a class="drop" href="#nopick">Client Galleries
</a> 
<ul>
<li><a href="/Animals">Animals</a></li>
<li><a href="/Dance">Dance</a></li>
<li><a href="/Events">Events</a></li>
<li><a href="/People">People</a></li>
<li><a href="/Portraits">Portraits</a></li>
<li><a href="/Nature">Nature</a></li>
<li><a href="/Things">Things</a></li>
<li><a href="/Sports">Sports</a></li>
<li><a href="/Weddings">Weddings</a></li>
</ul> 
</li>
<li><a class="drop" href="#nopick">Family Galleries
</a> 
<ul>
<li><a href="/Family">Family</a></li>
<li><a href="/Family%20Heritage">Family Heritage</a></li>
<li><a href="/Family%20Life%202006-2010">Family Life 06-10</a></li>
<li><a href="/Family%20Life%202000-2005">Family Life 00-05</a></li>
</ul> 
</li>
<li><a href="http://www.monicamanning.com">My Website</a></li>
<li><a href="http://monicamanningtexas.blogspot.com">My Blog</a></li>
</ul>
</div>

Allen

Mar-21-2010, 11:21 AM

Wow! Just a little frustrating! Wish I could see it to know how far off I am.

How about now? (Thanks for looking.)
http://www.bonellphotography.com/ First before change, on the "advanced site-wide customization" page in
your control panel click the email button at the bottom to get a backup
of your customization.

This will set your banner and nav relative to each other and not move on any page.

Change the header like this. Removes my_header div also.

<div id="my_banner">
<a href="/">
<img src="/img/spacer.gif" alt="" border="0" height="125" width="570">
</a>
</div> 

<div class="menu">
... (SNIP) ...
</div> 
Change these two in CSS like this and remove #my_header {....}

#my_banner {
position: relative;
left: -310px;
width: 570px;
height: 130px;
margin: 10px auto 0;
background: url(http://www.bonellphotography.com/photos/780446269_F3PxU-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='http://www.bonellphotography.com/photos/780446269_F3PxU-O.png');
}

.menu {
position: relative;
left: 270px;
top: -55px;
z-index:99;
margin: 0 auto 10px;
position:relative; /* Make the container movable */
width: 580px; /* Main bar total width, minimize to center */
}

levelphoto

Mar-21-2010, 11:41 AM

Wow! Just a little frustrating! Wish I could see it to know how far off I am.

How about now? (Thanks for looking.)
http://www.bonellphotography.com/

You're getting closer! Now its only overlapping over "Home"

JBonell

Mar-21-2010, 12:47 PM

First before change, on the "advanced site-wide customization" page in
your control panel click the email button at the bottom to get a backup
of your customization.

This will set your banner and nav relative to each other and not move on any page.

Change the header like this. Removes my_header div also.

<div id="my_banner">
<a href="/">
<img src="/img/spacer.gif" alt="" border="0" height="125" width="570">
</a>
</div> 

<div class="menu">
... (SNIP) ...
</div> 
Change these two in CSS like this and remove #my_header {....}

#my_banner {
position: relative;
left: -310px;
width: 570px;
height: 130px;
margin: 10px auto 0;
background: url(http://www.bonellphotography.com/photos/780446269_F3PxU-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='http://www.bonellphotography.com/photos/780446269_F3PxU-O.png');
}

.menu {
position: relative;
left: 270px;
top: -55px;
z-index:99;
margin: 0 auto 10px;
position:relative; /* Make the container movable */
width: 580px; /* Main bar total width, minimize to center */
}

Thank you guys. Its getting closer.:clap
(Sorry I still seem to have issues.)

First, I THOUGHT I removed my header but I am still showing a 2nd one. What did I miss? (Also, did I cut the banner enough & correctly for this?)

Also, I would like for the banner & nav to have about 3 inches separating them, (Not right next to each other.) How can I do this? (Without cutting the ends off on smaller monitors.)

P.S. Just when I think I figured something out, I find out that I know nothing. :D

JBonell

Mar-21-2010, 01:02 PM

Also, I would like for the banner & nav to have about 3 inches separating them, (Not right next to each other.) How can I do this? (Without cutting the ends off on smaller monitors.)

I removed where it said ....snip <div... and it seemed to space it out a little more but the 2nd header is still showing... Sorry. I appreciate all the help. Coding is not my forte I guess. :rolleyes

Allen

Mar-21-2010, 01:02 PM

Thank you guys. Its getting closer.:clap
(Sorry I still seem to have issues.)

First, I THOUGHT I removed my header but I am still showing a 2nd one. What did I miss? (Also, did I cut the banner enough & correctly for this?)

Also, I would like for the banner & nav to have about 3 inches separating them, (Not right next to each other.) How can I do this? (Without cutting the ends off on smaller monitors.)

P.S. Just when I think I figured something out, I find out that I know nothing. :D
Remove the red from your header

...
</div> 

<div id="my_banner">
<a href="/">
<img src="/img/spacer.gif" alt="" border="0" height="125" width="600">
</a>
</div> 
</div> 
</div>

Changes in red. Use the two lefts to spread them apart balancing both
so the combo stays centered. The current width of the banner and nav
is 1100px. Keep in mind that many pc's and laptops are 1024px wide so
they will not see all of it and get a bottom scroll bar. 3 inches is relative
to the resolution setting of the monitor.

#my_banner {
position: relative;
left: -310px;
width: 570px;
height: 130px;
margin: 0 auto;
background: url(http://www.bonellphotography.com/photos/780446269_F3PxU-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='http://www.bonellphotography.com/photos/780446269_F3PxU-O.png');
}

/* CSS Dropdown Nav Bar*/
/* Original code by Stu Nicholls of*/
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

/* CSS Section */

/* style the outer div to give it width */
.menu {
position: relative;
left: 270px;
top: -65px;
z-index:99;
margin: 0 auto 10px;
position:relative; /* Make the container movable */
width: 580px; /* Main bar total width, minimize to center */
}

jdgphotoboy

Mar-21-2010, 01:30 PM

What's going on my friend...

I see that you've been doing a lot of work on your website..."Looking Great!" :thumb I'm getting there and getting it to look work the way I've been wanting too. The CSS and HTML learning curve has been extraordinarily long...but each day I learn something new. Wanted to thank both you and Mr. Allen and the rest of my fellow Smuggers for the technical support that I have received over the past several weeks.

Thanks again... John

JBonell

Mar-21-2010, 01:42 PM

Changes in red. Use the two lefts to spread them apart balancing both
so the combo stays centered. The current width of the banner and nav
is 1100px. Keep in mind that many pc's and laptops are 1024px wide so
they will not see all of it and get a bottom scroll bar. 3 inches is relative
to the resolution setting of the monitor.

So if I reduce the size of my nav's font size, will that help to give me more room?
If so, please help me figure out how & where to do that? (I thought I had it but was wrong.)
And what you would suggest for both the left: __ px; numbers to give me what I am looking for without messing up the view for smaller monitors.

:bowSorry for being a pest. It looks so great now! (I'm just afraid I'll mess it up.)

Allen

Mar-21-2010, 02:15 PM

So if I reduce the size of my nav's font size, will that help to give me more room?
If so, please help me figure out how & where to do that? (I thought I had it but was wrong.)
And what you would suggest for both the left: __ px; numbers to give me what I am looking for without messing up the view for smaller monitors.

:bowSorry for being a pest. It looks so great now! (I'm just afraid I'll mess it up.)
10pt takes the width down to about 1020 wide. But it's all about what
your customers will see and what you'd like them to see.

.menu a, .menu a:visited {
display:block;
font-size:10pt;
text-decoration:none;
color:#ccc;
background:none;
font-family: verdana, tahoma, helvetica, arial, sans-serif;
width:auto; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are*/
line-height:22px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 2px;
min-width: 40px;
}

jfriend

Mar-21-2010, 03:11 PM

10pt takes the width down to about 1020 wide. But it's all about what
your customers will see and what you'd like them to see.

.menu a, .menu a:visited {
display:block;
font-size:10pt;
text-decoration:none;
color:#ccc;
background:none;
font-family: verdana, tahoma, helvetica, arial, sans-serif;
width:auto; /* Defines the main box dimensions. */
height:25px; /*How tall your cells are*/
line-height:22px; /*Adjust this to vertically center your text in each cell. Should be about the same as height. */
padding: 0 2px;
min-width: 40px;
}
I personally think the best options are either removing a couple items from the navbar so it fits better on the same line as the banner or changing the design to center the banner and put the navbar underneath it, centered. With the second option you can keep all the options in the navbar and you don't have to make the text small.

JBonell

Mar-22-2010, 05:41 PM

I personally think the best options are either removing a couple items from the navbar so it fits better on the same line as the banner or changing the design to center the banner and put the navbar underneath it, centered. With the second option you can keep all the options in the navbar and you don't have to make the text small.

Thank you for the advice.
I did a mixture of a those you both mentioned.
- I moved one of the items from the navbar to appear in my Portfolio drop bar. (I actually prefer this! Thank you.)
- I shrank the text size on the navbar but only from 12 to 11. (I had noticed in looking around that my font size seemed to be larger than the average bear's anyway, so it didn't hurt.)
- Finally I tweaked my header to be slightly smaller (and actually nicer), but even after "replacing" the photo this morning, it still shows the old one.

My only remaining question (after about 50) is how can I l line up the logo with the navbar. I dont want to bring up the nav, but bring down the logo. (Again, this was one that I thought I knew how to do, but don't seem to get any results other than the occasional error.)

P.S. Allen. You have been such a great help! Thank you!

Allen

Mar-22-2010, 06:09 PM

Thank you for the advice.
I did a mixture of a those you both mentioned.
- I moved one of the items from the navbar to appear in my Portfolio drop bar. (I actually prefer this! Thank you.)
- I shrank the text size on the navbar but only from 12 to 11. (I had noticed in looking around that my font size seemed to be larger than the average bear's anyway, so it didn't hurt.)
- Finally I tweaked my header to be slightly smaller (and actually nicer), but even after "replacing" the photo this morning, it still shows the old one.

My only remaining question (after about 50) is how can I l line up the logo with the navbar. I dont want to bring up the nav, but bring down the logo. (Again, this was one that I thought I knew how to do, but don't seem to get any results other than the occasional error.)

P.S. Allen. You have been such a great help! Thank you!
Play with the red
#my_banner {
position: relative;
left: -310px;
width: 570px;
height: 130px;
margin: 20px auto 0; /* top R/L bottom */
background: url(http://www.bonellphotography.com/photos/780446269_F3PxU-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='http://www.bonellphotography.com/photos/780446269_F3PxU-O.png');
}

/* style the outer div to give it width */
.menu {
position: relative;
left: 270px;
top: -85px;
z-index:99;
margin: 0 auto 10px; /* top R/L bottom */
position:relative; /* Make the container movable */
width: 580px; /* Main bar total width, minimize to center */
}

JBonell

Mar-22-2010, 06:32 PM

Play with the red
#my_banner {
position: relative;
left: -310px;
width: 570px;
height: 130px;
margin: 20px auto 0; /* top R/L bottom */
background: url(http://www.bonellphotography.com/photos/780446269_F3PxU-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader (enabled=true,
sizingmethod=image, src='http://www.bonellphotography.com/photos/780446269_F3PxU-O.png');
}

/* style the outer div to give it width */
.menu {
position: relative;
left: 270px;
top: -85px;
z-index:99;
margin: 0 auto 10px; /* top R/L bottom */
position:relative; /* Make the container movable */
width: 580px; /* Main bar total width, minimize to center */
}
Woo! Hoo! :barb
Now I am just holding my breath to see if it is running off the ends of anyone's monitors for being too long.:uhoh

brandofamily

Mar-25-2010, 02:52 AM

Allen I could use some help...
in IE8, my navbar is kind of messed up. There are some empty single-line drop-boxes displaying even when there's no hovering mouse. Thanks.

jfriend

Mar-25-2010, 05:43 AM

Allen I could use some help...
in IE8, my navbar is kind of messed up. There are some empty single-line drop-boxes displaying even when there's no hovering mouse. Thanks.You may want to start by changing all occurences in your navbar of this so that IE8 gets the same treatment as IE7:



to this:

brandofamily

Mar-25-2010, 07:20 AM

You may want to start by changing all occurences in your navbar of this so that IE8 gets the same treatment as IE7:



to this:



I did the correction. It seems to have worked... do you see the same?

jfriend

Mar-25-2010, 08:23 AM

I did the correction. It seems to have worked... do you see the same?Working here in IE8.

Maggedy

Mar-25-2010, 01:02 PM

I want my Nav Bar to look like the one at this site: dschaub.smugmug.com
(http://dschaub.smugmug.com)
Not a copy of the graphic, of course, but a header with a site graphic and the nav bar all on the same "plane". I can't figure out how to put them side by side. I can only figure out how to make a header and put a nav bar under it.

Can anyone help?

Right now I only have my nav bar, no header.

Thank you!