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

Allen

Feb-21-2007, 06:04 AM

...
I've tried the navbar tutorial (as I saw someone else did awhile back), but no changes appeared in my preview. What I'm really wondering, though, is how to link a navbar button to a gallery page. I can see how most other links (about me, guestbook, etc.) can simply be schnazzed-up galleries, but to just get a page of galleries...:scratch ...

Most of the links are llke this. Just go to what ever page you want to link
to and copy the address. Any of these could be put in the navbar links.

homepage > http://nickname.smugmug.com/
gallery > http://nickname.smugmug.com/gallery/123456
category > http://nickname.smugmug.com/Friends
subcategory > http://nickname.smugmug.com/Friends/3452345
keyword page > http://nickname.smugmug.com/keyword
keyword flowers > http://nickname.smugmug.com/keyword/flowers
most popular > http://nickname.smugmug.com/popular

HoltArts

Feb-21-2007, 06:50 AM

Most of the links are llke this. Just go to what ever page you want to link
to and copy the address. Any of these could be put in the navbar links.

homepage > http://nickname.smugmug.com/
gallery > http://nickname.smugmug.com/gallery/123456
category > http://nickname.smugmug.com/Friends
subcategory > http://nickname.smugmug.com/Friends/3452345
keyword page > http://nickname.smugmug.com/keyword
keyword flowers > http://nickname.smugmug.com/keyword/flowers
most popular > http://nickname.smugmug.com/popular

I understand how to link to a specific gallery, but I was talking about a link to a page of galleries. Thanks, and sorry for the confusion!

Allen

Feb-21-2007, 06:54 AM

I understand how to link to a specific gallery, but I was talking about a link to a page of galleries. Thanks, and sorry for the confusion!
Is the page of galleries in a category or sub-category? Any page you can
bring up can be linked to. If you need a combination of galleries that aren't in
any grouping you probably will have to fake it with an html page showing only
the galleries you want. I did that here (http://atsmith.smugmug.com/gallery/2219395).

Allen

Feb-21-2007, 07:17 AM

Welcome to Dgrin.:wave

The simplist way is move the code in your footer to just below your banner
in your header code.

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

<div id="mysearch" align="right">

<form name="suggest" action="/keyword/jump.mg">
search
<input autocomplete="off" maxlength="256" size="25" name="Keyword" value="" onfocus="InstallAC(document.suggest,document.sugge st.Keyword,document.suggest.submitButton,'suggestR PC.mg','en')">
<input value="keyword search" name="submitButton" class="buttons" type="submit">
</form>

</div>
Then add this to your CSS.

#mysearch {
margin-left: 460px;
}
Now you have it up there on the right, make the following chnages
to get it aligned.

<div id="mysearch" align="center">

Add to CSS.

#mysearch {
margin-left: 460px;
}

HoltArts

Feb-21-2007, 09:32 AM

Now you have it up there on the right, make the following chnages
to get it aligned.

<div id="mysearch" align="center">

Add to CSS.

#mysearch {
margin-left: 460px;
}

Wow thanks!! That looks so much schnazzier! :barb

As far as the whole navbar thing, what I'm wanting is basically a page of categories, just as my homepage is now, only without the Biobox, popular pics (that would be another tab in the navbar), or any of that other stuff--just the categories as they are now.
I know I could hide the bio and everything else, but how could I still have navlinks to them as individual pages (i.e. an "About Me" tab, a "Popular Photos" tab, etc.)

Thanks again for all your help! I'm definitely diggin' this place!

Allen

Feb-21-2007, 09:56 AM

Wow thanks!! That looks so much schnazzier! :barb

As far as the whole navbar thing, what I'm wanting is basically a page of categories, just as my homepage is now, only without the Biobox, popular pics (that would be another tab in the navbar), or any of that other stuff--just the categories as they are now.
I know I could hide the bio and everything else, but how could I still have navlinks to them as individual pages (i.e. an "About Me" tab, a "Popular Photos" tab, etc.)

Thanks again for all your help! I'm definitely diggin' this place!
Create a virtual gallery called galleries, see this tutor.
Banner/Navbar/Slideshow Tutor (http://dgrin.smugmug.com/gallery/2160039)

HoltArts

Feb-21-2007, 10:24 AM

Create a virtual gallery called galleries, see this tutor.
Banner/Navbar/Slideshow Tutor (http://dgrin.smugmug.com/gallery/2160039)

WOW :clap

Life: Saved!
I'll hit this stuff up and let you know if I have anymore issues. Thanks so much!

OH OH sorry I do have one more question. I know this isn't navbar-esque, but how can I change my keyword searchbar to allow multiple words just using spaces instead of -'s? It's mostly parents using my site, and I don't think most of them would think to search for "tall-tree" instead of "tall tree".
How can I make a search for "big tree" get photo results instead of a list of keywords? Molto grazie!

yldan

Feb-21-2007, 03:36 PM

I tried playing with some of the stuff below and couldn't get what I wanted. it seemed to move the next & prev buttons, etc, but not leave them where they are and have the navbar on top.

sorry to be such a pest... but i still have all the problems in my original post (pasted below). any more ideas?

yldan.smugmug.com

I'm having a couple problems with my navbar in different browsers...

in IE6... it looks great. just how i want it, but sometimes it will dip down behind photos (only in some galleries, it seems).

in IE7... there is a space. i'd like to fix that.

in Safari... my navbar drops down behind the slideshow, rendering it almost worthless. i think it also drops down behind pictures. i don't have safari, so maybe someone could tell me. also, is there a space? (i can't remember)

in Firefox... everything is great, except the "portfolio" dropdown drops behind the word "next" when you're viewing galleries with multiple pages... which is most of them.

any catch all "always on top" that fixes all of these?

yldan.smugmug.com
Thanks for the help!

This is some of what I have, it basically sets the navs showing thru to a
lower z-index. Play with a combination of these. Don't have time at the
moment so good luck.

#pageNavigation_top,
#pageNavigation_top .nav.first,
#pageNavigation_top .nav.last,
#pageNavigation_top .nav.next,
#pageNavigation_top .nav.prev,
#pageNavigation_top .pageOn.title,
#pageNavigation_bottom,
#pageNavigation_bottom .nav.first,
#pageNavigation_bottom .nav.last,
#pageNavigation_bottom .nav.prev,
#pageNavigation_bottom .nav.next,
#pageNavigation_bottom .pageOn.title {
z-index: 50 !important;
color: #111111 !important;
}

Allen

Feb-21-2007, 03:49 PM

I tried playing with some of the stuff below and couldn't get what I wanted. it seemed to move the next & prev buttons, etc, but not leave them where they are and have the navbar on top.

sorry to be such a pest... but i still have all the problems in my original post (pasted below). any more ideas?

yldan.smugmug.com

I'm having a couple problems with my navbar in different browsers...

in IE6... it looks great. just how i want it, but sometimes it will dip down behind photos (only in some galleries, it seems).

in IE7... there is a space. i'd like to fix that.

in Safari... my navbar drops down behind the slideshow, rendering it almost worthless. i think it also drops down behind pictures. i don't have safari, so maybe someone could tell me. also, is there a space? (i can't remember)

in Firefox... everything is great, except the "portfolio" dropdown drops behind the word "next" when you're viewing galleries with multiple pages... which is most of them.

any catch all "always on top" that fixes all of these?

yldan.smugmug.com
Thanks for the help!
See if this fixes the "portfolio" dropdown.
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
z-index:99 !important;
padding:0;
margin:0;
list-style-type:none;
text-align:center;
}

RogersDA

Feb-21-2007, 04:36 PM

What is needed to correct the page navigation link showing in the 3rd level list?

http://DaRPhotos.smugmug.com/photos/131273605-S.jpg

Also, can I use a separate image for each top-level item instead of text/color formatting?

Allen

Feb-21-2007, 04:40 PM

What is needed to correct the page navigation link showing in the 3rd level list?

http://DaRPhotos.smugmug.com/photos/131273605-S.jpg

Also, can I use a separate image for each top-level item instead of text/color formatting?
Add the green

.menu ul {
z-index:99;
padding:0;
margin:0;
list-style-type:none; }

Gilles A.

Feb-21-2007, 04:42 PM

Hello,

Is there a way to have all the thumbnails the same size (like the Moon River Photography site, e.g.: http://www.moonriverphotography.com/gallery/52248#96931208)?
Or do I have to resize all my photos to have the same size or dimension (e.g.: 4 x 6 or 5 x 7)?

Same question for my photos.

I have a few more questions, but I will look around and come back if I don't find the answers.

Thanks,

Gilles A.
http://www.garchambault.smugmug.com/

RogersDA

Feb-21-2007, 04:42 PM

Add the green

.menu ul {
z-index:99;
padding:0;
margin:0;
list-style-type:none; }

Allen,
Thanks....:D

What it "z-index" and the significance for 99?

RogersDA

Feb-21-2007, 04:58 PM

Hello,

Is there a way to have all the thumbnails the same size (like the Moon River Photography site, e.g.: http://www.moonriverphotography.com/gallery/52248#96931208)?
Or do I have to resize all my photos to have the same size or dimension (e.g.: 4 x 6 or 5 x 7)?

The bulk zoom hack (http://www.dgrin.com/showpost.php?p=238359&postcount=1) allows you to specify the aspect ratio for all images in a gallery; e.g., 1x1, 3x5, etc. Read the thread and post there if you need more help and you will get it. It's pretty sweet, though I think some refinements are in the works. You will need to add the CSS code, header code, and java code in your customization.

Allen

Feb-21-2007, 05:07 PM

Allen,
Thanks....:D

What it "z-index" and the significance for 99?
Stuffs way over my head but it's something like layers, higher number higher layer. And ya can't see thru the layers.:D

yldan

Feb-21-2007, 08:00 PM

nope... sorry... i even tried different numbers. i got nothin'.

in fact, any inclusion of the "z-index" led to the menu dropping down behind the photos (in addition to the "next" button).

See if this fixes the "portfolio" dropdown.
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
z-index:99 !important;
padding:0;
margin:0;
list-style-type:none;
text-align:center;
}

Allen

Feb-21-2007, 08:09 PM

nope... sorry... i even tried different numbers. i got nothin'.

in fact, any inclusion of the "z-index" led to the menu dropping down behind the photos (in addition to the "next" button).
Works here in Firefox in the best of 2006 gallery
Not in IE though.
I'll have to look at my code again because I have it
working. I did a quick copy of what I thought it was
but might have missed something.

RogersDA

Feb-22-2007, 03:42 AM

How does one fix the NavBar IE6? The menu top-level menu has wrapped around and the second- and third-level menus do not show up at all.

http://DaRPhotos.smugmug.com/photos/131363481-M.jpg

It seems to work o.k. in Firefox, and I have not looked at IE7 yet.

Allen

Feb-22-2007, 04:31 AM

How does one fix the NavBar IE6? The menu top-level menu has wrapped around and the second- and third-level menus do not show up at all.

http://DaRPhotos.smugmug.com/photos/131363481-M.jpg

It seems to work o.k. in Firefox, and I have not looked at IE7 yet.
I'd start by going thru and making sure the widths for IE are all 100px. You
have a lot of main buttons which makes it very wide and all the widths add
up and cause it to wrap in IE.

You're missing the px here

.menu a, .menu a:visited {
display:block;
font-size:11px;
font-style: bolder;
text-decoration:none;
color:#000000;
width:100px;
...

RogersDA

Feb-22-2007, 07:40 AM

Thanks for assist, Allen.
In the CSS for the NavBar I have the menu sized to 900px. Each "cell" in the top level (.menu a) is sized to have a width of 100px and a height of 30px. Each png file for the top-level items was created in Photoshop to have a width of 100px and height of 30px. So, they should "fit" quite nicely in the menu. And, in Firefox, they do fit.

Do you think that the issue is because I did incorporate the IE filter to handle transparent png files in the NavBar header code? This does not appear to be the issue as the png's are transparent in IE6.

Does IE correctly calculate image sizes correctly? I ask this because the banner image appears smaller than 900px in IE6.

If you think I should I will repost this as a new thread in the customization forum.

yldan

Feb-22-2007, 06:02 PM

Sorry... I'm going out of the normal NavBar thread to try to "widen the net" of my plea for help. If that's totally out of line, a moderator can move this, and I apologize. But I've been posting for a few days on the NavBar thread and haven't found a solution (although Allen has given a great deal of help & effort, which I really appreciate).

I'm really hoping someone else out there can help. I'm having different problems with my navbar, depending on the program:

in IE6... it looks great. just how i want it, but it drops down behind the "next" and photos.

in IE7... there is a space. i'd like to fix that, and it drops down behind "next" but not behind the photos.

in Safari... my navbar drops down behind the slideshow, rendering it almost worthless. i think it also drops down behind pictures. i don't have safari, so maybe someone could tell me. also, is there a space? (i can't remember)

in Firefox... same as IE7 but the space if fixed.

yldan.smugmug.com - to see what i'm talking about click on my "best of 2006" gallery in my portfolio

RogersDA

Feb-22-2007, 08:07 PM

Some hover colors are not showing on second menu level in Firefox and IE7. Can someone look at the code to see what I might need to tweak?

Also, is there something I can do to remove the image jittering in IE7 when selecting menu items?

Allen

Feb-22-2007, 08:40 PM

Some hover colors are not showing on second menu level in Firefox and IE7. Can someone look at the code to see what I might need to tweak?

Also, is there something I can do to remove the image jittering in IE7 when selecting menu items?
The jittering might be caused by the widths of the cells. Go thru and set them
all the same or slightly smaller so they don't bloom.

See here (http://allen-steve.smugmug.com/gallery/2078255) and look at the comments for all the colors.

anderson_paul

Feb-24-2007, 05:52 AM

Hi all I have two questions
1) I'm sure it issimple but when you click on my link Paul Jr it does not go any were it might just be a simple code are i'm sure.

2) I was reading the info on how to build a slide show they may be stupid but the page shows three different codes do I do all three or just pick one code.

Thanks and my link to my page is www.paulandersonphoto.com.

Andy

Feb-24-2007, 05:55 AM

Hi all I have two questions
1) I'm sure it issimple but when you click on my link Paul Jr it does not go any were it might just be a simple code are i'm sure.
You have to actually go into the header html on your customize page, and put links in there. Right now, you have just "placeholders" for that link.

2) I was reading the info on how to build a slide show they may be stupid but the page shows three different codes do I do all three or just pick one code.

Get the instructions, read them - there are three bits of code. Footer HTML code, Javascript that goes in the Javascript box, and CSS that goes in the CSS box.

Holler with specific questions, we'll be here for you!

anderson_paul

Feb-24-2007, 06:46 AM

thanks andy but i didn't explain my self right. I know they are not all linked up but I have linked some of them like the paul Jr one. it works in netscape and firefox but not IE.

Andy

Feb-24-2007, 06:52 AM

thanks andy but i didn't explain my self right. I know they are not all linked up but I have linked some of them like the paul Jr one. it works in netscape and firefox but not IE.
You have errors in your navbar code. I'll move this to the Navbar help thread so that Allen can help.

Allen

Feb-24-2007, 08:00 AM

Hi all I have two questions
1) I'm sure it issimple but when you click on my link Paul Jr it does not go any were it might just be a simple code are i'm sure.

2) I was reading the info on how to build a slide show they may be stupid but the page shows three different codes do I do all three or just pick one code.

Thanks and my link to my page is www.paulandersonphoto.com (http://www.paulandersonphoto.com).
I went thru and cleaned up your html.
This is the up dated version, you can replace the whole thing.
You need to add links in a few places. See green.

<div class="menu">
<ul>
<li><a href="/">home</a></li>
<li><a class="drop" href="Place%20link%20here">about
</a> 
<ul>
<li><a href="/gallery/xxxxxxx">contact</a></li>
<li><a href="/gallery/xxxxxxx">news</a></li>
</ul> 
</li>

<li><a class="drop" href="Place%20link%20here">Paul Sr
</a> 
<ul>
<li><a href="/gallery/xxxxxxx">bio</a></li>
<li><a class="drop" href="Place%20link%20here">galleries
</a>

<ul>
<li><a href="/gallery/xxxxxxx">birds</a></li>
<li><a href="/gallery/xxxxxxx">landscape</a></li>
<li><a href="/gallery/xxxxxxx">macro</a></li>
<li><a href="/gallery/xxxxxxx">animals</a></li>
<li><a href="/gallery/xxxxxxx">flowers</a></li>
<li><a href="/gallery/xxxxxxx">protraits</a></li>
</ul> 
</li>
</ul> 
</li>

<li><a class="drop" href="Place%20link%20here">Paul Jr
</a> 
<ul>
<li><a href="/gallery/xxxxxxx">bio</a></li>
<li><a class="drop" href="/Paul%20Jr.">galleries
</a> 
<ul>
<li><a href="/gallery/2317110">birds</a></li>
<li><a href="/gallery/xxxxxxx">macro</a></li>
<li><a href="/gallery/2320223">animals</a></li>
<li><a href="/gallery/xxxxxxx">flowers</a></li>
<li><a href="/gallery/2502089">landscape</a></li>
<li><a href="/gallery/xxxxxxx">protraits</a></li>
</ul> 
</li>
</ul> 
</li>

<li><a href="/popular">Popular Photos</a></li>
<li><a href="/gallery/2504608">guestbook</a></li>
</ul> 
</div>

You'll notice some of the links were shortened, much easier to read.
for a gallery use "/gallery/xxxxxxx"
for category use "/category name"
home "/"

Here's your original code. If front of each line I have what was done.
c = changed
x = removed
a = added

<div class="menu">
<ul>
<li><a href="http://floridapaul.smugmug.com">home</a></li>
<li><a class="drop" href="Place%20link%20here">about
</a> 
<ul>
<li><a href="Place%20link%20here">contact</a></li>
<li><a href="Place%20link%20here">news</a></li>
</ul>
</li>
x <li> </li>
<li><a class="drop" href="Place%20link%20here">Paul Sr
</a> 
<ul>
<li><a href="Place%20link%20here">bio</a></li>
<li><a class="drop" href="Place%20link%20here">galleries
</a>

<ul>
x <li> </li>
<li><a href="Place%20link%20here">birds</a></li>
x <li> </li>
<li><a href="Place%20link%20here">landscape</a></li>
x <li> </li>
<li><a href="Place%20link%20here">macro</a></li>
x <li> </li>
<li><a href="Place%20link%20here">animals</a></li>
x <li> </li>
<li><a href="Place%20link%20here">flowers</a></li>
x <li> </li>
<li><a href="Place%20link%20here">protraits</a></li>
</ul> 
</li></ul>
</li>
<li><a class="drop" href="Place%20link%20here">Paul Jr
</a> 
<ul>
<li><a href="Place%20link%20here">bio</a></li>
<li><a class="drop" href="http://floridapaul.smugmug.com/Paul%20Jr.">galleries
</a> 
<ul>
x <li> </li>
x <li><a href="http://floridapaul.smugmug.com/gallery/2317110#121345563%3C/a%3E%3C/li%3E%0D%0A%3Cli%3E%0D%0A%20%09%20%20%3Cli%3E%3Ca% 20href=" http:="" floridapaul.smugmug.com="" gallery="" 2502089#131364995="">birds</a></li>

a <li><a href="http://floridapaul.smugmug.com/gallery/2317110">birds</a></li>
x <li> </li>
<li><a href="Place%20link%20here">macro</a></li>
x <li> </li>
c <li><a href="http://floridapaul.smugmug.com/gallery/2320223">animals</a></li>
x <li> </li>
<li><a href="Place%20link%20here">flowers</a></li>
x <li> </li>
c <li><a href="http://floridapaul.smugmug.com/gallery/2502089">landscape</a></li>
x <li> </li>
<li><a href="Place%20link%20here">protraits</a></li>
</ul>
</li>
</ul>
</li>
c <li><a href="http://floridapaul.smugmug.com/popular">Popular Photos</a></li>
<li><a href="http://floridapaul.smugmug.com/gallery/2504608">guestbook</a></li>
c </ul>
</div>

movol

Feb-24-2007, 12:16 PM

OK...i have copied and pasted (and modified link text) for my site and CANNOT get it to be horizontal.

I've tried several different 'versions' of css and html code from various links/posts in this form and even went to a tutorial site and had it generate the code for me and I still cannot get it horizontal. the best i can do is get the vertical list centered.

The tutorial from dgrin doesn't work for me..i copied that CSS and HTML code and didn't make it horizontal, the link in one of the 'start here for horizontal navbar' is http://css.maxdesign.com.au/listutorial/horizontal_introduction.htm and this is what i used to to 'write' my code and even to http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/ to have my code auto-generated..

where is the quirk? (I don't care about the colors at this time...it's secondary and easily changed...)

CSS code
#my_banner {
width: 900px;
height: 140px;
margin: 0 auto;
background: url(http://photos.scottwking.com/photos/131562446-O.png) no-repeat;
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image, src=http://photos.scottwking.com/photos/131562446-O.png');}
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

__________________________________________

HTML code
<div id="my_banner"></div>
<div align="center">
<div id="navcontainer">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About Me">About Me</a></li>
<li><a href="#" title="Galleries">Galleries</a></li>
<li><a href="#" title="Information">Information</a></li>
<li><a href="#" title="Guestbook">Guestbook</a></li>
</ul>
</div>

thanks

Allen

Feb-24-2007, 12:52 PM

OK...i have copied and pasted (and modified link text) for my site and CANNOT get it to be horizontal.

I've tried several different 'versions' of css and html code from various links/posts in this form and even went to a tutorial site and had it generate the code for me and I still cannot get it horizontal. the best i can do is get the vertical list centered.

The tutorial from dgrin doesn't work for me..i copied that CSS and HTML code and didn't make it horizontal, the link in one of the 'start here for horizontal navbar' is http://css.maxdesign.com.au/listutorial/horizontal_introduction.htm and this is what i used to to 'write' my code and even to http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/ to have my code auto-generated..

where is the quirk? (I don't care about the colors at this time...it's secondary and easily changed...)

CSS code
#my_banner {
width: 900px;
height: 140px;
margin: 0 auto;
background: url(http://photos.scottwking.com/photos/131562446-O.png) no-repeat;
_background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
sizingMethod=image, src=http://photos.scottwking.com/photos/131562446-O.png');}
The part above in green is what is causing your navbar not to work. Delete it
and you nav works.

Edit: found the problem

Add the '

src='http

#my_banner {
width: 900px;
height: 140px;
margin: 0 auto;
background: url(http://photos.scottwking.com/photos/131562446-O.png) no-repeat;
_background: none;
filter: progid:*DXImageTransform.Microsoft.AlphaImageLoade r(enabled=true,
sizingMethod=image, src='http://photos.scottwking.com/photos/131562446-O.png');}

movol

Feb-24-2007, 01:01 PM

The part above in green is what is causing your navbar not to work. Delete it
and you nav works.

If I delete, it breaks my banner.

I was told in another post i had to have that for my banner to appear correctly for anybody using IE 6 or older, which is probably 80% of the world.

Allen

Feb-24-2007, 01:04 PM

If I delete, it breaks my banner.

I was told in another post i had to have that for my banner to appear correctly for anybody using IE 6 or older, which is probably 80% of the world. See my above post Edit

movol

Feb-24-2007, 01:09 PM

See my above post Edit

Wow..A big Thanks for catching that allen..amazing what a typo will mess up!

:bow

Allen

Feb-24-2007, 01:14 PM

Wow..A big Thanks for catching that allen..amazing what a typo will mess up!

:bow
:thumb Welcome from the east side of the state.

MichaelKirk

Feb-25-2007, 06:38 AM

Can anyone find where I messed up? I just noticed that on my Navbar I have lost all my flyouts - didn't change anything????
All my flyouts are under my "Gallery" tab - "Sports 2007, Sports 2007 & Portfolio??

Here is a portion of the code with flyouts.

Michael
www.MLKimages.com (http://www.MLKimages.com)

<div class="menu">
<ul>
<li><a href="http://www.mlkimages.smugmug.com">Home</a></li>
<li><a class="drop" href="#">Galleries
</a>

<ul>
<li><a href="http://mlkimages.smugmug.com/KCSD%202007%20Sports">Kennett School District Sports **Coming Soon**</a></li>
<li><a class="drop" href="http://www.mlkimages.smugmug.com/2007%20Sports">Sports 2007 >
</a>

<ul>
<li><a class="drop" href="#">Mountain Bike Races >
</a>

<ul>
<li><a href="http://mlkimages.smugmug.com/2007%20Sports/248076">Future Race #1</a></li>
<li><a href="http://mlkimages.smugmug.com/2007%20Sports/248075">Future Race #2</a></li>
<li><a href="http://mlkimages.smugmug.com/2007%20Sports/248077">Future Race #3</a></li>
<li><a href="http://mlkimages.smugmug.com/2007%20Sports/248078">Future Race #4</a></li>
</ul> 
</li>
<li><a class="drop" href="#">Cyclocross Races >
</a>

<ul>
<li><a href="http://mlkimages.smugmug.com/2007%20Sports/248101">Future Race #5</a></li>
<li><a href="http://mlkimages.smugmug.com/2007%20Sports/248102">Future Race #6</a></li>
</ul> 
</li>
<li><a class="drop" href="#">Road Bike Races >
</a>

<ul>
<li><a href="http://mlkimages.smugmug.com/2007%20Sports/248104">Future Race #7</a></li>
<li><a href="http://mlkimages.smugmug.com/2007%20Sports/248105">Future Race #8</a></li>
</ul> 
</li>
</ul>

Allen

Feb-25-2007, 06:48 AM

Can anyone find where I messed up? I just noticed that on my Navbar I have lost all my flyouts - didn't change anything????
All my flyouts are under my "Gallery" tab - "Sports 2007, Sports 2007 & Portfolio??

You must be talking IE because I see them in Firefox.:scratch
That usally means html error. I'll look.

Just checked. Yep, only IE

MichaelKirk

Feb-25-2007, 06:54 AM

In Firefox I get the 1st and 2nd level flyout, but the 3rd is wrong - all levels flyout
1st - 2007 Sports
2nd - Road
Mountain
Cyclocross
3rd - are the individual gallerys for each sport

3rd level is messed up in FF

IE no flyouts are working.

Thanks for looking.
Michael

You must be talking IE because I see them in Firefox.:scratch
That usally means html error. I'll look.

Just checked. Yep, only IE

Allen

Feb-25-2007, 08:01 AM

Can anyone find where I messed up? I just noticed that on my Navbar I have lost all my flyouts - didn't change anything????
All my flyouts are under my "Gallery" tab - "Sports 2007, Sports 2007 & Portfolio??

Add this to the end of your memu CSS

/* yet another hack for IE5.5 */

* html .menu ul ul a{
width: 125px; /* unknown */
w\idth: 104px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

/* make the 4th level visible when you
hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
.menu ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}

Allen

Feb-25-2007, 08:05 AM

Add this to the end of your memu CSS

You also lost your slashes

* html .menu ul li a, .menu ul li a:visited {
width:104px; w\idth:104px; /* IE main button */
}

* html .menu a, * html .menu a:visited {
width:125px;
w\idth:139px;
}

* html .menu ul ul {
top:30px;
t\op:31px; /* IE gap between main bar and the dropdown items */
}

MichaelKirk

Feb-25-2007, 11:58 AM

doing another fix it was mentioned that one of the slashes was an error - I thought they all were so I removed them - I still have a LOT to learn.
Everything seem to be working correctly now - and I will make a backup copy of my Code as well

Thanks again,
Michael

You also lost your slashes

* html .menu ul li a, .menu ul li a:visited {
width:104px; w\idth:104px; /* IE main button */
}

* html .menu a, * html .menu a:visited {
width:125px;
w\idth:139px;
}

* html .menu ul ul {
top:30px;
t\op:31px; /* IE gap between main bar and the dropdown items */
}

crj330

Feb-26-2007, 07:14 AM

I hope I'm posting this in the right place. I've gotten as far as creating my navigation bar on my website, but am a little lost on what is needed to created drop downs. Mainly for now, I want to include multiple drop downs for my galleries. I tried and ended up with another "galleries" in my nav bar. I know it's not really that hard, but am a little under the weather and my head is spinning from reading so many posts. Please direct me to a simple example for this to look at that doesn't include multiple drop downs for the whole nav bar. What should I include in my post if someone wants to look at what I have so far to be of assistance to me?

Thanks

Allen

Feb-26-2007, 07:28 AM

I hope I'm posting this in the right place. I've gotten as far as creating my navigation bar on my website, but am a little lost on what is needed to created drop downs. Mainly for now, I want to include multiple drop downs for my galleries. I tried and ended up with another "galleries" in my nav bar. I know it's not really that hard, but am a little under the weather and my head is spinning from reading so many posts. Please direct me to a simple example for this to look at that doesn't include multiple drop downs for the whole nav bar. What should I include in my post if someone wants to look at what I have so far to be of assistance to me?

Thanks A start would be to post your web page so we can help.
:wave Welcome to Dgrin.

crj330

Feb-26-2007, 07:34 AM

A start would be to post your web page so we can help.
:wave Welcome to Dgrin.

Ok, here it is: www.carolynjensenphotography.com (http://www.carolynjensenphotography.com)

Allen

Feb-26-2007, 08:00 AM

Ok, here it is: www.carolynjensenphotography.com (http://www.carolynjensenphotography.com) It all depends on how you set up your site. The easiest is to have links to
the differenet categories, subcategories or galleries. Think of each of these
as landing page that show all the galleries below.

Here's an example for a simple start. Add the xxxxxxxx gallery numbers or the
category name category name. This also needs some CSS added to support
it.

<div class="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/xxxxxxxx">About Me</a></li>
<li><a class="drop" href="Link">Galleries
</a>

<ul>
<li><a href="/popular">Most Popular</a></li>
<li><a href="/keyword">Keywords</a></li>
<li><a href="/Protraits">Protraits</a></li>
<li><a href="/category name">future category</a></li>
<li><a href="/category name">future category</a></li>
<li><a href="/category name">future category</a></li>
<li><a href="/gallery/xxxxxxxx">future gallery</a></li>
<li><a href="/gallery/xxxxxxxx">future gallery</a></li>
<li><a href="/gallery/xxxxxxxx">future gallery</a></li>
<li><a href="/gallery/xxxxxxxx">future gallery</a></li>
<li><a href="/gallery/xxxxxxxx">future gallery</a></li>
</ul> 
</li>
<li><a href="/gallery/xxxxxxxx">Information</a></li>
<li><a href="/gallery/xxxxxxxx">Guestbook</a></li>
</ul> 
</div>

Holler back with any questions.

Andy

Feb-26-2007, 11:03 AM

Sorry... I'm going out of the normal NavBar thread to try to "widen the net" of my plea for help. If that's totally out of line, a moderator can move this, and I apologize. But I've been posting for a few days on the NavBar thread and haven't found a solution (although Allen has given a great deal of help & effort, which I really appreciate).

I'm really hoping someone else out there can help. I'm having different problems with my navbar, depending on the program:

in IE6... it looks great. just how i want it, but it drops down behind the "next" and photos.

in IE7... there is a space. i'd like to fix that, and it drops down behind "next" but not behind the photos.

in Safari... my navbar drops down behind the slideshow, rendering it almost worthless. i think it also drops down behind pictures. i don't have safari, so maybe someone could tell me. also, is there a space? (i can't remember)

in Firefox... same as IE7 but the space if fixed.

yldan.smugmug.com - to see what i'm talking about click on my "best of 2006" gallery in my portfolio
Bump!

Allen

Feb-26-2007, 11:34 AM

Sorry... I'm going out of the normal NavBar thread to try to "widen the net" of my plea for help. If that's totally out of line, a moderator can move this, and I apologize. But I've been posting for a few days on the NavBar thread and haven't found a solution (although Allen has given a great deal of help & effort, which I really appreciate).

I'm really hoping someone else out there can help. I'm having different problems with my navbar, depending on the program:

in IE6... it looks great. just how i want it, but it drops down behind the "next" and photos.

in IE7... there is a space. i'd like to fix that, and it drops down behind "next" but not behind the photos.

in Safari... my navbar drops down behind the slideshow, rendering it almost worthless. i think it also drops down behind pictures. i don't have safari, so maybe someone could tell me. also, is there a space? (i can't remember)

in Firefox... same as IE7 but the space if fixed.

yldan.smugmug.com - to see what i'm talking about click on my "best of 2006" gallery in my portfolio
Adding the green works for Firefox. Can't gt IE to work though.

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

MichaelKirk

Feb-26-2007, 04:28 PM

Not sure if it is related to the changes, but now my galleries show on my home page even after I am logged out - this never happened before. I only show my gallerys on my home page when logged in. When I change the settings to hide the gallery page - it will not show logged in or logged out. Am I missing something basic here - could not find a way to get this corrected.

Michael

doing another fix it was mentioned that one of the slashes was an error - I thought they all were so I removed them - I still have a LOT to learn.
Everything seem to be working correctly now - and I will make a backup copy of my Code as well

Thanks again,
Michael

Allen

Feb-26-2007, 04:33 PM

Not sure if it is related to the changes, but now my galleries show on my home page even after I am logged out - this never happened before. I only show my gallerys on my home page when logged in. When I change the settings to hide the gallery page - it will not show logged in or logged out. Am I missing something basic here - could not find a way to get this corrected.

Michael
You're missing this.

.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}

drdane

Feb-26-2007, 09:22 PM

I just created a Basic NavBar here: http://drdane.smugmug.com/ - thanks to the tutorial.

The NavBar overlies the lower part of the banner, even though the banner is set to have 20 px space under it. (Must be some secret to this:scratch)

Now I need to learn how to move my Bio, Contact Info and Galleries to new pages, and link to them from the NavBar buttons. I presume the links would go in the Header section, but since the pages haven't been created yet I'm linkless at the moment. How to proceed from here?

Waiting for Your Wisdom . . .

Thanks,
Dane

Allen

Feb-26-2007, 09:50 PM

I just created a Basic NavBar here: http://drdane.smugmug.com/ - thanks to the tutorial.

The NavBar overlies the lower part of the banner, even though the banner is set to have 20 px space under it. (Must be some secret to this:scratch)

Now I need to learn how to move my Bio, Contact Info and Galleries to new pages, and link to them from the NavBar buttons. I presume the links would go in the Header section, but since the pages haven't been created yet I'm linkless at the moment. How to proceed from here?

Waiting for Your Wisdom . . .

Thanks,
Dane
You had -20px for the bottom margin.

#my_banner {
display: none;
width: 800px;
height: 160px;
margin: 0 auto;
background: url(http://drdane.smugmug.com/photos/130100796-L.jpg) no-repeat;
margin-bottom: 20px;
margin-top: 20px;
}

drdane

Feb-26-2007, 09:59 PM

You had -20px for the bottom margin.

#my_banner {
display: none;
width: 800px;
height: 160px;
margin: 0 auto;
background: url(http://drdane.smugmug.com/photos/130100796-L.jpg) no-repeat;
margin-bottom: 20px;
margin-top: 20px;
}

Thanks, Allen - that fixed the location.:ivar

I'm going to bed (yawn!), but would appreciate any coaching you can offer on setting up those new pages and linking them to the NavBar buttons, when you have the time.

crj330

Feb-27-2007, 07:46 AM

Quote:
Originally Posted by crj330
I hope I'm posting this in the right place. I've gotten as far as creating my navigation bar on my website, but am a little lost on what is needed to created drop downs. Mainly for now, I want to include multiple drop downs for my galleries. I tried and ended up with another "galleries" in my nav bar. I know it's not really that hard, but am a little under the weather and my head is spinning from reading so many posts. Please direct me to a simple example for this to look at that doesn't include multiple drop downs for the whole nav bar. What should I include in my post if someone wants to look at what I have so far to be of assistance to me?

Thanks

It all depends on how you set up your site. The easiest is to have links to
the differenet categories, subcategories or galleries. Think of each of these
as landing page that show all the galleries below.

Here's an example for a simple start. Add the xxxxxxxx gallery numbers or the
category name category name. This also needs some CSS added to support
it.

<div class="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/xxxxxxxx">About Me</a></li>
<li><a class="drop" href="Link">Galleries
</a>

<ul>
<li><a href="/popular">Most Popular</a></li>
<li><a href="/keyword">Keywords</a></li>
<li><a href="/Protraits">Protraits</a></li>
<li><a href="/category name">future category</a></li>
<li><a href="/category name">future category</a></li>
<li><a href="/category name">future category</a></li>
<li><a href="/gallery/xxxxxxxx">future gallery</a></li>
<li><a href="/gallery/xxxxxxxx">future gallery</a></li>
<li><a href="/gallery/xxxxxxxx">future gallery</a></li>
<li><a href="/gallery/xxxxxxxx">future gallery</a></li>
<li><a href="/gallery/xxxxxxxx">future gallery</a></li>
</ul> 
</li>
<li><a href="/gallery/xxxxxxxx">Information</a></li>
<li><a href="/gallery/xxxxxxxx">Guestbook</a></li>
</ul> 
</div>
Holler back with any questions.

Sorry, but I do not know what I might be doing wrong. You indicated that "this needs some CSS to support it". I've tried removing my info and trying above to look at the result and I got bulleted list of the above. When I tried to implement parts of it pertaining just to galleries I would end up with more navbar buttons and still no drop downs. Is the CSS that you mentioned part of my problem that you indicated is needed to support the above. Sorry if I'm making this way harder than it is.

Thanks
www.carolynjensenphotography.com (http://www.carolynjensenphotography.com)

Allen

Feb-27-2007, 08:33 AM

Quote:
Originally Posted by crj330
Sorry, but I do not know what I might be doing wrong. You indicated that "this needs some CSS to support it". I've tried removing my info and trying above to look at the result and I got bulleted list of the above. When I tried to implement parts of it pertaining just to galleries I would end up with more navbar buttons and still no drop downs. Is the CSS that you mentioned part of my problem that you indicated is needed to support the above. Sorry if I'm making this way harder than it is.

Thanks
www.carolynjensenphotography.com (http://www.carolynjensenphotography.com) In your header customize box replace the red with what's below it.
You will have to add links to galleries/catrgories etc.
There are extra drops that you can edit or delete or add more if you like.

<div id="navcontainer">
<ul>
<li><a href="http://carolynjensenphotography.smugmug.com">Home</a></li>
<li><a href="">About Me</a></li>

<li><a href="http://carolynjensenphotography.smugmug.com/gallery/250726">Galleries</a></li>
<li><a href="">Information</a></li>
<li><a href="">Guestbook</a></li>
</ul>
</div>

<div class="menu">
<ul>
<li><a href="www.carolynjensenphotography.com/">Home</a></li>
<li><a href="/gallery/xxxxxxxx">About Me</a></li>
<li><a class="drop" href="Link">Galleries
</a>

<ul>
<li><a href="/popular">Most Popular</a></li>
<li><a href="/keyword">Keywords</a></li>
<li><a href="/Portraits">Portraits</a></li>
<li><a href="/category name">future category</a></li>
<li><a href="/category name">future category</a></li>
<li><a href="/category name">future category</a></li>
<li><a href="/gallery/xxxxxxxx">future gallery</a></li>
<li><a href="/gallery/xxxxxxxx">future gallery</a></li>
<li><a href="/gallery/xxxxxxxx">future gallery</a></li>
<li><a href="/gallery/xxxxxxxx">future gallery</a></li>
<li><a href="/gallery/xxxxxxxx">future gallery</a></li>
</ul> 
</li>
<li><a href="/gallery/xxxxxxxx">Information</a></li>
<li><a href="/gallery/xxxxxxxx">Guestbook</a></li>
</ul> 
</div>

To make it easier this is your whole CSS, replace the whole thing
except for the green at the bottom.

.menu {
position:relative;
display:block;
z-index:99;
padding: 20px 0px 20px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 510px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto;
}

.menu ul {
padding: 10px 0px 10px 0px;
margin:0 auto;
list-style-type: none;
}

.menu ul li {
float:left;
position:relative;
}

.menu ul li a,
.menu ul li a:visited {
display:block;
font-size:1em; /* main buttons */
color: #fff ; /* main buttons text non-hover*/
text-decoration:none;
text-align:center; /* centers text in buttons */
width: 100px; /* main box width */
height: 20px; /* main box height */
background: #036; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}

* html .menu ul li a, .menu ul li a:visited {
width: 104px; w\idth: 104px; /* IE main button */
}

.menu ul li ul {
display:none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li:hover a {
color: #fff; /* main when hover DD */
background: #369; /* main when hover DD */
}

.menu ul li:hover ul {
display:block;
position:absolute;
top: -4px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 104px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background: #036; /* DD FO non-hover */
color: #fff; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 100px /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #369; /* DD FO hover */
color: #fff; /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left: 102px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 146px; /* FF FO box width */
}

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li a:hover {
/* text-decoration:none; /* might be needed */ */
color: #fff; /* main hover */
background: #369; /* main hover */
}

.menu ul li a:hover ul {
display:block;
position:absolute;
top: 2px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display:block;
background: #036; /* IE DD color non-hover */
color: #fff; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 145px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

.menu ul li a:hover ul li a:hover {
background: #369; /* DD FO hover */
color: #fff; /* DD FO hover */
}

.menu ul li a:hover ul li a:hover ul {
display:block;
position:absolute;
top: -22px; /* FO up down */
color: #fff; /* unknown */
left: 147px; /* FO right left */
}

.menu ul li a:hover ul li a:hover ul.left {
left: -134px;
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width: 125px;
w\idth: 139px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top: 30px;
t\op: 31px; /* 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:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a{
width: 125px; /* unknown */
w\idth: 104px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* hides your name (including any 's) */
#userName {
display: none;
}
/* hides the word home */
#userHome {
display: none;
}
/* removed the 's */
.possess {
display: none;
}

Key: Do not add to CSS
---------------------------------------
Abreviations: | DD = Dropdown
used above | FO = Flyout
in comments | IE = Internet Explorer
| FF = Firefox

This will get you started.
Holler back with any questions.

crj330

Feb-27-2007, 10:18 AM

Thanks alot for your help! I now can move forward in getting my site set up more like I would like it. I have begun to link galleries to the drop down menu under my navbar "galleries". Once I get that all set, am I right in putting in the following code to include any more drop downs for my navbar (red=navbar):

<li><a class="drop" href="Link">Information
</a>

<ul>

And then include the line that would link the "Information" to a gallery page? Or maybe I'm wrong or missing somethings. I'm starting to understand all this more I think.

Thanks again for your help!:rofl

Allen

Feb-27-2007, 10:58 AM

Thanks alot for your help! I now can move forward in getting my site set up more like I would like it. I have begun to link galleries to the drop down menu under my navbar "galleries". Once I get that all set, am I right in putting in the following code to include any more drop downs for my navbar (red=navbar):

<li><a class="drop" href="Link">Information
</a>

<ul>

And then include the line that would link the "Information" to a gallery page? Or maybe I'm wrong or missing somethings. I'm starting to understand all this more I think.

Thanks again for your help!:rofl
:scratch Not quite understanding.
You want drops for your information? Like this?

<li><a href="/gallery/xxxxxxxx">future gallery</a></li>
</ul> 
</li>

<li><a class="drop" href="/gallery/xxxxxxxx">Information
</a>

<ul>
<li><a href="/gallery/xxxxxxxx">future gallery</a></li>
<li><a href="/gallery/xxxxxxxx">future gallery</a></li>
</ul> 
</li>

<li><a href="/gallery/xxxxxxxx">Guestbook</a></li>

Edit: Make the following changes so your navbar doesn't wrap and the dropdowns
closer to the main.
.menu {
position:relative;
display:block;
z-index:99;
padding: 20px 0px 20px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 530px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto;
}

.menu ul li:hover ul {
display:block;
position:absolute;
top: -7px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 104px; /* unknown */
}

RogersDA

Feb-28-2007, 06:49 AM

See here (http://allen-steve.smugmug.com/gallery/2078255) and look at the comments for all the colors.

Allen,

I took a look at that, and for the life of me I can't seem to figure out why only some of the second-level menu change their hover color in both IE7 and Firefox. I could understand it if none of them had a hover color change. Then I would know I screwed up. But to only have a select few of them change their hover color is strange. Even more so considering that IE7 and Fireofox are not consistent with which ones that change color.

Any insight you might have will be appreciated.

Thanks.

crj330

Feb-28-2007, 07:32 AM

Edit: Make the following changes so your navbar doesn't wrap and the dropdowns
closer to the main.
.menu {
position:relative;
display:block;
z-index:99;
padding: 20px 0px 20px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 530px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto;
}

.menu ul li:hover ul {
display:block;
position:absolute;
top: -7px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 104px; /* unknown */
}
Allen,

Thank you for giving me assistance with my website it getting closer & closer to how I would like it to be. I will be working on my site a lot in the next few days and probably will end up with more questions I'm sure. It really feels good to know that I can now move forward and make some real progress. I was stuck for awhile there. I was actually going to ask you today what I needed to change to keep the "Guestbook" from wrapping to the next line. This forum is sooooooooooo great!:clap

Thanks a lot!!
Carolyn

Allen

Feb-28-2007, 07:43 AM

Allen,

I took a look at that, and for the life of me I can't seem to figure out why only some of the second-level menu change their hover color in both IE7 and Firefox. I could understand it if none of them had a hover color change. Then I would know I screwed up. But to only have a select few of them change their hover color is strange. Even more so considering that IE7 and Fireofox are not consistent with which ones that change color.

Any insight you might have will be appreciated.

Thanks.
Not really, don't have IE7 to check. Just make sure you get them all, there's
a bunch of color elements in the code.

PamelaR

Feb-28-2007, 03:31 PM

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!

Andy, can you direct me to a thread or two that explains how to get my navigation down the left side? I've got the it all set up in html and css, I just need to know how it get it into smug mug. Thanks!

Allen

Feb-28-2007, 04:51 PM

Andy, can you direct me to a thread or two that explains how to get my navigation down the left side? I've got the it all set up in html and css, I just need to know how it get it into smug mug. Thanks!
Hey Pam, welcome to Dgrin.:wave

If you are going to have a bunch of questions on different things
customizing your site, can you start a new thread and it will be all yours.
Would be easier to track that way.

Also it would help if we had the link to your site though.

You have the html and CSS incorporated already? If not you could post it
also and we could check it out for you. If incorporated, we'll view using the
WebDev in Firefox to see it, tweak the code in real time and post
changes back to your thread.

Make any sense?

RogersDA

Mar-01-2007, 05:20 AM

Not really, don't have IE7 to check. Just make sure you get them all, there's
a bunch of color elements in the code.
Well, I figured it out. I had the second-level hover code after the second-level visited code. I switched their places in the CSS and now the hover code works.

I didn't think that placement mattered in this case, but I guess I was wrong.

PamelaR

Mar-01-2007, 02:27 PM

Hey Pam, welcome to Dgrin.:wave

If you are going to have a bunch of questions on different things
customizing your site, can you start a new thread and it will be all yours.
Would be easier to track that way.

Also it would help if we had the link to your site though.

You have the html and CSS incorporated already? If not you could post it
also and we could check it out for you. If incorporated, we'll view using the
WebDev in Firefox to see it, tweak the code in real time and post
changes back to your thread.

Make any sense?

Thanks Allen,

I'm working with this client at www.southcoronadophoto.com

I've got the html and css all set up in my editor, but I don't know where to put the html on the smugmug customization page to get it to run down the left side, as opposed to across the top like everyone else's. Do I just plug it into the header and then place it absolutely? Help!:scratch

Allen

Mar-01-2007, 03:08 PM

Thanks Allen,

I'm working with this client at www.southcoronadophoto.com (http://www.southcoronadophoto.com)

I've got the html and css all set up in my editor, but I don't know where to put the html on the smugmug customization page to get it to run down the left side, as opposed to across the top like everyone else's. Do I just plug it into the header and then place it absolutely? Help!:scratch
Are you talking about the navbar on the page after you enter? You want it
down the side instead of across the top? That's gets real tricky because it's
hard to place and stay when the page is resized. Stretch your page and
watch everything hit the left side.
Make any sense?

PamelaR

Mar-05-2007, 01:06 PM

Are you talking about the navbar on the page after you enter? You want it
down the side instead of across the top? That's gets real tricky because it's
hard to place and stay when the page is resized. Stretch your page and
watch everything hit the left side.
Make any sense?

Ok, I've switched gears here. www.southcoronadophoto.com I've got the drop-down, fly-out working perfectly in FF, but of course it doesn't work in IE. Can someone give me the fix? Thanks.

cptcorn

Mar-06-2007, 08:27 AM

I've ripped my hair out looking at why my nav bar isnt displaying in IE 6 and 7. Displays fine in firefox. I've looked at the code many times and I can't find anything wrong.

Thanks
Alex
http://cptcorn.smugmug.com

cptcorn

Mar-06-2007, 08:40 AM

I've ripped my hair out looking at why my nav bar isnt displaying in IE 6 and 7. Displays fine in firefox. I've looked at the code many times and I can't find anything wrong.

Thanks
Alex
http://cptcorn.smugmug.com

I noticed when I remove the rotating banner code it's fine... However when its there it breaks again.

cptcorn

Mar-06-2007, 08:56 AM

I noticed when I remove the rotating banner code it's fine... However when its there it breaks again.
Temporarily removed the rotating banner code and replaced with a non-rotating one.

here is the code that was there:

******** language="JavaScript" type="text/javascript">
var how_many_ads = 5;
var now = new Date();
var sec = now.getSeconds();
var ad = sec % how_many_ads;
ad +=1;
if (ad==1) {
url="http://www.figzphoto.com";
alt="figzphoto.com";
banner="http://cptcorn.smugmug.com/photos/133373793-O.png";
width="750";
height="100";
}
if (ad==2) {
url="http://www.figzphoto.com";
alt="figzphoto.com";
banner="http://cptcorn.smugmug.com/photos/134033119-O.png";
width="750";
height="100";
}
if (ad==3) {
url="http://www.figzphoto.com";
alt="figzphoto.com";
banner="http://cptcorn.smugmug.com/photos/134033121-O.png";
width="750";
height="100";
}
if (ad==4) {
url="http://www.figzphoto.com";
alt="figzphoto.com";
banner="http://cptcorn.smugmug.com/photos/134034102-O.png";
width="750";
height="100";
}
if (ad==5) {
url="http://www.figzphoto.com";
alt="figzphoto.com";
banner="http://cptcorn.smugmug.com/photos/134034103-O.jpg";
width="750";
height="100";
}
document.write('<center>');
document.write('<a href=\"' + url + '\" target=\"_top\">');
document.write('<img src=\"' + banner + '\" width=');
document.write(width + ' height=' + height + ' ');
document.write('alt=\"' + alt + '\" border=0><br>');
</********
</a>

ivar

Mar-06-2007, 08:58 AM

Temporarily removed the rotating banner code and replaced with a non-rotating one.

here is the code that was there:

******** language="JavaScript" type="text/javascript">
var how_many_ads = 5;
var now = new Date();
var sec = now.getSeconds();
var ad = sec % how_many_ads;
ad +=1;
if (ad==1) {
url="http://www.figzphoto.com";
alt="figzphoto.com";
banner="http://cptcorn.smugmug.com/photos/133373793-O.png";
width="750";
height="100";
}
if (ad==2) {
url="http://www.figzphoto.com";
alt="figzphoto.com";
banner="http://cptcorn.smugmug.com/photos/134033119-O.png";
width="750";
height="100";
}
if (ad==3) {
url="http://www.figzphoto.com";
alt="figzphoto.com";
banner="http://cptcorn.smugmug.com/photos/134033121-O.png";
width="750";
height="100";
}
if (ad==4) {
url="http://www.figzphoto.com";
alt="figzphoto.com";
banner="http://cptcorn.smugmug.com/photos/134034102-O.png";
width="750";
height="100";
}
if (ad==5) {
url="http://www.figzphoto.com";
alt="figzphoto.com";
banner="http://cptcorn.smugmug.com/photos/134034103-O.jpg";
width="750";
height="100";
}
document.write('<center>');
document.write('<a href=\"' + url + '\" target=\"_top\">');
document.write('<img src=\"' + banner + '\" width=');
document.write(width + ' height=' + height + ' ');
document.write('alt=\"' + alt + '\" border=0><br>');
</********
</a>
Can it be the a-element closing tag after the script tags? You are closing something that doesn't seem to be opened...

cptcorn

Mar-06-2007, 09:21 AM

Can it be the a-element closing tag after the script tags? You are closing something that doesn't seem to be opened...

Just tried that and it didn't help

PamelaR

Mar-08-2007, 01:48 PM

Allen, not sure if you've seen my updated question. I switched to top nav, which is working beautifully in FF, but not in IE. Can you give me the fix? www.southcoronadophoto.com

Thanks,
Pam:D

Are you talking about the navbar on the page after you enter? You want it
down the side instead of across the top? That's gets real tricky because it's
hard to place and stay when the page is resized. Stretch your page and
watch everything hit the left side.
Make any sense?

PamelaR

Mar-10-2007, 06:48 AM

I've got my drop down nav bar working in FF, but not in IE or safari. Can someone please give me the fix? Thanks!

Pam
www.southcoronadophoto.com
:scratch

quirk6

Mar-11-2007, 11:29 AM

I spent some time yesterday changing and fine tuning a new navbar on my site

http://adammorgansmith.smugmug.com

I've got it in just the right spot on the home page, but once you go to one of my galleries

http://adammorgansmith.smugmug.com/landscapes

the navbar is now on top of the adammorgansmith>landscapes bit. It also overlaps other things like the slideshow and share photo buttons.

How do I fix this without messing up my homepage?

Barb

Mar-11-2007, 12:13 PM

I spent some time yesterday changing and fine tuning a new navbar on my site

http://adammorgansmith.smugmug.com

I've got it in just the right spot on the home page, but once you go to one of my galleries

http://adammorgansmith.smugmug.com/landscapes

the navbar is now on top of the adammorgansmith>landscapes bit. It also overlaps other things like the slideshow and share photo buttons.

How do I fix this without messing up my homepage?

Hi :)

You could add this to your CSS and adjust as needed:

#navcontainer {padding-bottom: 20px;}

Also, I would remove the red line from your current code. It's messing it up in Firefox:

#navcontainer ul
{
width: 635px;
display: block;
list-style: none outside;
padding: 0;
margin: 0 0 0 10px;
font-family: Verdana, sans-serif;
font-size: x-small;
margin-bottom: -52px;
margin-top: 20px;
}

quirk6

Mar-11-2007, 12:54 PM

Crud, you've only shown me that I had more problems than I thought. The margin-bottom: -52px; line that you were telling me to nix was exactly what was aligning the navbar properly in IE. Now, I don't use IE, but I preview the site in IE when I am working on it so I don't have to keep logging of of smugmug to see what it properly looks like, so I had no idea that it was messed up in Firefox, which is what I normally use. The new line you gave me, the #navcontainer {padding-bottom: 20px;} line doesn't seem to be able to do the job of lining up my navbar properly in either browser. You can see on my site that the page is divided up into three stripes, the Header/navbar area, the slideshow area, and the footer area. I want my navbar resting on the bottom of the header/navbar area, I don't want a single pixel between the bottom of the navbar and the top the slideshow area. Any other way I can do this?

Hi :)

You could add this to your CSS and adjust as needed:

#navcontainer {padding-bottom: 20px;}

Also, I would remove the red line from your current code. It's messing it up in Firefox:

#navcontainer ul
{
width: 635px;
display: block;
list-style: none outside;
padding: 0;
margin: 0 0 0 10px;
font-family: Verdana, sans-serif;
font-size: x-small;
margin-bottom: -52px;
margin-top: 20px;
}

quirk6

Mar-11-2007, 04:13 PM

I didn't want to leave my navbar messed up for too long, so I just switched back to the old one I'm trying to replace. It's still not lined up correctly in Firefox, but at least it's working! In IE7 it's lined up correctly, but isn't working at all! WTF? I worked before and I cut pasted all the css and html so it's exactly the same as before!

HELP PLEASE!

Barb

Mar-11-2007, 04:17 PM

I didn't want to leave my navbar messed up for too long, so I just switched back to the old one I'm trying to replace. It's still not lined up correctly in Firefox, but at least it's working! In IE7 it's lined up correctly, but isn't working at all! WTF? I worked before and I cut pasted all the css and html so it's exactly the same as before!

HELP PLEASE!

Hang tight :) I'll have Allen come and take a look when he's available. He is all things navbar!

quirk6

Mar-11-2007, 04:27 PM

Okay, thanks!

quirk6

Mar-11-2007, 05:27 PM

I've been mucking about with my navbar because I'm impatient and obsessive and can't let it go. I've changed the navbar to yet ANOTHER one. I put in the navbar and got it working in both FF and IE, however, like all the others, the placement wasn't good. Whatever navbar I put in, there's WAAAAAY to much space between the bottom of the navbar and the bottom of the header area/top of the slideshow area. So, in the following portion of the css

#navcontainer
{
font-family: Arial,Sans-Serif;
margin: 0 auto;
width: 70%;
border-bottom: 1px solid #3e3e3e;
}

I added

#navcontainer
{
font-family: Arial,Sans-Serif;
margin: 0 auto;
width: 70%;
border-bottom: 1px solid #3e3e3e;
margin-top: 5px;
margin-bottom: -35px;
}

to help place it where I wanted it, I got it positioned in the right spot, but the navbar was no longer working in IE, I removed the margin lines from the css and the navbar works again. So, I've discovered what was breaking my navbar in the css, but I still don't have a solution on how to position it where I want it without #$%^ing it up in the odious IE. I'm not entirely pleased with the navbar I've got up right now, but it's fine for now, but what I really want to know is how place a navbar, any and all navbars, where I want it between the header and slideshow.

Thanks

http://adammorgansmith.smugmug.com

Allen

Mar-11-2007, 07:04 PM

I've been mucking about with my navbar because I'm impatient and obsessive and can't let it go. I've changed the navbar to yet ANOTHER one. I put in the navbar and got it working in both FF and IE, however, like all the others, the placement wasn't good. Whatever navbar I put in, there's WAAAAAY to much space between the bottom of the navbar and the bottom of the header area/top of the slideshow area. So, in the following portion of the css

#navcontainer
{
font-family: Arial,Sans-Serif;
margin: 0 auto;
width: 70%;
border-bottom: 1px solid #3e3e3e;
}

I added

#navcontainer
{
font-family: Arial,Sans-Serif;
margin: 0 auto;
width: 70%;
border-bottom: 1px solid #3e3e3e;
margin-top: 5px;
margin-bottom: -35px;
}

to help place it where I wanted it, I got it positioned in the right spot, but the navbar was no longer working in IE, I removed the margin lines from the css and the navbar works again. So, I've discovered what was breaking my navbar in the css, but I still don't have a solution on how to position it where I want it without #$%^ing it up in the odious IE. I'm not entirely pleased with the navbar I've got up right now, but it's fine for now, but what I really want to know is how place a navbar, any and all navbars, where I want it between the header and slideshow.

Thanks

http://adammorgansmith.smugmug.com Your menu's bouncing all over the place in both FF & IE6. I don't quite
understand what you're doing but changing below stabilizes the menu and
moves it to the top of your slideshow container.

#navcontainer
{
font-family: Arial,Sans-Serif;
margin: 0 auto;
width: 800px;
margin-bottom: -40px; /* adjust for FF */
_margin-bottom: -40px; /* adjust for IE */
border-bottom: 1px solid #3e3e3e;
}

Don't need _margin-bottom unless IE is diferent.
Does this help?

quirk6

Mar-11-2007, 07:45 PM

I tried it, but unfortunately it still renders the navbar inoperable in IE. Is there a way to force the size of the header area instead of moving the navbar?

Allen

Mar-11-2007, 07:57 PM

I tried it, but unfortunately it still renders the navbar inoperable in IE. Is there a way to force the size of the header area instead of moving the navbar?
Which IE are you using? Did you also change the width of 100% to 800px? It
works fine here in FF & IE6.

Can you explain inoperable? When hovering it blooms to bigger
size and each cell wraps to second line because of the width
you using I think.

quirk6

Mar-11-2007, 08:01 PM

I cut and pasted what you posted over my current css. My laptop has IE7, so that's what my preview was in. Hmm.

Allen

Mar-11-2007, 08:04 PM

I cut and pasted what you posted over my current css. My laptop has IE7, so that's what my preview was in. Hmm.
I'd play with the width then, just keep making it a little wider and see if IE7
will function. Again, I don't know what you're seeing as inop., don't have IE7.

quirk6

Mar-12-2007, 03:13 AM

I'll play with the width and see if it works. When I say inoperable, I mean the mouseover on the navbar doesn't work, neither do the links, it essentially shows up as static and useless.

quirk6

Mar-12-2007, 01:50 PM

I put the css back in and played around with the width, but no matter what, the navbar didn't work in IE7 as long as the margin-bottom: -35px; line was in the css. So, I put the navbar in my footer and everything seems to work fine now. I have some reservations about the navbar being in the footer, but it'll do for now, I guess.

Allen

Mar-12-2007, 01:56 PM

I put the css back in and played around with the width, but no matter what, the navbar didn't work in IE7 as long as the margin-bottom: -35px; line was in the css. So, I put the navbar in my footer and everything seems to work fine now. I have some reservations about the navbar being in the footer, but it'll do for now, I guess.
Did you try the one that will effects IE7? Add a ~ in front.

margin-bottom: -35px; /* FF */
_margin-bottom: -35px; /* IE6 */
~margin-bottom: -35px; /* IE7 */

quirk6

Mar-12-2007, 03:40 PM

Alas and alack, it still doesn't work in IE7. Man, this stuff is finicky. Mostly I blame Microsoft and their terrible browser.

PamelaR

Mar-14-2007, 09:46 AM

For some reason my question keeps getting overlooked and not answered. My client is getting antsy to get this resolved. Please help me!!! :dunno:huh:rolleyes:cry

I've got my drop down nav bar working in FF, but not in IE or safari. Can someone please give me the fix? Thanks!

Pam
www.southcoronadophoto.com (http://www.southcoronadophoto.com)
:scratch

PamelaR

Mar-14-2007, 09:50 AM

For some reasons my posts are getting over-looked so forgive me if I send two or three out at once. My client would like to get this resolved.

I've changed my nav to the top and the drop down is working in FF, but not in IE or Safari. Can you please give me the fix?? :bow

www.southcoronadophoto.com

Are you talking about the navbar on the page after you enter? You want it
down the side instead of across the top? That's gets real tricky because it's
hard to place and stay when the page is resized. Stretch your page and
watch everything hit the left side.
Make any sense?

Allen

Mar-14-2007, 10:24 AM

For some reasons my posts are getting over-looked so forgive me if I send two or three out at once. My client would like to get this resolved.

I've changed my nav to the top and the drop down is working in FF, but not in IE or Safari. Can you please give me the fix?? :bow

www.southcoronadophoto.com (http://www.southcoronadophoto.com) Would love to help but not familar with the nav code you're using. Do you
know where you got it from? Maybe I can get a hint from there.

PamelaR

Mar-14-2007, 04:19 PM

I go the code from chapter 6 of More Eric Meyer on CSS. I think the hook here is that I am supposed to call up a behavior file called crossover.htc. This file is supposed to live in the same folder as my other files, but of course, I have no idea where those files live since I'm on smugmug.

So either I need to know where to put the .htc file (be nice) or just get a hack for my menu. Or start from scratch. Oh please, don't say I need to start from scratch. :huh

Would love to help but not familar with the nav code you're using. Do you
know where you got it from? Maybe I can get a hint from there.

Allen

Mar-14-2007, 06:40 PM

I go the code from chapter 6 of More Eric Meyer on CSS. I think the hook here is that I am supposed to call up a behavior file called crossover.htc. This file is supposed to live in the same folder as my other files, but of course, I have no idea where those files live since I'm on smugmug.

So either I need to know where to put the .htc file (be nice) or just get a hack for my menu. Or start from scratch. Oh please, don't say I need to start from scratch. :huh Yep, know nuthin' about that one. :D I don't know of any way to use the
htc file. Maybe someone else knows.

If you get disparate I already through together your menu html and would
only need to create the CSS to support it. Just say the word.

So lets hope someone has an idea on how to implement what you have now.

PamelaR

Mar-15-2007, 09:07 AM

Yes please! I am desperate! :bow

Yep, know nuthin' about that one. :D I don't know of any way to use the
htc file. Maybe someone else knows.

If you get disparate I already through together your menu html and would
only need to create the CSS to support it. Just say the word.

So lets hope someone has an idea on how to implement what you have now.

Allen

Mar-15-2007, 10:13 AM

Yes please! I am desperate! :bow
Here's the header html. I used this site (http://allen-steve.smugmug.com/gallery/2078255) to construct it. The CSS will have
to be also changed to support it so don't put this in until I come back with
that. I'll use this (http://allen-steve.smugmug.com/gallery/2078255) and tweak for your site.

<div class="menu">
<ul>
<li><a href="http://www.southcoronadophoto.com/">Home</a></li>
<li><a class="drop" href="/galleries">Galleries
</a> 
<ul>
<li><a class="drop" href="/Coronado%20Favorites">Coronado Favorites
</a> 
<ul>
<li><a href="/Coronado%20Favorites/281630">Flora</a></li>
<li><a href="/Coronado%20Favorites/281629">Fauna</a></li>
<li><a href="/Coronado%20Favorites/281634">Coronado Views</a></li>
<li><a href="#">The Military</a></li>
</ul> 
</li>

<li><a class="drop" href="m/Coronado%20Dogs">Coronado Dogs
</a> 
<ul>
<li><a href="#">Dog Beach</a></li>
<li><a href="/Coronado%20Dogs/285253">Surf Dogs</a></li>
</ul> 
</li>

<li><a class="drop" href="/The%20Coronado%20Calendar">Coronado Calendar
</a> 
<ul>
<li><a href="/The%20Coronado%20Calendar">2007</a></li>
<li><a href="/Coronado%20Dogs/285253">2008</a></li>
</ul> 
</li>

<li><a class="drop" href="/Faraway%20Places">Faraway Places
</a> 
<ul>
<li><a href="#">Mexico</a></li>
<li><a href="#">Texas</a></li>
<li><a href="#">Canada</a></li>
<li><a href="/Faraway%20Places/284178">California</a></li>
</ul> 
</li>

<li><a class="drop" href="http://www.southcoronadophoto.com/San%20Diego%20Region">San Diego Region
</a> 
<ul>
<li><a href="/San%20Diego%20Region/284050">Coastline</a></li>
<li><a href="#">Back County</a></li>
<li><a href="#">Anza Borrego Desert</a></li>
<li><a href="#">Miramar Air Show</a></li>
</ul> 
</li>

<li><a class="drop" href="/Colors%20of%20the%20Great%20American%20West">Colors of the West
</a> 
<ul>
<li><a href="#">Yosemite & The Sierra</a></li>
<li><a href="#">Death Valley</a></li>
</ul> 
</li>

<li><a class="drop" href="/Underwater">Underwater
</a> 
<ul>
<li><a href="/Underwater/283168">Tropical</a></li>
</ul> 
</li>

<li><a class="drop" href="/North%20American%20Wildlife">North American Wildlife
</a> 
<ul>
<li><a href="/North%20American%20Wildlife/284942">Alaskan Brown Bears</a></li>
<li><a href="#">Birds</a></li>
<li><a href="/North%20American%20Wildlife/290604">Ungulates</a></li>
<li><a href="#">Reptiles</a></li>
<li><a href="#">Miscellaneous</a></li>
</ul> 
</li>
</ul> 
</li>

<li><a href="#">Photographic Services</a></li>
<li><a href="#">About SoCoFoCo</a></li>
<li><a href="mailto:don@southcoastphoto.com">Contact</a></li>
</ul> 
</div>

Edit: A few minor corrections.

Allen

Mar-15-2007, 12:10 PM

Yes please! I am desperate! :bow Here's what I came up with, it mimics your old one pretty close. After this
all gets incorporated Firefox should be good. Probably IE will then have to be
tweaked to position things slightly.

You have a lot of other code relating to nav that shouldn't be needed.

.homepage .menu {display:none;}

.menu {
position:relative;
display:block;
z-index:99;
padding: 0px 0px 10px 0px;
height: 34px;
width: 500px;
margin: 0 auto;
}

.menu ul {
padding: 10px 0px 10px 0px;
margin:0 auto;
list-style-type: none;
}

.menu ul li {
float:left;
position:relative;
}

.menu ul li a,
.menu ul li a:visited {z-index:999;
display:block;
font-size: 12px; /* main buttons */
color: white; /* main buttons text non-hover*/

text-decoration:none;
text-align:center; /* centers text in buttons */
width: 90px;
background: #000000; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}

* html .menu ul li a, .menu ul li a:visited {
width: 100px; w\idth: 100px; /* IE main button */
}

.menu ul li ul {
display:none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li:hover a {
color: #ccc; /* main when hover DD */
background: #000; /* main when hover DD */
}

.menu ul li:hover ul {z-index:999;
display:block;
position:absolute;
top: -6px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 100px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background: #000; /* DD FO non-hover */
color: white; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 100px; /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #993400; /* DD FO hover */
color: white; /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left: 100px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 100px; /* FF FO box width */
}

.menu ul li:hover ul li:hover ul.left {
left: -134px; /* unknown - previously defined */
} /* class of .left for left flyouts? */

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li a:hover {
/* text-decoration:none; /* might be needed */ */
color: white; /* main hover */
background: #000; /* main hover */
}

.menu ul li a:hover ul {
display:block;
position:absolute;
top: 2px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display:block;
background: white; /* IE DD color non-hover */
color: red; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 100px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

.menu ul li a:hover ul li a:hover {
background: blue; /* DD FO */
color: gold; /* DD FO */
}

.menu ul li a:hover ul li a:hover ul {
display:block;
position:absolute;
top: -22px; /* FO up down */
color: #000000; /* unknown */
left: 147px; /* FO right left */
}

.menu ul li a:hover ul li a:hover ul.left {
left: -134px;
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width: 100px;
w\idth: 100px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top: 30px;
t\op: 31px; /* 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:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a{
width: 100px; /* unknown */
w\idth: 100px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

PamelaR

Mar-15-2007, 04:14 PM

Here's what I came up with, it mimics your old one pretty close. After this
all gets incorporated Firefox should be good. Probably IE will then have to be
tweaked to position things slightly.

You have a lot of other code relating to nav that shouldn't be needed.

.homepage .menu {display:none;}

.menu {
position:relative;
display:block;
z-index:99;
padding: 0px 0px 10px 0px;
height: 34px;
width: 500px;
margin: 0 auto;
}

.menu ul {
padding: 10px 0px 10px 0px;
margin:0 auto;
list-style-type: none;
}

.menu ul li {
float:left;
position:relative;
}

.menu ul li a,
.menu ul li a:visited {z-index:999;
display:block;
font-size: 12px; /* main buttons */
color: white; /* main buttons text non-hover*/

text-decoration:none;
text-align:center; /* centers text in buttons */
width: 90px;
background: #000000; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}

* html .menu ul li a, .menu ul li a:visited {
width: 100px; w\idth: 100px; /* IE main button */
}

.menu ul li ul {
display:none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li:hover a {
color: #ccc; /* main when hover DD */
background: #000; /* main when hover DD */
}

.menu ul li:hover ul {z-index:999;
display:block;
position:absolute;
top: -6px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 100px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background: #000; /* DD FO non-hover */
color: white; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 100px; /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #993400; /* DD FO hover */
color: white; /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left: 100px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 100px; /* FF FO box width */
}

.menu ul li:hover ul li:hover ul.left {
left: -134px; /* unknown - previously defined */
} /* class of .left for left flyouts? */

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li a:hover {
/* text-decoration:none; /* might be needed */ */
color: white; /* main hover */
background: #000; /* main hover */
}

.menu ul li a:hover ul {
display:block;
position:absolute;
top: 2px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display:block;
background: white; /* IE DD color non-hover */
color: red; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 100px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

.menu ul li a:hover ul li a:hover {
background: blue; /* DD FO */
color: gold; /* DD FO */
}

.menu ul li a:hover ul li a:hover ul {
display:block;
position:absolute;
top: -22px; /* FO up down */
color: #000000; /* unknown */
left: 147px; /* FO right left */
}

.menu ul li a:hover ul li a:hover ul.left {
left: -134px;
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width: 100px;
w\idth: 100px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top: 30px;
t\op: 31px; /* 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:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a{
width: 100px; /* unknown */
w\idth: 100px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

Gosh thanks! I know this is a ton of work. However there are a couple of problems. In FF and IE7 the drop down works, but the positioning is totally off. I can probably fix that. But the big problem is that the nav bar doesn't even show up in IE6. Yikes! Any ideas?

PamelaR

Mar-15-2007, 04:17 PM

Gosh thanks! I know this is a ton of work. However there are a couple of problems. In FF and IE7 the drop down works, but the positioning is totally off. I can probably fix that. But the big problem is that the nav bar doesn't even show up in IE6. Yikes! Any ideas?

Slight correction from my last note. In IE6 the nav bar doesn't show up on the main galleries page, but it does on the interior (individual) gallery pages. However, the positioning is off and the drop down / fly outs are doing some really crazy stuff. :dunno

Allen

Mar-15-2007, 04:19 PM

Gosh thanks! I know this is a ton of work. However there are a couple of problems. In FF and IE7 the drop down works, but the positioning is totally off. I can probably fix that. But the big problem is that the nav bar doesn't even show up in IE6. Yikes! Any ideas? You're missing the closing div for your banner in the header.

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

And there's as extra one at the end of the menu html.

Allen

Mar-15-2007, 05:00 PM

Slight correction from my last note. In IE6 the nav bar doesn't show up on the main galleries page, but it does on the interior (individual) gallery pages. However, the positioning is off and the drop down / fly outs are doing some really crazy stuff. :dunno Here's the latest, tweaked Firefox and fixed IE. Should be closer now.
Need to add the missing </div> mentioned above.

.menu {
position:relative;
display:block;
z-index:99;
padding: 0px 0px 10px 0px;
height: 34px;
width: 550px;
margin: 0 auto;
margin-bottom: 20px;
}

.menu ul {
padding: 10px 0px 10px 0px;
margin:0 auto;
list-style-type: none;
}

.menu ul li {
float:left;
position:relative;
}

.menu ul li a,
.menu ul li a:visited {z-index:999;
display:block;
font-size: 12px; /* main buttons */
color: white; /* main buttons text non-hover*/

text-decoration:none;
text-align:center; /* centers text in buttons */
width: 110px;
background: #000000; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}

* html .menu ul li a, .menu ul li a:visited {
width: 110px; w\idth: 110px; /* IE main button */
}

.menu ul li ul {
display:none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li:hover a {
color: #ccc; /* main when hover DD */
background: #000; /* main when hover DD */
}

.menu ul li:hover ul {z-index:999;
display:block;
position:absolute;
top: -8px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 110px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background: #000; /* DD FO non-hover */
color: white; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 110px; /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #993400; /* DD FO hover */
color: white; /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left: 110px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 110px; /* FF FO box width */
}

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li a:hover {
/* text-decoration:none; /* might be needed */ */
color: #ccc; /* main hover */
background: #000; /* main hover */
}

.menu ul li a:hover ul {
display:block;
position:absolute;
top: 0px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display:block;
background: #000 /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 110px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

.menu ul li a:hover ul li a:hover {
background: #993400; /* DD FO */
color: white; /* DD FO */
}

.menu ul li a:hover ul li a:hover ul {
display:block;
position:absolute;
top: -20px; /* FO up down */
color: #000000; /* unknown */
left: 110px; /* FO right left */
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width: 110px;
w\idth: 110px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top: 30px;
t\op: 31px; /* 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:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a {
width: 110px; /* unknown */
w\idth: 110px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

PamelaR

Mar-16-2007, 08:17 AM

Here's the latest, tweaked Firefox and fixed IE. Should be closer now.
Need to add the missing </div> mentioned above.

.menu {
position:relative;
display:block;
z-index:99;
padding: 0px 0px 10px 0px;
height: 34px;
width: 550px;
margin: 0 auto;
margin-bottom: 20px;
}

.menu ul {
padding: 10px 0px 10px 0px;
margin:0 auto;
list-style-type: none;
}

.menu ul li {
float:left;
position:relative;
}

.menu ul li a,
.menu ul li a:visited {z-index:999;
display:block;
font-size: 12px; /* main buttons */
color: white; /* main buttons text non-hover*/

text-decoration:none;
text-align:center; /* centers text in buttons */
width: 110px;
background: #000000; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}

* html .menu ul li a, .menu ul li a:visited {
width: 110px; w\idth: 110px; /* IE main button */
}

.menu ul li ul {
display:none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li:hover a {
color: #ccc; /* main when hover DD */
background: #000; /* main when hover DD */
}

.menu ul li:hover ul {z-index:999;
display:block;
position:absolute;
top: -8px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 110px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background: #000; /* DD FO non-hover */
color: white; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 110px; /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #993400; /* DD FO hover */
color: white; /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left: 110px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 110px; /* FF FO box width */
}

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li a:hover {
/* text-decoration:none; /* might be needed */ */
color: #ccc; /* main hover */
background: #000; /* main hover */
}

.menu ul li a:hover ul {
display:block;
position:absolute;
top: 0px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display:block;
background: #000 /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 110px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

.menu ul li a:hover ul li a:hover {
background: #993400; /* DD FO */
color: white; /* DD FO */
}

.menu ul li a:hover ul li a:hover ul {
display:block;
position:absolute;
top: -20px; /* FO up down */
color: #000000; /* unknown */
left: 110px; /* FO right left */
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width: 110px;
w\idth: 110px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top: 30px;
t\op: 31px; /* 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:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a {
width: 110px; /* unknown */
w\idth: 110px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

Allen, you are my hero! I can do the final little style tweaks except for one little thing. In IE 6 the menu doesn't show up on http://www.southcoronadophoto.com/galleries. If you can give me the hack for that, I think I'm good to go. Many, many thanks! :clap

Allen

Mar-16-2007, 09:23 AM

Allen, you are my hero! I can do the final little style tweaks except for one little thing. In IE 6 the menu doesn't show up on http://www.southcoronadophoto.com/galleries. If you can give me the hack for that, I think I'm good to go. Many, many thanks! :clap Add green and it shows on the galleries page. Remove the ones in red.

at the top
.homepage .menu {display:none !important;} << exists now
.galleries .menu {display:block !important;}

below
.homepage .menu {display:none !important;} << extra entry
.galleries .menu {display:inline !important;}
.featured .menu {display:inline !important;}

PamelaR

Mar-16-2007, 09:55 AM

Here's the latest, tweaked Firefox and fixed IE. Should be closer now.
Need to add the missing </div> mentioned above.

.menu {
position:relative;
display:block;
z-index:99;
padding: 0px 0px 10px 0px;
height: 34px;
width: 550px;
margin: 0 auto;
margin-bottom: 20px;
}

.menu ul {
padding: 10px 0px 10px 0px;
margin:0 auto;
list-style-type: none;
}

.menu ul li {
float:left;
position:relative;
}

.menu ul li a,
.menu ul li a:visited {z-index:999;
display:block;
font-size: 12px; /* main buttons */
color: white; /* main buttons text non-hover*/

text-decoration:none;
text-align:center; /* centers text in buttons */
width: 110px;
background: #000000; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}

* html .menu ul li a, .menu ul li a:visited {
width: 110px; w\idth: 110px; /* IE main button */
}

.menu ul li ul {
display:none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li:hover a {
color: #ccc; /* main when hover DD */
background: #000; /* main when hover DD */
}

.menu ul li:hover ul {z-index:999;
display:block;
position:absolute;
top: -8px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 110px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background: #000; /* DD FO non-hover */
color: white; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 110px; /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #993400; /* DD FO hover */
color: white; /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
display:block;
position:absolute;
left: 110px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 110px; /* FF FO box width */
}

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li a:hover {
/* text-decoration:none; /* might be needed */ */
color: #ccc; /* main hover */
background: #000; /* main hover */
}

.menu ul li a:hover ul {
display:block;
position:absolute;
top: 0px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display:block;
background: #000 /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 110px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

.menu ul li a:hover ul li a:hover {
background: #993400; /* DD FO */
color: white; /* DD FO */
}

.menu ul li a:hover ul li a:hover ul {
display:block;
position:absolute;
top: -20px; /* FO up down */
color: #000000; /* unknown */
left: 110px; /* FO right left */
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width: 110px;
w\idth: 110px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top: 30px;
t\op: 31px; /* 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:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a {
width: 110px; /* unknown */
w\idth: 110px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

Ok, maybe I jumped the gun a little. I was able to redo my styling so it looks pretty. However it's not really placed where I want it. And it seems to be different in each browser and each browser version. I'm testing in FF, IE6 and IE7. The last piece of the puzzle here is that I want the menu to line up centered under the banner and ideally, move with the banner when the browser window is expanded and retracted. Am I a dreamer or can this be achieved?

Also, the menu isn't showing up on the southcoronadophoto.com/galleries page in IE6 only.

Again, many thanks.

PamelaR

Mar-16-2007, 10:01 AM

Add green and it shows on the galleries page. Remove the ones in red.

at the top
.homepage .menu {display:none !important;} << exists now
.galleries .menu {display:block !important;}

below
.homepage .menu {display:none !important;} << extra entry
.galleries .menu {display:inline !important;}
.featured .menu {display:inline !important;}

whew!! It worked and it also fixed the other problem I wrote about. Yipeeeeee!! I'm leaving on vacation tomorrow to the beautiful Pacific Northwest and it's such a relief to have this finished. I really can't thank you enough! :barb

Allen

Mar-16-2007, 10:03 AM

Ok, maybe I jumped the gun a little. I was able to redo my styling so it looks pretty. However it's not really placed where I want it. And it seems to be different in each browser and each browser version. I'm testing in FF, IE6 and IE7. The last piece of the puzzle here is that I want the menu to line up centered under the banner and ideally, move with the banner when the browser window is expanded and retracted. Am I a dreamer or can this be achieved?

Also, the menu isn't showing up on the southcoronadophoto.com/galleries page in IE6 only.

Again, many thanks. The menu shows fine here in IE6 and FF and looks the basically the same.
Stretching the browser back and forth the menu stays centered under the
banner here also in both IE6 & FF.

The menu shows here on the .galleries page fine.

PamelaR

Mar-16-2007, 10:12 AM

The menu shows fine here in IE6 and FF and looks the basically the same.
Stretching the browser back and forth the menu stays centered under the
banner here also in both IE6 & FF.

The menu shows here on the .galleries page fine.

Got it. See my message of relief and undying gratitude above. :D

anirudh

Mar-18-2007, 09:54 AM

Hi,

A lot of my friends who visit the site only want to see the latest uploaded photos. I want a link in a navbar which can be clicked to display the same. I know there is a 'Browse by Date' option, but i don't know how to customize it (last 15 days, for example). I would like two things:

1. Last 'x' days - which will show all photos uploaded in the last 'x' days, and
2. Last 'x' photos - shows the latest 'x' photos uploaded.

Is this possible?

Thanks in advance,
Anirudh
http://anirudh.smugmug.com

P.S: I apologize if this question has been answered before, but i cannot find a 'search' textbox for the forum thread.

richW

Mar-18-2007, 09:35 PM

Hi,

A lot of my friends who visit the site only want to see the latest uploaded photos. I want a link in a navbar which can be clicked to display the same. I know there is a 'Browse by Date' option, but i don't know how to customize it (last 15 days, for example). I would like two things:

1. Last 'x' days - which will show all photos uploaded in the last 'x' days, and
2. Last 'x' photos - shows the latest 'x' photos uploaded.

Is this possible?

Thanks in advance,
Anirudh
http://anirudh.smugmug.com

P.S: I apologize if this question has been answered before, but i cannot find a 'search' textbox for the forum thread. Welcome to dgrin.......:wave
If you are going to use a navBar, the code would look something like this:
<li><a href="http://yoursite.smugmug.com/date/2007-03-01/2007-03-18/">Recent Pictures</a></li>
This would bring up your photos from that date range. Adjust the dates as needed.
You could always "Feature" your new galleries on your homepage. More info here: http://www.smugmug.com/help/arrange-galleries

Yell back if you have any questions.........

anirudh

Mar-18-2007, 10:03 PM

Welcome to dgrin.......:wave
If you are going to use a navBar, the code would look something like this:
<li><a href="http://yoursite.smugmug.com/date/2007-03-01/2007-03-18/">Recent Pictures</a></li>
This would bring up your photos from that date range. Adjust the dates as needed.
You could always "Feature" your new galleries on your homepage. More info here: http://www.smugmug.com/help/arrange-galleries

Yell back if you have any questions.........
Hi Rich,

Thanks for that reply.

I figured i could do that, but wouldn't that mean that i change the range periodically (every 15 days or so). I was wondering if there was a way to automatically do this. For example, is there a way to show photos uploaded in the last 15 days. Then i wouldn't need to change the url periodically.

Also, the photos could be across galleries, so it would be difficult to feature all the galleries that i have recently uploaded photos in.

Warm Regards,
Anirudh

richW

Mar-18-2007, 10:19 PM

Hi Rich,

Thanks for that reply.

I figured i could do that, but wouldn't that mean that i change the range periodically (every 15 days or so). I was wondering if there was a way to automatically do this. For example, is there a way to show photos uploaded in the last 15 days. Then i wouldn't need to change the url periodically.

Also, the photos could be across galleries, so it would be difficult to feature all the galleries that i have recently uploaded photos in.

Warm Regards,
Anirudh Take a look at this thread: http://www.dgrin.com/showthread.php?t=26968
I'm going to test it later and see how it works......

edit: tried the code from post#10 http://www.dgrin.com/showthread.php?t=26968#10 works great.
It's on my search page, "new pictures (http://lmsportspix.smugmug.com/find)"

anirudh

Mar-19-2007, 09:45 AM

Take a look at this thread: http://www.dgrin.com/showthread.php?t=26968
I'm going to test it later and see how it works......
edit: tried the code from post#10 http://www.dgrin.com/showthread.php?t=26968#10 works great.
It's on my search page, "new pictures (http://lmsportspix.smugmug.com/find)"
Thanks so much, Rich.
Works great for me too! :clap

Warm Regards,
Anirudh

gwyneth

Mar-20-2007, 08:36 AM

Hello wonderful dgrin people,

my navbar seems to be working fine in firefox and IE7, but it is not working at all in IE6. Does anyone see what the problem might be?

Allen

Mar-20-2007, 08:54 AM

Hello wonderful dgrin people,

my navbar seems to be working fine in firefox and IE7, but it is not working at all in IE6. Does anyone see what the problem might be? See if this helps.

Change this
<li><a href="http://www.gwynethcolleenphotography.com/clients" title="clients">clients
</a>
</li>

To this
<li><a href="http://www.gwynethcolleenphotography.com/clients" title="clients">clients</a></li>

Add the green at the end.

</ul> 
</div>
</div>

gwyneth

Mar-20-2007, 12:47 PM

Thanks Allen! That worked. I've still got issues with them all being on the same line, but at least clients isn't bloated and huge and keeping the other drop downs from working, now.

Allen

Mar-20-2007, 01:23 PM

Thanks Allen! That worked. I've still got issues with them all being on the same line, but at least clients isn't bloated and huge and keeping the other drop downs from working, now.
Change these and it won't wrap.

/* style the outer div to give it width */
.menu {
margin: 0 auto;
padding:0px 0px 0px 0px;
position:relative; /*Make the container moveable*/
width: 380px; /*Main bar total width*/
font-family: optima, tahoma, sans-serif;
font-size: 14px;
padding-bottom:30px; /*Padding between the bottom of your mainbar and the rest of your page */
}

johndyg

Mar-20-2007, 02:34 PM

:dunno When I view my navbar from different pages it seems to zoom in and out a little. The font is bigger on my home page and client area than other pages.

Montec

Mar-20-2007, 05:18 PM

I have a NB configured the way I like but now I need to tweak it a bit and add a drop down to it...I have one drop down from the CLIENTS button but now I need one from the WEDDINGS button.

Is there an easy way to do this? :scratch I was just gong to copy the code from the CLIENTS button and change the relevent sections, or is there a better way?

Thanks to anyone who has some advice

http://www.kootenayphotography.com/

Allen

Mar-20-2007, 07:42 PM

I have a NB configured the way I like but now I need to tweak it a bit and add a drop down to it...I have one drop down from the CLIENTS button but now I need one from the WEDDINGS button.

Is there an easy way to do this? :scratch I was just gong to copy the code from the CLIENTS button and change the relevent sections, or is there a better way?

Thanks to anyone who has some advice

http://www.kootenayphotography.com/ Add these between "About Me" and "Portraiture"

<li><a href="http://kootenay.smugmug.com/gallery/1962897">About Me</a></li>
<li><a class="drop" href="http://www.kootenay.smugmug.com/gallery/1767112">Weddings
</a>

<ul>
<li><a href="http://kootenay.smugmug.com/gallery/xxxxxxx">Weddings1</a></li>
<li><a href="http://kootenay.smugmug.com/gallery/xxxxxxx">Weddings2</a></li>
<li><a href="http://kootenay.smugmug.com/gallery/xxxxxxx">Weddings3</a></li>
<li><a href="http://kootenay.smugmug.com/gallery/xxxxxxx">Weddings4</a></li>
</ul> 
</li>
<li><a href="http://kootenay.smugmug.com/gallery/1963004">Portraiture</a></li>

Montec

Mar-20-2007, 08:23 PM

Hi Allen, Thanks for the code.

I inserted it but with a bit of a problem...can you take a peek and tell me what went wrong?

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

Allen

Mar-20-2007, 08:43 PM

Hi Allen, Thanks for the code.

I inserted it but with a bit of a problem...can you take a peek and tell me what went wrong?

www.kootenayphotography.com (http://www.kootenayphotography.com)
In your header code.

Change this line
<li><a></a></li><li><a class="drop" href="http://www.kootenay.smugmug.com/gallery/1767112">Weddings

to look like this.
<li><a class="drop" href="http://www.kootenay.smugmug.com/gallery/1767112">Weddings

Change this line
href="http://kootenay.smugmug.com/gallery/1963004">Portraiture

to look like this.
<li><a href="http://kootenay.smugmug.com/gallery/1963004">Portraiture</a></li>

Montec

Mar-20-2007, 08:51 PM

It changes a bit, but not correct...sorry...could you look again please:bow

In your header code.

Change this line
<li><a></a></li><li><a class="drop" href="http://www.kootenay.smugmug.com/gallery/1767112">Weddings

to look like this.
<li><a class="drop" href="http://www.kootenay.smugmug.com/gallery/1767112">Weddings

Change this line
href="http://kootenay.smugmug.com/gallery/1963004">Portraiture

to look like this.
<li><a href="http://kootenay.smugmug.com/gallery/1963004">Portraiture</a></li>

Montec

Mar-20-2007, 09:06 PM

It changes a bit, but not correct...sorry...could you look again please:bow

Got it!

Thanks again Allen!!!:clap

gwyneth

Mar-21-2007, 08:35 AM

Change these and it won't wrap.

/* style the outer div to give it width */
.menu {
margin: 0 auto;
padding:0px 0px 0px 0px;
position:relative; /*Make the container moveable*/
width: 380px; /*Main bar total width*/
font-family: optima, tahoma, sans-serif;
font-size: 14px;
padding-bottom:30px; /*Padding between the bottom of your mainbar and the rest of your page */
}

Thanks sooo much, Allen. Looks way better now! I'm getting there...slooowwwwly!

Suema

Mar-21-2007, 10:56 AM

I was wondering how do I change the background color of the navigation bar for select galleries.
Also How do I change the font in the nav bar?
thanks,
Sue
Magnanimouspictures.com

Allen

Mar-21-2007, 11:06 AM

I was wondering how do I change the background color of the navigation bar for select galleries.
Also How do I change the font in the nav bar?
thanks,
Sue
Magnanimouspictures.com Try this, added funny color's so you could easily see the results.:D

For individual galleries http://magnanimouspictures.smugmug.com/gallery/2579091

.gallery_2579091 #navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: white;
background-color: green;
}

.gallery_2579091 #navcontainer ul li a:hover {
color: yellow;
background-color: red;
}

or for whole category

.category_Nature #navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: white;
background-color: green;
}

.category_Nature #navcontainer ul li a:hover {
color: yellow;
background-color: red;
}

quirk6

Mar-23-2007, 03:55 PM

Okay, here's a small thing, but it doesn't hurt to ask as the solution may be simple. I've put up a new navbar on my site, it works and is in the right place in all browsers (at least on a pc). The only thing is it looks different in FF, IE6 and IE7. It looks how is supposed to in FF, still looks good in IE6, but in IE7 it has these fat bars on the top and bottom of each tab, I don't like those fat bars. Any easy solution? No biggie if there ain't.

Tedology

Mar-25-2007, 11:37 AM

Hello all,

Used Ivar's great tutorial to make a Navigational Bar across my header... however, it's hidden by something in my home page.

And regarding the "Galleries" option in the nav bar... how do I put the main URL in there? I mean, right now there's an URL for ONE of my galleries...but how do I go about making it so that ALL of my galleries show up when somebody clicks "Galleries"?

Or do I need to re-organize my galleries? :)

Thanks much!

Allen

Mar-25-2007, 11:52 AM

Hello all,

Used Ivar's great tutorial to make a Navigational Bar across my header... however, it's hidden by something in my home page.

And regarding the "Galleries" option in the nav bar... how do I put the main URL in there? I mean, right now there's an URL for ONE of my galleries...but how do I go about making it so that ALL of my galleries show up when somebody clicks "Galleries"?

Or do I need to re-organize my galleries? :)

Thanks much!
It will be a link like below after you get all the code added for the hack.

<li><a href="http://tedology.smugmug.com/galleries">Galleries</a></li>

All of your public galleries will then show in the "galleries" page.

waynedsargent

Mar-26-2007, 06:27 AM

I did a search for drop down menus. I found a thread but I got scared. I have just one nav button I want to drop down then have links to individual galleries. Do I need to overhaul the entire css and header box? :huh www.sargentphotography.smugmug.com (http://www.sargentphotography.smugmug.com/)

Allen

Mar-26-2007, 07:45 AM

I did a search for drop down menus. I found a thread but I got scared. I have just one nav button I want to drop down then have links to individual galleries. Do I need to overhaul the entire css and header box? :huh www.sargentphotography.smugmug.com (http://www.sargentphotography.smugmug.com/)
You're right, can look intimidating.:D

But it's not that bad. You're header html can quickly be thrown together, so list here what you what in the drop.

The CSS is just cut & paste and a few tweaks to format and you'll get quick
help on that too.

So I'll be holding my breath waiting for GO.:wink

waynedsargent

Mar-26-2007, 07:53 AM

You're right, can look intimidating.:D

But it's not that bad. You're header html can quickly be thrown together, so list here what you what in the drop.

The CSS is just cut & paste and a few tweaks to format and you'll get quick
help on that too.

So I'll be holding my breath waiting for GO.:wink

I want the planet cheer button to drop down and display a button for each individual gallery under planet cheer.

planet cheer---->
rhodeisland
oxford
new jersey
pelham
lewiston
augusta
portraits

I hope you follow me.:deal

waynedsargent

Mar-26-2007, 07:54 AM

Go!

Allen

Mar-26-2007, 08:00 AM

I want the planet cheer button to drop down and display a button for each individual gallery under planet cheer.

planet cheer---->
rhodeisland
oxford
new jersey
pelham
lewiston
augusta
portraits

I hope you follow me.:deal Here's your headeer html. CSS next to get.

<div class="menu">
<ul>
<li><a class="drop" href="/sports">Planet Cheer
</a>

<ul>
<li><a href="/gallery/xxxxxxxx">Rhodeisland</a></li>
<li><a href="/gallery/xxxxxxxx">Oxford</a></li>
<li><a href="/gallery/xxxxxxxx">New Jersey</a></li>
<li><a href="/gallery/xxxxxxxx">Pelham</a></li>
<li><a href="/gallery/xxxxxxxx">Lewiston</a></li>
<li><a href="/gallery/xxxxxxxx">Augusta</a></li>
<li><a href="/gallery/xxxxxxxx">Portraits</a></li>
</ul> 
</li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/">Home</a></li>
</ul> 
</div>

EDit: You have to add the gallery numbers for each link.

Allen

Mar-26-2007, 08:15 AM

I want the planet cheer button to drop down and display a button for each individual gallery under planet cheer.

planet cheer---->
rhodeisland
oxford
new jersey
pelham
lewiston
augusta
portraits

I hope you follow me.:deal Here's your CSS. This should work fine in Firefox, will now look at IE and
tweak for it.

/* 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 */

/* Common Styling */
.menu {
position:relative;
display:block;
z-index:99;
padding: 0px 0px 0px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 320px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

.menu ul {
padding: 10px 0px 10px 0px; /* this effects menu centering if too big, maybe not needed? */
margin:0 auto; /* this maybe not needed? */
list-style-type: none;
}

.menu ul li {
float:left; /* WARNING: float right reverses menu */
position:relative;
}

.menu ul li a,
.menu ul li a:visited {
display:block;
font-size:1em; /* main buttons */
color: #66EFFF; /* main buttons text non-hover*/
text-decoration:none;
text-align:center; /* centers text in buttons */
width: 100px; /* main box width */
height: 20px; /* main box height */
/* border: 1px solid red; */ /* start your design with borders on, easier to position DD's & FO's */
border-width: 1px 1px 1px 1px;
background: #000; /* main button color */
padding-left: 0px;
line-height: 20px; /* positions text up/down in box */
}

* html .menu ul li a, .menu ul li a:visited {
width: 104px; w\idth: 104px; /* IE main button */
}

.menu ul li ul {
display:none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li:hover a {
color: #ccc; /* main when hover DD */
background: #000; /* main when hover DD */
}

.menu ul li:hover ul {
display:block;
position:absolute;
top: -6px; /* FF DD up down */
margin-top: 17px; /* FF main mouse active vertical */
left: 0px; /* FF DD right left */
width: 104px; /* unknown */
}

.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover ul li a {
display:block;
background: #000; /* DD FO non-hover */
color: #66EFFF; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 100px /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #444; /* DD FO hover See */
color: white; /* DD FO hover See */
}

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li a:hover {
color: #ccc; /* main hover */
background: #000; /* main hover */
}

.menu ul li a:hover ul {
display:block;
position:absolute;
top: 2px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display:block;
background: white; /* IE DD color non-hover */
color: red; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 145px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

.menu ul li a:hover ul li a:hover {
background: blue; /* DD FO hover */
color: gold; /* DD FO hover */
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width: 125px;
w\idth: 139px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top: 30px;
t\op: 31px; /* 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:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a{
width: 125px; /* unknown */
w\idth: 104px; /* DD FF width */
}

/*END EXTRA ADDS FOR IE*/

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

Edit: I have to wait until the header html is put in for IE, need something to tweak.

waynedsargent

Mar-26-2007, 08:41 AM

www.sargentphotography.smugmug.com

Allen

Mar-26-2007, 08:52 AM

www.sargentphotography.smugmug.com (http://www.sargentphotography.smugmug.com)
Yep, my directions.:D You need to replace the code you had, not insert the new.
Remove the red parts.

<div id="navcontainer">
<ul>
<li><a href="http://sargentphotography.smugmug.com/sports">Planet Cheer</a></li>
<li><a href="http://sargentphotography.smugmug.com/galleries">Galleries</a></li>
<li><a href="http://sargentphotography.smugmug.com">Home</a></li>
</ul>
</div>
<div class="menu">
<ul>
<li><a class="drop" href="/sports">Planet Cheer
</a>

<ul>
<li><a href="/gallery/2621719">Rhodeisland</a></li>
<li><a href="/gallery/xxxxxxxx">Oxford</a></li>
<li><a href="/gallery/xxxxxxxx">New Jersey</a></li>
<li><a href="/gallery/xxxxxxxx">Pelham</a></li>
<li><a href="/gallery/xxxxxxxx">Lewiston</a></li>
<li><a href="/gallery/xxxxxxxx">Augusta</a></li>
<li><a href="/gallery/xxxxxxxx">Portraits</a></li>
</ul> 
</li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/">Home</a></li>
</ul> 
</div>

waynedsargent

Mar-26-2007, 08:57 AM

I got rid of the double but I am not getting a drop down under planet cheer.

Allen

Mar-26-2007, 09:06 AM

www.sargentphotography.smugmug.com (http://www.sargentphotography.smugmug.com)
Change the green and see if IE the drops chnage color.

.menu ul li a:hover ul li a {
display:block;
background: #444; /* IE DD color non-hover */
color: #66EFFF; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 145px; /* IE DD FO box */
}

.menu ul li a:hover ul li a:hover {
background: #444444; /* DD FO hover */
color: white; /* DD FO hover */
}

waynedsargent

Mar-26-2007, 09:24 AM

It was working but it went dead.?.?

Allen

Mar-26-2007, 09:27 AM

It was working but it went dead.?.?
Working here in Firefox and IE6. What browser are you using?

waynedsargent

Mar-26-2007, 09:36 AM

n/t

waynedsargent

Mar-26-2007, 09:46 AM

Works on my laptop ie7, not on my work ie6

Allen

Mar-26-2007, 10:11 AM

Works on my laptop ie7, not on my work ie6
That's wierd, working fine here in IE6. Maybe try another pc with IE6?

waynedsargent

Mar-26-2007, 11:22 AM

Thank you so much for your help I greatly appreciate it!!!!:clap

TristanP

Mar-26-2007, 06:03 PM

After following the excellent Navbar tute, I got something that was working pretty well. Now after trying to tweak the colors and spacing in the CSS and viewing with IE6 (my only browser), the Gallery and Pricing buttons don't drop down anymore (each should have two drop-downs). I went back to (mostly) stock CSS from the tute. What am I missing here? Thanks very much in advance.

EDIT: Just installed FireFox and it looks even funkier - drop-downs kinda (not really) work, navbar not centered anymore. Breadcrumb on gallery pages pushed to the right just past the "Galleries" drop-down.

http://www.tristansphotography.com/

Allen

Mar-26-2007, 06:28 PM

After following the excellent Navbar tute, I got something that was working pretty well. Now after trying to tweak the colors and spacing in the CSS and viewing with IE6 (my only browser), the Gallery and Pricing buttons don't drop down anymore (each should have two drop-downs). I went back to (mostly) stock CSS from the tute. What am I missing here? Thanks very much in advance.

EDIT: Just installed FireFox and it looks even funkier - drop-downs kinda (not really) work, navbar not centered anymore. Breadcrumb on gallery pages pushed to the right just past the "Galleries" drop-down.

http://www.tristansphotography.com/ Cleaned this up a little. Replace the header code with this.

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

<ul>
<li><a href="/Auto%20Racing">Auto Racing</a></li>
<li><a href="/Motorcycle%20Racing/202289">WERA Racing</a></li>
</ul>
</li>
<li><a class="drop" href="">Pricing
</a>

<ul>
<li><a href="/gallery/1605551">Race Events</a></li>
<li><a href="/gallery/1679067">Products</a></li>
</ul>
</li>
<li><a href="Link">About</a></li>
<li><a href="Link">Contact</a></li>
</ul>
</div>

Edit: added missing </li>

TristanP

Mar-26-2007, 06:36 PM

Thanks Al. FF is looking better - I gotta fix the colors and such. IE6 still shows no drop-downs at all, but it's centered properly on the page, whereas FF isn't.

Allen

Mar-26-2007, 07:04 PM

Thanks Al. FF is looking better - I gotta fix the colors and such. IE6 still shows no drop-downs at all, but it's centered properly on the page, whereas FF isn't. Oops, add the </li> just before pricing.

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

Added to previous message.

TristanP

Mar-26-2007, 07:19 PM

Oops, add the </li> just before pricing.

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

Added to previous message.

Just checked IE6 on both desktop and laptop - no drop-downs. The </li> addition didn't appear to change anything. :dunno

Allen

Mar-26-2007, 07:30 PM

Just checked IE6 on both desktop and laptop - no drop-downs. The </li> addition didn't appear to change anything. :dunno Huh? Just checked IE6 here and they work.:scratch

OOps, hit refresh and they don't. The worked after first load then quit.

Cleared cache, deleted cookies and it worked again in IE6.

Hit refresh and stopped working. ugh!

This time only cleared history and they worked.

Confirmed again, clearing only history and they work. Wierd

After refresh they stop working, but going to gallery level they work there
but no where else.

Found a few things that may cause problems
Move the */ from red to green

.menu ul li a:hover {
/* text-decoration:none; */ /* might be needed */ */

Delete these, probably not needed but has the nested */'s

/* following commented out for now not sure if needed */
/*.menu ul li a:hover ul li a:hover ul {
text-decoration:line-through; /* IE effects FO1 & FO2 */
color: black ; /* IE effects line-through above FO1 & FO2 */
font-size:1.2em; /* IE effects FO2 only */}*/

/* Temporary fixes WebDev yellow element box wrap */
/* If changing table to .menu table above (Thanks to Ivar) */
/* this maybe not needed */
/* #webdeveloper-element-information table {
position:relative;
} */

Delete all form here down, it for left flyouts.
/* ============ Advanced option =============== */

BTW, thanks to I think Ivar pointing out the nesting of the comments thingies
causing problems.

Tedology

Mar-26-2007, 07:45 PM

Hello all!

I'm going through Ivar's great navbar tutorial and wanting to change colors...

However, after clicking the link he suggested to find colors, I'm confused which codes to use?

Do I use codes such as #ff00ff?

Or

330033?

Which codes do I want to use for the navbar colors (hover, links, etc)?

Thanks for all your help! :thumb

agnes

Mar-26-2007, 08:04 PM

Hi! I wonder if I can modify the navbar so that once I point at it, it will show the last updated date?
I now have to make it "Most Recent 27/3"
but it would be nice if I can point and "Most Recent" -> "27/3", "Video"->"21/3" something like that.
Thanks!

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

Allen

Mar-26-2007, 08:13 PM

Hello all!

I'm going through Ivar's great navbar tutorial and wanting to change colors...

However, after clicking the link he suggested to find colors, I'm confused which codes to use?

Do I use codes such as #ff00ff?

Or

330033?

Which codes do I want to use for the navbar colors (hover, links, etc)?

Thanks for all your help! :thumb
Either of these will work but the hex one has a # in front.
color: white;
or
color: #fffffff;

Tedology

Mar-27-2007, 04:36 AM

Either of these will work but the hex one has a # in front.
color: white;
or
color: #fffffff;

Awesome, Allen! Thanks so much for answering! :clap

slippahs

Mar-29-2007, 11:32 AM

I can't seem to remove the large space between my NavBar and the Legend (that reads "Aloha from Honolulu, Hawai`i") when using FF. Any way to smallerize the spacing so that the fieldbox looks more compact?

Also, having problems with getting the buttons in a line when viewing with IE6. I can't seem to get my IE NavBar to look like the NavBar when displayed on FF.

And also again, it seems my gallery pages are now misaligned. Any recourse?

Any tips/tricks are greatly appreciated!

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

Thanks!

quirk6

Mar-29-2007, 08:13 PM

How difficult would it be to adapt my current navbar into a drop-down (or rather, "rise-up") navbar. I'm thinking about adding new categories and don't want to clutter the navbar. I would therefore like to create a galleries button that would rise-up to the gallery options. I could just go to a galleries page, but I'd much prefer to just do it through the navbar.

Thanks

MRudland

Mar-31-2007, 10:30 AM

Is it possible to have a nav bar show up just in a sub catagory? For instance, I do people photography and then I do rodeo photography. I have special details specifically for my rodeo photography that I don't want to bore my human clients with such as scheduals, event days, etc. Is it possible to have a nav bar that just works for my equine pages and galleries?
Michelle

Eriktank

Apr-04-2007, 05:11 PM

Perhaps this has been asked and answered already - but 41 pages is a lot to read and I ALWAYS find myself getting distracted and never get around to what I came here for :)

Is there a way to add a graphic to the navbar instead of text? If so, can it be a 50% PNG file or such, so that my background bleeds through a little?

Thanks in advance!!

Erik Tank
http://eriktank.smugmug.com

snapapple

Apr-06-2007, 12:50 PM

I guess this is one for Allen.
I changed the names of some of my galleries and had to link them in my fly-outs. Now the links are not working.

See Travel category. If I click on travel, the three sub categories come up on the page. These are good links.

If I just scroll on the navbar over Travel, then try to click Northern Europe, Mediterranean, or United States, on the fly-out, I just get sent to SmugMug.

Can you help me out?:scratch

Allen

Apr-06-2007, 01:04 PM

I guess this is one for Allen.
I changed the names of some of my galleries and had to link them in my fly-outs. Now the links are not working.

See Travel category. If I click on travel, the three sub categories come up on the page. These are good links.

If I just scroll on the navbar over Travel, then try to click Northern Europe, Mediterranean, or United States, on the fly-out, I just get sent to SmugMug.

Can you help me out?:scratch
If you go here and click the sub-cats you'll get the link for each.
http://www.susanappelphotography.com/Travel

Add a photo to a Caribbean gallery so the sub-cat will show on Travel cat page and then you can get its link.

<li><a class="drop" href="/Travel">Travel
</a>
<table><tbody><tr><td>
<ul>
<li><a href="/Travel/304680">Northern Europe and Scandinavia</a></li>
<li><a href="/Travel/304679">Mediterranean</a></li>
<li><a href="/Travel/304676">United States</a></li>
<li><a href="/Travel/xxxxxx">Caribbean</a></li>
</ul>
</td></tr></tbody></table>

</li>

Noticed I shortened your links to the shorthand version, easier to see
without scrolling to the right.
A few of the common Shortcuts
/ = home
/gallery/123456 = gallery
/Travel = category
/Travel/1233434 = sub-cat
/keyword = keyword page
/keyword/flowers = keyword flowers
/keyword/flowers+park = keyword flowers and parks
/popular = poppular page

snapapple

Apr-06-2007, 02:40 PM

If you go here and click the sub-cats you'll get the link for each.
http://www.susanappelphotography.com/Travel

Add a photo to a Caribbean gallery so the sub-cat will show on Travel cat page and then you can get its link.

<li><a class="drop" href="/Travel">Travel
</a>
<table><tbody><tr><td>
<ul>
<li><a href="/Travel/304680">Northern Europe and Scandinavia</a></li>
<li><a href="/Travel/304679">Mediterranean</a></li>
<li><a href="/Travel/304676">United States</a></li>
<li><a href="/Travel/xxxxxx">Caribbean</a></li>
</ul>
</td></tr></tbody></table>

</li>

Noticed I shortened your links to the shorthand version, easier to see
without scrolling to the right.
A few of the common Shortcuts
/ = home
/gallery/123456 = gallery
/Travel = category
/Travel/1233434 = sub-cat
/keyword = keyword page
/keyword/flowers = keyword flowers
/keyword/flowers+park = keyword flowers and parks
/popular = popular page

Thanks Allen. I just deleted the Caribbean gallery. Most of my pictures were of family so I put it in the family section. I subbed in the numbers you have. I could not find the numbers to save my life. I tried all the different sections of the web developer to find them. I think it's working now.

I wish I knew enough about this stuff to maintain my site, but I'm just lost here. I try. But, usually fail.:dunno

I really appreciate the help.:bow

Allen

Apr-06-2007, 03:27 PM

Thanks Allen. I just deleted the Caribbean gallery. Most of my pictures were of family so I put it in the family section. I subbed in the numbers you have. I could not find the numbers to save my life. I tried all the different sections of the web developer to find them. I think it's working now.

I wish I knew enough about this stuff to maintain my site, but I'm just lost here. I try. But, usually fail.:dunno

I really appreciate the help.:bow Happy to help.

Oh, one thing I forgot to mention is by using the shortcuts in your nav
code, no mater how someone enters your site, nickname.smugmug.com or
www.susanappelphotography.com/ (http://www.susanappelphotography.com/) sticks and doesn't chnage as they browse.

firelook2

Apr-08-2007, 01:14 PM

I have a quick question regarding a nav bar issue that I hope you can help me with. I'm trying hard to follow all the tutorials but am having a "senior moment" about a couple things.

I currently have my nav bar as links to various galleries. I would like to change nav bar to be: "Home", "Bio", "Galleries", "Contact Info". I think I can figure out how to change the nav bar names to those I want, but how do I link all the galleries to the one "Galleries" tab on the nav bar? I want the galleries to all be listed on one page other than my homepage.

Also how do I find the location to put in for the "Home" tab so the viewer will return to the homepage? :scratch

Thanks for your help,

Marcy

Eriktank

Apr-08-2007, 06:42 PM

OK - I just can't seem to get it to work properly... Allen? I copied your exact text from the source HTML you have on your dropdown-flyout tutorial... I just can't seem to make the flyouts work. Dropdown works fine - flyouts refuse to pop... I checked (as close as I can) all the li's and ul's but it just doesn't want to work...

Any suggestions for me?

http://eriktank.smugmug.com/

I want the the Galleries -> Modeling -> to flyout into the four sub-categories I've created... "Family, Family and Friends, Friends, Customers"

Your thoughts?

richW

Apr-08-2007, 07:19 PM

I have a quick question regarding a nav bar issue that I hope you can help me with. I'm trying hard to follow all the tutorials but am having a "senior moment" about a couple things.

I currently have my nav bar as links to various galleries. I would like to change nav bar to be: "Home", "Bio", "Galleries", "Contact Info". I think I can figure out how to change the nav bar names to those I want, but how do I link all the galleries to the one "Galleries" tab on the nav bar? I want the galleries to all be listed on one page other than my homepage.

Also how do I find the location to put in for the "Home" tab so the viewer will return to the homepage? :scratch

Thanks for your help,

Marcy You can add this to your navBar code for your homepage link:
<li><a href="http://www.highcascadesphotography.com/">Home</a></li>

It looks like you have the code in place for the galleries to have their own page.
Go into your control panel and enable your galleries/categories to be visible on the homepage. Add this to your navBar code for the link to the galleries list: <li><a href="http://www.highcascadesphotography.com/galleries">Galleries</a></li>
See what this does for you now, then we can take care of some of the other things......

Allen

Apr-08-2007, 07:27 PM

OK - I just can't seem to get it to work properly... Allen? I copied your exact text from the source HTML you have on your dropdown-flyout tutorial... I just can't seem to make the flyouts work. Dropdown works fine - flyouts refuse to pop... I checked (as close as I can) all the li's and ul's but it just doesn't want to work...

Any suggestions for me?

http://eriktank.smugmug.com/

I want the the Galleries -> Modeling -> to flyout into the four sub-categories I've created... "Family, Family and Friends, Friends, Customers"

Your thoughts?
You're missing this one. After adding you'll have to adjust the flyout position.

#navcontainer ul li:hover ul li:hover ul {
display:block;
position:absolute;
left: 102px; /* FF FO right left */
top: -27px; /* FF FO up down */
width: 146px; /* FF FO box width */
}

You have an extra level for Modeling. Delete the red lines
At the end add the bold behind </ul>

<div id="navcontainer">
<ul>
<li><a href="http://www.tanksdigitaleffects.com">Home</a></li>
<li><a class="drop" href="javascript:showRecent(1)">Recent
</a> 
<ul>
<li><a href="javascript:showRecent(1)">Today</a></li>
<li><a href="javascript:showRecent(7)">Past Week</a></li>
<li><a href="javascript:showRecent(30)">Past Month</a></li>
</ul> 
</li>

<li><a class="drop" href="/galleries">Galleries
</a> 
<ul>
<li><a href="/CD%20Yearbook%20Photos">CD Yearbook</a></li>

<li><a class="drop" href="/Modeling">Modeling
</a>

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

<ul>
<li><a href="/Modeling/305413">Family</a></li>
<li><a href="/Modeling/306161">Family and Friends</a></li>
<li><a href="/Modeling/305414">Friends</a></li>
<li><a href="/Modeling/305415">Customers </a></li>
</ul> 
</li>
</ul> 
</li>
<li><a href="/Misc%20Beauty">Misc Beauty</a></li>
<li><a href="/Vacations">Vacations</a></li>
<li><a href="/Pets">Pets</a></li>
<li><a href="/Everything%20Else">Everything Else</a></li>
<li><a href="/galleries">All Galleries</a></li>
</ul> 
</li>

<li><a href="http://www.tanksdigitaleffects.com/popular">Popular</a></li>
<li><a href="http://www.tanksdigitaleffects.com/gallery/2660678">Information</a></li>
<li><a href="http://www.tanksdigitaleffects.com/gallery/2660587">About Me</a></li>
<li><a href="http://www.tanksdigitaleffects.com/gallery/2662974">Guestbook</a></li>
</ul> 
</div>

Eriktank

Apr-08-2007, 08:14 PM

Allen - YOU DA MAN... seriously, this stuff is like the Matrix to me... the longer I'm at it - the more I grasp :) Hopefully soon it will just look like "blone, brunette, redhead..." etc :):bow

firelook2

Apr-09-2007, 07:35 AM

Rich and Allen,

Thanks so much for all the great help!! I will put in the code you mention, Rich and give it a whirl. Thanks!! :bow

Marcy
..currently in sunny, windy and warm Yuma, Arizona for 2 weeks!:D

firelook2

Apr-09-2007, 08:23 AM

Help!!!!!!!

I went to open my webpage and it defaults to smugmug homepage!!!!!!!

Marcy

Allen

Apr-09-2007, 09:38 AM

Help!!!!!!!

I went to open my webpage and it defaults to smugmug homepage!!!!!!!

Marcy
Looks like it's working now. Smug must have hiccupped for a moment there.

firelook2

Apr-09-2007, 11:04 AM

Al,

Yeah - weird, seems ok now. Thanks.

Marcy

firelook2

Apr-09-2007, 12:51 PM

Rich or ?,

Ok, I followed your instructions on adding the additional code to the nav bar code to get my gallery links off my current nav bar and onto a seperate page for all the galleries to be listed.

Note: one thing, the home tab and galleries tab appear to be linked - how do I seperate?

Ok, so now the next step to getting new tabs on my webpage to be:
Home - Bio - Galleries - Links - Contact Info. Can you fill me in on what to do next?

Thanks again for all your help.

Marcy

Allen

Apr-09-2007, 01:03 PM

Rich or ?,

Ok, I followed your instructions on adding the additional code to the nav bar code to get my gallery links off my current nav bar and onto a seperate page for all the galleries to be listed.

Note: one thing, the home tab and galleries tab appear to be linked - how do I seperate?

Ok, so now the next step to getting new tabs on my webpage to be:
Home - Bio - Galleries - Links - Contact Info. Can you fill me in on what to do next?

Thanks again for all your help.

Marcy Fix the red and the link will work.

<li><a href="http.//www.highcascadesphotography.com/galleries">Galleries</a></li>
<li><a href="http://www.highcascadesphotography.com/galleries">Galleries</a></li>

firelook2

Apr-09-2007, 01:25 PM

Al,

How do you get the red color in the code?

Marcy

Allen

Apr-09-2007, 01:35 PM

Al,

How do you get the red color in the code?

Marcy You're missing a couple pipes also.

<li><a href="http://www.highcascadesphotography.com/gallery/1691639">Contact Info</a></li>
<li>|</li>
<li><a href="http://www.highcascadesphotography.com/">Home</a></li>
<li>|</li>
<li><a href="http.//www.highcascadesphotography.com/galleries">Galleries</a></li>

firelook2

Apr-09-2007, 01:56 PM

Thanks, again - Al,

I am really enjoying trying to learn all this code stuff. It helps having someone like the folks here on digitalgrin to walk us through it!

Now, I guess the only thing I need to do is to change the nav bar tabs so they don't show all the gallery names, and instead say:

Home - Bio - Galleries - Links - Contact Info

Thanks again,

Marcy

Allen

Apr-09-2007, 02:05 PM

Thanks, again - Al,

I am really enjoying trying to learn all this code stuff. It helps having someone like the folks here on digitalgrin to walk us through it!

Now, I guess the only thing I need to do is to change the nav bar tabs so they don't show all the gallery names, and instead say:

Home - Bio - Galleries - Links - Contact Info

Thanks again,

Marcy You still need to fix the galleries link
<li><a href="http://www.highcascadesphotography.com/galleries">Galleries</a></li>

firelook2

Apr-09-2007, 02:23 PM

Al,

I copied and pasted the galleries link - hope this is right.

Marcy

firelook2

Apr-09-2007, 02:25 PM

Al,

Do I need two links for galleries? (I notice you had 2 in previous post that had the "red" inidcators).

Marcy

Allen

Apr-09-2007, 02:48 PM

Al,

Do I need two links for galleries? (I notice you had 2 in previous post that had the "red" inidcators).

Marcy
That was a before and after view.:D Should have made it more clear, sorry.
Looks like ya got it right.:thumb

firelook2

Apr-09-2007, 02:57 PM

Heh, Heh,

I figured that was what you meant, but being new to all this computer mumbo-jumbo, I thought it better to ask to make sure.

So, to change the current nav tabs that list the galleries, how do I get the gallery names off and put "Home, Bio, Galleries, Links, Contact Info" on them instead?

Marcy

Allen

Apr-09-2007, 03:07 PM

Heh, Heh,

I figured that was what you meant, but being new to all this computer mumbo-jumbo, I thought it better to ask to make sure.

So, to change the current nav tabs that list the galleries, how do I get the gallery names off and put "Home, Bio, Galleries, Links, Contact Info" on them instead?

Marcy
Replace your nav header code with this. Be sure to save your current in a
text file for backup. Also good idea to save your CSS in text file.

<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li>|</li>
<li><a href="/gallery/xxxxxx">Bio</a></li>
<li>|</li>
<li><a href="/galleries">Galleries</a></li>
<li>|</li>
<li><a href="/gallery/xxxxxx">Links</a></li>
<li>|</li>
<li><a href="/gallery/1691639">Contact Info</a></li>
</ul>
</div>

Kris Johnson

Apr-09-2007, 07:15 PM

I have a question about how to get the links to work from the navbar. The navbar is all installed but when any of the tabs are clicked it goes to godaddy.com. How do i go about fixing these links?

Andy

Apr-09-2007, 08:09 PM

I have a question about how to get the links to work from the navbar. The navbar is all installed but when any of the tabs are clicked it goes to godaddy.com. How do i go about fixing these links?

Hi Kris :wave

You have this:

<div id="navcontainer">
<ul>
<li><a href="http://krisjohnsonphotos.com">H O M E</a></li>
<li><a href="http://krisjohnsonphotos.com">B I O</a></li>
<li><a href="http://krisjohnsonphotos.com">G A L L E R I E S</a></li>
<li><a href="http://krisjohnsonphotos.com">P R I C I N G</a></li>
<li><a href="http://krisjohnsonphotos.com">I N F O</a></li>
</ul>
</div>

So, for "BIO" you'll want to make an "About Me" gallery. See my site www.moonriverphotography.com - guest book.
Here are the steps:
1. Make a gallery.
2. Force it to journal style in gallery customization
3. Upload a photo of yourself
4. Put your info in the caption.

Now, put this in for the link:

<li><a href="/gallery/XXXXXX">B I O</a></li>

For Galleries Page ? No problem, follow the instructions in our excellent tutorial, here:
http://dgrin.smugmug.com/gallery/2160039

And make this link:

<li><a href="http://krisjohnsonphotos.com">G A L L E R I E S</a></li>

like this:

<li><a href="/Galleries">G A L L E R I E S</a></li>

Etc.

Holler back with questions, we'll be here for you!

Barb

Apr-09-2007, 08:20 PM

I have a question about how to get the links to work from the navbar. The navbar is all installed but when any of the tabs are clicked it goes to godaddy.com. How do i go about fixing these links?

Hi Kris,

In addition to the information Andy gave you above, you will need to change your links to include the www in front of your domain name.

This works:

http://www.krisjohnsonphotos.com/

This does not:

http://krisjohnsonphotos.com/

You can set your settings with GoDaddy so that either work. We have instructions on how to do that here. See Step 6.

http://www.smugmug.com/help/godaddy.mg

Kris Johnson

Apr-09-2007, 08:59 PM

Ok. So I was able to stop the tabs in the header from going to godaddy.com but it is still not taking it to my BIO page. How do I fix this???

Hi Kris :wave

You have this:

<div id="navcontainer">
<ul>
<li><a href="http://krisjohnsonphotos.com">H O M E</a></li>
<li><a href="http://krisjohnsonphotos.com">B I O</a></li>
<li><a href="http://krisjohnsonphotos.com">G A L L E R I E S</a></li>
<li><a href="http://krisjohnsonphotos.com">P R I C I N G</a></li>
<li><a href="http://krisjohnsonphotos.com">I N F O</a></li>
</ul>
</div>

So, for "BIO" you'll want to make an "About Me" gallery. See my site www.moonriverphotography.com (http://www.moonriverphotography.com) - guest book.

It's rather simple:
1. Make a gallery.
2. Force it to journal style in gallery customization
3. Upload a photo of yourself
4. Put your info in the caption.

Now, put this in for the link:

<li><a href="/gallery/XXXXXX">B I O</a></li>

For Galleries Page ? No problem, follow the instructions in our excellent tutorial, here:
http://dgrin.smugmug.com/gallery/2160039

And make this link:

<li><a href="http://krisjohnsonphotos.com">G A L L E R I E S</a></li>

like this:

<li><a href="/Galleries">G A L L E R I E S</a></li>

Etc.

Holler back with questions, we'll be here for you!

Allen

Apr-09-2007, 09:23 PM

Ok. So I was able to stop the tabs in the header from going to godaddy.com but it is still not taking it to my BIO page. How do I fix this??? Is your Bio page a gallery you created?

Then the link in your nav code would look like this.

<li><a href="/gallery/XXXXXX">B I O</a></li>

Where XXXXXX is the gallery number.

As an example.
This is the link to your "other animals" gallery.
http://www.krisjohnsonphotos.com/gallery/2660796#140749733 (http://www.krisjohnsonphotos.com/gallery/)

The gallery number is 2660796

so in your nav your would enter
<li><a href="/gallery/2660796">other animals</a></li>

It will be the same for your other links, info and pricing. They will each
have their own gallery number.

Andy

Apr-10-2007, 04:55 AM

but it is still not taking it to my BIO page. How do I fix this???
Did you see my post just above? :ear

:D

firelook2

Apr-10-2007, 08:12 AM

THANKYOU! THANKYOU!

You guys are "the bomb" as my kids would say. My website is up and going and looks much better with this new format. :barb Thanks so much for helping me and walking me through all the computer language - I really appreciate it!

Marcy

firelook2

Apr-10-2007, 08:27 AM

Sorry - one last question,

Everything on nav bar is working fantastic. The only question I have is that the 2 journal galleries (bio and links) are showing up on the galleries pages - any way to change that? I just want those 2 to be accessable by the nav bar.

Thanks again!

Marcy

Barb

Apr-10-2007, 08:38 AM

Sorry - one last question,

Everything on nav bar is working fantastic. The only question I have is that the 2 journal galleries (bio and links) are showing up on the galleries pages - any way to change that? I just want those 2 to be accessable by the nav bar.

Thanks again!

Marcy

Hi Marcy,

Just make those galleries private (gallery tools - customize gallery - security & privacy). They will then only show to you when you are logged in.

firelook2

Apr-10-2007, 09:46 AM

Hi Barb,

Thanks! I had thought of that but was afraid it would make the nav tabs unavailable to public. :)

Thanks again,

Marcy

dcyphert

Apr-10-2007, 09:55 AM

Having trouble...I want to put "Featured Galleries" in my navbar and then hide it from this page....similar to how the "Popular Pics" works in my navbar, which points to 'http://propointmedia.smugmug.com/popularpics'

I thought 'http://propointmedia.smugmug.com/featuresgalleries' would work...but apparently more than this is needed...may a wrong name here?:scratch

richW

Apr-10-2007, 10:19 AM

Having trouble...I want to put "Featured Galleries" in my navbar and then hide it from this page....similar to how the "Popular Pics" works in my navbar, which points to 'http://propointmedia.smugmug.com/popularpics'

I thought 'http://propointmedia.smugmug.com/featuresgalleries' would work...but apparently more than this is needed...may a wrong name here?:scratchDave, It is like your popularpics page.
In your footer, add the "feature" line.

if (hasPath("galleries"))
YD.addClass(document.body, "galleries");
if (hasPath("popularpics"))
YD.addClass(document.body, "popularpics");
if (hasPath("featured"))
YD.addClass(document.body, "featured");

Add to your navBar:
<li><a href="http://propointmedia.smugmug.com/featured">Feature Galleries</a></li>

In your css change this:
.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}

to this:
.galleries #galleriesBox,
.galleries #categoriesBox {
display: block;
}

add this:
.featured #featuredBox {display: block;}
.popularpics #featuredBox {display:none;}

See where this gets you, we can adjust / repair as needed.....

dcyphert

Apr-10-2007, 10:35 AM

Dave, It is like your popularpics page.
In your footer, add the "feature" line.

if (hasPath("galleries"))
YD.addClass(document.body, "galleries");
if (hasPath("popularpics"))
YD.addClass(document.body, "popularpics");
if (hasPath("featured"))
YD.addClass(document.body, "featured");

Add to your navBar:
<li><a href="http://propointmedia.smugmug.com/featured">Feature Galleries</a></li>

In your css change this:
.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}

to this:
.galleries #galleriesBox,
.galleries #categoriesBox {
display: block;
}

add this:
.featured #featuredBox {display: block;}
.popularpics #featuredBox {display:none;}

See where this gets you, we can adjust / repair as needed.....

Thanks Rich...everything is changed to what you gave me...but now the 'Featured Galleries' link in the navbar goes to the Home page, which is the slideshow, yet it shows 'http://propointmedia.smugmug.com/featured' in address bar.

Ferrisphoto

Apr-10-2007, 10:44 AM

I'm starting to customize my site, but can't figure out how to get the navbar to show up on my html pages. (Specifically the prices page) Can anyone help?

Thanks,
Mike
http://ferrisphoto.smugmug.com/

Andy

Apr-10-2007, 10:47 AM

I'm starting to customize my site, but can't figure out how to get the navbar to show up on my html pages. (Specifically the prices page) Can anyone help?

Thanks,
Mike
http://ferrisphoto.smugmug.com/
Could we lose the flames?

First of all, :wave Welcome to Dgrin!

You have the gallery set to "hide owner" which, as it says in gallery customization, hides your customization, too :thumb :D

dcyphert

Apr-10-2007, 10:57 AM

An added problem is that now the PopularPics link, http://propointmedia.smugmug.com/popularpics shows both the Popular Pics and the main gallery thumbs below it....before I started messing with this it the Popular Pics was all I saw...anyone please point out what I did. Thanks.:dunno

Ferrisphoto

Apr-10-2007, 11:00 AM

Could we lose the flames?

First of all, :wave Welcome to Dgrin!

You have the gallery set to "hide owner" which, as it says in gallery customization, hides your customization, too :thumb :D

Thanks for the welcome. If I change the hide owner, it still doesn't show up when I'm logged out, looking at it as customer would.:dunno

Allen

Apr-10-2007, 11:02 AM

An added problem is that now the PopularPics link, http://propointmedia.smugmug.com/popularpics shows both the Popular Pics and the main gallery thumbs below it....before I started messing with this it the Popular Pics was all I saw...anyone please point out what I did. Thanks.:dunno Look in your footer, you have some twice.

<*script type="text/javascript"*>
if (hasPath("galleries"))
YD.addClass(document.body, "galleries");
if (hasPath("popularpics"))
YD.addClass(document.body, "popularpics");
<*/script*>

<*script type="text/javascript"*>
if (hasPath("galleries"))
YD.addClass(document.body, "galleries");
if (hasPath("popularpics"))
YD.addClass(document.body, "popularpics");
if (hasPath("featured"))
YD.addClass(document.body, "featured");
<*/script*>

Ferrisphoto

Apr-10-2007, 11:13 AM

Thanks for the welcome. If I change the hide owner, it still doesn't show up when I'm logged out, looking at it as customer would.:dunno

Also my banner doesn't transfer to the HTML pages. Do I need to add the HTML code in that gallery description, or is this a CSS issue?

http://ferrisphoto.smugmug.com/

Allen

Apr-10-2007, 11:17 AM

Also my banner doesn't transfer to the HTML pages. Do I need to add the HTML code in that gallery description, or is this a CSS issue?

http://ferrisphoto.smugmug.com/ The only html page I could find is the prices and you have hide owner on.
See link in address bar?
http://www.smugmug.com (http://%3Cb%3Ewww.smugmug.com%3C/b%3E)/gallery/2691914
not your nickname

or Maybe you have smugmug instead of custom checked under customize
gallery because your breadcrumb shows.

appearance: ? SmugMug: custom:

Ferrisphoto

Apr-10-2007, 11:29 AM

The only html page I could find is the prices and you have hide owner on.
See link in address bar?
http://www.smugmug.com (http://%3Cb%3Ewww.smugmug.com%3C/b%3E)/gallery/2691914
not your nickname

or Maybe you have smugmug instead of custom checked under customize
gallery because your breadcrumb shows.

appearance: ? SmugMug: custom:

I have Hide owner set to "No", and the gallery set to "Custom". I don't know if this has anything to do with it, but I used MS Word to creat my HTML for the prices gallery, and copied it into the description?

Allen

Apr-10-2007, 11:46 AM

I have Hide owner set to "No", and the gallery set to "Custom". I don't know if this has anything to do with it, but I used MS Word to creat my HTML for the prices gallery, and copied it into the description?
"MS Word to create my HTML for the prices gallery" :puke
Not a good idea as there is probably all kinds of extra junk in there.
I just looked and it is loaded with garbage.

I see no user CSS when on that page. So re-check under customize gallery.

The whole page is just a bunch of lines centered so it would not be too
difficult to re-create in html.

richW

Apr-10-2007, 11:51 AM

Thanks Rich...everything is changed to what you gave me...but now the 'Featured Galleries' link in the navbar goes to the Home page, which is the slideshow, yet it shows 'http://propointmedia.smugmug.com/featured' in address bar.Dave, When I posted this code:

if (hasPath("galleries"))
YD.addClass(document.body, "galleries");
if (hasPath("popularpics"))
YD.addClass(document.body, "popularpics");
if (hasPath("featured"))
YD.addClass(document.body, "featured");

I meant for you to add only the featured portion under the other js lines.

Your original code:
if (hasPath("galleries"))
YD.addClass(document.body, "galleries");
if (hasPath("popularpics"))
YD.addClass(document.body, "popularpics");

add this under:

if (hasPath("featured"))
YD.addClass(document.body, "featured");

Remove the duplicates.

Ferrisphoto

Apr-10-2007, 11:55 AM

"MS Word to create my HTML for the prices gallery" :puke
Not a good idea as there is probably all kinds of extra junk in there.
I just looked and it is loaded with garbage.

I see no user CSS when on that page. So re-check under customize gallery.

The whole page is just a bunch of lines centered so it would not be too
difficult to re-create in html.

Thanks, I got it. It was a bad url in my link. How do I remove the breadcrumbs, such as "Ferrisphoto>other>Price Gallery?

Also the crumbs at the bottom "This is a brand new gallery with no photos."

Allen

Apr-10-2007, 12:25 PM

Thanks, I got it. It was a bad url in my link. How do I remove the breadcrumbs, such as "Ferrisphoto>other>Price Gallery?

Also the crumbs at the bottom "This is a brand new gallery with no photos."

Instead of the Word stuff/junk/crap, remove it and add this to the gallery description and see it you like it.
Save what you have now for backup.

<html>
<div class="text1" align="center">
<h2><p>Pricing Guide</p></h2>
<br />
<p><h3>Exclusive One . . . . . . . . . . . . . . . . . . . . . . . . . . . $2,200.00</h3></p>

<p>- 6 hours of coverage with 300 – 600 digital proofs(Low Res</p>
<p>- Comes w/ 4 digital proof CD’s in color and B&W</p>
<p><b>- One custom 8x8 Picto album w/ 16 spreads</b></p>

<p><h3>Exclusive Two . . . . . . . . . . . . . . . . . . . . . . . . . . . $2,750.00</h3></p>

<p>- 8 hours of coverage with 600 – 800 digital proofs(Hi-Res)</p>
<p>- Comes w/ 4 digital proof CD’s in color and B&W</p>
<p><b>- One custom 10x10 Picto album w/ 16 spreads</b></p>

<p><h3>Bronze Package . . . . . . . . . . . . . . . . . . . . . . . . . . . $4,000.00</h3></p>

<p>- Full day coverage with 500 – 750 digital proofs</p>
<p>- Comes w/ 4 digital proof CD’s in color and B&W</p>
<p> 3-8x10, 8-5x7, 20-4x6</p>
<p><b>- One custom 12x12 Picto album of your choice w/ 16 spreads</b></p>

<p><h3>Silver Package . . . . . . . . . . . . . . . . . . . . . . . . . . . $5,500.00</h3></p>

<p>- Full day coverage with 500 – 750 digital proofs</p>
<p>- Comes w/ 4 digital proof CD’s, 3-8x10, 8-5x7, 20-4x6</p>
<p><b>- One custom 12x12 Picto album of your choice w/ 16 spreads</p>
<p>- Two 5x7 parents Gold Class albums w/ 24 photographs</b></p>

<p><h3>Gold Package . . . . . . . . . . . . . . . . . . . . . . . . . . . $7,000.00</h3></p>

<p>- Full day coverage with 500 – 750 digital proofs</p>
<p>- Comes w/ 4 digital proof CD’s</p>
<p>- 200 4x6 paper proofs</p>
<p><b>- One custom 12x12 Picto album of your choice w/ 18 spreads</p>
<p>- Two 8x8 parents Platinum Class B&G duplicate albums</p>
<p>- One 16x20 color or black & white enlargement</b></p>

<p><h3>Platinum Package . . . . . . . . . . . . . . . . . . . . . . . . . . . $9,000.00</h3></p>

<p>- Full day coverage with 1000 – 1500 digital proofs</p>
<p>- Comes w/ 6 digital proof CD’s</p>
<p><b>- 400 4x6 paper proofs</p>
<p>- One custom 15x15 Picto album of your choice w/ 20 spreads</p>
<p>- Two 8x8 parent Platinum Class B&G duplicate albums</p>
<p>- One 16x20 color or black & white enlargement</p>
<p>- A copy of all full resolution files</b></p>
<br/><br/>
<p><h3>A-La-Carte Price List</h3></p>
<br/><br/>
<p>* Custom layout and album design with 24 page 10x10 <br/>leather “Breeze Pano” or 12x12 leather “Breeze Classic” <br/>1” black matte
borders . . . . . . . . . . . . . . <b>$1,500.00</b></p>

<p>* Custom layout and album design with 18 spread Picto Book (pano) album<br/>that holds up to 100 photographs . . . . . . . <b>$2,000.00</b></p>

<p><h3>Extra Album Pages</h3></p>
<br/>
<p>*Full Panorama . . . . . . . . . . . . . . . . . . . <b>$150.00</b></p>

<p>*Half Page Panorama . . . . . . . . . . . . . . . <b>$100.00</b></p>

<p><b>*Silver Parent Album</b>. . . Twenty four 4x6 candid originals in a small <br/>Leather Craftsman Album . . . <b>$200.00</b></p>
<br/><br/>
<p><b>*Gold Parent Album</b> . . . Twenty four 5x7 enlargements in a Leather <br/>Bound Craftsman album . . . <b>$400.00</b></p>
<br/>
<p>*Platinum Parent Album . . . Duplicate 8x8 of the B&G’s Picto Book <br/>panoramic album, or 10x10 Breeze Pano . . . <b>$700.00</b></p>

<p>*If you would like all 4x6 paper proofs from your files, <br/>the cost is 50 cents ($.50) per proof unless otherwise negotiated as <br/>a package</p>

<p>*Digital proof sheets are available at $10.00 each, and <br/>are 13x19 with approximately 24 photos on each sheet</p>

<p><h3>General Information</h3></p>
<br/>
<p>* Balance of package must be paid two weeks prior to your <br/>wedding date, payment schedules are available.</p>

<p><b>* All photographs are copyrighted & may not be copied without <br/>written consent from Ferris PhotoGraphy.</b></p>
</div>
</html>

Andy

Apr-10-2007, 12:34 PM

Thanks for the welcome. If I change the hide owner, it still doesn't show up when I'm logged out, looking at it as customer would.:dunno
http://ferrisphoto.smugmug.com/gallery/2691914 looks fine to me? :dunno

To remove the breadcrumb:
.gallery_XXXXXX #breadcrumb {display: none;}

To remove the no photos msg:

.gallery_XXXXXX .nophotos {display: none;}

Ferrisphoto

Apr-10-2007, 12:47 PM

http://ferrisphoto.smugmug.com/gallery/2691914 looks fine to me? :dunno

To remove the breadcrumb:
.gallery_XXXXXX #breadcrumb {display: none;}

To remove the no photos msg:

.gallery_XXXXXX .nophotos {display: none;}

Thanks Andy, That was perfect.

Al, I love it, that is great...Any chance you can do that to my contact page, or teach me to do that?:clap

Also, Do I just use this code to control the text?
<html><div class="text1" align="center">...I didn't see anything that specifies Text color, or size>

BistiArt

Apr-11-2007, 11:05 AM

Hey Guys,

I am about to need an additional item in the BistiArt Navbar.

I would like to put the title 'Links' there, then add links as they become important.

Its been months since I looked at your Header-Navbar-etc stuff. So, I need to come up to speed, quickly if possible...

Can someone please suggest a way to accomplish this seemingly simple task?

BTW, is this title appropriate since i dont know the keywords for this function, or should I be looking for other keywords in the Support Forums?

Allen

Apr-11-2007, 12:07 PM

Hey Guys,

I am about to need an additional item in the BistiArt Navbar.

I would like to put the title 'Links' there, then add links as they become important.

Its been months since I looked at your Header-Navbar-etc stuff. So, I need to come up to speed, quickly if possible...

Can someone please suggest a way to accomplish this seemingly simple task?

BTW, is this title appropriate since i dont know the keywords for this function, or should I be looking for other keywords in the Support Forums?
What would your new Links link to? Would it be a new gallery that
has a bunch of links on it? Easy to create using using
a traditional style with each entry having a link and photo.

If you replace your nav code in the header with this it adds a new menu
item for Links. xxxxxxxx = new gallery number

<div id="navcontainer">
<ul>
<li><a href="http://BistiArt.smugmug.com">Home</a></li>
<li><a href="http://BistiArt.smugmug.com/gallery/xxxxxxxx">Links</a></li>
<li><a href="http://BistiArt.smugmug.com/Bisti%20Art">Bisti Art</a></li>
<li><a href="http://BistiArt.smugmug.com/Bisti%20Tours">Bisti Tours</a></li>
<li><a href="http://www.geocompa.com/BistiArtBlog.htm">Blog</a></li>
<li><a href="http://www.geocompa.com/BistiRegistration.htm">Planet 50+ Tour </a></li>
<li><a href="http://www.geocompa.com/PASFRegistration.htm">PhotoArts SF 2007 Tour </a></li>
<form name="searchBox" id="searchBox" method="get" action="/search/index.mg" onsubmit="checkInput('search','searchWords',' ')"><input onclick="checkInput('search','searchWords','')" onblur="checkInput('','searchWords','search')" id="searchWords" name="searchWords" value="search" type="text"><input name="searchType" value="InUserCategory" type="hidden"><input name="NickName" value="BistiArt" type="hidden"><input name="CategoryID" value="117923" type="hidden"><input src="/img/spacer.gif" alt="Submit Search" title="Submit Search" class="searchglass" onclick="if(document.searchBox.searchWords.value == 'search') { document.searchBox.searchWords.value = ' '; }" type="image"></form>
</ul>
</div>

I would suggest editing this in your CSS to make it narrower so the menu
fits under your banner better.

#searchWords {
width: 70px;
}

Holler back with your idea of what you want.

BistiArt

Apr-11-2007, 03:43 PM

Holler back with your idea of what you want.
Hey Allen,

Long time no talk...

I would like a menu with expandable drop down features such that

Line 1 - Links {tells folks we are gonna see some links below}
Line 2 - Link A (as a drop down feature going anywhere on net)
Line 3 - Link B
...
Line N - Link N

Lines 2-N would derive as time progresses.

As I read your initial attempt, it simply tries to keep within Smugmug and one gallery.
The suggested drop down menu, with successive links, would let viewers see multiple choices on the Navbar.

Thanks for the quick response; I look forward to implementing this feature!

Allen

Apr-11-2007, 05:13 PM

Hey Allen,

Long time no talk...

I would like a menu with expandable drop down features such that

Line 1 - Links {tells folks we are gonna see some links below}
Line 2 - Link A (as a drop down feature going anywhere on net)
Line 3 - Link B
...
Line N - Link N

Lines 2-N would derive as time progresses.

As I read your initial attempt, it simply tries to keep within Smugmug and one gallery.
The suggested drop down menu, with successive links, would let viewers see multiple choices on the Navbar.

Thanks for the quick response; I look forward to implementing this feature!
Ok, got ya all fixed up.:D After this is incorporated IE will have to be looked
at and adjusted. Works great in Firefox.

Replace your nav html in the header with this.

<div class="menu">
<ul>
<li><a href="http://BistiArt.smugmug.com">Home</a></li>
<li><a href="http://BistiArt.smugmug.com/Bisti%20Art">Bisti Art</a></li>
<li><a href="http://BistiArt.smugmug.com/Bisti%20Tours">Bisti Tours</a></li>
<li><a class="drop" href="#">Links
</a>

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
</ul> 
</li>
<li><a href="http://www.geocompa.com/BistiArtBlog.htm">Blog</a></li>
<li><a href="http://www.geocompa.com/BistiRegistration.htm">Planet 50+ Tour</a></li>
<li><a href="http://www.geocompa.com/PASFRegistration.htm">PhotoArts SF 2007 Tour</a></li>
<form name="searchBox" id="searchBox" method="get" action="/search/index.mg" onsubmit="checkInput('search','searchWords',' ')"><input onclick="checkInput('search','searchWords','')" onblur="checkInput('','searchWords','search')" id="searchWords" name="searchWords" value="search" type="text"><input name="searchType" value="InUserCategory" type="hidden"><input name="NickName" value="BistiArt" type="hidden"><input name="CategoryID" value="117923" type="hidden"><input src="/img/spacer.gif" alt="Submit Search" title="Submit Search" class="searchglass" onclick="if(document.searchBox.searchWords.value == 'search') { document.searchBox.searchWords.value = ' '; }" type="image">
</form>
</ul> 
</div>
You didn't have much in your CSS so this is the whole thing.
Replace the whole CSS with this.

#my_banner {
width: 435px;
height: 200px;
margin: 0 auto;
margin-top:5px;
background: url(http://BistiArt.smugmug.com/photos/117767176-O.jpg) no-repeat;
}

.category_Bisti_Art #my_banner {
width: 560px;
height: 200px;
background: url(http://BistiArt.smugmug.com/photos/118448349-O.jpg) no-repeat;
}

.category_Bisti_Tours #my_banner {
width: 730px;
height: 200px;
background: url(http://BistiArt.smugmug.com/photos/118448355-O.jpg) no-repeat;
}

/* 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 */

/* Common Styling */

.menu {
position:relative;
display:block;
z-index:99;
padding: 20px 0px 30px 0px; /* spacing around menu - top right bottom left */
height: 20px; /* menu container (div .menu) */
width: 820px; /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
margin: 0 auto; /* this should center navbar */
}

.menu ul {
margin-top: -10px;
padding: 0;
list-style-type: none;
text-align: center;
}

.menu ul li {
display: inline;
position:relative;
}

.menu ul li a,
.menu ul li a:visited {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

.menu ul li ul {
display:none;}

/* +++++++++++++++++++++++++++ */
/* Specific to Non-IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li:hover a {
color: #fff; /* main when hover DD */
background: #036; /* main when hover DD */
}

.menu ul li:hover ul {
display:block;
position:absolute;
top: 0px; /* FF DD up down */
margin-top:17px; /* FF main mouse active vertical */
left: -20px; /* FF DD right left */
width:104px; /* unknown */
}

.menu ul li:hover ul li a {
display:block;
background: #036; /* DD FO non-hover */
color: #fff; /* DD FO non-hover */
height: auto;
line-height: 20px; /* DD FO box height */
padding: 0px 0px;
width: 100px /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
background: #369; /* DD FO */
color: #fff; /* DD FO */
}

/* +++++++++++++++++++++++++++ */
/* Specific to IE browsers */
/* +++++++++++++++++++++++++++ */

.menu ul li a:hover {
color: #fff; /* main hover */
background: #369; /* main hover */
}

.menu ul li a:hover ul {
display:block;
position:absolute;
top: 2px; /* DD container up down */
background: none; /* gets rid of DD container */
margin-top: 7px; /* DD container up down */
left: 0px; /* DD right left */
}

.menu ul li a:hover ul li a {
display:block;
background: #036; /* IE DD color non-hover */
color: #fff; /* IE DD color non-hover */
height: auto;
line-height: 20px; /* IE DD FO box height */
padding: 0px;
width: 145px; /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
visibility:hidden;
position:absolute;
height: 0;
width: 0;
}

.menu ul li a:hover ul li a:hover {
background: #369; /* DD FO */
color: #fff; /* DD FO */
}

/*ADD TO FIX IE*/
/* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
width: 125px;
w\idth: 139px;
}

/* another hack for IE5.5 */

* html .menu ul ul {
top: 30px;
t\op: 31px; /* 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:auto 0; left:0;
}

/* yet another hack for IE5.5 */

* html .menu ul ul a{
width: 125px; /* unknown */
w\idth: 104px; /* DD FF width */
}

/* END EXTRA ADDS FOR IE */

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */

.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility: visible;
}

#searchWords {
width: 70px;
}

Kris Johnson

Apr-11-2007, 09:40 PM

I had a question regarding the nav bar and having multiple galleries of photos. I have the Galleries tab set to work for one of the galleries but I have more than one. Do I need to combine them into one and then have sub categories?? If so, how do I go about doing this. If there is something different that I need do, please let me know!

BistiArt

Apr-12-2007, 05:46 AM

Ok, got ya all fixed up. Yep, it sure looks like it, Allen... Good work! Has this entire procedure been put in a general tute anywhere? I appreciate your timeliness. I am in the midst of creating a 3 day PhotoArts Santa Fe 2007 photographers digital tour for July 16-18 to Chaco, Bisti, and Valles Preserve; setting the links will be the final step of connecting smugmug content to descriptive web pages and timely calendars. I expect a few days from now I can focus on the programming part of your message. I am not sure where to place each piece; can you please amplify [CSS, htm, javascript, etc]?

BistiArt

Apr-12-2007, 05:52 AM

I am not sure where to place each piece; can you please amplify [CSS, htm, javascript, etc]? Oops, looks like you actually took care of header html and CSS... Sorry, mind in many places {or is it just age?}

Andy

Apr-12-2007, 12:59 PM

I had a question regarding the nav bar and having multiple galleries of photos. I have the Galleries tab set to work for one of the galleries but I have more than one. Do I need to combine them into one and then have sub categories?? If so, how do I go about doing this. If there is something different that I need do, please let me know!
Hi Kris,
Can you be more specific? Lay it out in detail, so that the helpers can help. Thanks!

Kris Johnson

Apr-12-2007, 01:24 PM

I currently have 2 galleries....one with my photos and one with my bio picture and introduction. The Animals gallery actually has 2 albums in it. I was wanting to display the page with both albums on there when the Galleries tab is clicked on the homepage, rather than just the Lion album. What gallery number do I put in when I am trying to display both albums in the Animals gallery, when the Galleries tab is accessed? Please let me know how I can fix this.

Kris Johnson

Andy

Apr-12-2007, 01:33 PM

I currently have 2 galleries....one with my photos and one with my bio picture and introduction. The Animals gallery actually has 2 albums in it. I was wanting to display the page with both albums on there when the Galleries tab is clicked on the homepage, rather than just the Lion album. What gallery number do I put in when I am trying to display both albums in the Animals gallery, when the Galleries tab is accessed? Please let me know how I can fix this.

Kris Johnson
Kris, help us to help you.

We must know your site to be able to help you. Thanks.

Kris Johnson

Apr-12-2007, 01:37 PM

Kris, help us to help you.

We must know your site to be able to help you. Thanks.

www.krisjohnsonphotos.com

Allen

Apr-12-2007, 01:42 PM

www.krisjohnsonphotos.com (http://www.krisjohnsonphotos.com)
Then you want to link to the animal category.

<div id="navcontainer">
<ul>
<li><a href="/Home">H O M E</a></li>
<li><a href="/gallery/2692033">B I O</a></li>
<li><a href="/Animals">G A L L E R I E S</a></li>
<li><a href="/Pricing">P R I C I N G</a></li>
<li><a href="/Info">I N F O</a></li>
</ul>
</div>

Andy

Apr-12-2007, 01:45 PM

www.krisjohnsonphotos.com
Great. Best is to put it in your profile, too. You! upper left, dgrin screen.

Kris Johnson

Apr-12-2007, 01:53 PM

Ok so this is what I typed in and it says that the gallery does not seem to exist. What have I done or need to do?

<li><a href="/Animals">G A L L E R I E S</a></li>

Any idea why it is saying it doesn't exist?

Then you want to link to the animal category.

<div id="navcontainer">
<ul>
<li><a href="/Home">H O M E</a></li>
<li><a href="/gallery/2692033">B I O</a></li>
<li><a href="/Animals">G A L L E R I E S</a></li>
<li><a href="/Pricing">P R I C I N G</a></li>
<li><a href="/Info">I N F O</a></li>
</ul>
</div>

Allen

Apr-12-2007, 01:56 PM

Ok so this is what I typed in and it says that the gallery does not seem to exist. What have I done or need to do?

<li><a href="Animals">G A L L E R I E S</a></li>

Any idea why it is saying it doesn't exist?
You forgot the / in fornt of animals, but it looks like you found it.

Kris Johnson

Apr-12-2007, 02:00 PM

I got it to work!!!!! Thank you so much Allen!!!!![

quote=Kris Johnson]Ok so this is what I typed in and it says that the gallery does not seem to exist. What have I done or need to do?

<li><a href="/Animals">G A L L E R I E S</a></li>

Any idea why it is saying it doesn't exist?[/quote]

Allen

Apr-12-2007, 02:06 PM

I got it to work!!!!! Thank you so much Allen!!!!![

quote=Kris Johnson]Ok so this is what I typed in and it says that the gallery does not seem to exist. What have I done or need to do?

<li><a href="/Animals">G A L L E R I E S</a></li>

Any idea why it is saying it doesn't exist?
:thumb You're welcome.

Be sure to holler back if you have any other questions.

brandofamily

Apr-14-2007, 09:42 PM

Allen, I noticed on your site that you have a 2nd level of flyouts on one of your drop downs... could you share the coding adjustment that allows for that?
I'd like to do a 2nd level fly out for my football subcats...

Andy

Apr-15-2007, 05:38 AM

Allen, I noticed on your site that you have a 2nd level of flyouts on one of your drop downs... could you share the coding adjustment that allows for that?
I'd like to do a 2nd level fly out for my football subcats...
You've been here long enough to know that we have a dedicated thread for navbars. I moved your post :deal

brandofamily

Apr-15-2007, 05:40 AM

You've been here long enough to know that we have a dedicated thread for navbars. I moved your post :deal
Sorry andy:rolleyes

Andy

Apr-15-2007, 05:43 AM

Sorry andy:rolleyes
This is where Allen gives all his help :thumb

kristen

Apr-15-2007, 06:52 AM

Below is my navbar code. I need to add another link. When I try to add it, it isn't lined up properly. It's all on top of my orignal bar. I need to know how to make it line up properly.

<div id="my_banner"> </div>
<div id="navcontainer">
<ul>
<li><a href="<A href="http://takethepicturenow.smugmug.com">Home</a></li">http://takethepicturenow.smugmug.com">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="<A href="http://takethepicturenow.smugmug.com/gallery/2617162/1/138089742">About">http://takethepicturenow.smugmug.com/gallery/2617162/1/138089742">About Me</a></li>
<li><a href="<A href="http://takethepicturenow.smugmug.com/gallery/2628205/1/138762267">Pricing/Info</a></li">http://takethepicturenow.smugmug.com/gallery/2628205/1/138762267">Pricing/Info</a></li>
<li><a href="<A href="http://takethepicturenow.smugmug.com/gallery/2628632/1/138783372">Guest">http://takethepicturenow.smugmug.com/gallery/2628632/1/138783372">Guest Book</a></li>

</a></li></div>

I did try reading myself, and I couldn't get it to work. I know it's gotta be something simple. THANKS

Allen

Apr-15-2007, 07:26 AM

Below is my navbar code. I need to add another link. When I try to add it, it isn't lined up properly. It's all on top of my orignal bar. I need to know how to make it line up properly.

<div id="my_banner"> </div>
<div id="navcontainer">
<ul>
<li><a href="<A href="http://takethepicturenow.smugmug.com">Home</a></li">http://takethepicturenow.smugmug.com">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="<A href="http://takethepicturenow.smugmug.com/gallery/2617162/1/138089742">About">http://takethepicturenow.smugmug.com/gallery/2617162/1/138089742">About Me</a></li>
<li><a href="<A href="http://takethepicturenow.smugmug.com/gallery/2628205/1/138762267">Pricing/Info</a></li">http://takethepicturenow.smugmug.com/gallery/2628205/1/138762267">Pricing/Info</a></li>
<li><a href="<A href="http://takethepicturenow.smugmug.com/gallery/2628632/1/138783372">Guest">http://takethepicturenow.smugmug.com/gallery/2628632/1/138783372">Guest Book</a></li>

</a></li></div>

I did try reading myself, and I couldn't get it to work. I know it's gotta be something simple. THANKS First step is clean up what you have now. Added a new link in bold.

<div id="navcontainer">
<ul>
<li><a href="http://takethepicturenow.smugmug.com">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/2617162">About Me</a></li>
<li><a href="/gallery/2628205">Pricing/Info</a></li>
<li><a href="/gallery/2628632">Guest Book</a></li>
<li><a href="/gallery/xxxxxxx">new link</a></li>
</ul>
</div>
Then adjust the red to get the right spread.

#navcontainer ul li a {
text-decoration: none;
padding: .2em 2.3em;
color: #000000;
background-color: #C0C0C0;
}

Holler back if you have any questions.

Allen

Apr-15-2007, 07:39 AM

Allen, I noticed on your site that you have a 2nd level of flyouts on one of your drop downs... could you share the coding adjustment that allows for that?
I'd like to do a 2nd level fly out for my football subcats... Follow the pattern for the drops and flyouts here (http://allen-steve.smugmug.com/gallery/2011077).

Montec

Apr-15-2007, 08:37 AM

Hello All,
I have had some people visit my site that cannot access the drop down menus on my navbar. They change colour on hover but do not display the drop down menu.

Is is a browser issue? I have tried with IE7 and FF and both work fine.

brandofamily

Apr-15-2007, 09:14 AM

Follow the pattern for the drops and flyouts here (http://allen-steve.smugmug.com/gallery/2011077). Thanks...
I understand the coding for the header section... I can not get the CSS stuff... you may be using a differnet version. Here's my CSS

/*********************************/
/*Drop-Down/ Fly-Out Nav. Buttons*/
/*********************************/

.homepage .menu {display:none;}

/*Common Styling*/
.menu {font-family:"Gentium","Times New Roman", times, serif; width:848px; position:relative; z-index:99; font-size:12px; padding-bottom:30px; _padding-bottom:18px; margin-left:0px;}
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; position:relative;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#e3cfb5; width:104px; height:20px; color:#e3cfb5; border:1px solid #D5B790; border-width:1px 1px 1px 1px; background:transparent; padding-left:0px; line-height:20px;}

* html .menu ul li a, .menu ul li a:visited {width:104px; w\idth:104px;}

.menu ul li ul {display:none;}

.droptable1, .droptable2, .droptable3, .droptable4, .droptable5, .droptable6, .droptable7, .droptable8, .droptable9 {margin:-1px; border-collapse:collapse; font-size:12px; text-align:center;}

/*Specific to Non-IE browsers*/
.menu ul li:hover a {color:#8f7b62; background:#000000;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; margin-top:0px; left:0; width:104px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#000000; color:#e3cfb5; height:auto; line-height:20px; padding:0px 0px; width:132px}

.menu ul li:hover ul li a.drop {background:#000000 url(http://brandolinoimaging.smugmug.com/photos/71621859-O.gif) bottom right no-repeat;}

.menu ul li:hover ul li a:hover {background:#000000; color:#8f7b62;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:134px; top:0px; width:134px;}
.menu ul li:hover ul li:hover ul.left {left:-134px;}

/*new level*/
.menu ul li:hover ul li a: hover a {color:#8f7b62; background:#000000;}
.menu ul li:hover ul li:hover ul ul {display:block; position:absolute; top:21px; margin-top:0px; left:0; width:104px;}
.menu ul li:hover ul li ul:hover ul li ul ul {display: none;}
.menu ul li:hover ul li a:hover ul li a {display:block; background:#000000; color:#e3cfb5; height:auto; line-height:20px; padding:0px 0px; width:132px}

.menu ul li:hover ul li ul a.drop {background:#000000 url(http://brandolinoimaging.smugmug.com/photos/71621859-O.gif) bottom right no-repeat;}

.menu ul li:hover ul li a:hover ul li a:hover {background:#000000; color:#8f7b62;}
.menu ul li:hover ul li:hover ul li:hover ul ul {display:block; position:absolute; left:134px; top:0px; width:134px;}
.menu ul li:hover ul li:hover ul li:hover ul.left {left:-134px;}
/*end new level*/

/*Specific to IE browsers*/
.menu ul li a:hover {color:#8f7b62; background:#000000;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; background:#000000; margin-top:0px; marg\in-top:0px;}
.menu ul li a:hover ul li a {display:block; background:#000000; color:#e3cfb5; height:auto; line-height:20px; padding:0px 0px; width:132px; w\idth:132px;}

.menu ul li a:hover ul li a.drop {background:#000000 url(http://brandolinoimaging.smugmug.com/photos/71621859-O.gif) bottom right no-repeat;}

.menu ul li a:hover ul li a ul {visibility:hidden; position:absolute; height:0; width:0;}
.menu ul li a:hover ul li a:hover {background:#000000; color:#8f7b62;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; top:0px; color:#8f7b62; left:134px;}
.menu ul li a:hover ul li a:hover ul.left {left:-134px;}

The new level is not showing up... and the triangle in the lower right corner of the items w/ a flyout is not showing up.
I'm trying to get it working in FF 1st...

Allen

Apr-15-2007, 10:46 AM

The new level is not showing up... and the triangle in the lower right corner of the items w/ a flyout is not showing up.
I'm trying to get it working in FF 1st...
I can't find your new level in the html.:scratch

Do you know what browsers are the problem?

brandofamily

Apr-15-2007, 12:39 PM

I can't find your new level in the html.:scratch

Do you know what browsers are the problem?

try it now... look for "droptable4a"

I've got the level showing in IE6... does not hide, it opens when the 2nd level opens...

It will not show at all in FF...
I have to figure out the CSS that shows it in FF and hides it in IE...

brandofamily

Apr-15-2007, 02:09 PM

I can't find your new level in the html.:scratch

Do you know what browsers are the problem?
can't get the last fly out to only show on hover in IE6
Seems OK in FF...

Allen

Apr-15-2007, 02:29 PM

can't get the last fly out to only show on hover in IE6
Seems OK in FF... Saw you had it working in FF.:thumb
See if any of these will help. Ref here (http://allen-steve.smugmug.com/gallery/2078255).

/* ADD TO HIDE EXTRA LEVELS */
/* make the 2nd level visible when
hover on 1st level list OR link */
.menu ul a:hover ul, /* IE */
.menu ul:hover ul { /* FF */
visibility:visible;
}

/* keep the 3rd level hidden when you
hover on 1st level list OR link */
.menu ul a:hover ul ul, /* IE */
.menu ul:hover ul ul { /* FF */
visibility:hidden;
}

/* keep the 4th level hidden when you
hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul, /* IE */
.menu ul li:hover ul li:hover ul ul { /* FF */
visibility:hidden;
}

/* make the 3rd level visible when you hover
over 2nd level list OR link */
.menu ul a:hover ul a:hover ul, /* IE */
.menu ul:hover ul:hover ul { /* FF */
visibility:visible;
}

/* make the 4th level visible when you
hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul, /* IE */
.menu ul li:hover ul li:hover ul li:hover ul { /* FF */
visibility:visible;
}

brandofamily

Apr-15-2007, 03:22 PM

I think I got it... check it out in IE and FF for me if you have a chance...
Thanks

Allen

Apr-15-2007, 03:28 PM

I think I got it... check it out in IE and FF for me if you have a chance...
Thanks
Looks good in FF and IE6.:thumb

brandofamily

Apr-15-2007, 03:50 PM

Thanks again... I only wish I knew what I was doing...:rofl

kristen

Apr-16-2007, 05:25 AM

First step is clean up what you have now. Added a new link in bold.

<div id="navcontainer">
<ul>
<li><a href="http://takethepicturenow.smugmug.com">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/2617162">About Me</a></li>
<li><a href="/gallery/2628205">Pricing/Info</a></li>
<li><a href="/gallery/2628632">Guest Book</a></li>
<li><a href="/gallery/xxxxxxx">new link</a></li>
</ul>
</div>
Then adjust the red to get the right spread.

#navcontainer ul li a {
text-decoration: none;
padding: .2em 2.3em;
color: #000000;
background-color: #C0C0C0;
}

Holler back if you have any questions.

This is what I have

<div id="navcontainer">
<ul>
<li><a href="<A href="http://takethepicturenow.smugmug.com">Home</a></li">http://takethepicturenow.smugmug.com">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/2617162">About Me</a></li>
<li><a href="/gallery/2628205">Pricing/Info</a></li>
<li><a href="/gallery/2628632">Guest Book</a></li>
<li><a href="/gallery/xxxxxxx">new link</a></li>
</ul>
</div>

It still doesn't look right. Changing the size like you said before I couldn't ge tit to work.

Allen

Apr-16-2007, 06:44 AM

It still doesn't look right. Changing the size like you said before I couldn't ge tit to work. I just changed padding: .2em 3.5em; to .2em 2.3em; and it popped
right in using Firefox. What browser are you using?

kristen

Apr-16-2007, 07:57 AM

I just changed padding: .2em 3.5em; to .2em 2.3em; and it popped
right in using Firefox. What browser are you using?

<div id="navcontainer">
<ul>
<li><a href="<A href="http://takethepicturenow.smugmug.com">Home</a></li">http://takethepicturenow.smugmug.com">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/2617162">About Me</a></li>
<li><a href="/gallery/2628205">Pricing/Info</a></li>
<li><a href="/gallery/2628632">Guest Book</a></li>
<li><a href="/gallery/xxxxxxx">new link</a></li>
</ul>
</div>
#navcontainer ul li a {
text-decoration: none;
padding: 3.5em 2.3em;
color: #000000;
background-color: #C0C0C0;
}

I'm confused beacuse I didn't have all of that stuff in there before and it was working fine. None of this......
#navcontainer ul li a {
text-decoration: none;
padding: 3.5em 2.3em;
color: #000000;
background-color: #C0C0C0;
}
was in my previous page. What I entered up above is all in my page and it's still very messed up.

kristen

Apr-16-2007, 08:15 AM

<div id="navcontainer">
<ul>
<li><a href="<A href="http://takethepicturenow.smugmug.com">Home</a></li">http://takethepicturenow.smugmug.com">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/2617162">About Me</a></li>
<li><a href="/gallery/2628205">Pricing/Info</a></li>
<li><a href="/gallery/2628632">Guest Book</a></li>
<li><a href="/gallery/xxxxxxx">new link</a></li>
</ul>
</div>
#navcontainer ul li a {
text-decoration: none;
padding: 3.5em 2.3em;
color: #000000;
background-color: #C0C0C0;
}

I'm confused beacuse I didn't have all of that stuff in there before and it was working fine. None of this......
#navcontainer ul li a {
text-decoration: none;
padding: 3.5em 2.3em;
color: #000000;
background-color: #C0C0C0;
}
was in my previous page. What I entered up above is all in my page and it's still very messed up.

Where should I put all of this?

#navcontainer ul li a {
text-decoration: none;
padding: .2em 2.3em;
color: #000000;
background-color: #C0C0C0;
}

It's showing up in the header. It just comes out as text on my page. Should is be a CCS or something?

Allen

Apr-16-2007, 08:17 AM

<div id="navcontainer">
<ul>
<li><a href="<A href="http://takethepicturenow.smugmug.com">Home</a></li">http://takethepicturenow.smugmug.com">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/2617162">About Me</a></li>
<li><a href="/gallery/2628205">Pricing/Info</a></li>
<li><a href="/gallery/2628632">Guest Book</a></li>
<li><a href="/gallery/xxxxxxx">new link</a></li>
</ul>
</div>
#navcontainer ul li a {
text-decoration: none;
padding: 3.5em 2.3em;
color: #000000;
background-color: #C0C0C0;
}

I'm confused beacuse I didn't have all of that stuff in there before and it was working fine. None of this......
#navcontainer ul li a {
text-decoration: none;
padding: 3.5em 2.3em;
color: #000000;
background-color: #C0C0C0;
}
was in my previous page. What I entered up above is all in my page and it's still very messed up.
This is what is your header now. Looks good except the banner is missing.

<div id="my_banner"></div> << add this, you lost your banner, don't add this in red
<div id="navcontainer">
<ul>
<li><a href="http://takethepicturenow.smugmug.com">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/2617162">About Me</a></li>
<li><a href="/gallery/2628205">Pricing/Info</a></li>
<li><a href="/gallery/2628632">Guest Book</a></li>
<li><a href="/gallery/xxxxxxx">new link</a></li>
</ul>
</div>

Where are you getting this?
<li><a href="<A href="http://takethepicturenow.smugmug.com">Home</a></li">http://takethepicturenow.smugmug.com">Home</a></li>

This is what is in your CSS

#navcontainer ul li a {
text-decoration: none;
padding: .2em 3.5em;
color: #000000;
background-color: #C0C0C0;
}

Change to this and should work.

#navcontainer ul li a {
text-decoration: none;
padding: .2em 2.5em;
color: #000000;
background-color: #C0C0C0;
}

kristen

Apr-16-2007, 08:24 AM

This is what is your header now. Looks good except the banner is missing.

<div id="my_banner"></div> << add this, you lost your banner, don't add this in red
<div id="navcontainer">
<ul>
<li><a href="http://takethepicturenow.smugmug.com">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/gallery/2617162">About Me</a></li>
<li><a href="/gallery/2628205">Pricing/Info</a></li>
<li><a href="/gallery/2628632">Guest Book</a></li>
<li><a href="/gallery/xxxxxxx">new link</a></li>
</ul>
</div>

Where are you getting this?
<li><a href="<A href="http://takethepicturenow.smugmug.com">Home</a></li">http://takethepicturenow.smugmug.com">Home</a></li>

This is what is in your CSS

#navcontainer ul li a {
text-decoration: none;
padding: .2em 3.5em;
color: #000000;
background-color: #C0C0C0;
}

Change to this and should work.

#navcontainer ul li a {
text-decoration: none;
padding: .2em 2.5em;
color: #000000;
background-color: #C0C0C0;
}

:clap Thanks! I was confused, but I got it now. :) Much appreciated.

Allen

Apr-16-2007, 08:27 AM

:clap Thanks! I was confused, but I got it now. :) Much appreciated.
:thumb Great! Happy to help.

The Curious Camel

Apr-16-2007, 05:23 PM

My web page works on my computer but on my friends and family the drop down menus don't work. Do I need to add something else?
Thanks for any help.
gail:dunno

Allen

Apr-16-2007, 05:29 PM

My web page works on my computer but on my friends and family the drop down menus don't work. Do I need to add something else?
Thanks for any help.
gail:dunno
What browsers are they using?
Firefox and IE6 ok here.