horizontal alignment of baner and nav bar [Sitemap]

ericspicts

Jun-09-2009, 08:05 AM

I would like to have my banner and nav bar appear on the same line with the banner/logo on the left and the navigation buttons on the right. I search around prior to bugging everyone and found the following post:

http://www.dgrin.com/showthread.php?t=103595&highlight=horizontally+aligned+header

but I am not understanding how to modify my current code to do this. I have a "banner section" whereas this above post talks about how to deal with headerwrappers

I'm ericspicts.com

Thanks for your help

J Allen

Jun-09-2009, 08:51 AM

See if you like this:

Change your whole CSS box to this:

/*=====Banner=====*/
#my_banner
{width: 300px;
height: 100px;
margin: 0 auto;
background: url(/photos/557207820_LapyC-O.png) no-repeat;
position:relative;
right:400px;
top:15px}

/*=====Nav-Bar=====*/
#navcontainer ul
{margin: 0;
padding: 0;
list-style-type: none;
text-align: center;}

#navcontainer ul li
{display: inline;}

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

#navcontainer ul li a:hover
{color: #fff;
background-color: #B57600;}

#navcontainer
{float:right;
position:relative;
bottom:15px;
right:150px}

/*=====Header-Line=====*/
#my-header-line
{border-bottom: 1px solid grey;
margin-left:70px;
margin-right:70px;
margin-top:5px}

/*=====Bio-Box=====*/
#userBio {text-align: center !important;}

#bioBox .photo
{display: none;}

/*====No More Border====*/
.galleryPage,
.boxBottom,
.boxTop,
.box
{border:none !important;}

/*====Home/Galleries====*/
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox,
.galleries #bioBox,
#photoKeywords,
#userName,
#userHome,
.possess,
#feeds,
.cartlink_footer,
.map_this
{display: none;}

.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox,
.loggedIn .homepage #galleriesBox,
.loggedIn .homepage #categoriesBox
{display: block;}

.gallery_5167775 #breadcrumb {display: none;}
.gallery_5167775 .pageNav {display: none;}

Change your whole custom header box to this:

<div id="my_banner"> </div>
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/"> Purchase Information</a></li>
<li><a href="javascript:norobotmail('kaufman.eric1', 'gmail.com')">Contact Me</a></li>
<li><a href="http://twitter.com/ericspicts">Blog Site</a></li>
</ul>
</div>
<div id="my-header-line"></div>

:ear