I currently have a nav bar on the bottom of my splash page, but I'd like to bring it up to the top of the page with a line under it to keep the look consistent with the rest of my pages.

Can someone please assist.

www.pictureyourworld.net


Thanks

I figured out how to get the line on my homepage nav bar.

I added: .homepage #navcontainer
{border-bottom: 1px solid #757575;}


But, I would really appreciate it if someone told me how to move the homepage nav bar from the bottom of the page to the top. Thanks

www.pictureyourworld.net

Originally Posted by thenimirra I figured out how to get the line on my homepage nav bar. I added: .homepage #navcontainer {border-bottom: 1px solid #757575;} But, I would really appreciate it if someone told me how to move the homepage nav bar from the bottom of the page to the top. Thanks www.pictureyourworld.net

All I see on your homepage is a footer and huge logo with the nav under it.
Where exactly do you want it moved?

Originally Posted by Allen All I see on your homepage is a footer and huge logo with the nav under it. Where exactly do you want it moved?

Hi Allen, I would like the navbar to be moved to the top of the page so it looks the way it does on my galleries (portfolio) page.

Originally Posted by thenimirra Hi Allen, I would like the navbar to be moved to the top of the page so it looks the way it does on my galleries (portfolio) page.

First, move all your nav/banner together in one spot in your CSS. It's scatter all over and hard to interpret.
Some of this is the wrong order. .homepage applies to both homepage and any dup homepage.

.homepage #my_banner {
width: 800px;
height: 500px;
margin: 0 auto;
background: url(http://www.pictureyourworld.net/photos/607735958_tqfBp-L.jpg) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingmethod=image,src='http://www.pictureyourworld.net/photos/607735958_tqfBp-L.jpg'); 
}

.galleries #my_banner,
#my_banner {
width: 400px;
height: 250px;
margin: 0 auto;
background: url(http://www.pictureyourworld.net/photos/607735958_tqfBp-S.jpg) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingmethod=image,src='http://www.pictureyourworld.net/photos/607735958_tqfBp-S.jpg');
}

.featured #my_bannerHP {display: none;}
.featured #my_banner {display: block;}
.galleries #my_bannerHP {display: none;}
.galleries #my_banner {display: block;}

.homepage #my_bannerHP {display: block;}
.featured #my_bannerHP {display: none;}
.featured #my_banner {display: block;}
.galleries #my_bannerHP {display: none;}
.galleries #my_banner {display: block;}



.homepage #navcontainer
{border-bottom: 1px solid #757575;}

.galleries #navcontainer
{border-bottom: 1px solid #757575;}
.galleries #my_banner {display: none !important;}

.galleries #navcontainer {margin-top: 25px !important;}

.featured #navcontainerHP {display: none;}
.featured #navcontainer {display: block;}
.galleries #navcontainerHP {display: none;}
.galleries #navcontainer {display: block;}

.featured  #navcontainer,
.galleries #navcontainer,
#navcontainer {
display: block;
margin-top: 5px;
}

.featured #navcontainerHP {display: none;}
.featured #navcontainer {display: block;}
.galleries #navcontainerHP {display: none;}
.galleries #navcontainer {display: block;}

#navcontainer {
    display: block;
    margin-top: 10px;
    padding: 0px 0px 10px 0px;
    border-bottom: 1px solid #757575;
    margin: 0 px 50px 25px 50px; /* top right bottom left */
}


.menu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

.menu ul li { 
    display: inline; 
}

.menu ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #000000;
    background-color: none;
}

.menu ul li a:hover {
    color: #000000;
    background-color: #6699CC;
}

Originally Posted by thenimirra ....

Next step is placing the html in the correct order for the nav's and
banner's. Delete the nav/banner from your footer and place in your header
like this.

<div id="navcontainerHP" class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Portfolio</a></li>
<li><a href="/gallery/3474249_DwiNf">Services/Fees</a></li>
<li><a href="/Clients">Clients</a></li>
<li><a href="/gallery/3474149_kDBT7">About Me</a></li>
<li><a href="/gallery/4452767_CdifC">Contact</a></li>
<li><a href="http://shebawheeler.smugmug.com/gallery/13104313_qsB4L#950072308_dB8F2">Photo Packages</a></li>
<li><a href="http://www.pictureyourworldphotography.blogspot.com">Blog</a></li>
</ul>
</div>

<div id="my_bannerHP">
<a href="http://pictureyourworld.net">
<img src="/img/spacer.gif" alt="" width="542" border="0" height="113"></a>
</div>

<div id="my_banner"><a href="http://www.pictureyourworld.net/">
<img src="/img/spacer.gif" alt="" width="400" border="0" height="215"></a>
</div>
<div id="navcontainer" class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Portfolio</a></li>
<li><a href="/gallery/3474249_DwiNf">Services/Fees</a></li>
<li><a href="/Clients">Clients</a></li>
<li><a href="/gallery/3474149_kDBT7">About Me</a></li>
<li><a href="/gallery/4452767_CdifC">Contact</a></li>
<li><a href="http://shebawheeler.smugmug.com/gallery/13104313_qsB4L#950072308_dB8F2">Photo Packages</a></li>
<li><a href="http://www.pictureyourworldphotography.blogspot.com">Blog</a></li>
</ul>
</div>

OH NO!!! I deleted everything thing from the footer, but the navbar on the homepage is still at the bottom and the slideshow on the galleries page is very tiny when it should take up half of the page. I think I did something wrong, Allen. Please help!

Originally Posted by thenimirra OH NO!!! I deleted everything thing from the footer, but the navbar on the homepage is still at the bottom and the slideshow on the galleries page is very tiny when it should take up half of the page. I think I did something wrong, Allen. Please help!

Remove the extra banner from your footer.

<div id="my_bannerHP">
<a href="http://pictureyourworld.net">
<img src="/img/spacer.gif" alt="" width="542" border="0" height="113">
</a></div>

Change to this. Then we'll check each page and see if it all works.

#my_bannerHP {
   width: 800px;
   height: 500px;
   margin: 0 auto;
   background: url(http://www.pictureyourworld.net/photos/607735958_tqfBp-L.jpg) no-repeat;
  _background: none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
     sizingmethod=image,src='http://www.pictureyourworld.net/photos/607735958_tqfBp-L.jpg'); 
}

#my_banner {
   width: 400px;
   height: 250px;
   margin: 0 auto;
   background: url(http://www.pictureyourworld.net/photos/607735958_tqfBp-S.jpg) no-repeat;
  _background:none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
     sizingmethod=image,src='http://www.pictureyourworld.net/photos/607735958_tqfBp-S.jpg');
}

      /* hide everywhere */
#my_bannerHP {display: none;}

      /* turn back on homepage galleries featured */
.homepage  #my_bannerHP {display: block;}

      /* turn off duplicate homepages*/
.galleries #my_bannerHP,
.featured #my_bannerHP {display: none;}

      /* hide on homepage galleries featured */
.homepage #my_banner   {display: none;}

      /* turn back on */
.featured #my_banner {display: block;}


#navcontainer {
    margin-top: 10px;
    padding: 0px 0px 10px 0px;
    border-bottom: 1px solid #757575;
}

      /* turn off homepage galleries featured */
.homepage #navcontainer {display: none;}

      /* turn back on for duplicate homepages */
.galleries #navcontainer,
.featured #navcontainer {display: block;}

      /* hide everywhere */
#navcontainerHP {display: none;} 

      /* turn back on homepage galleries featured */
.homepage #navcontainerHP {display: block; margin-top: 10px;}

      /* turn off  for duplicate homepages*/
.galleries #navcontainerHP,
.featured #navcontainerHP {display: none;}

Allen, I removed the extra banner from the footer and I think I made the proper changes in CSS.

But the slideshow on the galleries page is still small

and the navbar on the home page is still at the bottom.

Now I see what you were talking about with the code being all over the place, but that's been years and years worth of tweaking trying to get things to work. Thanks for your help.

Originally Posted by thenimirra Allen, I removed the extra banner from the footer and I think I made the proper changes in CSS. But the slideshow on the galleries page is still small and the navbar on the home page is still at the bottom. Now I see what you were talking about with the code being all over the place, but that's been years and years worth of tweaking trying to get things to work. Thanks for your help.

I just replaced all your nav and banner CSS with what I posted and the
homepage nav was at the top.

Ask jfriend in the HTML5 slideshow sticky thread about the size.

when I look at the page, the navbar is on the bottom on http://www.pictureyourworld.net/ and I want it to be on the top the way it appears on http://www.pictureyourworld.net/galleries

Originally Posted by thenimirra when I look at the page, the navbar is on the bottom on http://www.pictureyourworld.net/ and I want it to be on the top the way it appears on http://www.pictureyourworld.net/galleries

Remove all this

#my_bannerHP {
   width: 800px;
   height: 500px;
   margin: 0 auto;
   background: url(http://www.pictureyourworld.net/photos/607735958_tqfBp-L.jpg) no-repeat;
  _background: none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
     sizingmethod=image,src='http://www.pictureyourworld.net/photos/607735958_tqfBp-L.jpg'); 
}

#my_banner {
   width: 400px;
   height: 250px;
   margin: 0 auto;
   background: url(http://www.pictureyourworld.net/photos/607735958_tqfBp-S.jpg) no-repeat;
  _background:none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
     sizingmethod=image,src='http://www.pictureyourworld.net/photos/607735958_tqfBp-S.jpg');
}

     /* hide everywhere */
#my_bannerHP {display: none;}

      /* turn back on homepage galleries featured */
.homepage  #my_bannerHP {display: block;}

      /* turn off duplicate homepages*/
.galleries #my_bannerHP,
.featured #my_bannerHP {display: none;}

      /* hide on homepage galleries featured */
.homepage #my_banner   {display: none;}

      /* turn back on */
.featured #my_banner {display: block;}

#navcontainer {
    margin-top: 10px;
    padding: 0px 0px 10px 0px;
    border-bottom: 1px solid #757575;
}

      /* turn off homepage galleries featured */
.homepage #navcontainer {display: none;}

      /* turn back on for duplicate homepages */
.galleries #navcontainer,
.featured #navcontainer {display: block;}

      /* hide everywhere */
#navcontainerHP {display: none;} 

      /* turn back on homepage galleries featured */
.homepage #navcontainerHP {display: block; margin-top: 10px;}

      /* turn off  for duplicate homepages*/
.galleries #navcontainerHP,
.featured #navcontainerHP {display: none;}

}

.featured #my_bannerHP {display: none;}
.featured #my_banner {display: block;}
.galleries #my_bannerHP {display: none;}
.galleries #my_banner {display: block;}


.homepage #my_bannerHP {display: block;}
.featured #my_bannerHP {display: none;}
.featured #my_banner {display: block;}
.galleries #my_bannerHP {display: none;}
.galleries #my_banner {display: block;}

.homepage #navcontainer
{border-bottom: 1px solid #757575;}
.homepage #navcontainer {margin-top: 25px !important;}

.galleries #navcontainer
{border-bottom: 1px solid #757575;}
.galleries #my_banner {display: none !important;}

.galleries #navcontainer {margin-top: 25px !important;}

.featured #navcontainerHP {display: none;}
.featured #navcontainer {display: block;}
.galleries #navcontainerHP {display: none;}
.galleries #navcontainer {display: block;}

.featured  #navcontainer,
.galleries #navcontainer,
#navcontainer {
display: block;
margin-top: 5px;
}

.featured #navcontainerHP {display: none;}
.featured #navcontainer {display: block;}
.galleries #navcontainerHP {display: none;}
.galleries #navcontainer {display: block;}

#navcontainerHP {display: none;} 
.homepage #navcontainerHP {display: none;}
.homepage #navcontainer {
display: block;
margin-top: 5px;
}

replace with this

#my_bannerHP {
   width: 800px;
   height: 500px;
   margin: 0 auto;
   background: url(http://www.pictureyourworld.net/photos/607735958_tqfBp-L.jpg) no-repeat;
  _background: none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
     sizingmethod=image,src='http://www.pictureyourworld.net/photos/607735958_tqfBp-L.jpg'); 
}

#my_banner {
   width: 400px;
   height: 250px;
   margin: 0 auto;
   background: url(http://www.pictureyourworld.net/photos/607735958_tqfBp-S.jpg) no-repeat;
  _background:none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
     sizingmethod=image,src='http://www.pictureyourworld.net/photos/607735958_tqfBp-S.jpg');
}

      /* hide everywhere */
#my_bannerHP {display: none;}

      /* turn back on homepage galleries featured */
.homepage  #my_bannerHP {display: block;}

      /* turn off duplicate homepages*/
.galleries #my_bannerHP,
.featured #my_bannerHP {display: none;}

      /* hide on homepage galleries featured */
.homepage #my_banner   {display: none;}

      /* turn back on */
.featured #my_banner {display: block;}


#navcontainer {
    margin-top: 10px;
    padding: 0px 0px 10px 0px;
    border-bottom: 1px solid #757575;
}

      /* turn off homepage galleries featured */
.homepage #navcontainer {display: none;}

      /* turn back on for duplicate homepages */
.galleries #navcontainer,
.featured #navcontainer {display: block;}

      /* hide everywhere */
#navcontainerHP {display: none;} 

      /* turn back on homepage galleries featured */
.homepage #navcontainerHP {display: block; margin-top: 10px;}

      /* turn off  for duplicate homepages*/
.galleries #navcontainerHP,
.featured #navcontainerHP {display: none;}

Cool! the navbar is now on the top of the page, but somehow I dropped the line underneath it?

it has something to do with this "border-bottom: 1px solid #757575;"

but I don't know where to put it.

Originally Posted by thenimirra Cool! the navbar is now on the top of the page, but somehow I dropped the line underneath it? it has something to do with this "border-bottom: 1px solid #757575;" but I don't know where to put it.

Change this

      /* turn back on homepage galleries featured */
.homepage #navcontainerHP {display: block; margin-top: 10px;}

to this

      /* turn back on homepage galleries featured */
.homepage #navcontainerHP {
   display: block;
   padding: 10px 0;
   border-bottom: 1px solid #757575;
}

HOT DAMN, that worked.

how can I fed ex you a beer or bottle of wine, tequila, vodka or something Allen?

pick your poison.

Also, I put a message on the Jfriend slideshow page to see if I can figure out why the slideshow is displaying small.

Originally Posted by thenimirra HOT DAMN, that worked. how can I fed ex you a beer or bottle of wine, tequila, vodka or something Allen? pick your poison. Also, I put a message on the Jfriend slideshow page to see if I can figure out why the slideshow is displaying small.

See, we finally got there, just takes some patience.

No, it took YOUR patience. You could have given up at any time but you didn't. Thanks for sticking it out with me, Allen!