Grow your CSS skills. Land your dream job.

Links of Interest

Published by Chris Coyier

Photoshop Cryptoquote Challenge

photoshop-cryptoquote-challenge.jpg
This has nothing to do with CSS, but I thought it might be a fun little for any Photoshop gurus out there. Someone spraypainted a message on the side of one of my neighbor's houses. Before I could read what it said, the message was painted over. But you can still sorta read it, so I thought I'd snap a picture and see if I could Photoshop it and make out the message. I think I might have it figured out...but check it out and let me know if anyone else can solve it. You may also need to bust out your Wheel of Fortune skills on it. Don't worry, I don't think it's too racy. Download original here.

 

No div, no float, no clear, no hack

no-float.png
TJKDesign has an example page up on a CSS layout that uses no divs, no floats, no clears, and no hacks. I take issue with many of the things presented here. For one thing, what's wrong with div's? I know people can have problems with divitus (using div's for everything), but sometimes a div makes perfect semantic sense. Breaking the entire page into a big OL with sub OL's is hardly semantic. Reminds me of tables within tables. For another thing, I don't see what's so wrong with floats. I know about the IE double margin thing. Big deal. Clearing floats can be a little unsemantic but it works and it's valid and it's nothing to re-create your entire layout over. For another thing, it says it's hack free but clearly uses a hack right in it's own header. You might argue that conditional comments aren't hacks but I feel they are at least in the same genre. Still, despite all these things, I gotta admit it does a damn good job of what it says it does. The layouts are very solid.

 

reForm: CSS Form Design Template for Any Layout

reform.png
Joe Lippeatt has an article up at CSS Zone with code samples of how to make forms fit any layout. The form elements themselves are fluid width, so you can plug them into any size area and they will adjust to make the best use of that space. Wide layouts will benefit from some form elements being along the same horizontal row, while narrower layouts will wrap those form elements down into a single column layout.

Comments

  1. It looks like “When I give food to the poor, they call me a saint. When I ask why the poor have no food, they call me a communist.“

  2. Dang, what’d that take you Erika, like 10 minutes? I “whited out” the answer just in case anyone didn’t wanna see it solved just yet. Highlight the comment to see the answer.

  3. LOL Sorry, Chris! I was pulling out every photoshop trick I knew for that one! LOL

  4. “When I give food to the poor, the call me a saint. When I ask why the poor have no food, they call me a communist.”

  5. Oh, sorry. I didn’t see that you had already killed one answer. Either way, if anyone wants to know how I did it, I just opened the image in PS, used Smart Sharpen to remove most of the blur, and Shadow/Highlight to distinguish a few words. A well-placed google search and I had the rest.

  6. Good work, both of ya =) That’s exactly what I came up with. Pretty weird thing to spraypaint on the side of a house…but then again Portland is pretty weird.

  7. I mentioned this quote to a buddy of mine and he had already heard it — apparently it’s used in Civilization 4 when you discover Communism.

  8. TJs example is cool but i really do not think it will catch on. Its an abuse of using Lists, just as bad as using tables for styling!

  9. You said “Clearing floats can be a little unsemantic but it works and it’s valid and it’s nothing to re-create your entire layout over.”

    You didn’t get the news about the effortless clearing of floats? Just add a width and an overflow to the element that needs to be cleared and you’re all set. No extra html or any other css than that is required. Check it out at quirksmode: http://www.quirksmode.org/css/clearing.html.

  10. a clever trick :-)

  11. “…but sometimes a div makes perfect semantic sense”.
    “Breaking the entire page into a big OL with sub OL’s is hardly semantic”.
    “For another thing, it says it’s hack free but clearly uses a hack right in it’s own header”.

    The article says it is *structural* hack free. A list is a semantic wrapper (for the list items), but there is nothing semantic about using a DIV as a wrapper (i.e. to use a faux-column technique with a three comulmn layout). The article also says that we should not use list as main construct.

    “For another thing, I don’t see what’s so wrong with floats. I know about the IE double margin thing. Big deal.”

    There is nothing wrong with floats per se. Actually, the article says: “[using floats] is a powerful solution in building robust layouts”. But you must admit that if there are so many people still using tables for layout in 2008 it is because they just can’t manage float layouts (the double margin bug being only the tip of the iceberg).

    “Clearing floats can be a little unsemantic but it works and it’s valid and it’s nothing to re-create your entire layout over”.

    This is not about clearing floats and BTW there should be nothing “unsemantic” when clearing floats (containing floats), and this not about using lists either, this is about using a different technique, it is about adding a tool to the box.
    Can you do this with floats? thumnail and caption in a grid

  12. No doubt, Its a great work.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".