Is there someone out there who can help me get my site looking more like this site (http://photos.mikelanestudios.com/) I really like the way the fonts, menus and full pages in general look. Iwould prefer someone teach me how to do it rather than just do it for me. My site currently looks like this (www.rprphoto.com). (http://www.rprphoto.com).)
Are you looking for a side-to-side orientation of your banner and navbar?
That might be a place to start.
First, add a div that will wrap around the banner and navbar and prevent other page elements from floating to the top of the screen. In the CSS below, that div is called #wrapBannerNav. The next step is to change the div you use for your banner elements to have them placed on the left side of the browser window. You will also need to change the html that you use to display your banner. I pulled the header (h1, h3) div references out entirely. If you still want to use those elements you will need to redefine them from a placement and size standpoint.
Here are your CSS changes as a starting point. The placement, size, fonts, etc should be changed as desired:
#wrapBannerNav {
height: 75px;
padding: 0px 0px 10px 0px; /* top right bottom left */
border-bottom: 1px solid #FFF;
margin: 0px 20px 25px 20px; /* top right bottom left */
}
#my_banner {
position: absolute;
margin: 10px 0px 0px 15px; /* top right bottom left */
font-family: verdana, arial;
font-size: 130%;
font-weight: bold;
}
Then, replace your navbar and banner html that is currently in your header with this:
<div id="wrapBannerNav">
<div id="my_banner">
<big>RPR Photography</big>
<br/><i>Robert Roney</i>
<br/><i>Portrait & Fine Art Photographer</i></div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/gallery/7215362_FUBCm">Services</a></li>
<li><a href="/galleries/">Gallery</a></li>
<li><a href="/gallery/7222239_fLfNF">Contact</a></li>
<li><a href="http://rprphoto.blogspot.com/">Black (http://rprphoto.blogspot.com/%22%3EBlack) & White</a></li>
</ul>
</div>
</div>
That will get a look like this:
http://denise.smugmug.com/photos/510096053_RyjDM-L.jpg
Mike has set his site not to use stetchy, which means his galleries don't extend to the edges of the browser window. His banner/nav combination matches that non-stretchy look. The side-to-side solution I proposed above does use the full width of the screen. You will need to decide which look you'd like to pursue.
--- Denise