Hi guys, I'm currently building a site for family, they just want something simple, this is the beginning of the site, and I just need a hand with a couple of things

 

First of all, the menu bar is a spry bar, how can I place a background behind it, which is inline with the current site? I've added the website concept image so you can see what I mean

 

Secondly, how do I get the spry menu tabs to be centred? It's aligned centre but doesn't seem to want to go there! I think I've missed something personally

 

If you need me to explain in more details, please do ask and I'll try

 

Thanks in advance! Andy

 

The image new.jpg is my current work in progress.

Are you using Dreamweaver to build this? There could be a number of reasons why you're menu is not centering - look at the css that's governing the spry element and the surrounding divs. You could also view it in firebug which will show you the css that's acting on each element. Unless we see the css file we can't really help you.

Hi,

 

Yeah I'm using DW.

 

Here's the CSS file below, do you need anything else?

 

 

@charset "UTF-8";

body {

margin: 0%;

padding: 0;

text-align: center;

color: #000000;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 100%;

background-color: #495D88;

}

* {

margin: 0px;

padding: 0px;

}

.oneColFixCtr #container {

width: 1000px;

text-align: left;

margin-top: 10px;

margin-right: auto;

margin-bottom: 25px;

margin-left: auto;

padding: 0px;

}

#bottomp {

text-align: center;

}

#Footer {

width: 1000px;

border-top-width: 6px;

border-top-style: solid;

border-top-color: #ffae00;

border-right-color: #F28517;

border-bottom-color: #F28517;

border-left-color: #F28517;

height: 50px;

font-size: 15px;

color: #FFFFFF;

background-color: #0d2675;

border-bottom-left-radius: 20px;

border-bottom-right-radius: 20px;

box-shadow: 3px 0px 5px #;

}

.breadcrums {

text-transform: uppercase;

color: F28517;

margin-left: 50px;

}

.oneColFixCtr #mainContent {

padding-top: 0;

padding-right: 20px;

padding-bottom: 0;

}

.oneColFixCtr #container #mainContent #TopBox {

background-image: url(../img/TopBackground.png);

width: 1000px;

background-repeat: repeat;

height: auto;

padding-top: 10px;

}

#BottomBox {

box-shadow: 3px 3px 5px #;

}

a#TopBox {

box-shadow: 3px 3px 5px #;

}

.oneColFixCtr #container #mainContent #TopBox #NavHolder {

border-bottom-width: 6px;

border-bottom-style: solid;

border-bottom-color: #ffae00;

height: 34px;

width: 825px;

padding-left: 175px;

}

.oneColFixCtr #container #mainContent #BottomBox {

padding-top: 10px;

padding-bottom: 10px;

padding-left: 20px;

background-color: #FFFFFF;

width: 960px;

padding-right: 20px;

}

.oneColFixCtr #container #mainContent #BottomBox #AccredHolder {

background-color: #FFFFFF;

height: 400px;

width: 900px;

}

.imgBoader {

}

h1 {

text-transform: uppercase;

font-size: 25px;

}

h2 {

color: #F6BA19;

margin-left: 20px;

margin-top: -5px;

text-transform: uppercase;

}

.imgboarder {

border: 2px solid #2C3D5A;

margin-right: 10px;

margin-bottom: 10px;

margin-left: 10px;

}

#LogoHolder {

}

.BoldHeading {

font-weight: bold;

color: #F6BA19;

}

.bulletSpanner {

background-image: url(../img/spanner.png);

background-repeat: no-repeat;

background-position: left center;

padding-left: 30px;

line-height: 25px;

margin-left: 20px;

}

.imgspacer {

margin-right: 10px;

margin-left: 10px;

}

Nevermind, I worked it out in the end! Thanks for the help though