Ok so I took some online tutorials and decided to use CSS to build my sites from now on but the first one I'm working on I haven't got past the nav bar and I'm already in trouble....

Here is the page I'm working on, it'll be a template for the rest of the site, pretty simple right?

www.polocrossecanada.com/home.htm

I tried to add the header and nav background as background images in my Style Sheet but they wouldn't show , even though I had specified the height. so I used actual image files and you can clearly see where my problem lies.... I cut the header and nav images all from one photo shop file but that right piece of image on the right side of the nav won't stay put where it's supposed to! I've triple checked and the nav elements all add up to 750 pixels...

I may just have to go back to tables... any advice?

Here is my Style sheet...

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #000000;
margin: 0px;
text-align: center;

}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 130%;
font-weight: bold;
color: #000000;
margin: 15px;
}
#wrapper {
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
border: 3px solid #000000;
position: relative;
width: 752px;
text-align: left;
height: 113px;
left: 2px;
top: 0px;




}
.left {
float: left;
margin-left: 0px;
border: 1px solid #000000;
padding: 0px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 5px;


}
.right {
float: right;
margin-right: 15px;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
color: #000000;
line-height: 25px;

}
.banner {
height: 142px;
background-image: url(../Images/head.jpg);
background-repeat: no-repeat;

}
#nav {
background-image: none;
background-repeat: no-repeat;
background-position: left;

}
#nav ul{
padding: 0;
margin: 0;
}
#nav ul li{
display: inline;
padding: 0;
margin: 0;
list-style-image: none;

}
#content p{
font-size: 80%;
margin: 20px;
font-family: Arial, Helvetica, sans-serif;
line-height: 20px;


}
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 75%;
text-align: center;
word-spacing: 0px;
line-height: 30px;


}

Hi Sarah

I had a look at the code (html and css). I have mocked up a new page with a new CSS file which I believe does what you need. Take a look at :

www.sesameweb.co.uk/dmxzone/fpc

First of all, I've taken out all javascirpt and used CSS for the mouseovers. You can leave it as you had it, but css is farr leaner.

Second, I set up DIVs for the nav and the grphic to the right, put the right DIV first in the HTML and floated the DIV right of the nav ( I hope this makes sense) Take a look at the HTML and CSS and it should become clear.

Lastly, don't go back to tables, once you begin to crack the CSS, you'll never look back.

Good luck.

Regards,

Stefan

Stefan - www.pash.biz

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
DMX | ASP | VBScript | ACCESS | SQL Server | IIS5
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Thanks a ton Stephan!

I use the javascript rollovers because I can't get the text to look the way I want it without using images...

I've tried what you have suggested but still no luck, I must be missing something crucial in there... I do appreciate the help though!

sarah

im a little confused at to what u actually want, if its not the example that stefan posted.

can u explain a bit more.

and he's right about the javascript rollovers, u dont need them.

if i can get a grip on what you want i should be able to put the css together for you.

Regards,
Dave

[DWMX 2004]|[FlashMX 2004 Pro]|[SQL]|[Access2000]|[ASP/VBScript]|[XP-Pro]