CSS scriptygoddess challenge
There is a mob of designers praising the power of CSS. And while I think there are some things that CSS can do - I still believe that it can’t do *everything*. I understand and can appreciate the concept of “keeping content seperate from design” - however I still face the fact that I want my webpage to do something, and CSS seems to fall short.
So, I want to redesign this site. I came up with the design already. I know how I want the page to behave. But I simply can’t seem to figure out a way to get a CSS-only layout to do it. What I DID do, is create a half-table/half-CSS layout - and that DOES do what I want. I will grant you “under the hood” it’s not pretty. But for the most part, people are seeing the “presentation” version, and they’re not viewing source to read the web site!
I know there are a number of CSS-experts who happen by here - and I’m interested to know if you think you can do it. Can you create this layout - with CSS. But before you jump up and say “of course I can” - let me tell you some of the ground rules. Aside from the basic “look” of the site - I want it to be flexible in that if you shrink your browser down really thin - I do NOT want elements on the page to start breaking apart. I want the width of the main content to stay a minimum width (the minimum width of all the elements before they would start to break apart). ALSO, I want the main content and sidebar to EXPAND as the user expands their browser so that if they have a large screen - they could technically view a wider column of text.
If you can figure out how to do that - then I’ll create the site with the code - and you’ll get credit on the site (in a “credit” box - like I have now) for coming up with the CSS on the site. (If there’s something else you’d want, that’s not unreasonable 
then I’ll see what I can do).
Update: I guess one additional question I should ask is those with larger browsers - how many of you always view your sites with the page *MAXIMIZED* - or do you scale your browser manually to what feels comfortable for each site. The last is what I do - which is why I only noticed later that my new design - with those particular restrictions - if you maximize your browser - the width of the main content is a bit too wide (*IF* you have a large monitor) The reason why this is important is because if those with larger monitors DO maximize their browsers - then I”ll have to change my thinking to focus on a FIXED WIDTH as opposed to a FLEXIBLE width. In either case - I still would not want something as simple as a long URL posted in the comments to break the look (ie - sudently the comment box in the sidebar stretches further than the header above it….) Clear as mud, right?
update 2: I think we have a winnah!! 
Nice job Raena!!! (Now it’s time to start getting the templates in order!)
February 2nd, 2004 at 12:38 am
Scriptygoddess [a.k.a. Jennifer] has issued a challenge: So, I want to redesign this site. I came up with the design already. I know how I want the page to behave. But I simply can’t seem to figure out a way…
February 2nd, 2004 at 5:12 am
Hm, this is quite the challenge. I can get compliant browsers to do it just fine, but as usual IE6 is crapping its pants.
February 2nd, 2004 at 6:48 am
In language a non-designer can easily understand, and with an example to demonstrate her point, the Scriptygoddess is planning a…
February 2nd, 2004 at 8:24 am
OK, here’s what I managed after a few hours playing. it mostly works in IE6 (banner is still acting weird), works fine in IE5/Mac Mozilla (of course) and Safari, and I haven’t had a chance to try it out in IE5/Win — but it’s a start. basically all it demonstrates for now is that it *is* possible to have a flexible layout in CSS that doesn’t break, thanks to the wonders of CSS’s min-width attribute and a dash of JavaScript.
Oh, and it’s valid XHTML!
February 2nd, 2004 at 8:34 am
I’m officially throwing in the towel on this one. The more I stare at it, the more it makes my head hurt.
February 2nd, 2004 at 8:36 am
I’m a recovering maximizer. There is actually a problem with this habit, because when text lines stretch across the vast expanse of a 1024+ monitor, they really get too long to scan. By the time your eye finds the left edge of the next line, it may have gotten lost. It’s subtly fatiguing even when you can do it (This is why books in small print and newspapers are in columns - it’s easier to track - but multiple columns don’t work on web sites - they make the reader scroll back and forth).
I think I tend to maximize (unless I’m really working on two things at once) because I don’t want to see all the other crap I have open when I focus on something. Your current layout ends up with a big white gutter when I do this, and I actually think that’s the right thing to do. My own web pages tend to end up with everything in a table that’s just under 800 wide. Yeah, I’m not real good with CSS…
February 2nd, 2004 at 9:05 am
CSS takes some getting used to. Looking at table based designs makes my head hurt now, too — I used to be able to do them off the top of my head, but now they’re just confusing.
February 2nd, 2004 at 9:10 am
I came up with a CSS-based design that looks as close as I can get to a tables-based layout at Scriptygoddess. It wants tweaking and more testing, but the principle’s there — a nice, robust CSS layout is absolutely possible!
February 2nd, 2004 at 10:05 am
Raena - looking pretty good. Only a few things I noticed - the bottom of the page, the border is a little funky (I can send you a screenshot - I’m using IE6 on Win2K)
Also - I can email you the photoshop file for the logo… but it’ll have to wait until I get home from work later tonight.
Very impressed! I can’t wait until I have some time to comb through what you did so I can understand it!
February 2nd, 2004 at 10:02 pm
Raena (and anyone else who’s playing with this and needs it) - here’s the photoshop file I used for the layout.
(Also - I’m not sure the PNG is going to work - it doesn’t seem to be displaying at all for me..??)
February 2nd, 2004 at 10:07 pm
Oh, for pity’s sakes. Every other browser knows how to do PNG just fine.
I’ll think of something, thanks for posting the photoshop file!
February 3rd, 2004 at 12:06 am
hm. Is this better? I think I b0rkified something overnight.
February 3rd, 2004 at 7:44 am
WOW. That just totally amazes me.
I still REALLY wish I could move the logo over the line… you may kill me, but I may still end up using a table for that one part. (I’m just being stubborn. I just hate the idea of having to modify a design because of a limitation in the medium.)
February 3rd, 2004 at 7:56 am
Heck no, that’s totally fine
I have a couple more tricks up my sleeve but we’ll have to see about those… *grinny*
February 3rd, 2004 at 9:52 am
OK yay! I *think* I managed to get the border thing happen happily in IE6/Win, Safari and OmniWeb, three flavours of Mozilla, and Opera 6-Mac. (!) Opera 6 won’t put everything near the bottom of that border area like its little friends, but it ranges them up the top instead — still looks ok so nobosy will be any the wiser. Nyah hah hah.
Still no guarantee that it works on IE5/Win, though. I just don’t have the equipment to test it.
February 3rd, 2004 at 2:22 pm
This is EXCEPTIONALLY good work. Great job Raena!
February 3rd, 2004 at 8:42 pm
Munch munch crunch… that’s me eating my words ;0)
WOW WOW WOW!!! Raena, I think I’m going to dub you the official CSS-goddess!! There’s only one last issue… the current layout seems to be missing the curves on the other side of the sidebar elements… (Picky picky - you can start rolling your eyes now)
I’m assuming that’s no big deal - so I think I can say at this point that you win the challenege!
I see you have a business site as well - would you prefer I link to that? Or your blog? (I will warn you though that it may still be a few weeks before I get everything converted into the new design (will probably have to do it piece-meal - one template at a time… better than rushing through it in one exhausting night! LOL!)
February 4th, 2004 at 12:46 am
Did you know you can set minimum and maximum width in CSS? I didn’t. Learning something new each and everyday….
February 4th, 2004 at 1:13 am
wee!
All curvy now.
Please feel free to harangue me any old time for assistance or questions or whathaveyou.. in particular there are no styles for other page element like comments and so on.
It desperately wants looking at in IE5/Win, though. I’m sure you have a fairly significant number of readers on that one, and its CSS support is not too hot.
February 4th, 2004 at 9:05 pm
Ah, Raena! I’ve known you for many moons and you always amaze me every time.
I need to pick your CSS brain. I’m still doing the table/css hybrid often when I don’t want to deal with cross-browser bizarreness.
Again, you rock.
February 5th, 2004 at 3:55 am
Aw, you’s a doll, Joelle.
And you know where to find me for brain pickins!
February 15th, 2004 at 1:00 am
I came up with a CSS-based design that looks as close as I can get to a tables-based layout at Scriptygoddess. It wants tweaking and more testing, but the principle’s there — a nice, robust CSS layout is absolutely possible!
February 19th, 2004 at 9:44 pm
I know this is a little late, but I found this tool here that automatically creates css structure for your website. You can choose from full page, 2 columns, 3 columns and more.
Definetly a good learning tool
http://www.inknoise.com/experimental/layoutomatic.php
Have fun!
March 9th, 2004 at 2:51 am
Haven’t really had a chance to follow the development, so don’t know if you got the png showing. In html, MS suggests:
November 27th, 2004 at 3:52 pm
i just wanna thanks u guys.. i am really happy to found out about the link that Chungh showed. it made my day. i’ve been working on this for months and months. couldn’t figure out. but finanlly i got it..
tnks again.