CSS Competition #1: Ozzu Look and Feel

  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2123

Post 3+ Months Ago

Ok Ok Ok, I have to stop doing this LOL, but I managed to work the bugs out in IE, FF and Opera ( I had to flip the design back around the normal :sad:).. So now I am submitting it.

If anyone spots any other bugs can they please let me know I have done my best too work them all out, but I could have missed a few.

Validated CSS - http://jigsaw.w3.org/css-validator/vali ... medium=all

CSS file - http://electrafiying.com/ozzu/style.css

Design - http://electrafiying.com/ozzu/

*I am very nervous because this is the first totally CSS forum design I have ever done and it took me forever lol*

Comments are welcome :D
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Holy crap! We have an entry...and it ROCKS! :shock: :D :shock: :D
  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2123

Post 3+ Months Ago

Thanks dM! :D
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

jesus Benat it's so fantastic! I love love love it.
only one thing I can spot but it's in IE6 so maybe not relevant - all your left-side divs are missing about 3 px off the bottom. it still looks ok though - nothing messed up too badly......

but the design is fantastic! great work. can't wait to get mine up................................... though it ain't gonna top this.

way to go girl.
  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2123

Post 3+ Months Ago

Thank you so much C, much appreciated girl. I was determined to not change the design too much because I love Bigwebs light design *but* I needed to add my touch to it and as I told you before I didn't want it to be too girlie, just designy.

I am telling you though, this comp had taught me SOOO much about CSS, I feel alot more confident designing with CSS now, then I did before, maybe because it took me forever to get it to work the way I wanted it to work :lol:
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

ok here it goes...... still a beta though, needs ironing in a few spots but I really needed to see it online.....

lessee now - W3C validation here

actual entry here

css here

if someone can actually tell me how bad it looks in IE7/ Opera I'd be most grateful.... I've only got access to FF and IE6 here, so I'm flying blind.......

//benat - yes, it's very designy, and not at all girly. and I know what you mean about the layout - you'll see I didn't mess with it myself. messed with other things though.... lol

and yes it's taught me a mountain. still teaching me in fact. I dream of it (padding nightmares.........)
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6241
  • Loc: Seattle, WA

Post 3+ Months Ago

I love the spatula :)

Here's a screenshot using Safari 3.0.4 on my PowerBook. You can also use this as a good indication of what it will look like in Opera.

Image
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6800
  • Loc: Martinsburg, WV

Post 3+ Months Ago

In IE7 you have a horizontal scroll bar using 1280x1024 resolution same in FF for that matter.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Guys...er...Men! C'mon! The chicks are kickin' your butts! :lol:
  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2123

Post 3+ Months Ago

Ohhhhh NICELY done C! I absolutely LOVE it!

It came together beautifully!
  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Posts: 6376
  • Loc: twitter.com/unflux

Post 3+ Months Ago

holy.... Image

uhh.... Image

wow.... Image

and.... Image

VERY NICE BOTH OF YOU LADIES! Image Image Image
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6241
  • Loc: Seattle, WA

Post 3+ Months Ago

Both of them look fantastic! Nice job both of you!

Alright, it's time for the men to fight back here :)

Here's my entry in its current state... I still have some bugs to fix, some sizing and shading issues, etc.

Here's my entry, here's the CSS, and this shows how nice and valid it is!

Now for these gosh-darned bugs... Yarggghhh!
  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Posts: 6376
  • Loc: twitter.com/unflux

Post 3+ Months Ago

damn spork that is dead sexeh Image
  • xfahmix
  • Proficient
  • Proficient
  • User avatar
  • Posts: 326
  • Loc: Cork, Ireland

Post 3+ Months Ago

nice one spork. Just noticed about this competition today. It has been a while since I get my hands dirty with CSS :) I'll probably joining you guys later. can't wait to see others submission.
  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2123

Post 3+ Months Ago

Nice one spork :D Look great!

The girls are still winning though :P
  • spork
  • Brewmaster
  • Silver Member
  • User avatar
  • Posts: 6241
  • Loc: Seattle, WA

Post 3+ Months Ago

Oh we'll see about that! R_T and a few others still have yet to submit theirs ;)
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

spork - thanks for the screenshot - it looks great from what I can see! aligning nicely.... so it's only IE that's the problem (thought it would be of course) - and have to kill that scroll bar.

cool entry, by the way! clean and traditionalist..... like the colors. I plan to do a bit of digging through your code to see how you did some things...

personally I'm waiting for R_T, Jameson, and Breeze.... really curious what the boys will come up with..... and of course, I presume dM is going to put up his solution - even if it isn't part of the official competition.......... cuz that had some real promise, from those initial screen shots..............

gosh darn it this is so fun!
  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2123

Post 3+ Months Ago

Its all good Spork, all in good fun.

So Bigweb and dM what is going to happen with the winner? Is it just for bragging rights? Or is there going to be something made that they can put in their sig to deem them the winner of the comp?

Personally I can't wait to see Breezes.

C'mon boys! Lets see those entries :D
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6800
  • Loc: Martinsburg, WV

Post 3+ Months Ago

Competition Rules wrote:
The winner may have their style added to Ozzus' list of themes along side the Smart Dark, & Light themes, which can be chosen from by over 32,223 members!
  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2123

Post 3+ Months Ago

Yeah I knew that bit Grinchy lol
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

I have to admit, I'm impressed by every single entry so far. I'd be glad to have any one of those designs added to the theme options. (I am kind of favoring that robot with the spatula, though...)

Ok, so here is my humble attempt. I had a lot of fun with this over the past couple of months and learned a ton about CSS along the way.

Here is my entry with CSS that validates.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

UNFLUX wrote:
damn spork that is dead sexeh Image


Ctrl-A, Ctrl-C, Ctrl-V

That goes for Jameson too!
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

whoah! how did you do that rollover? neat........ I see the real fun with this competition will be scavenging through everyone's code once it's over to pick up new tricks.............

it keeps fascinating me how different all our takes are... we're working from the same basic code, and yet the things we produce resemble each other not at all.

anyhow I'm glad the spatula seems to be being taken in the right spirit - I did do a proper dragon design - like so -

Image

but I thought spatula just has more heart somehow.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Benat wrote:
So Bigweb and dM what is going to happen with the winner? Is it just for bragging rights? Or is there going to be something made that they can put in their sig to deem them the winner of the comp?


We didn't really talk about awards, but I like the idea about the sig. I would imagine actually implementing a look and feel would be up to BigWeb's available time, etc.

But YES, bragging rights. So far, the competition is pretty tight with some damned talented people.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

celandine wrote:
whoah! how did you do that rollover? neat........ I see the real fun with this competition will be scavenging through everyone's code once it's over to pick up new tricks.............

it keeps fascinating me how different all our takes are... we're working from the same basic code, and yet the things we produce resemble each other not at all.

anyhow I'm glad the spatula seems to be being taken in the right spirit - I did do a proper dragon design - like so -

Image

but I thought spatula just has more heart somehow.

That proper dragon is pretty sweet, too. I wish I had your drawing skills.. But yeah, the spatula robot has a lot of heart. :)

The rollover effect on the forum rows doesn't work on IE6 because IE6 doesn't support a hover state on anything but links, but the good browsers seem to do just fine with it.. here's the code I used:
Code: [ Select ]
    .forumrow:hover{
        background:transparent url("images/catbackover.png") scroll repeat-y 0px 0px;
        }
  1.     .forumrow:hover{
  2.         background:transparent url("images/catbackover.png") scroll repeat-y 0px 0px;
  3.         }
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

I must say to me so far Benat's design looks cleanest.
but yes, tight competition..... dM, when's yours coming up?
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

and the transparency is a png24? I must try that out... looks wicked.

drawing skills nix - scavenging skills. the dragon is a free-to-use wingding from Dafont. it's not what you know, it's who you know ;)

anyhow you seem to be doing just fine on your own - your entry rocks! (one thing - a tiny teeny niggling little thing - I'd make the bottom corners of the sidebar rounded too......)
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

celandine wrote:
and the transparency is a png24? I must try that out... looks wicked.

drawing skills nix - scavenging skills. the dragon is a free-to-use wingding from Dafont. it's not what you know, it's who you know ;)

anyhow you seem to be doing just fine on your own - your entry rocks! (one thing - a tiny teeny niggling little thing - I'd make the bottom corners of the sidebar rounded too......)

No transparent pngs were used in my entry at all. I didn't want to have to deal with the hacks to get them working in IE6, so I used solid pics only.

I actually did design a curved bottom for that sidebar, had it all ready to go, but in the end I couldn't find a free div to put it in!
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

jameson555 wrote:
I actually did design a curved bottom for that sidebar, had it all ready to go, but in the end I couldn't find a free div to put it in!

lol! It looks good this way as well...
jameson555 wrote:
No transparent pngs were used in my entry at all.

so what does the actual image (images/catbackover.png) look like? and what makes it transparent, just the background:transparent command?
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

celandine wrote:
so what does the actual image (images/catbackover.png) look like? and what makes it transparent, just the background:transparent command?

This is the image right here.

It's actually not transparent at all. It just looks like it is I guess because I used layer transparencies in Photoshop when I designed it. The background:transparent just keeps there from being a flash of a solid color while the browser loads the image.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

Post Information

  • Total Posts in this topic: 193 posts
  • Users browsing this forum: No registered users and 7 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.