newbie question - nav bar no longer straight accross

amywadlington

Hi everyone! Please help! I have been a lurker for quite some time and up unitl now have been able to find all of my answers by searching the threads. The drop down items on my nav bar have always been straight accross the top and I have never had problems with them...until now. I checked and double checked my code (ha! like I actually know what to look for!) but i cannot figure this one out. Any suggestions?

check it out at http://www.amywadlingtonphotos.smugmug.com

thank you!
amy

Allen

amywadlington wrote:

Hi everyone! Please help! I have been a lurker for quite some time and up unitl now have been able to find all of my answers by searching the threads. The drop down items on my nav bar have always been straight accross the top and I have never had problems with them...until now. I checked and double checked my code (ha! like I actually know what to look for!) but i cannot figure this one out. Any suggestions?

check it out at http://www.amywadlingtonphotos.smugmug.com

thank you!
amy

Looks like the html is borked, be back in a while with fixes.

Meanwhile, remove all this js from your CSS.

function addRecentFeatured(text, days, thumbUrl) {
  if (YD.hasClass(document.body, "homepage")) {
    divTags = YD.getElementsByClassName("boxBottom", "div", YD.get("featuredBox"));

    for (i=0; i<divTags.length; i++) {
      miniBox = document.createElement("div");
      miniBox.className = "miniBox";

      photoBox = document.createElement("div");
      photoBox.className = "photo";
      miniBox.appendChild(photoBox);

      photoLink = document.createElement("a");
      photoLink.setAttribute("href", "javascript:showRecent(" + days + ");");
      photoBox.appendChild(photoLink);

      photoImg = document.createElement("img");
      photoImg.setAttribute("border", "0");
      photoImg.setAttribute("alt", text);
      photoImg.setAttribute("title", text);
      photoImg.src = thumbUrl;
      photoImg.className = "imgBorder";
      photoLink.appendChild(photoImg);

      albumTitle = document.createElement("p");
      albumTitle.className = "albumTitle";
      miniBox.appendChild(albumTitle);
      albumLink = document.createElement("a");
      albumLink.className = "nav";
      albumLink.setAttribute("href", "javascript:showRecent(" + days + ");");
      albumTitle.appendChild(albumLink);

      albumLinkText = document.createTextNode(text);
      albumLink.appendChild(albumLinkText);
      spacerDiv = document.createElement("div");
      spacerDiv.className = "spacer";
      miniBox.appendChild(spacerDiv);

      divTags[i].insertBefore(miniBox, divTags[i].childNodes[1]);

      break;
    }
  }
}

function showRecent(days) {
  endDate = new Date();
  oneDay = 1000*60*60*24;
  startDate = new Date(endDate.getTime() - (parseInt(days) * oneDay));
 
  sUrl = "/date/";
  sUrl += startDate.getFullYear() + "-" + padDate(startDate.getMonth() + 1) + "-" + padDate(startDate.getDate());
  sUrl += "/";
  sUrl += endDate.getFullYear() + "-" + padDate(endDate.getMonth() + 1) + "-" + padDate(endDate.getDate());
 
  window.location = sUrl;
}

function padDate(datePart) {
  if (datePart.toString().length != 1)
    return datePart
 
  return "0" + datePart;
}

Allen

amywadlington wrote:

Hi everyone! Please help! I have been a lurker for quite some time and up unitl now have been able to find all of my answers by searching the threads. The drop down items on my nav bar have always been straight accross the top and I have never had problems with them...until now. I checked and double checked my code (ha! like I actually know what to look for!) but i cannot figure this one out. Any suggestions?

check it out at http://www.amywadlingtonphotos.smugmug.com

thank you!
amy

This will get it presentable. There's still a problem with the about drop,
looking into it.

Replace your header nav html with this.

<!-- 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 href="http://amywadlingtonphotos.smugmug.com" title="Amy Wadlington Photography">Home</a></li>
 
<!-- Next Main Menu Item -->
 
<li><a class="drop" href="#nopick" title="Galleries">Galleries
    <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
       <li><a href="http://amywadlingtonphotos.smugmug.com/galleries" title="Featured Galleries">Featured Galleries</a></li>
       <li><a href="http://amywadlingtonphotos.smugmug.com/People" title="People">People</a></li>
       <li><a href="http://amywadlingtonphotos.smugmug.com/Animals" title="Animals">Animals</a></li>
       <li><a href="http://amywadlingtonphotos.smugmug.com/Portfolio" title="Portfolio">Portfolio</a></li>
       <li><a href="http://amywadlingtonphotos.smugmug.com/Other" title="Other">Other</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
 

<!-- Next Main Menu Item -->
 
<li><a class="drop" href="http://amywadlingtonphotos.smugmug.com/Weddings" title="Wedding">Weddings
    <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
       <li><a href="http://amywadlingtonphotos.smugmug.com/Engagements" title="Engagements">Engagements</a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
 
<!-- Next Main Menu Item -->
 
<li><a href="http://amywadlingtonphotos.smugmug.com/People/342627" title="Children">Children</a></li>
 
<!-- Next Main Menu Item -->
 
<li><a class="drop" href="#nopick" title="About">About
    <!--[if IE 7]><!--><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
        <li><a href="http://amywadlingtonphotos.smugmug.com/gallery/3140324" title="About Amy">About Amy</a></li>
        <li><a href="http://amywadlingtonphotos.smugmug.com/gallery/3212810" title="Portrait Pricing">Portrait Pricing</a></li>
        <li><a href="http://amywadlingtonphotos.smugmug.com/gallery/3351167" title="Wedding Pricing">Wedding Pricing </a></li>
    </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul> <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 
</div>
</div>
<!-- End Navbar Code -->

Change the red in your CSS so the drop it up to the main.

/* 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:21px;
left:0;
width:125px; /* Size of the daughter cells */
}

amywadlington

Thank you!
It's working now - thank you very much!