You a code monkey? Me gots fun for you! CSS challenge!

3 comments

• Comment Link Tuesday, 16 August 2005 posted by Patrice Levesque

  Oh, the   is just a   I learned the numbers and use them everytime because in at least Safari (Opera too I think), when you send your webpage as application/xhtml+xml, only a handful of HTML entities display as they should.
  
  
  
  CSS Zen Garden is a bit misleading because the stylists do what they can with the existing markup and are not expected something precise when they start. And in the real world, most of the times the graphic and user interface are drawn before any actual markup is written.
  
  
  
  The real solution for element reordering would be XSL, but though IE and FF support it, it's not really popular. Expecting a designer to code in that XML-based extra-verbose functional language? I don't think so!
  
  
  
  CSS3 is supposed to resolve most of the current CSS issues like this one, but seeing that the first draft of CSS3 is stamped with 1999 and still not finished, knowing the first IE7 next year will not support it, will we ever see it in the real world?
  
  
• Comment Link Monday, 15 August 2005 posted by Eric Maziade

  
  Yup, that makes sense allright! I actually though of doing it using blocks and floats, but I hate having to "reverse order" my things in HTML. I also have to specify the dimentions of items in pixels - or their positionning in order to center them. Any time during the process of building a Web page, one of the elements can switch size. Having to go in there and switch pixels to realign everything is annoying - especially if the pictures have more to do with content than with the looks of the page (such as the logos in this here sample).
  

  
  

  
  (Say, what's the character you're printing in the "clear:both" block? I use that trick but usually put in a single transparent pixel gif instead (used to do  , but I don't always want that much height).)
  

  
  

  
  See, what makes CSS so beautiful to me, is the splitting of the content from the look. I like the idea that a team could have a programmer spit out HTML code and have a designer do the CSS layout.
  

  
  

  
  But as it turns out, you need to know alot about your expected end-result in order to put out the proper HTML.
  

  
  

  
  I was under the imression that CSS allowed you to do neat stuff like http://www.csszengarden.com/">CSS Zen Garden every time.
  Turns out it's not that flexible, when you end up with real-life cases - when there's a client involved and that the end results needs to do what the client wants it to do.
  

  
  

  
  I suppose I could just let go and go with the flow... I'm just a tad sad that the standards aren't up to my expectations yet. I guess I'll have to wait a few more browser generations. Until then, a little CSS (and a few tables) are still way better than what I had to put up with during the IE/Netscape wars of a few years ago...
  
• Comment Link Sunday, 14 August 2005 posted by Patrice Levesque

  You're mixing inline and block contexts. Because you have text above one image (making the union of them a block), you'll have to treat all three icons as blocks. Inline formatting would use 'text-align', but block formatting implies floats.
  
  
  
  I don't know your constraints (is the size of the whole thing fixed?) so I'll pretend it's a flexible-width box; in that case:
  
  
  
  1) Wrap the three icons in a single div.
  
  2) _Reverse_ the order of the credit card div and the two images
  
  (so in the markup Novisoft comes first, Worldpay second and your div.accepted last. The logic being "They're all right-aligned, so the first to put in place is Novisoft, second is WorldPay, after that the credit cards can go in place").
  
  3) Give a width and height to your images (<img ... width="x">) and to your div.accepted; should always be done whenever possible, rendering is quicker because the layout can be done before the image comes to the browser.
  
  4) Now the CSS. You mix inline elements (images) and a block element (div). They all should be block. Let's force the issue. Give a class to your images (call it 'blockimg'). In your CSS, do:
  
  
  
  img.blockimg {
  
  float: right;
  
  display: block;
  
  }
  
  div.accepted {
  
  float: right;
  
  }
  
  
  
  5) Add <div style="clear: both;">&#160;</div> just before the closing tag of the div.address block. That ugly directive makes sure we end the floating context and that the next element in the markup won't be at the left of your credit card block. [There is a purer way using only CSS but I don't recall it, it's like 20 lines of code]
  
  
  
  
  
  This all may seem weird and complicated, but this is IMHO the hardest thing to do in CSS; after grasping the concept of inline and block contexts, floats, you can print yourself a "I mastered CSS" certificate.
  
  
  
  (Because you already know all the sizes of your elements, you can avoid reordering your 3 blocks by wrapping your 3 blocks in a div, giving that div the width you want, and floating it to the right. But I guess by now you can experiment)