I attempted setting up codes for a navbar dropdown and must have done something wrong because the galleries ended up along side the main navbar options instead of as dropdowns

Here is the code I attempted:



[FONT=Calibri]<div id="navcontainer">[/FONT]
[FONT=Calibri]<ul>[/FONT]
[FONT=Calibri]<li><a href="/">Home</a></li>[/FONT]
[FONT=Calibri]<li><a href="http://amyparsons.wordpress.com">BLOG</a></li>[/FONT]
[FONT=Calibri]<li><a href="/WeddingsNAVBAR">Weddings</a></li>[/FONT]
[FONT=Calibri]<li><a href="/Portraits">Portraits</a></li>[/FONT]
[FONT=Calibri]<li><a class="drop"href="/Client%20Galleries">Client Galleries[/FONT]
[FONT=Calibri] <!--[if IE 7]><!--></a><!--<![endif]-->[/FONT]
[FONT=Calibri] <!--[if lte IE 6]><table><tr><td><![endif]-->[/FONT]
[FONT=Calibri] <ul>[/FONT]
[FONT=Calibri] <li><a href="/Weddings">Wedding Clients</a></li>[/FONT]
[FONT=Calibri] <li><a href="/Client%20Galleries">Portrait Clients</a></li>[/FONT]
[FONT=Calibri] <ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->[/FONT]
[FONT=Calibri]</li>[/FONT]
[FONT=Calibri]<li><a href="/gallery/427167_FH7gZ">Contact</a></li>[/FONT]
[FONT=Calibri]<li><a href="/My%20Family">My Family</a></li>[/FONT]
[FONT=Calibri]</ul>[/FONT]
[FONT=Calibri]</div>


I would like to add 2 dropdowns from 'client galleries'
- Wedding client galleries
- Portait client galleries
[/FONT]

May we have a link to your site please so we can help?

www.amyparsons.com

thanks!

Originally Posted by amyparsons I attempted setting up codes for a navbar dropdown and must have done something wrong because the galleries ended up along side the main navbar options instead of as dropdowns Here is the code I attempted: [FONT=Calibri]<div id="navcontainer">[/FONT] [FONT=Calibri]<ul>[/FONT] [FONT=Calibri]<li><a href="/">Home</a></li>[/FONT] [FONT=Calibri]<li><a href="http://amyparsons.wordpress.com">BLOG</a></li>[/FONT] [FONT=Calibri]<li><a href="/WeddingsNAVBAR">Weddings</a></li>[/FONT] [FONT=Calibri]<li><a href="/Portraits">Portraits</a></li>[/FONT] [FONT=Calibri]<li><a class="drop"href="/Client%20Galleries">Client Galleries[/FONT] [FONT=Calibri] <!--[if IE 7]><!--></a><!--<![endif]-->[/FONT] [FONT=Calibri] <!--[if lte IE 6]><table><tr><td><![endif]-->[/FONT] [FONT=Calibri] <ul>[/FONT] [FONT=Calibri] <li><a href="/Weddings">Wedding Clients</a></li>[/FONT] [FONT=Calibri] <li><a href="/Client%20Galleries">Portrait Clients</a></li>[/FONT] [FONT=Calibri] <ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->[/FONT] [FONT=Calibri]</li>[/FONT] [FONT=Calibri]<li><a href="/gallery/427167_FH7gZ">Contact</a></li>[/FONT] [FONT=Calibri]<li><a href="/My%20Family">My Family</a></li>[/FONT] [FONT=Calibri]</ul>[/FONT] [FONT=Calibri]</div> I would like to add 2 dropdowns from 'client galleries' - Wedding client galleries - Portait client galleries [/FONT]

This works great in Firefox, IE browser will need some hacks though.

Replace your nav html in your header with this.

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://amyparsons.wordpress.com">BLOG</a></li>
<li><a href="/WeddingsNAVBAR">Weddings</a></li>
<li><a href="/Portraits">Portraits</a></li>
<li><a class="drop" href="#nopick">Client Galleries
     <!--[if IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
     <ul>
         <li><a href="/Weddings">Wedding Clients</a></li>
         <li><a href="/Client%20Galleries">Portrait Clients</a></li>
     </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="/gallery/427167_FH7gZ">Contact</a></li>
<li><a href="/My%20Family">My Family</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>

Add this to your CSS

/* 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;
      float: right;
      margin: -45px 20px 0; /* top right/left bottom */
      height: 20px;   /* menu container (div .menu) */
}

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

.menu ul li {
   /* margin: 0 2px 0 2px;  */  /* adds space between main menu boxes */
      float:left;    /* WARNING: float right reverses menu */
      position:relative !important;   /*  ***** Carbonite fix ***** */
}

.menu ul li a, 
.menu ul li a:visited {
      display: block;
      color:  #fff;           /* main buttons text non-hover*/
      text-decoration:none;
      text-align: center;     /* centers text in buttons */
      width: auto;           /* 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: 0 6px;
      line-height: 20px;      /* positions text up/down in box */
      font-size: 10pt;
      font-variant: small-caps;
}


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

.menu ul li ul {
      display: none;}

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

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

.menu ul li:hover ul {
      display: block;
      position: absolute !important;    /*  ***** Carbonite fix ***** */
      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: #fff;           /* DD FO non-hover */
      height: auto;
      line-height: 20px;      /* DD FO box height */
      padding: 0px 0px;
      width: 120px;            /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
      background: #000;     /* DD FO hover */
      color: #8cca1e;          /* 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: #8cca1e;               /* main hover */
      background:#000000;        /* main hover */
}

.menu ul li a:hover ul {
      display: block;
      position: absolute !important;    /*  ***** Carbonite fix ***** */
      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 */
      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: #000;                /* DD FO hover */
      color: #8cca1e;                   /* DD FO hover  */
}

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

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

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

 /* ==== END NAVBAR CODE ==== */

Getting closer....

I attemped combining the codes you gave me for doing a dropdown as well as inserting bullets between nav titles. The following problems exist

- bullets between nav titles aren't showing up
- I lost my code for setting the nav titles on the white header line
- the dropdowns under 'client galleries' show up as boxes on top of client galleries... I would like them to be seen UNDER instead.
- I would also like my blog link to take viewers to a new window
- I decided to not include a search link

Can i please get new code that will incorporate all of these requests. thank you sooooooo much!

www.amyparsons.com

Originally Posted by amyparsons Getting closer.... I attemped combining the codes you gave me for doing a dropdown as well as inserting bullets between nav titles. The following problems exist - bullets between nav titles aren't showing up - I lost my code for setting the nav titles on the white header line - the dropdowns under 'client galleries' show up as boxes on top of client galleries... I would like them to be seen UNDER instead. - I would also like my blog link to take viewers to a new window - I decided to not include a search link Can i please get new code that will incorporate all of these requests. thank you sooooooo much! www.amyparsons.com

Remove the red from your header. Also in your control panel on the customize
page check no for Smugmug header. Also add the red closing div.

<div id="my_header">

<div id="my_banner">
<a href="/">
<img src="/img/spacer.gif" alt="" width="300" border="0" height="80">
</a>
</div>
<div id="navcontainer">
<ul>
<div class="menu">
<ul>
...
<li><a href="/My%20Family">My Family</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div> <!-- closes menu -->
</div> <!-- closes my_header -->

Then will look at aligning the nav and header area.

Add the bold to this
<li><a href="http://amyparsons.wordpress.com" target="_blank">BLOG</a></li>

I updated codes with your suggestions.

Now that we're this far I'd like to do the following:
- bullets between navbar links
- increase font size of navbar links (I noticed these got smaller after the last adjustment)
- navbar sitting on top of white header line
- Is it also possible to have my logo name sitting on the line (tail of the y hanging below line) or does it have to stay centered between the top of the screen and the line?
- Can I set the header (including logo, navbar and white line) to only span 14 inches. An example of this is Mike Lane's site although is width is smaller.

thanks again - I'm excited to see how it's coming together!

Originally Posted by amyparsons I updated codes with your suggestions. Now that we're this far I'd like to do the following: - bullets between navbar links - increase font size of navbar links (I noticed these got smaller after the last adjustment) - navbar sitting on top of white header line - Is it also possible to have my logo name sitting on the line (tail of the y hanging below line) or does it have to stay centered between the top of the screen and the line? - Can I set the header (including logo, navbar and white line) to only span 14 inches. An example of this is Mike Lane's site although is width is smaller. thanks again - I'm excited to see how it's coming together!

For bullets add the <li>&#8226;</li> shown below.

<div class="menu">
<ul>
<li><a href="/">Home</a></li>
<li>&#8226;</li>
<li><a href="http://amyparsons.wordpress.com" target="_blank">BLOG</a></li>
<li>&#8226;</li>
<li><a href="/WeddingsNAVBAR">Weddings</a></li>
<li>&#8226;</li>
<li><a href="/Portraits">Portraits</a></li>
<li>&#8226;</li>
<li><a class="drop" href="#nopick">Client Galleries
     <!--[if IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]-->
     <ul>
         <li><a href="/Weddings">Wedding Clients</a></li>
         <li><a href="/Client%20Galleries">Portrait Clients</a></li>
     </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>&#8226;</li>
<li><a href="/gallery/427167_FH7gZ">Contact</a></li>
<li>&#8226;</li>
<li><a href="/My%20Family">My Family</a></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div><!--closes menu-->

To set a static width and the logo to drop below line change these like this.

#my_header {
position: relative;
width: 900px;
height: 40px;
border-bottom: 1px solid #ccc;
margin: 0 auto 10px; /* top right/left bottom*/
padding: 0;
}

#my_banner {
width: 500px; /* actual photo width and height */
height: 80px;
margin: 0;
background: url(/photos/447023830_g3hJy-330x330.png) no-repeat;
  _background: none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
   sizingmethod=image, src='/photos/447023830_g3hJy-S.png');
}

.menu {
      display: block;
      z-index: 99;
      float: right;
      margin: -71px 0 0; /* top right/left bottom */
      height: 20px;   /* menu container (div .menu) */
}

All of the codes worked great - thanks!

I was looking at Mike Lane's site again and would like to take a couple more steps to make mine look similar to his. (http://mikelane.smugmug.com/)

- increase navbar text size
- increase space between top of window and header text
- reduce space between header and slideshow
- add white line below slideshow (top and bottom lines evenly spaced around slideshow)


:) Amy

Originally Posted by amyparsons All of the codes worked great - thanks! I was looking at Mike Lane's site again and would like to take a couple more steps to make mine look similar to his. (http://mikelane.smugmug.com/) - increase navbar text size - increase space between top of window and header text - reduce space between header and slideshow - add white line below slideshow (top and bottom lines evenly spaced around slideshow) :) Amy

increase navbar text size

.menu ul li a, 
.menu ul li a:visited {
      display: block;
      color:  #fff;           /* main buttons text non-hover*/
      text-decoration:none;
      text-align: center;     /* centers text in buttons */
      width: auto;           /* 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: 0 6px;
      line-height: 20px;      /* positions text up/down in box */
      font-size: 12pt;
      font-variant: small-caps;
}

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

increase space between top of window and header text and fix banner in header.

#my_header {
position: relative;
width: 1000px;
height: 40px;
border-bottom: 1px solid #ccc;
margin: 10px auto 10px; /* top right/left bottom*/
padding: 0;
}

#my_banner {
width: 320px; /* actual photo width and height */
height: 55px;
margin: 0;
background: url(/photos/447023830_g3hJy-330x330.png) no-repeat;
  _background: none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
   sizingmethod=image, src='/photos/447023830_g3hJy-S.png');
}

.menu {
      display: block;
      z-index: 99;
      float: right;
      margin: -47px 0 0; /* top right/left bottom */
      height: 20px;   /* menu container (div .menu) */
}

change in header

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

reduce space between header and slideshow, add red

in bio

...
    borderThickness: '5',
    borderColor: 'FFFFFF',
    imgAlign: 'top',
    crossFadeSpeed: '350'
};
SM.flash.insertSlideshow(700, 700, ssConfig, 'transparent');
...

add in CSS

.notLoggedIn #bioBox .boxTop {display: none;}

It's coming together and looking good!

A couple more questions about the homepage slideshow and I think I'll be done with adjustments (at least for now).

- With the last set of adjustments the top line border on each of the slideshow images is gone.

- I would like my slideshow images to all have the same verticle or horizontal maximum dimensions. Is that something I do with codes or do I need to set up those parameters when I'm saving the images before they even get into smugmug.

:) Amy

Originally Posted by amyparsons It's coming together and looking good! A couple more questions about the homepage slideshow and I think I'll be done with adjustments (at least for now). - With the last set of adjustments the top line border on each of the slideshow images is gone. - I would like my slideshow images to all have the same verticle or horizontal maximum dimensions. Is that something I do with codes or do I need to set up those parameters when I'm saving the images before they even get into smugmug. :) Amy

Looks like imgAlign: 'top', was a little too much, remove that line.

- Did you have any advice on the above question regarding formatting the slideshow photos to a standard height/width?

- The header text didn't drop down with the codes you had given... any other suggestions for increasing space between top of window and header?

- I would also still really like to set up a white line above and below the slideshow similar to http://mikelane.smugmug.com/


thanks for your help... you've been great!

Originally Posted by amyparsons - Did you have any advice on the above question regarding formatting the slideshow photos to a standard height/width? - The header text didn't drop down with the codes you had given... any other suggestions for increasing space between top of window and header? - I would also still really like to set up a white line above and below the slideshow similar to http://mikelane.smugmug.com/ thanks for your help... you've been great!

First one will add the bottom white line.

.homepage #cobrand_footer {
   border-top: 1px solid white;
   width: 1000px;
   margin: 0 auto;
}


The red margin top will drop the header.

#my_header {
position: relative;
width: 1000px;
height: 40px;
border-bottom: 1px solid #ccc;
margin: 20px auto 10px; /* top right/left bottom*/
padding: 0;
}

I just received an email from a friend who said my website was all messed up. I sent her a screen shot of what it should look like (what I was seeing) and she sent the following reply with how it looks on her screen. Are there some missing codes that are causing some people to see the site differently?

"1. Your name header only partially shows up - 1/3 of the letters are missing (top to bottom),
2. The buttons for home, contact, weddings, portraits.... are displayed in a vertical list at the centre of the page instead of horizontally at the top. All of the buttons work except for the client galleries... unless you happen to catch the white markings (can't really read them, but since I had seen the site when it worked, I tried...) off to the left side when your mouse is hovering over the words "client galleries". I clicked on that and was able to find the wedding pictures and portraits selections. "

Originally Posted by amyparsons I just received an email from a friend who said my website was all messed up. I sent her a screen shot of what it should look like (what I was seeing) and she sent the following reply with how it looks on her screen. Are there some missing codes that are causing some people to see the site differently? "1. Your name header only partially shows up - 1/3 of the letters are missing (top to bottom), 2. The buttons for home, contact, weddings, portraits.... are displayed in a vertical list at the centre of the page instead of horizontally at the top. All of the buttons work except for the client galleries... unless you happen to catch the white markings (can't really read them, but since I had seen the site when it worked, I tried...) off to the left side when your mouse is hovering over the words "client galleries". I clicked on that and was able to find the wedding pictures and portraits selections. "

IE6 is totally b0rked here. I'll look and see what I can find.

Originally Posted by amyparsons I just received an email from a friend who said my website was all messed up. I sent her a screen shot of what it should look like (what I was seeing) and she sent the following reply with how it looks on her screen. Are there some missing codes that are causing some people to see the site differently? "1. Your name header only partially shows up - 1/3 of the letters are missing (top to bottom), 2. The buttons for home, contact, weddings, portraits.... are displayed in a vertical list at the centre of the page instead of horizontally at the top. All of the buttons work except for the client galleries... unless you happen to catch the white markings (can't really read them, but since I had seen the site when it worked, I tried...) off to the left side when your mouse is hovering over the words "client galleries". I clicked on that and was able to find the wedding pictures and portraits selections. "

Fix the size for the IE banner and will look again. Everything was sized based
on this and might be throwing things off in IE.

#my_banner {
width: 320px; /* actual photo width and height */
height: 55px;
margin: 0;
background: url(/photos/447023830_g3hJy-330x330.png) no-repeat;
  _background: none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
   sizingmethod=image, src='/photos/447023830_g3hJy-330x330.png');
}

Originally Posted by amyparsons ..."

You have turned off the Smugmug header so I don't think you need the script
for these is your bottom javascript any more. Might remove them.

// change the link on the SmugMug Logo
...
// removes the pipes characters in the toolbar header
...

[quote=amyparsons...[/quote]
Change the height to 55 in your header to match your banner CSS.

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

Ok... I made the noted changes. Should I have her check it now or are there still other things that need to be adjusted?

Thanks for your help.