Ok, I made the correction and now it's not moving when you hover on the navbar. This brings up the reason I want it to drop horizontally though...the drop down goes over my pictures. I would rather it not.

Originally Posted by Allen Best I can tell the page push is caused by the position here. /* make the 2nd level visible when hover on 1st level */ .menu ul :hover ul { visibility:visible; position:relative; }

Originally Posted by Allen This one. Custom Header (optional)

Thanks Allen! That's what I thought.

My next question is about using ".notLoggedIn .menu {display: none;} " to prevent people to see what I am working on. I placed the coding at the end of the my CSS coding last night, but it didn't seem to work. I attempted to play with - cutting and placing it in diffrerent portions of the CSS coding, but with no luck. I am wondering if this coding is suppose to go someplace specific, or if there is anything else I am doing wrong.

thanks,


James
www.JamesReiningerPhotography.com

Originally Posted by Ogre Thanks Allen! That's what I thought. My next question is about using ".notLoggedIn .menu {display: none;} " to prevent people to see what I am working on. I placed the coding at the end of the my CSS coding last night, but it didn't seem to work. I attempted to play with - cutting and placing it in diffrerent portions of the CSS coding, but with no luck. I am wondering if this coding is suppose to go someplace specific, or if there is anything else I am doing wrong. thanks, James www.JamesReiningerPhotography.com

Did you log off and look? I need to see the code in to troubleshoot.

One thing I noticed you have put the nav and banner html in the "head tag" box and not
in the header box. Should be moved.

Originally Posted by Allen Did you log off and look? I need to see the code in to troubleshoot. One thing I noticed you have put the nav and banner html in the "head tag" box and not in the header box. Should be moved.

Okay, I put the coding back. Please note that my site is a mess right now!

Also, by moving the nav and banner html, it physically moved the links I had in the upper right corner down. Not what I want. I want these links to be level with the James Reininger Photography banner on the left.

Thanks,

James

Originally Posted by Ogre Okay, I put the coding back. Please note that my site is a mess right now! Also, by moving the nav and banner html, it physically moved the links I had in the upper right corner down. Not what I want. I want these links to be level with the James Reininger Photography banner on the left. Thanks, James

Add the missing } and it will enable the CSS below it.

#category.subcategory #galleriesBox .boxBottom {
    padding-top: 30px;
}

/* Force gallery thumbnails to be larger version 6
...
...

Also remove the extra one of these.

.notLoggedIn .menu {display: none;}

Originally Posted by Allen Add the missing } and it will enable the CSS below it. #category.subcategory #galleriesBox .boxBottom { padding-top: 30px; } /* Force gallery thumbnails to be larger version 6 ... ... Also remove the extra one of these. .notLoggedIn .menu {display: none;}

Thanks Allen Now how do I get the links (Gallery, Books, Shows, etc) back to being level with the banner in the upper left corner (James Reininger Photography)?

James

Originally Posted by Ogre Thanks Allen Now how do I get the links (Gallery, Books, Shows, etc) back to being level with the banner in the upper left corner (James Reininger Photography)? James

The banner needs to be after the nav in the html. Move the banner div to the bottom as shown.
Change your whole header to this.

<div id="navcontainer">
<ul>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/Books/Coffee-Books/15979904_qAHyL">Books</a></li>
<li><a href="/Shows/Shows/15980634_ts2NW">Shows</a></li>
<li><a href="/gallery/16134449_6r8u2">Contact</a></li>
<li><a href="http://www.facebook.com/pages/James-Reininger-Photography/117997608006">Facebook</a></li>
</ul>
</div>
<!-- Original code by Stu Nicholls of -->
<!-- http://www.cssplay.co.uk/ -->
<!-- Edited for content, formatting, and some elements -->
<!-- Please help support CSSPlay at: -->
<!-- http://www.cssplay.co.uk/support.html -->
<div class="menu">
<ul>
<li><a href="/" title="">Home</a></li>
<li><a class="drop" href="/galleries" title="">Galleries
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="/Travel" title="">Travel</a></li>
        <li><a href="/Landscapes" title="">Landscapes</a></li>
        <li><a href="/Architecture" title="">Architecture</a></li>
        <li><a href="/Planes_Trains_Automobiles_and_other_things_of_interest" title="">Planes Trains Automobiles and others</a></li> 
        <li><a href="/People" title="">People</a></li>
        <li><a href="/Flowers" title="">Flowers</a></li>
        <li><a href="/Animals" title="">Animals</a></li>
        <li><a href="/HolidayCards" title="">Holiday Cards</a></li>
        <li><a href="/PhotoRestoration-11" title="">Photo Restoration</a></li>
        <li><a href="/Drawings" title="">Drawings</a></li> 
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/Books/Coffee-Books/15979904_qAHyL">Books</a></li>
<li><a href="/Shows/Shows/15980634_ts2NW">Shows</a></li>
<li><a href="/gallery/16134449_6r8u2">Contact</a></li>
<li><a href="http://www.facebook.com/pages/James-Reininger-Photography/117997608006">Facebook</a></li>
</ul>
</div>  <!-- closes menu -->
<!-- End Navbar Code -->

<div id="my_banner"><a href="http://www.jamesreiningerphotography.com/">
<img src="/img/spacer.gif" border="0" height="70" width="605"></a></div>

<div style="clear: both;"></div>

You have two sets of the .menu CSS, remove one of them.

Then change the remaining .menu CSS to this.

   /* temporary rules before going public. */
#navcontainer {float:right; margin-top:20px;}
.loggedIn #navcontainer {display: none;}
.notLoggedIn .menu {display: none;}

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

/* CSS Section */

      /* style the outer div to give it width */
.menu {
   float: right;
   z-index:99;
   position:relative;    /* Make the container moveable */
   margin-top: 20px;
   width:550px;          /* Main bar total width, minimize to not wrap to two lines*/
}

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

      /* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */
.menu li {
   float:left;          /* float right will reverse the main buttons */
   text-align:center;
   width:auto; 
   position:relative;
   padding: 0;
}

      /* style the links for the top level */
.menu a, .menu a:visited {
   display:block;
   text-decoration:none;  /* none, overline, underline */
   color:white;
   background:black;
   font-size:12pt;
   font-family: verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif;
   width:auto;         /* Defines the main box dimensions. */
   height:20px;        /* How tall your cells are */
   line-height:20px;   /* vertical text alignment in cell */ 
   padding: 0 10px;    /* top/bottom R/L */
   min-width: 60px;    /* set to smallest text and use R/L padding above to space out */
}

      /* main hover */
.menu a:hover, .menu :hover > a {
   color:#ccc;
   background:black;
}

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

      /* style the table so that it takes no part in the layout */
.menu table {position:absolute; top:0; left:0;}



      /* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */

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


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

      /* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:black;}  /* if 3rd level exists */

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

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:white;
   background:black;
   height:auto; 
   line-height:20px; 
   width:150px;
   text-align:left;
}

.menu ul ul :hover > a.drop  {background:black;}   /* 2nd if 3rd level exists */

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

      /* 2nd level hover */
.menu ul ul a:hover, .menu ul ul :hover > a {
   color:#ccc;
   background:black;
}
      /* make the 2nd level visible when hover on 1st level */
.menu ul :hover ul {visibility:visible;}

/* End Navbar Code */

It seems that my header is in shambles when viewing my site in Internet Explorer.

Does anyone know what I need to do to fix this? I have all the code that mention "if IE 6 blah blah" etc. So not sure what I'm missing.

www.laraluz.com

I hate to be a pest but any revelations on the horizontally dropped menu? Thanks so much for your help!

Originally Posted by SOR Ok, I made the correction and now it's not moving when you hover on the navbar. This brings up the reason I want it to drop horizontally though...the drop down goes over my pictures. I would rather it not.

Originally Posted by Allen The banner needs to be after the nav in the html. Move the banner div to the bottom as shown. Change your whole header to this. <div id="navcontainer"> <ul> <li><a href="/galleries">Galleries</a></li> <li><a href="/Books/Coffee-Books/15979904_qAHyL">Books</a></li> <li><a href="/Shows/Shows/15980634_ts2NW">Shows</a></li> <li><a href="/gallery/16134449_6r8u2">Contact</a></li> <li><a href="http://www.facebook.com/pages/James-Reininger-Photography/117997608006">Facebook</a></li> </ul> </div> <!-- Original code by Stu Nicholls of --> <!-- http://www.cssplay.co.uk/ --> <!-- Edited for content, formatting, and some elements --> <!-- Please help support CSSPlay at: --> <!-- http://www.cssplay.co.uk/support.html --> <div class="menu"> <ul> <li><a href="/" title="">Home</a></li> <li><a class="drop" href="/galleries" title="">Galleries <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="/Travel" title="">Travel</a></li> <li><a href="/Landscapes" title="">Landscapes</a></li> <li><a href="/Architecture" title="">Architecture</a></li> <li><a href="/Planes_Trains_Automobiles_and_other_things_of_interest" title="">Planes Trains Automobiles and others</a></li> <li><a href="/People" title="">People</a></li> <li><a href="/Flowers" title="">Flowers</a></li> <li><a href="/Animals" title="">Animals</a></li> <li><a href="/HolidayCards" title="">Holiday Cards</a></li> <li><a href="/PhotoRestoration-11" title="">Photo Restoration</a></li> <li><a href="/Drawings" title="">Drawings</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="/Books/Coffee-Books/15979904_qAHyL">Books</a></li> <li><a href="/Shows/Shows/15980634_ts2NW">Shows</a></li> <li><a href="/gallery/16134449_6r8u2">Contact</a></li> <li><a href="http://www.facebook.com/pages/James-Reininger-Photography/117997608006">Facebook</a></li> </ul> </div> <!-- closes menu --> <!-- End Navbar Code --> <div id="my_banner"><a href="http://www.jamesreiningerphotography.com/"> <img src="/img/spacer.gif" border="0" height="70" width="605"></a></div> <div style="clear: both;"></div> You have two sets of the .menu CSS, remove one of them. Then change the remaining .menu CSS to this. /* temporary rules before going public. */ #navcontainer {float:right; margin-top:20px;} .loggedIn #navcontainer {display: none;} .notLoggedIn .menu {display: none;} /* CSS Dropdown Nav Bar */ /* Original code by Stu Nicholls of */ /* http://www.cssplay.co.uk/ */ /* Edited for content, formatting and some elements */ /* Please help support CSSPlay at: */ /* http://www.cssplay.co.uk/support.html */ /* CSS Section */ /* style the outer div to give it width */ .menu { float: right; z-index:99; position:relative; /* Make the container moveable */ margin-top: 20px; width:550px; /* Main bar total width, minimize to not wrap to two lines*/ } /* remove all the bullets, borders and padding from the default list styling */ .menu ul { padding:0; margin:0; list-style-type:none; } /* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */ .menu li { float:left; /* float right will reverse the main buttons */ text-align:center; width:auto; position:relative; padding: 0; } /* style the links for the top level */ .menu a, .menu a:visited { display:block; text-decoration:none; /* none, overline, underline */ color:white; background:black; font-size:12pt; font-family: verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif; width:auto; /* Defines the main box dimensions. */ height:20px; /* How tall your cells are */ line-height:20px; /* vertical text alignment in cell */ padding: 0 10px; /* top/bottom R/L */ min-width: 60px; /* set to smallest text and use R/L padding above to space out */ } /* main hover */ .menu a:hover, .menu :hover > a { color:#ccc; background:black; } /* a hack so that IE5.5 faulty box model is corrected */ * html .menu a, * html .menu a:visited {width:130px; w\idth:130px;} /* style the table so that it takes no part in the layout */ .menu table {position:absolute; top:0; left:0;} /* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */ /* another hack for IE5.5 */ * html .menu ul ul {top:20px; t\op:21px;} /* IE gap between main bar and the dropdown items */ /* hide the sub levels and give them a position absolute so that they take up no room */ .menu ul ul { visibility:hidden; position:absolute; height:0; top:20px; /* move drop vertically */ left:0; /* move drop horizontally */ width:150px; /* Size of the daughter cells */ } /* style the second level background non-hover */ .menu ul ul a.drop, .menu ul ul a.drop:visited {background:black;} /* if 3rd level exists */ /* style the second level hover */ .menu ul ul a.drop:hover {background:black;} .menu ul ul :hover > a.drop {background:black;} /* style the second level links */ .menu ul ul a, .menu ul ul a:visited { color:white; background:black; height:auto; line-height:20px; width:150px; text-align:left; } .menu ul ul :hover > a.drop {background:black;} /* 2nd if 3rd level exists */ /* yet another hack for IE5.5 */ * html .menu ul ul a {width:120px; w\idth:120px;} /* 2nd level hover */ .menu ul ul a:hover, .menu ul ul :hover > a { color:#ccc; background:black; } /* make the 2nd level visible when hover on 1st level */ .menu ul :hover ul {visibility:visible;} /* End Navbar Code */

Allen,

Thank you so much!!! The pulldown is now working!

I am curious - is there a way to include the subcategories in the pulldown? I not sure I want to do this, but would like to know if it is possible.

James Reininger

Originally Posted by Ogre Allen, Thank you so much!!! The pulldown is now working! I am curious - is there a way to include the subcategories in the pulldown? I not sure I want to do this, but would like to know if it is possible. James Reininger

See post #1 of this thread, it shows how to add new levels.
Example for your Travel category

...
        <li><a class="drop" href="#noclick" title="">Travel
             <!--[if gte IE 7]><!--></a><!--<![endif]-->
             <!--[if lte IE 6]><table><tr><td><![endif]-->
             <ul>
                  <li><a href="/Travel/USA" title="">USA</a></li>
                  <li><a href="/Travel/France" title="">France</a></li>
                  <li><a href="/Travel/Italy" title="">Italy</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="/Landscapes" title="">Landscapes</a></li>
...

Headin' out to bird, back in a couple days.

Originally Posted by Allen Headin' out to bird, back in a couple days.

Any other navbar geniuses out there?

Originally Posted by Allen See post #1 of this thread, it shows how to add new levels. Example for your Travel category ... <li><a class="drop" href="#noclick" title="">Travel <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="/Travel/USA" title="">USA</a></li> <li><a href="/Travel/France" title="">France</a></li> <li><a href="/Travel/Italy" title="">Italy</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="/Landscapes" title="">Landscapes</a></li> ... Headin' out to bird, back in a couple days.

I am assuming you are out taking photos. If so, good luck! You deserve it! I really appreciate your help on customizing my site

For now, I will keep this coding underwraps until/if I want to use it.

James

Originally Posted by SOR Any other navbar geniuses out there?

Definably no genius, but I replied to the same question here:


http://www.dgrin.com/showthread.php?t=225090


Allen might have a better answer for you later on.

Sorry to ask again but is anyone able to look at my site regarding the above?

"It seems that my header is in shambles when viewing my site in Internet Explorer.

Does anyone know what I need to do to fix this? I have all the code that mention "if IE 6 blah blah" etc. So not sure what I'm missing."

www.laraluz.com

looks like this in IE:

My website is www.wgillettphotography.com
I successfully created the drop down menu but am looking to change the default colors (green background and red text) to blue background white text
How should I do this?

In addition I want to add two more pages to the nav bar one that says portfolio and the other one titled services

Originally Posted by wgillett My website is www.wgillettphotography.com ... In addition I want to add two more pages to the nav bar one that says portfolio and the other one titled services

Add red in your nav header html.

...
...
   <li><a class="drop" href="link">St. Jude
        <!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul>
            <li><a href="/StJude8thGradeGraduation/">Graduation 2012</a></li>
       </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
<li><a href="#link">Portfolio</a></li>
<li><a href="#link">Services</a></li>
</ul>
</div>

Will look at the colors next.

Originally Posted by wgillett My website is www.wgillettphotography.com I successfully created the drop down menu but am looking to change the default colors (green background and red text) to blue background white text How should I do this? ...

Replace your whole menu CSS with this. Changed all the colors and the width in the first to center
the nav. CSS for levels more then two can be removed if you want.

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

/* CSS Section */

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

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

      /* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */
.menu li {
   float:left;          /* float right will reverse the main buttons */
   text-align:center;
   width:auto; 
   position:relative;
   padding: 0;
}

      /* style the links for the top level */
.menu a, .menu a:visited {
   display:block;
   text-decoration:none;  /* none, overline, underline */
   color:white;
   background:#007FFF;
   border:1px solid black;         /* optional */        
   border-width:1px 1px 1px 1px;   /* optional */
   font-size:12pt;
   font-family: verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif;
   width:auto;         /* Defines the main box dimensions. */
   height:20px;        /* How tall your cells are */
   line-height:20px;   /* vertical text alignment in cell */ 
   padding: 0 10px;    /* top/bottom R/L */
   min-width: 60px;    /* set to smallest text and use R/L padding above to space out */
}

      /* main hover */
.menu a:hover, .menu :hover > a {
   color:#ccc;
   background:#1E90FF;
}

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

      /* style the table so that it takes no part in the layout */
.menu table {position:absolute; top:0; left:0;}



      /* ***** LEVEL 2 ***** LEVEL 2 ***** LEVEL 2 ***** */

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


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

      /* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#007FFF;}  /* if 3rd level exists */

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

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:white;
   background:#007FFF;
   height:20px; 
   line-height:20px; 
   width:150px;
}

.menu ul ul :hover > a.drop  {background:#007FFF;}   /* 2nd if 3rd level exists */

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

      /* 2nd level hover */
.menu ul ul a:hover, .menu ul ul :hover > a {
   color:#ccc;
   background:#1E90FF;
}



      /* ***** LEVEL 3 ***** LEVEL 3 ***** LEVEL 3 ***** */

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

.menu ul ul ul li a {color:white;}
.menu ul ul ul li a:hover {color:#ccc;}

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

      /* style the third level hover */
.menu ul ul ul a:hover {background:#1E90FF;}
.menu ul ul ul :hover > a {background:#1E90FF;}     /* 3rd (w/o 4th) 4th hover */

      /* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
   color:white;              /* hover 2nd > 3rd & 4th */
   background:#007FFF;       /* hover 3rd > 4th */
   height:20px; 
   line-height:20px; 
   width:150px;
}


      /* ***** LEVEL 4 ***** LEVEL 4 ***** LEVEL 4 ***** */

      /* position the fourth level flyout menu */
.menu ul ul ul ul {
   left:150px; 
   top:0;
   width:150px;
   height: auto !important;
}

     /* 4th level non-hover */
.menu ul ul ul ul li a {
   color:white;
   width:150px;
}

      /* style the fourth level hover */
.menu ul ul ul ul a:hover {background:#1E90FF;}
.menu ul ul ul ul :hover > a {background:#1E90FF;}


      /* make the 2nd level visible when hover on 1st level */
.menu ul :hover ul {visibility:visible;}
      /* make the 3rd level visible when you hover over 2nd level */
.menu ul :hover ul :hover ul {visibility:visible;}
      /* make the 4th level visible when you hover over 3rd level */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}
      /* keep the 3rd level hidden when you hover on 1st level */
.menu ul :hover ul ul {visibility:hidden;}
      /* keep the 4th level hidden when you hover on 2nd level */
.menu ul :hover ul :hover ul ul {visibility:hidden;}

/* End Navbar Code */

Originally Posted by Light_prod Sorry to ask again but is anyone able to look at my site regarding the above? "It seems that my header is in shambles when viewing my site in Internet Explorer. Does anyone know what I need to do to fix this? I have all the code that mention "if IE 6 blah blah" etc. So not sure what I'm missing." www.laraluz.com looks like this in IE:

I looked through your html the other day but didn't notice any errors. Gota be in the html
somewhere, maybe an illegal character. Maybe someone else can see something wrong.

Thanks Allen! Worked great!