Reduce space between Banner and Navbar

[photocube]

Hello again,

I'm back for more help. I'm trying to reduce the space between my Banner and my Navbar. I'm hoping that it would also raise the slide show a bit.

Here's what I've got at this point:

/* Banner Setup */
#my_banner {
width: 750px;
height: 150px;
margin: 0 auto;
background: url(http://photocube.smugmug.com/photos/364107002_Zue4z-O.png) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://photocube.smugmug.com/photos/364107002_Zue4z-O.png');
}

/* Navbar Setup */
#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: #8B5A2B;
background-none;
}
#navcontainer ul li a:hover {
color: #8B5A2B;
background-none;
}


Any ideas?

Marco
http://photocube.smugmug.com/

[denisegoldberg]

First, add this to get rid of the brown "box" that is obscuring your banner:
#extraDiv1 {
display: none;
}
The reason you have so much space is that you specified a height of 150px for your banner. But it is no where near that high. I don't know the exact size of your banner (but you should be able to pick that up from your image, or actually from the program where you created the image). I reduced the height to 75px and that looked about right to me. Adjust the height until you get the look you want.

/* Banner Setup */
#my_banner {
width: 750px;
height: 75px;
margin: 0 auto;
background: url(http://photocube.smugmug.com/photos/364107002_Zue4z-O.png (http://photocube.smugmug.com/photos/364107002_Zue4z-O.png)) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://photocube.smugmug.com/photos/364107002_Zue4z-O.png');
}
--- Denise

[photocube]

First, add this to get rid of the brown "box" that is obscuring your banner:
#extraDiv1 {
display: none;
}
The reason you have so much space is that you specified a height of 150px for your banner. But it is no where near that high. I don't know the exact size of your banner (but you should be able to pick that up from your image, or actually from the program where you created the image). I reduced the height to 75px and that looked about right to me. Adjust the height until you get the look you want.

/* Banner Setup */
#my_banner {
width: 750px;
height: 75px;
margin: 0 auto;
background: url(http://photocube.smugmug.com/photos/364107002_Zue4z-O.png (http://photocube.smugmug.com/photos/364107002_Zue4z-O.png)) no-repeat;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://photocube.smugmug.com/photos/364107002_Zue4z-O.png');
}
--- Denise


:bow That's the ticket! I ddin't realize you could get rid of that brown bar at the top. This is what I was looking to achieve.

Thanks Denise.