Put the round top and logo images together with purple filling into one image that looks exactly like you want the whole top/header area to be. Maybe change the filename to header_bg.gif.
You can leave off the link graphics, as it will be easier to position them later with the link divs.
Style the header:
Code:
#headerWrapper {
width: 940px;
height: 250px;
background-image: url(../Images/header_bg.gif);
position: relative;
}
Make h & w match the background image size.
Now for #contentMainWrapper:
Code:
#contentMainWrapper { /*controls trois soeurs picture container*/
width: 100%;
position: relative;
background-color: #711C4F;
}
And the sidebar:
Code:
#navColumnOne {
background: url(../Images/menu_background_switched_skinny.gif);
background-position: top center;
background-repeat: no-repeat;
height: 1200px; /*or whatever the bg image needs*/
padding-top: 68px; /*gives space above bag images*/
padding-bottom: 44px; /*gives space below bag images*/
padding-left: 16px;/*gives space for Shop Posh bg*/
padding-right: 16px;
margin-top: -50px; /*controls how high the menu background image is*/
margin-left: 30px;
}
Note - the whole
padding-top: 68px; /*gives space above bag images*/
padding-bottom: 44px; /*gives space below bag images*/
padding-left: 16px;/*gives space for Shop Posh bg - adjust as reqd*/
padding-right: 16px;
can be condensed into
padding: 68px 16px 44px 16px;
Get rid of all the table stuff inside navColumnOne. All you need is the divs with their link images. Put them *inside* navColumnOneWrapper, and code them each like this:
PHP Code:
<div class="shopposh"><a href="http://oneposhshop.com/Shop/index.php?main_page=index&cPath=1"><img src="http://oneposhshop.com/Shop/includes/templates/Posh_by_Trois_Soeurs/Images/Dresses_shopping_bag.gif" ></a></div>
and style .shopposh:
Code:
.shopposh {
width: 79px;
height:95px;
text-align: center;
padding-top: 5px;
}
You can also just make sure all the bag images are the same size and eliminate the width, height and text-align: center; and let the images give size to the shopposh divs.
Bookmarks