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!

Website Update -Banner

For the banner I decided to make it simple yet effective. The old one feels blurry and is just getting old. This time it's about to get real classy. Oh of course the new logo will be in it too.

I had a hard time deciding which font to use for the "Chess in the Library" text. After frustration and desperation after scrolling through every font I had, (I never realized there were so many fonts to choose from), I decided to stick with good ol' Times New Roman. It's formal, it's good looking, and it's readable.

After finishing the banner I decided to introduce it to its new "spouse" the navigation bar, as the banner will be spending the rest of its time on top of navigation bar. And yuck what a mess. The banner and navigation bar just don't look good together ---their colour just don't fit.

So I asked Ms. Navigation bar to compromise a bit, since we wanna make Mr. Banner feel welcome. I toned it's colour a bit to make it at least fit with the banner. Then I made the buttons 1/4 transparent(75% opacity) to blend in with the colours. After much work the two finally looked good together.

The new look has the simplicity I wanted. It looks more professional, and overall more "solid' than the previous banner.

I must mention here that the logo design is just brilliant. It's very artistic and stylish, yet effective nonetheless. Thanks the Yuan Dai again for this exceptional design.

Next up I'll work on the new CSS for our website, CSS is one of the most important elements of a good website. It allows the text, colour and layout of the website to be formatted. The old CSS for our website is very primitive, I'm hoping to change that and add more styles to our website.

Website Update -Navigation Bar

It's been a while since my last post, and during this time I've been working very hard on the website. But I must admit I underestimated the work to be done. So far I've only finished the banner and the navigation bar. It wasn't as smooth as it could have been, and in the past month due to Summer School the progress has been slowed down. But regardless I have the confidence to mark the deadline of this project as September 1st.

First of all from my last post I discussed the possibilities and my original intentions of making the navigation bar a drop down menu. Yet when it came to working on it, great difficulties emerged. There are two ways of doing it: JavaScript, or CSS. Both has their weaknesses, and either is easy.

JavaScript first of all gets the job down, allows complex graphics, yet is incompatible for all browsers. It would be unreasonable to give up compatibility for such a crucial component of the website.

CSS (Cascading Style Sheets) gives relatively more compatibility, but disallows complex graphics required. CSS allows mono-colored buttons with links on them, which basically dismissed the button designs I worked on. This I didn't want either as mono-colored buttons are effective when numerous. Considering how our website only needs 8 buttons and only 3 would be drop downs, such a design would be indeed absurd.

Facing these difficulties, I decided on not doing a drop down at all!

This is not giving up, because it is justified. I wanted to lose either compatibility nor visuals, and the necessity of a drop down menu for only 8 button could be questioned. Thus, I've decided on a single stripped navigation bar just like our first one.