Question About navcontainer

[rouxster]

This may have been answered elsewhere, but I can't tell if the other solutions would solve my issue.

I Have two main galleries, New Orleans photos and Portraits. I want a different nav bar for each gallery. I pasted below what I have in my CSS if it is any help.


/* nav bar options - everything with navcontainer */
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
text-decoration: none;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .3em 1em;
color: #7e7a00;
background-color: transparent;
font-size: 130%;
}
#navcontainer ul li a:hover {
color: #7e7a00;
background-color: transparent;
text-decoration:underline;
}
.homepage #navcontainer {display: none;}
.galleries #navcontainer {display: block;}

[denisegoldberg]

Take a look at the answer from jfriend in this thread (http://www.dgrin.com/showthread.php?t=136525) - it answers the same question you asked, but at a category level. You can do the same thing for a gallery by substituting .gallery_xxxxxx (where xxxxx) is the gallery id - instead of the .category_name that is shown in that thread.

--- Denise

[rouxster]

Take a look at the answer from jfriend in this thread (http://www.dgrin.com/showthread.php?t=136525) - it answers the same question you asked, but at a category level. You can do the same thing for a gallery by substituting .gallery_xxxxxx (where xxxxx) is the gallery id - instead of the .category_name that is shown in that thread.

--- Denise

OK, I know this might be long, but I think my logic is messed up. I have two navcontainers. 'nacontainer' is for the New Orleans gallery, 'navcontainerP' is for the Portraits gallery. Right now, both navcontainers show up in both galleries.

Here is my new CSS

/* nav bar options - everything with navcontainer for New Orleans Gallery*/
/* show navcontainer in the New Orleans Gallery and hide #navcontainerP */
.gallery_5648206 #navcontainer {display:block;}
.gallery_8840763 #navcontainerP {display:none;}
/* show navcontainerP in the Portraits Gallery and hide #navcontainer */
.gallery_8840763 #navcontainerP {display:block;}
.gallery_5648206 #navcontainer {display:none;}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
text-decoration: none;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .3em 1em;
color: #7e7a00;
background-color: transparent;
font-size: 130%;
}
#navcontainer ul li a:hover {
color: #7e7a00;
background-color: transparent;
text-decoration:underline;
}
.homepage #navcontainer {display: none;}
.galleries #navcontainer {display: block;}
.gallery_5648206 {
color: #7e7a00;
font-size: 105%;
font-face: tahoma;
}
/* nav bar options - everything with navcontainerP for Portraits Gallery*/
#navcontainerP ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
text-decoration: none;
}
#navcontainerP ul li {
display: inline;
}
#navcontainerP ul li a {
text-decoration: none;
padding: .3em 1em;
color: #7e7a00;
background-color: transparent;
font-size: 130%;
}
#navcontainerP ul li a:hover {
color: #7e7a00;
background-color: transparent;
text-decoration:underline;
}
.homepage #navcontainerP {display: none;}
.galleries #navcontainerP {display: block;}
.gallery_8840763 {
color: #7e7a00;
font-size: 105%;
font-face: tahoma;
}
/* End Nav Container CSS */


Here is my header.

<!--Navcontainer for New Orleans Gallery-->
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/5657972_wT7wy">Shipping</a></li>
<li><a href="/gallery/5657932_KSjw6">Our Guarantee</a></li>
<li><a href="/gallery/6064377_bnFTe">About Our Photos</a></li>
<li><a href="/gallery/6077410_8d5wy">Prints, Products & Prices</a></li>
<li><a href="/gallery/5590710_tFbu6">Contact Us</a></li>
<li><a href="/gallery/6077410_8d5wy#Help">Help</a></li>
</ul>
</div>
<!--Navcontainer for Portraits Gallery-->
<div id="navcontainerP">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/5657972_wT7wy">Shipping</a></li>
<li><a href="/gallery/5657932_KSjw6">Our Guarantee</a></li>
<li><a href="/gallery/6064377_bnFTe">About Our Photos</a></li>
<li><a href="/gallery/5590710_tFbu6">Contact Us</a></li>
<li><a href="/gallery/6077410_8d5wy#Help">Help</a></li>
</ul>
</div>

[jfriend]

OK, I know this might be long, but I think my logic is messed up. I have two navcontainers. 'nacontainer' is for the New Orleans gallery, 'navcontainerP' is for the Portraits gallery. Right now, both navcontainers show up in both galleries.


I think you just got one of the gallery numbers wrong. Try this instead of what you are using:

/* show navcontainer in the New Orleans Gallery and hide #navcontainerP */
.gallery_5578062 #navcontainer {display:block;}
.gallery_8840763 #navcontainerP {display:none;}

/* show navcontainerP in the Portraits Gallery and hide #navcontainer */
.gallery_8840763 #navcontainerP {display:block;}
.gallery_5578062 #navcontainer {display:none;}


In case you didn't realize, this only controls the navbars in those two specific galleries - it doesn't specify what you want displayed on any other pages in your site.

FYI, there is a better way than duplicating all the CSS for navcontainer and navcontainerP.

If you change to this for the first line of each navbar:

<div id="navcontainer" class="navbar">
<div id="navcontainerP" class="navbar">

And, then replace both sets of navcontainer CSS to this:

/* nav bar options - everything with navcontainerP for Portraits Gallery*/
.navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
text-decoration: none;
}

.navbar ul li {
display: inline;
}

.navbar ul li a {
text-decoration: none;
padding: .3em 1em;
color: #7e7a00;
background-color: transparent;
font-size: 130%;
}

.navbar ul li a:hover {
color: #7e7a00;
background-color: transparent;
text-decoration:underline;
}
Then, this one set of CSS will work for controlling the formatting of both navbars and you won't have to have all that duplicate CSS for both #navcontainer and #navcontainerP.

[rouxster]

I don't know what I was thinking. I forgot about my other pages that don't have photos on them, but are still considered "galleries":dunno. The only page that I need a different navcontainer on is my Portraits page, all of the others are fine with what I have. I will give what you said a shot.

[jfriend]

I don't know what I was thinking. I forgot about my other pages that don't have photos on them, but are still considered "galleries":dunno. The only page that I need a different navcontainer on is my Portraits page, all of the others are fine with what I have. I will give what you said a shot.
Then, you'd probably use something like this to have navcontainer showing everywhere except the Portraits gallery:



/* hide navcontainerP by default */
#navcontainerP {display:none;}


/* show navcontainerP in the Portraits Gallery and hide #navcontainer */
.gallery_8840763 #navcontainerP {display:block;}
.gallery_5578062 #navcontainer {display:none;}