Help with header/navbar and slideshow click-through

[kenweber]

Hey All:

Brand new here to Smugmug, CSS, HTML, XHTML, etc, etc, and building a web page in general. I've slugged my way along to the point that I'm actually starting to get somewhat close to what I've envisioned for my site, but I've hit a wall. I'm hoping that some of you web designing gurus might be able to help me out.

I am trying to do something that I'm sure is very simple, but I haven't found in any of the tutorials. I am trying to line up my header and navbar on the same line. Then add a thin white line across the bottom of the entire header/navbar. The last thing I am trying to do (for now) is have it so when you click on my slideshow on the home page, you navigate to the main gallery page, instead of going to the actual gallery that has the photos that show up on the slideshow.

Any help is greatly appreciated!

My site is http://kenweberphotography.smugmug.com

Ken

[Allen]

Hey All:

Brand new here to Smugmug, CSS, HTML, XHTML, etc, etc, and building a web page in general. I've slugged my way along to the point that I'm actually starting to get somewhat close to what I've envisioned for my site, but I've hit a wall. I'm hoping that some of you web designing gurus might be able to help me out.

I am trying to do something that I'm sure is very simple, but I haven't found in any of the tutorials. I am trying to line up my header and navbar on the same line. Then add a thin white line across the bottom of the entire header/navbar. The last thing I am trying to do (for now) is have it so when you click on my slideshow on the home page, you navigate to the main gallery page, instead of going to the actual gallery that has the photos that show up on the slideshow.

Any help is greatly appreciated!

My site is http://kenweberphotography.smugmug.com

Ken Change this in your show code

clickToImage: 'true',

to this

clickUrl: '/galleries',


Back in a bit with your nav/banner fix.

[Allen]

...
Add the my_header div and move the banner to below your nav html.


<div id="my_header">

<div id="navcontainer">
<ul>
<li><a href="/">HOME</a></li>
<li><a href="/galleries">GALLERIES</a></li>
<li><a href="/gallery/xxxxxxxx_xxxxx">BIOGRAPHY</a></li>
<li><a href="/gallery/xxxxxxxx_xxxxx">CONTACT</a></li>
</ul>
</div>

<div id="my_banner"> </div>

</div> <!-- closes my_header -->

You can use relative links in your nav if you want, see above.


CSS changes in bold. I had to play some games with your banner margins
because you have a whole lot of blank space. It needs to be cropped to
only the text. This will work but I'd crop it and post back here and we'll
reposition everything.

#my_header {
height: 90px;
border-bottom: 1px solid #ccc;
margin: 0 40px 15px; /* top right/left bottom*/
padding: 0 20px;
}

#my_banner {
width: 750px;
height: 100px;
margin: -10px 0 0 -250px;
background: url(http://kenweberphotography.smugmug.com/photos/651023894_HnDWM-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://kenweberphotography.smugmug.com/photos/651023894_HnDWM-O.png');
}

#navcontainer {
float: right;
margin: 60px 0 0; /* top right/left bottom */
}

[kenweber]

Al,

You ROCK!! :thumb Thank you so much for taking your time to help me!!! I'll play with my banner. I think I can figure out how to fix the margins now that you've given me the road map.

Ken