Comp 4 : CSS Design : Food Fight Games

[entimp]

Our next comp!
Our comps have always been image based in the past, although all good and well... we have decided to test you all in a different format.

CSS or Cascading Style Sheets.

First up, we have a different prize up for grabs this month. Jason has kindly agreed to donate one of his templates. This will be negotiated between the winner and Jason himself.

So CSS or Cascading Style Sheets...

I hear a chorus of "You what!".

Some of you will already be CSS gurus and some may not, have no fear whatever camp you're in. For those of you who have no knowledge of CSS I have kindly provided some great links to get you started. As follows:

Our very own Peg has wrapped it all up for you, CSS in a nutshell. A great place to start your journey if you are new to this game.
http://www.htmlforums.com/showthread.php?t=39373

HTML Forums also has a dedicated area: Cross Platform layout!
http://www.htmlforums.com/forumdisplay.php?f=5
Feel free to ask questions in there regarding any issue of CSS.

An external site worth checking out for some great tutorials is run by one of our members: Joe2torials run by Joe2Kiss.
http://www.joe2torials.com/

Also have a look another source of tutorials at the web monkey site.
http://webmonkey.wired.com/webmonkey/authoring/stylesheets/

Good luck with the above!

So what's the score?
The score is the development of the following code. It is written in a very basic way. Your job is turn this horrible nasty code into a work of pure CSS art. It doesn't get any easier than that does it! If your new to this, take my word for it, CSS is a doddle.

The rules: The Food Fight as kindly described by Kemikalfire will be run as follow.


Only two entries per person.
You may use images in the layout. Remember this is not a graphics comp. Your use of images will be judged on the CSS related to them. The use of FLOATS for example.
You have to keep the format of the pre-written HTML. Header, footer, content and side-nav as they are already. The width of the creation has to stay at 750 pixels.
You may remove the TABLE structure in order to use a more complex CSS layout. Keep the same format though.
Please also provide a screen shot of your creation.
Upload your code as a *.txt file, I am sure you can upload multiple files now with the new forum setup so please also post your screen grab in the same post. Do so in a reply to this thread.
A new method of deciding on the winner will be experimented in this comp. The mods and admin will put a shortlist together of their faves and then will decide on the winner. Why? Because this isn't a simple 'that looks nice' judging process. We need to look at the experiance of the user and code you have used in relation to that.
Feel free to add more text, links etc to the page... adding some humour will only make the comp more fun. Remember keep the layout as mentioned.
Feel free to add links to the code so that you can implement pseudo styles for example.
Closing date is : The 24th day of June 2005


<table border="3" width="750" bgcolor=red cellpadding="3" align="center">
<tr>
<td colspan="2" align="center"><font size="6" face="Helvetica, Arial, Verdana" color="555555">Welcome to the Official Annual Food Fight Website.</font></td>
</tr>
<tr>
<td width="150">home<br><br>health and safty<br><br>food vouchers<br><br>guestbook<br><br>forums<br><br>cheap food links<br><br>venues<br><br>bananas</td>
<td width="600">The Official Food Fight began in 1923 in Mechanicsburg, a small town outside of Springfield, Illinois. It soon spread to the surrounding communities, and became a participant favorite at the local county fairs.<br><br>In 1934, a down on his luck chicken farmer, Martin Lewston, organized what is considered the first competitive Food Fight event.<br><br>There were 3 events: the Raw Egg throw, the Boiled Egg throw, and the Great Depression inspired Dust Toss. Official Food Fights have since evolved into an international extravaganza with competitions taking place in 11 different countries around the world with over 120 recognized events.
<br><br><br><br>

A Few Recognized Sports:<br><br>
Banana Peel Flipping, The Hefty Hamburger Heave, The Jello Long Jump, The Jello High Dive, Synchronized Spaghetti Toss, Group Buffet Free For All, Mixed Pair Frozen Meatball Juggling, and many more…</td>
</tr>
<tr>
<td colspan="2" align="center">about :: photos :: how to host a food fight<br></td>
</tr>
</table>

Special thanks to Kemikalfire for putting together the text for this comp.

Good luck everyone and let's see some fun entries!

[betsy]

Hello!

I am new to this forum. I saw this contest and decided to sign up. Nice to meet everyone.

Here is my entry. The data files are posted as .txt as requested. Please change index.txt to index.html and styles.txt to styles.css. I have attached a screenshot too as requested.

[ladybug]

This challenge is perfect. I have been trying to force myself to use CSS rather than tables with sites I know will be viewed for the most part on somewhat current browsers. I say "force myself" because the tendency is to do it the familiar, thus quicker, way. I am not really clear yet as to exactly WHY tables are out and CSS is in, except maybe in the cases where more precise flexibilty is needed. But if this is the wave of the future.... then I am gonna ride it.

I'm having a great time with the challenge and keep finding more and more ways to use the css. This has been a good thing, forcing me to learn this stuff finally! The humor in the subject matter keeps it fun (Kemikalfire must be a "hoot" to work with).

One little question........ is everyone else thinking like me, to wait till the last minute to post an entry so that everyone else can't see and use the same coding ideas.? I am feeling a bit cheesy thinking this way since sharing code has always been so ingrained in my thinking. Guess I'll wait and see when everyone else begins posting.

[Pegasus]

That sometimes happens, Ladybug. People get afraid that someone will "steal" their ideas. You are permitted two entries, so what I've done in the past is post one entry, wait for a bit and improve on my second entry. *g* Back when I was allowed to compete, of course.

The other problem is that some people think they can't create a 'good enough' entry. That's not true. I have yet to see a truly ugly entry in any of the contests I've entered or seen in the past 3-1/2 years. There have been entries that are quite skilled and those that have been less so, but never 'ugly' or 'not good enough'.

This particular contest is not only about appearance, but about using CSS and getting into the habit of using CSS. At the very least, using CSS to code your font information and appearance.

And yes, Kemikalfire *is* a hoot to work with. Some days, keeping a straight face around her is hard. ;)

Peg

[ladybug]

Thanks Peg for your encouragement. I guess if Betsy was brave enough to post her first go at it, then I should be too. Maybe this will get the others going with their 1st postings too... right Betsy (are as curious as I am what everyone is coming up with)? Then as Peg suggested, I'll save the more detailed version for the final post.

That said..... here ya go.

[coothead]

Hi there all,

while the problem forums were quiet this afternoon, I had a go at this competition. :)
As the contents were rather humourous, I thought that a sombre layout might be
rather appropriate to compliment Kemikalfire's wit.

[_Aerospace_Eng_]

Here is my first go, its pretty basic, but it gets the job done. My next attempt might be more extravagent. :rofl:

[entimp]

Nice one guys... let's see a few more come in, If I get time I will enter one. As usual mod entries don't count for anything but fun.

[[ArcanE]]

First Entry,

Basic layout, mostly CSS, only 3 images.

Maybe if i find the time i'll do another entry with a little more gfx :)

[fmx]

is there an 'official' browser that the judges will be using?

[kemikalfire]

awesome work guys...I am really impressed, keep the entries coming! as far as the official browser...I don't know...I'll probably be looking through IE on my windows machine, but I know peg has macs, and entimp likes firefox or one of those....we'll discuss it and get back to you. :)

kate!

[fmx]

heres my first entry... the design caters to ff.

[kemikalfire]

is there an 'official' browser that the judges will be using?


ok, so what I am getting from the other mods I've talked to is that there won't necessarily be a particular browser that we're going to use to judge...it'll be more important that the code validates with W3C. other mods: feel free to correct me if I've misinterprited.

kate!

[kemikalfire]

show off your mad css skills, and let's keep the entries coming in!

kate!

[Pegasus]

No one else knows CSS? How come? It's not that difficult, you know. Give it a try. Put an entry in.

Peg

[_Aerospace_Eng_]

I know CSS, but I am waiting till the end to reveal my latest creation. Its alive, its aliveee!

[sharpdust]

Anyway you could get a different prize? To be honest, I prefer to make my layouts myself and to offer someone else's layout isn't very enticing.

[ladybug]

Mine is still on the operating table and the doctor is out playing golf.

[Pegasus]

Sharpdust, we have different prizes for the different competitions. A template is the one we'd decided upon for this one. Sorry.

Ladybug, your signature image is a bit too large. Check out:
http://www.htmlforums.com/showthread.php?t=19248

Thanks.

Peg

[kemikalfire]

just over 3 weeks left to go...get working on those submissions so we can all admire your crazee mad CSS skilz :) hehe

kate!

[_Aerospace_Eng_]

Here is another layout I have done.

[inet]

Here's what I have so far....
By the way, this was fun!

[comprookie2000]

I may have broke the rules, but here it is;

[ladybug]

As the deadline approaches here, as is my usual, I have put off finishing til the last minute. You know how it is... deadlines are no fun unless you have to put in a few all-nighters at the last minute.

But I have one question before I buckle down and finish this thing. Some people are including images and some not. From the rules, I gathered that images are optional and only relavent if the css affects them. I stuck some images in, but didn't bother to take extra time to make them perfect since imperfections in the images don't count (right)?

I might add that even though I haven't finished my contest entry, I have been busy using all this css stuff that I have learned because of this contest. I'm saying this for the benefit aff all you other css newbies (like me). For the first couple of weeks it looked so confussing and a grand waste of my time in serious projects, just a new toy to play with. But the more I forced myself to use it in projects at work, the more I realized it's beauty. Now I am beginning to wonder how I ever got along without it. I knew it was there..... I saw Dreamweaver wanting to stick it into the code, but since I insist on having total control and understanding of every code line, I was afraid to let Dreamweaver add it. To justify this, I used the excuse that older browsers can't read it, so why take the chance. Then one day this past winter, I was asked to make an edit in a web site with over 175 pages in it. What should have been one simple 5 minute edit, meant many hours. One of my colleagues said (with one of those I-told-you-so smirks) why didn't you just use a style sheet in the first place? That was it, I knew it was time to stop pretending css was not important.

I feel that I am beginning to move past the "css newbie" stage and into the "this is cool-I want to learn how to push the envelope now" stage. I still have a lot to learn to catch up with the guys like Aerospace, but, hey... thanks to whoever came up with the great idea for this contest's subect matter, you made me tackle something that it was high-time I learned.

[Pegasus]

*lol* Ladybug, you learned about CSS in the same way I did. The hard way. Isn't it nice to know that it doesn't hurt that much to use it? That it actually makes things easier? I have 300 pages that needed changing. CSS makes my life *much* easier. ;)

To answer your question about images, no, they don't have to be "perfect", but they do have to give us some serious ideas about how the page will be laid out.

Peg

[_Aerospace_Eng_]

Thanks Ladybug, for the compliment. I have found the best way to learn is to try to fix other peoples problems.

[kemikalfire]

alright guys, less than a week left on this competition, so get your entries in! The contest closes this saturday, so no waiting until the last minute afraid someone is going to borrow your code! :)

kate!

[fireben]

Hi guys,

here's my entry, it doesent look all that but i hope its not going to disgrace its self as iam sure that the code is sound. (relatively sure) :)
Ive just recently been looking into CSS and this was the perfect excuse to get more into it. Great idea guys!!

I've not been leaving the posting of my entry to the last min, i've only just finished it.

Ive been checking the page in both Firefox and IE, it works just fine in Firefox, EI however dosent work all that well. The basic layout is fine but the rollovers dont work at all. Whether this is due to a EI bug or my code i dont know , so if anyone has anyidea's plz let me know.
So to get the full effect i recomend veiwing it in Firefox. I have used absolute urls for the src of all the bg img's so should look the same as the screen shot.

Its only the one page, all the links lead to random sites.

So as i said if anyone has anyidea's plz let me know, good luck all.
pete. 8O)

[fmx]

here is my final.
xhtml valid
css valid (if you ignore the mozilla.css)
link (http://brewtownbeats.com/html/comps/ff/foodfight.html)

[ladybug]

I love last minute rushes...LOL. So the rules say "Closing date is : The 24th day of June 2005". Does that mean midnight on the 24th or 12:01 on the 23rd.. and what time zone? Priortizing here as work is like the week from hell this week.

[Pegasus]

We'll make it one minute after midnight on the 25th of June - GMT. That puts it at 8pm EDT, 24 June.

Peg

[ladybug]

Here goes.........

[Pegasus]

The entries are closed now. Our thanks to all who entered. Now I can put the mods to work deciding which one is best done.

Peg

[scoutt]

our appologies to the entries. it has been a little hecktic behind the scenes the last 2 weeks.

with that said, I would like to anounce the winner.

the Winner of the Comp 4 : CSS Design : Food Fight Games is....

fmx with his second entry.

good job to all contestants.

[kemikalfire]

congrats FMX!!

kate!