Originally Posted by jpdoty I made the changes and tried it in ie8 and firefox and it seemed to work in both, Thank you. If you don't mind, can you try it again to comfirm for me. Thank you, John

Looks good in both.

Originally Posted by KBedore [FONT=Verdana]...[/FONT] 3)Finally, I tried the work around for a gallery page but the gallery/category thumbs don't appear? I copied and pasted the code provided, making changes for my site, but...nothing. I even looked at source code from sites from this forum and just can't seem to figure it out. ...

This link works for the galleries page.
http://www.madeyousmilephotography.com/galleries

Originally Posted by KBedore [FONT=Verdana] ... [/FONT] 2)Also, I'd like to make the page backround black, but the container for the page elements to have a white background so it blends with the attached banner. Thoughts? I suppose I can change the banner around a little, but it still doesn't solve #1. ...

I'd suggest switching to a black theme and then work on making the box
backgrounds white. This also toggles all the text to conform to the new
dark background.

Originally Posted by Allen I inserted the CSS and html you posted using WebDev and it worked. Removing that one rule. Put it back in and we'll look. Might add this to the CSS to hide it for visitors until it works. .notLoggedIn .menu {display: none;} Leave the ECZ nav in for visitors.

Thanks Allen. Published the changes and put in that extra line of CSS code at the end of the code to hide it.

EDIT: Interesting, when I submit it live, the code works, but does not in the preview mode at the bottom of the customization page.

Originally Posted by Allen Looks good in both.

Thank you very much Allen.

Sincerely,

John

Heya guys,

I've been working on my drop down and have everything sorted except for one (small) thing that I can't seem to get working. I'm not good at this so it might be an easy fix.. hope it is!

On my site:

www.lumens.smugmug.com

I need the dropdowns to register when i drag the mouse down. At the moment, when u select "client login" and then drag the mouse down, I lose the menu altogether. I've already linked them... so that should work.

Thanks for the help in advance.

Originally Posted by methd Heya guys, I've been working on my drop down and have everything sorted except for one (small) thing that I can't seem to get working. I'm not good at this so it might be an easy fix.. hope it is! On my site: www.lumens.smugmug.com I need the dropdowns to register when i drag the mouse down. At the moment, when u select "client login" and then drag the mouse down, I lose the menu altogether. I've already linked them... so that should work. Thanks for the help in advance.

Change the top in this to move the drop up so there's no gap.

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

Thx to all the help I have received to date. I am now trying to add a Contact icon on my Navbar. I went to Wufoo and created the form. Copied the imbedded link to the gallery description. I think I followed the settings for setting up the Contacts gallery as described from http://www.smugmug.com/gallery/11554290_GdBTc

When I click on the Contact link in my Navbar, I am getting a page as follow: (text only)

TeeWayne>Other>Contact
Fill out my Wufoo form!

Then, enclosed in a box, it says "This Gallery has no photos to display yet...blah blah blah...
++++++++

I am getting the Icon to appear on the Navbar, and if I click the link "Fill out my Wufoo form!, it takes me to my form. How do I get rid of all of this stuff??

The below is the code as it is now entered:
/* =======in my CSS (Optional box)

#my_banner
{width: 750px;height: 150px;margin: 0 auto;
background: url(http://www.teewayne.com/Other/Backgr...84_MjQFq-O.jpg) no-repeat;}
#customHeaderContainer {display:none}
#my-customHeaderContainer
{padding-top: 10px; margin: 0 auto;
padding-left: 15px; padding-right: 15px;
overflow: hidden !important;
height: 20px; width: 750px;}
#my-customNavContainer {text-align:center}
#my-customNav
{font-family: arial !important;
font-size: 14px; color: #ffffff !important;
list-style-type: none; padding:0;margin:0}
#my-customNav li{display:inline}
#my-customNav li a,
#my-customNav li a:active,
#my-customNav li a:visited,
#my-customNav li a:link
{font-family: arial !important;
font-size: 14px; color: #ffffff !important;
text-decoration: none !important}
#my-customNav li a:hover
{font-family: arial !important;
font-size:14px;color:#3C1FCD !important;
text-decoration: none !important}
.gallery_12674229 #breadcrumb {display: none;}
.loggedIn .gallery_12674229 #breadcrumb {display: block;}
/* the above two lines were added per the dgrin link above. They aren't
/*really underlined in the CSS text but I did not know where to put
/* it and if I am missing any syntax - since I don't know HTML. ?????

/* ==== in my Custom Header (optional)
</div><div id="my_banner"> </div>
<div id="my-customHeaderContainer">
<div id="my-customNavContainer">
<ul id="my-customNav">
<li><a href="/">Home</a></li>
<li><a href="http://www.teewayne.com/Other/TeeWay...92849261_h7dpk"> TeeWayne</a></li>
<li><a href="http://groups.google.com/group/teewa...eForum</a></li>
<li><a href="http://www.teewayne.com/Other/Contac...uqre/">Contact Tee</a></li>
</ul>
</div>
</div>

/* =====in my Custom Footer (optional)
<div></div>
/* ====in my Gallery Description =======================

<html>
<iframe height="439" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none"
src="http://teewayne.wufoo.com/embed/z7x4a9/"><a href="http://teewayne.wufoo.com/forms/z7x4a9/" title="Contact TeeWayne"
rel="nofollow">Fill out my Wufoo form!</a></iframe>
<html>


I appreciate any suggestions anyone can provide. Thx

Originally Posted by TeeWayne Thx to all the help I have received to date. I am now trying to add a Contact icon on my Navbar. I went to Wufoo and created the form. Copied the imbedded link to the gallery description. I think I followed the settings for setting up the Contacts gallery as described from http://www.smugmug.com/gallery/11554290_GdBTc When I click on the Contact link in my Navbar, I am getting a page as follow: (text only) TeeWayne>Other>Contact Fill out my Wufoo form! Then, enclosed in a box, it says "This Gallery has no photos to display yet...blah blah blah... ++++++++ I am getting the Icon to appear on the Navbar, and if I click the link "Fill out my Wufoo form!, it takes me to my form. How do I get rid of all of this stuff?? The below is the code as it is now entered: /* =======in my CSS (Optional box) #my_banner {width: 750px;height: 150px;margin: 0 auto; background: url(http://www.teewayne.com/Other/Backgr...84_MjQFq-O.jpg) no-repeat;} #customHeaderContainer {display:none} #my-customHeaderContainer {padding-top: 10px; margin: 0 auto; padding-left: 15px; padding-right: 15px; overflow: hidden !important; height: 20px; width: 750px;} #my-customNavContainer {text-align:center} #my-customNav {font-family: arial !important; font-size: 14px; color: #ffffff !important; list-style-type: none; padding:0;margin:0} #my-customNav li{display:inline} #my-customNav li a, #my-customNav li a:active, #my-customNav li a:visited, #my-customNav li a:link {font-family: arial !important; font-size: 14px; color: #ffffff !important; text-decoration: none !important} #my-customNav li a:hover {font-family: arial !important; font-size:14px;color:#3C1FCD !important; text-decoration: none !important} .gallery_12674229 #breadcrumb {display: none;} .loggedIn .gallery_12674229 #breadcrumb {display: block;} /* the above two lines were added per the dgrin link above. They aren't /*really underlined in the CSS text but I did not know where to put /* it and if I am missing any syntax - since I don't know HTML. ????? /* ==== in my Custom Header (optional) </div><div id="my_banner"> </div> <div id="my-customHeaderContainer"> <div id="my-customNavContainer"> <ul id="my-customNav"> <li><a href="/">Home</a></li> <li><a href="http://www.teewayne.com/Other/TeeWay...92849261_h7dpk"> TeeWayne</a></li> <li><a href="http://groups.google.com/group/teewa...eForum</a></li> <li><a href="http://www.teewayne.com/Other/Contac...uqre/">Contact Tee</a></li> </ul> </div> </div> /* =====in my Custom Footer (optional) <div></div> /* ====in my Gallery Description ======================= <html> <iframe height="439" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="http://teewayne.wufoo.com/embed/z7x4a9/"><a href="http://teewayne.wufoo.com/forms/z7x4a9/" title="Contact TeeWayne" rel="nofollow">Fill out my Wufoo form!</a></iframe> <html> I appreciate any suggestions anyone can provide. Thx

The folks at smugmug helped me on this. I had the incorrect code in the gallery. It should have been </html> versus <html> which is what I had. In addition, you have to have the gallery defined as Custom. Then, bang, it worked.

Thx

Allen- I'm trying to create drop-downs for my existing nav-bar, but I'm a complete newb when it comes to CSS and HTML. Ideally, I just want to show one level of drop downs for my site (so, to show countries underneath "our tours"). Can you help me out?

experienceplus.smugmug.com

Thanks!

Hey folks - quick question, i've been digging around and haven't been able to find the answer yet.

here is my website - www.bowerphoto.com

I have a navbar at the bottom, I intend on adding one more link, but I would like it to be GREEN. so, i want 3 white links, one green. Easy enough in HTML, but I dont know how to do it with the CSS in a different part of the structure, and telling the whole navbar what color to be O.o

Thanks.

Originally Posted by smmokan Allen- I'm trying to create drop-downs for my existing nav-bar, but I'm a complete newb when it comes to CSS and HTML. Ideally, I just want to show one level of drop downs for my site (so, to show countries underneath "our tours"). Can you help me out? experienceplus.smugmug.com Thanks!

See if you like this.
Add this to your header box on your customize page.

<!-- 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 class="drop" href="http://experienceplus.smugmug.com/Our%20Tours%20by%20Country">Our Tours- by Country
    <!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="/Our-Tours-by-Country/Chile" title="">Chile</a></li>
        <li><a href="/Our-Tours-by-Country/Spain" title="">Spain</a></li>
        <li><a href="/Our-Tours-by-Country/Italy" title="">Italy</a></li> 
        <li><a href="/Our-Tours-by-Country/Germany" title="">Germany</a></li> 
        <li><a href="/Our-Tours-by-Country/France" title="">France</a></li> 
        <li><a href="/Our-Tours-by-Country/Greece" title="">Greece</a></li> 
        <li><a href="/Our-Tours-by-Country/Croatia" title="">Croatia</a></li> 
        <li><a href="/Our-Tours-by-Country/Argentina" title="">Argentina</a></li> 
        <li><a href="/Our-Tours-by-Country/Eastern Europe" title="">Eastern Europe</a></li> 
        <li><a href="/Our-Tours-by-Country/Costa Rica" title="">Costa Rica</a></li> 
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>&nbsp;|&nbsp;</li>
<li><a href="http://experienceplus.smugmug.com/Favorite%20Images">Favorite Images</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="http://www.experienceplus.com">Return Home</a></li>

</ul>
</div>  <!-- closes menu -->
<!-- End Navbar Code -->

Add this to your CSS

/* 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;
   margin: 0 auto 20px;  /* top R/L bottom */
   position:relative;    /* Make the container moveable */
   width:630px;          /* Main bar total width, minimize to center */
}

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

.menu ul ul {
   width:130px; 
}

      /* float the list to make it horizontal and a relative positon so that you can control the dropdown 

menu positon */
.menu li {
   float:left;
   text-align:center;
   width:auto; 
   position:relative;
   padding: 0;
}

      /* style the links for the top level */
.menu a, .menu a:visited {
   display:block;
   font-size:14pt;
   text-decoration:none;
   color:#F4F7F1;
   background:#bbb;
   font-family: verdana;
   width:auto;            /* Defines the main box dimensions. */
   height:25px;           /*How tall your cells are */
   line-height:20px;      /*Adjust this to vertically center your text in each cell. Should be about the 

same as height. */
   padding: 0 10px;
   min-width: 100px;
}

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

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

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

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

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

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

      /* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:#F4F7F1;
   background:#bbb;
   height:25px; 
   line-height:25px; 
   width:150px;
}

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

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

      /* main hover ?IE? */
.menu a:hover, .menu ul ul a:hover {
   color:#A4A4A4;
   background:#bbb;
}
      /* main hover */
.menu :hover > a, .menu ul ul :hover > a {
   color:#A4A4A4;
   background:#bbb;
}
      /* make the 2nd level visible when hover on 1st level list OR link */
.menu ul :hover ul {visibility:visible;}

/* End Navbar Code */

Hello Allen,
Two questions for you if you do not mind.
1. When you say "Place link here" does that mean Gallery ID. and just the # or everyting?
2. I was able to put on my web page a link to "twiter" they made it easy, was trying to do the same with "Face Book" and "word Press" for y blog,
In as far as face book I was only able to have a text, When I try to put in an Icon all I got was a small vertical bar besides the text. I aslo would hope tobe able to to this so they are "Side by Side" I have no clue how to get and link the "blog Icon"
Thanks a bunch
Jean-Maurice

hi smugmug guru,

need help on my site.
i dont know how to adjust the gap between the logo and the Nav Bar.

my site is : www.ronniearangali.com

Thanks!

bai

Originally Posted by baikodaker hi smugmug guru, need help on my site. i dont know how to adjust the gap between the logo and the Nav Bar. my site is : www.ronniearangali.com Thanks! bai

How would you like it adjusted? Vertically or horizontally or side by side?

Hi Allen,

sorry.. my Q above is wrong. just notice it now . what i want is the gap between the Navbar and the slideshow of my hope page.

Thanks

Allen- thanks for the help! I ended up removing one of the Nav Bar items and it's no longer centered- what do I need to change in order to make the Nav Bar centered again?


You're the man!

Hi Allen,

my problem above is now ok.

Thanks!

Hi,
having problem with my dropdown when using IE. but FF,Safari and chrome its ok.

Originally Posted by baikodaker Hi, having problem with my dropdown when using IE. but FF,Safari and chrome its ok.

See if this html works better. One example of a common thing missing is in red.

<!-- Begin Header and Navbar -->
<div id="RAHeader">
 <div id="RALogo">
 <a href="/"><img src="/img/spacer.gif" border="0" height="50" width="300"></a>
</div><!-- end of RALogo -->

<div id="RANav">
<!-- 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 -->
<div align="center">
<div class="menu">
<ul>
<!-- First Main Menu Item -->
<li><a class="drop" href="/" title="Ronnie Arangali's Photography">Home</a></li>
<!-- Next Main Menu Item -->
<li><a class="drop" href="/Portfolio" title="Portfolio">Portfolio
    <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="/Portfolio/Favorite-Shots" title="my favorite shots">Favorite Shots</a></li>
        <li><a class="drop" href="/Portfolio/Sports" title="Sports Category">Sports»
            <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/Portfolio/sports/Shakeys-V-league-09">Shakeys Vleague'09</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="/Portfolio/people" title="">People</a></li>
        <li><a class="drop" href="/Portfolio/events" title="">Events»
            <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/Portfolio/events/Victory25">Victory @ 25</a></li>
                <li><a href="/Portfolio/events/Paalam-Tita-Cory-Aquino">Cory Aquino</a></li>
                <li><a href="">. . . </a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a class="drop" href="/Portfolio/places" title="Place where i go..">Places »
            <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="Portfolio/Places/Anawangin-Cove-Pundaquit">Anawangin Cove,Pundaquit</a></li>
                <li><a href="/Portfolio/Places/Anvaya-Cove-Bataan">Anvaya Cove,Bataan</a></li>
                <li><a href="/Portfolio/Places/aquaventure-anilao-batangas">aquaventure anilao,batangas</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a class="drop" href="/Portfolio/nature" title="Nature Category">Nature»
            <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="/Portfolio/nature/flowers">Flowers</a></li>
                <li><a href="/Portfolio/nature/fruits">Fruits</a></li>
                <li><a href="/Portfolio/nature/wild-grass">Grass</a></li>
            </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!-- Next Main Menu Item -->
<li><a class="drop" href="/Wedding" title="Wedding Photography!">Wedding
   <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul>
       <li><a href="/client-access" title="Client Login">Client Access</a></li>
       <li><a href="/Wedding" title="Albums">Wedding Portfolio</a></li>
   </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li>
<!-- Next Main Menu Item -->
<li><a class="drop" href="/" title="about me..">About
    <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
       <li><a href="/gallery/8269417_Rw5cL">calendar</a></li>
       <li><a href="/gallery/8464125_thiJY">guestbook</a></li>
       <li><a href="/" title="@ work">@ work </a></li>
       <li><a href="/friends" title="Friends">with friend</a></li>
   </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li>
<!-- Next Main Menu Item -->
<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="InUser" type="hidden"><input name="NickName" value="baikodaker" 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>
</li>
</ul>
</div>
</div>
</div>
<!-- End Navbar Code -->