I am trying to create the below in css, and am stuck. Have been reading up about it cause i am just starting to learn layout in css.
I have a #nav div and then inside that i had the names of buttons but i don't know how to make them individual different colours. They dont even really need to be a roll over, just a button.
I just cannot get them in a nice row with their own colour.

Instead of re-writing your first class, have 2 classes on each box. One that defines the layout and one that defines colour. It's makes managing classes and updating content far easier.

For example, just say your box div class is called "topbox" , then having creating your colour classes, your code would look like this...
<div class="wrapper">
<div class="topbox orange">
Home
</div>
<div class="topbox green">
Products
</div>
<div class="topbox blue">
Fees
</div>
<div class="topbox purple">
Calculator
</div>
<div class="topbox red">
Contact
</div>
</div>

ie where colour classes are
div.red {background:#ff0000; color:#ffffff;}
div.green {background:#00ffff; color:#ffffff;} etc etc

Darren wins the efficient markup award for the day.

Right gave it a go with playing around using bits and bobs, looks great in DW however, when i upload it nothing is there apart from a few lines.

Here is the css

#nav {
height: 20px;
width: 780px;
}
#topnav {
width: 780px;
height: 20px;
}
/* Navigation */
#nav1 {
background-color: F08A05;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
height: 20px;
width: 1px;
}

#nav1 a {
padding:8px 15px;
margin:0px;
font-weight:bold;
display:block;
color:#fff;
text-decoration:none;
float:left;
height:12px;
border-top: 0px;

}
#nav2 {
background-color: 278741;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
height: 20px;
width: 1px;
float: left;
}
#nav2 a {
padding:8px 15px;
margin:0px;
font-weight:bold;
display:block;
color:#fff;
text-decoration:none;
float:left;
height:12px;
border-top: 0px;

}
#nav3 {
background-color: #468FCC;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
height: 20px;
width: 1px;
float: left;
}
#nav3 a {
padding:8px 15px;
margin:0px;
font-weight:bold;
display:block;
color:#fff;
text-decoration:none;
float:left;
height:12px;
border-top: 0px;

}
#nav4 {
background-color: #6D4D9F;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
height: 20px;
width: 1px;
float: left;
}
#nav4 a {
padding:8px 15px;
margin:0px;
font-weight:bold;
display:block;
color:#fff;
text-decoration:none;
float:left;
height:12px;
border-top: 0px;

}
#nav5 {
background-color: #EE4307;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
height: 20px;
width: 1px;
float: left;
}
#nav5 a {
padding:8px 15px;
margin:0px;
font-weight:bold;
display:block;
color:#fff;
text-decoration:none;
float:left;
height:12px;
border-top: 0px;

}

The nav1 nav2 etc being each button. As i said looks fine in DW when online though nothing there at all really.

Here is a link http://www.homeletfinance.co.uk/nav.php i mean as in nothing is there just a few lines :(

hey Jez,

I took a look at your css file and made some adjustments, for you to use or ignore, your choice:

---------------------------------------------------------------------------
#nav, #topnav {
height: 20px;
width: 780px;
}

/*___________________ Navigation ___________________*/
#nav1, #nav2, #nav3, #nav4, #nav5 {
float: left;
height: 20px;
width: 1px;
background: #F08A05;
font: normal 11px Arial, Helvetica, sans-serif;
}
#nav1 {float: none;}
#nav2 {background: #278741;}
#nav3 {background: #468FCC;}
#nav4 {background: #6D4D9F;}
#nav5 {background: #EE4307;}

#nav1 a, #nav2 a, #nav3 a, #nav4 a, #nav5 a {
float: left;
display: block;
height: 12px;
font-weight: bold;
color: #fff;
text-decoration: none;
margin: 0;
padding: 8px 15px;
border-top: 0;
}
--------------------------------------------------------------------------

okay so what the hell did I do:

- there were a lot of repeats for code. whats nice is that you can "combine" id's and classes that share similar traits, only to respecify the differences later. all of your non-link nav id's had the same traits, and the different ones are indented and re-specified after the properties the "group" shares. I hope this makes sense, and it shortens your code significantly, down to 30 lines, or more if you make additional enhancements. (ask if you'd like them)

some questions I had when I looked at this:

- is there a reason you don't have float: left; on your #nav1 input? the rest of them do?
- some of your background color hex values didn't have pound signs(#) so I added them
- on a personal note, I usually arrange my css in a specific order, with positioning and height/width attributes always coming first, as in my code they usually are the culprit and ones I'll have to edit first.
- indentation is awesome in css, especially if you have multiple selectors within a container (.div, .div a, .div a strong, etc). keeps them organized and its almost like cascading tags for css :)
- I use the "background" property personally no matter whether I use shorthand background (color, image link, positioning, yadda yadda) or just a color. easier for me to read, but *may* not be 'semantically' correct.

yeah so I hope this helps. don't want to be overstepping my bounds when I'm so new here :o)

I should have asked what version of Dreamweaver you are using. That's very important to see how it ends up displaying, as Dreamweaver can be a picky pain in the arse sometimes. Care to provide that? I'll also look at your test page tomorrow and see if I can whip up something real quick for you. I know you are learning...the web world is big, bad and scary. I'm still learning. We all are.

Most of the time with horizontal navigation lists, you'd use an unordered list, remove the bullets, and each list item would be a block, while the UL tag would enclose the whole thing. search on A List Apart, they have some very good links

Keep up the good work

Hi Jez!

You can't really rely on DW to display page correctly in a Design mode.
Most of time CSS design is broken in DW.
If you trying to use WYSIWYG for CSS it will not work with DW or any other software on a market. You have to switch to Code mode. 80% when I using DW i'm in code mode. It's doesn't really matter how it looks in DW. What really counts how it looks in a browser.

Cheers, DS