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

If you like working with HTML/CSS and would like to solve my puzzle, you might like what's to follow...

Maybe it's sissy-css for you guys, but these are the type of problems that get my noggin' on fire.

First snippet:

<div class="address">
	Novisoft<img src="http://inthemaze.net/pics//bullet.gif" alt="bullet"/>
	2810 St-Martin Est #105<img src="http://inthemaze.net/pics//bullet.gif" alt="bullet"/>
	Laval (Québec)<img src="http://inthemaze.net/pics//bullet.gif" alt="bullet"/>

	H7E 4Y6<img src="http://inthemaze.net/pics//bullet.gif" alt="bullet"/>
	1-450-661-0047<img src="http://inthemaze.net/pics//bullet.gif" alt="bullet"/>
	1-877-332-3332

		<div class="accepted">
			nous acceptons<br/>
			<img src="http://inthemaze.net/pics//cartes-acceptees.gif" alt="accepted cards"/>
		</div>
		
		<img src="http://inthemaze.net/pics//worldpay-logo.gif" alt="payments processed through WorldPay"/>	
		<img src="http://inthemaze.net/pics//novisoft-produit.gif" alt="A Novisoft procut"/>

</div>

The challenge

This needs to look like this:

No need to worry about the colors, really. It's the putting the things at the right place.

What's the challenge in there? See the credit card logos? There's a piece of text hanging over it. There you go.

Using only CSS, you need to make this work. No changing the HTML, though adding a class in a div or adding a div might be acceptable.

I didn't succeed. I can put the credit cards on the right, but not on the left like in the picture. I ended up doing it in a table.

Comments

1. On Sunday, August 14 2005, 03:35 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;"> </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)

2. On Monday, August 15 2005, 09:00 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 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...

3. On Tuesday, August 16 2005, 09:09 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?

in the maze.net