CSS container

In the past week I have been working on CSS containers. Though there's still tiny visual problems with it, I think the general format is completed. Here is how it looks.

This container thingy is a more dedicated way to organize a website. Using these containers instead of tables allows for better visuals and more formatting options. As seen here we have a nice bar at the top with the heading, and round edged boxes with drop shadow, everything looks better.

However as for now the text is too white compared to the banner and the navigation bar. This is because the banner and the navigation bar are done in photoshop, these texts are not purely white and have darker stuff around them. Especially for the navigation bar where I added a glow effect which makes it look a little yellowish on the outside. The heading on our CSS container on the other hand is pure white (#FFFFFF) and looks rather too sharp compared to the banner and the navigation bar.

I have been playing around with the colour, trying #DFDFDF and #EFEFEF, and even using the color picking tool in photoshop. However because our header only allows for one single color, this is not going to be easy. For reasons of colour consistency I might have to change the navigation bar or the banner a bit.

Also I changed the background colour of the website (the sides of the content) and made it darker. Now it fits the colour of the banner and logo perfectly. Visually speaking repetition of the same colour gives a sense of coherence and unity crucial for making a website (or any piece of art) visually pleasant.

And finally for the big table I took out the cell padding. This takes out the line outlining the entire table. Then I added a frame, which is basically a thinner version of the cell padding. It's color is also different. However as I tested the frame on different browsers the results were indeed very different. In Chrome the border has only 1 colour yet in Internet Explorer and Firefox the border has two colours(bordercolorlight and bordercolordark I am supposing).I will play around with the frame and the border colours and see how it looks.

So now that the CSS is done, all there's left is putting the contents inside our new CSS container and the main website visual changes are complete!