Please help newbie with navbar/css hassle!

[Woody]

Hi,
I'm very new to CSS,I am trying to put one of the horizontal nav bars from the dynamic drive CSS library onto my site, but really don't know what I am doing!:eek:
The test site is at:
http://www.woodenteacher.org.uk

I have worked in tables (don't know much about html/css though) and am trying desperatly to get into CSS.

I have put the navbar (CFnavbar)html code in, but don't know how to link it to table cell or style sheet. At the moment it is showing at the top of the page! Have added the CSS code to the style sheet, but don't know how to link it to the html. Have the button gifs in my image folder but don't know how to link them! It was so much easier with the old fashioned roll overs!!!

Lots of questions, but ANY help or ANY answers to lead me in the right direction would be great!!(CSS stylesheet contents below)

Stylesheet:

.toptile {
background-image: url(images/images/stmweb_bgndtop.jpg);
background-repeat: repeat-x;
position: relative;
background-position: right;

}

Source: Dynamic Drive CSS Library
URL: http://www.dynamicdrive.com/style/

<style type="text/css">

#cfnavbar{
margin: 0;
padding: 0;
}

#cfnavbar ul{
background: url(media/bgpink.gif) bottom center repeat-x;
padding-left: 0;
margin: 0;
float: left;
font: bold 80% Verdana;
}

* html #cfnavbar ul{ /*IE only rule. Add extra margin-bottom*/
margin-bottom: 1em;
}

#cfnavbar ul li{
display: inline;
}


#cfnavbar ul li a, #cfnavbar ul li span{
float: left;
color: black;
font-weight: bold;
padding: 7px 13px 8px 6px;
text-decoration: none;
background: url(media/dividerpink.gif) bottom right no-repeat;
}

#cfnavbar ul li span{ /*Targets span tag to the right of #leftcorner below*/
padding-left: 0px;
}


#cfnavbar ul li a#leftcorner{
float: none;
padding-left: 10px;
padding-right: 0px;
background: url(media/leftcornerpink.gif) bottom left no-repeat;
}

#cfnavbar ul li a#rightcorner{
padding-right: 10px;
background: url(media/rightcornerpink.gif) bottom right no-repeat;
}

#cfnavbar ul li a:hover{
text-decoration: underline;
}



.maintxt {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: justify;
word-spacing: normal;
padding: 0px 0px 0px 35px;
left: 50px;
text-indent: 0pt;
width: 80%;




}
h4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #6699CC;
padding-left: 35px;
font-size: large;


}
.rightbgnd {
background-image: url(images/stm_bluebgnd.jpg);
background-repeat: repeat-y;
height: 100%;

}
.footer {
background-color: #333366;
background-repeat: repeat-x;
width: 100%;
}


</style>

[TeeGee]

Since I had to modify your html as well as your css, I went ahead and just pieced it all together for you. (http://www.tonyagoodnow.com/testing/stmartins/test.html)

If that's how you want it, go ahead and view source on the html page, copy it and paste it into your html document. Here's a quick link to the style sheet (http://www.tonyagoodnow.com/testing/stmartins/stmweb3.css) so you can copy and paste that into your css document.

Also, you'll need to place all of your images (including the ones to the cfnav menu) into an "images" folder for this setup to work as is. Here's an image checklist:

bgpink.gif
dividerpink.gif
leftcornerpink.gif
rightcornerpink.gif
stm_bluebgnd.jpg
stm_stmtxt.jpg
stm_tim.jpg
stmweb_bgndtop.jpg
stmweb_topkids.jpg

One last thing. The sample cfnav menu had 7 links built into it. Obviously you're going to modify that to suit your needs, but take notice of how the 1st and last links (#1 and #7) use a special graphic. If you want to add or delete some from the list, mess with #2-#6. I think that will make sense when you view the code.


And that should do it :)


I'll leave that sample page up for a few days to make sure you have a chance to grab all the info.

[Woody]

TeeGee,

You are a star!! Thanks for coming to my aid:)

I have done what you suggested (see the test site link), but still have one little problem - which I am sure is easy to fix, but I don't know how:

I don't seem to be able to link the navbar gifts to the text. On my version of Dreamweaver (MX 2004) the CSS editor has the styles that I created such as .toptile and .maintxt in the apply styles view, but not the #navbar ones. I can see these in the edit styles view, but don't seem able to apply them from there.

It is probably a silly question, but I can't answer it!!

Thanks again for your help.:)

[TeeGee]

I use the same version of Dreamweaver so I know what you mean about not being able to apply the style. What Dreamweaver does is list the style classes only. Divs must be manually applied in the html (divs begin with "#" and classes begin with "." in the style sheet). But that's not your problem anyway because the divs have already been properly applied in the html.

Your problem is simply the location of the background images for the nav menu. I checked your style sheet and you're still using the one you had before, which is incorrect. Example: if you view your style sheet (http://www.woodenteacher.org.uk/stmweb3.css), look at:

#cfnavbar ul{
background: url(media/bgpink.gif) bottom center repeat-x;

The path to that piece of the nav menu background is media/bgpink.gif. But you don't have the images for the nav menu in a folder called "media". So you either need to change that url path to the correct location of the images or you need to make a folder called "media" to stick them in.

Or... I accounted for all that in the sample I set up, so if you place all your images into a folder called "images" and replace your style sheet with my altered one (http://www.tonyagoodnow.com/testing/stmartins/stmweb3.css), everything will work. The reason I say to place all your images (not just the nav menu ones) into an "images" folder is because at least one of your own images was set with an images/images/filename path and I changed everything to be just plain images/filename. And of course, the images folder needs to be in teh same location as the index page.

Hope that all makes sense!

[Woody]

:)
TeeGee - thank you so much. It is begining to make sense now!!! I have spent hours reading books, trawling through websites etc, and a few sentences from someone in the know and suddenly it is begining to click in my brain! I might even be brave enough now to try doing it pure CSS and drop the tables!

Thanks again for going out of your way to help me.:) :)