Banner help needed

[NIPhoto]

I have a custom banner and a navbar. Today I put in a new banner. My banner is 750 X 114 pixels in size.

My navbar stretches out beyond the edges of the banner. I recently added a couple new buttons to my navbar.

How can I stretch my banner out to match the edges of the navbar? I had this problem with the old banner as well. Or is stretching a banner not possible because of issues with IE?

Also, how can I add a little space between the bottom of my banner and the navbar. Right now it's scrunched together and think I'd like a little separation.

Any help is appreciated. You guys are always wonderful!

http://www.angelaclassen.com/

[Allen]

I have a custom banner and a navbar. Today I put in a new banner. My banner is 750 X 114 pixels in size.

My navbar stretches out beyond the edges of the banner. I recently added a couple new buttons to my navbar.

How can I stretch my banner out to match the edges of the navbar? I had this problem with the old banner as well. Or is stretching a banner not possible because of issues with IE?

Also, how can I add a little space between the bottom of my banner and the navbar. Right now it's scrunched together and think I'd like a little separation.

Any help is appreciated. You guys are always wonderful!

http://www.angelaclassen.com/
Add some bottom margin to the banner and change the right/left padding to squeeze the nav narrower.

#my_banner {
width: 750px;
height: 151px;
margin: 0 auto 10px; /* top R/L bottom */
background: url(http://www.angelaclassen.com/photos/683653416_TBhTS-O.jpg) no-repeat;
}

#navcontainer ul li a {
text-decoration: none;
padding: .10em .7em; /* top/bottom R/L */
color: #fff;
background-color: #036;
}

[mjs]

Add some bottom margin to the banner and change the right/left padding to squeeze the nav narrower.

#my_banner {
width: 750px;
height: 151px;
margin: 0 auto 10px; /* top R/L bottom */
background: url(http://www.angelaclassen.com/photos/683653416_TBhTS-O.jpg) no-repeat;
}

#navcontainer ul li a {
text-decoration: none;
padding: .10em .7em; /* top/bottom R/L */
color: #fff;
background-color: #036;
}


If I wanted to change the alignment of my nav bar on all pages but my home page would I just use the #navcontainer code you listed here? Thx

[NIPhoto]

Now my banner is way over on the left side, and there was no space added under (between it and the navbar). The navbar doesn't appear to be any smaller either. Here's all the code out of my CSS box -maybe something else is throwing it out of whack?

/* hides your name (including any 's) */
#userName {
display: none;
}
/* hides the word home */
#userHome {
display: none;
}
.photoDetail {display: none;}
#photoKeywords {display: none;}
#my_banner {
width: 750px;
height: 151px;
margin: 0 auto 10 px; /* top R/L bottom */
background: url(http://www.angelaclassen.com/photos/683653416_TBhTS-O.jpg) no-repeat;
}
.box {
background-color: #000000;
}
#bioBox .photo {
display: none;
}
#userBio {text-align: center;}
#feeds {
display:none;
}
/* turn off the cart link on the minifooter */
.cartlink_footer {
display: none;
}
#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: .10em .7em; /* top/bottom R/L */
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
}
.homepage #galleriesBox,
.homepage #categoriesBox,
.homepage #featuredBox {
display: none;
}
.galleries #bioBox {
display: none;
}
.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
display: block;
}
#breadcrumb {visibility: hidden;}
#altViews {visibility: visible;}
.loggedIn #breadcrumb {visibility: visible;}
#homepage {padding-top:0}
#homepage #breadcrumb {display:none;}

Please help!!

[Allen]

Now my banner is way over on the left side, and there was no space added under (between it and the navbar). The navbar doesn't appear to be any smaller either. Here's all the code out of my CSS box -maybe something else is throwing it out of whack?
...
#my_banner {
width: 750px;
height: 151px;
margin: 0 auto 10 px; /* top R/L bottom */
background: url(http://www.angelaclassen.com/photos/683653416_TBhTS-O.jpg) no-repeat;
}
...
Remove the space in the bottom margin 10 px

#my_banner {
width: 750px;
height: 151px;
margin: 0 auto 10px; /* top R/L bottom */
background: url(http://www.angelaclassen.com/photos/683653416_TBhTS-O.jpg) no-repeat;
}

[NIPhoto]

Thanks Allen, that fixed the missing space between the banner and navbar. It's amazing if there's just one extra space in the code, it just doesn't work. I also tweaked the numbers in the padding and now the navbar and banner are the same width. Now my next project is to add a drop-down under my photo gallery button :D

You guys are awesome! Thanks so much for your help.