I`ve fiddled around with an open source templates I found last night. It`s the only way I can learn about css by dissecting other peoples work! Hope that`s not a bad thing. They are open source templates

Ok, I`ve changed this one considerably, especially relating to the overall colour theme. I also added a css drop down menu.

I`ve got a couple of problems, firstly in Firefox I have a large gap at the top, right above the header, while in IE there is not gap. No doubt I haven got something wrong in my css!

Also, with the drop down menu. I wrapped the actual menu inside a container so that the menu looks like it is full width 100%. The container/background shows up fine in IE but in Firefox it is not there.

Besides the above, I could also do with some general thoughts on the colour scheme. This is for a geo-science website, with weather and geology information, maps and imagery.

I`m a big fan of dark themes, but I wondered whether it was too dark? Our last site was rather bland, being mostly a typical white background. You know, same ole same ole!

Don`t forget I`m a newbie at all this, please be gentle

Thank you kindly for your time.

http://www.science.codiachost.com/

All HTML source is open source. You can do with it what you want...especially if the template is given to you.

The problem with your header is likely that you haven't defined padding. Define padding: 0; on both your body tag and your header div in the CSS and that should solve your one issue.

As far as the menu goes, change this value:

.menuback {
    width: 100%;

width: auto; (which is what you had before) will try to guess automatically at the best possible width. Never let browsers guess anything; different browsers will guess different things and they'll almost always be wrong.

As far as your layout is concerned, if you want to keep it dark, at least keep your content area light and use dark text. It's the easiest to read overall (I'd cheat a little and make a very slight bluey-off-whitey background, something like #FDFDFF or somewhere along those lines.)

Hope that helped you.

Yes, I`m thinking I might switch back to a light background and just keep darker headers/footers with a drop shadow effect.

I tried defining padding to 0 (body and header) and also changed the menu background width to 100%, however nothing has changed in Mozilla.

Anyways, I`m off to bed. I`ll play around more tomorrow. Thanks.

A little bit more tinkering with the design. I`ve switched to a lighter background, white for the body and shades of very light grey for the containers and columns. I might use a gradient for these containers just to add something different. It still looks a little bland, however I`m trying to invision it with all our content, maps, thumbnails etc.

I`m still having trouble with the gap at the top of the header in Mozilla. Seems to be an issues with the H1 I am using inside the header.

Finally!! I`ve played around with the menu and added borders. The only thing is, I`m struggling with this. While the borders are fine for the drop down sub menu apart from the bottom, because it doubles the border thickness. The top menu bar looks odd because of the borders I`m using.

To get rid of the top gap add "margin: 0" to your H1 element.
Get in the habit of zeroing out margin and padding on ALL elements from the very beginning, that will give you a somewhat level field.

Do NOT use this kind of markup: <div id="spacer">. First, ID's MUST be UNIQUE, you cannot re-use them. If you must reuse rules, use a class instead. Second, to control spacing between elements, use padding and margins. That 'spacer' div is no better than the old spacer gif trick for tables.

On your menu, the hover BG color on the top level in IE is screwed up, it's dark blue with back text, so it's unreadable. To get the borders right on the sub-menus, particularly the bottom border on the last item, you're going to have to define a class to the list item and define the border for it. Something like this:

.last{
border-bottom: 1px solid gray;
}
then
<li class="last">..... </li>

Thanks LadynRed, lots of learning for me

I`m running IE7, the font colour shows as FFF for me on the top level the same for Mozilla. I`ll go check on the other machine which has IE6.

I would rather do away with the border on the top level (nav bar) and just use a border for the sub menu levels.

I`ll play around with what you suggest, thank you for your kind help.

That layout is much nicer, Bob. It's cleaner and far more "sciency-looking" to me. A pic or two in the top right and I think you nailed 'er.

Thanks Adam

I getting there! I`m sure it won`t be long before I make a nuisance of myself around here

Yeah, for the header I`m going to make a nice logo and locate that to the left. Not sure what to do about the large empty space to the right. Obviously being liquid design, whatever I put there cannot be too large.

Have to go check on our other machine. LadynRed was saying the menu colours are all messed up. I don`t have IE6 on here, only 7 and Mozilla.

I`m sure it won`t be long before I make a nuisance of myself around here

Hey, that's ok ! IMO, the only stupid question is the one that is NOT asked

Originally Posted by LadynRed

Hey, that's ok ! IMO, the only stupid question is the one that is NOT asked

Thanks, are you still seeing the dark colours on the drop down menu?

I`ve just installed MultipleIE so I could check it own in various IE browsers, the fonts seem readable to me. They should be white.

How does the overall theme seem to expert eyes like yours? I`m a little bit torn over the white background. I don`t know, it just seems a little too `empty`.

It's looking good in IE 6 now
I think it looks fine with the white, the layout's good and I think it works for your subject matter.