The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

CSS - Test Your CSS Skills Number 18 :

This week we have 2 fun quizzes that are more a puzzle than valid layouts although the techniques used will come in handy elsewhere.

Quiz A is supplied by me (but suggested by MarkBrown4) and Quiz B has been supplied by RoObear.

Quiz A:

In my quiz we are going to invent a new CSS property called "float:center". Just like float:left and float right it allows text to wrap but in this case the element is floated in the centre of some text and the text will part and wrap on both sides of the element.

This means that the text can still be read from left to right all the way across the whole width.

Have a look at the screenshot called float-center.png to see what I mean.

The screenshot shows the (percentage width) element at a smaller width and at a larger width to show that it works across a reasonable range.

In my example the layout breaks at larger widths so just make sure it works for the range specified in my screenshot.

Obviously this is not a perfect solution as some letters are cut in half and I'm hoping you can come up with something better.

The rules are pretty flexible and you can just test in the browser of your choice but no scripting is allowed. You can add to (or remove) the html and css as much as you like and use any properties you wish (no images allowed either).

My examples uses valid CSS/html and works in most browsers.

The main point is that you can open and close the window across a reasonable range and the effect is still maintained. Therefore you can't just absolutely place little bits of text on either side to give the effect.

Lastly you are not allowed to use the "clip" property because we did that in another quiz.
Here is some html which you can use if you like.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>float:center;</title>
<style type="text/css">
p {
margin:1em 0;
}
.box {
width:50&#37;;
background:red;
max-width:610px;
}
</style>
</head>
<body>
<div class="box">
<p>This is some text that will flow around both sides of the image. The text can stil be read from left to right across the whole of the container and still make sense apart from the odd letter that gets split on either side of the image. This would be a useful effect if perhaps we invented a new "float:center" property that allows the text to flow around both sides of the image but would of course look much neater if there was some margin around the image. See if you can come up with something better than this that still makes sense as the window is resized bigger or smaller within a reasonable range. The css is relatively simple but of course not very semantic due to the way that it is constructed. However it makes for a useful and interesting effect but I'm sure someone can come up with something much better!</p>
</div>
</body>
</html>

Any questions just ask and I will clarify.

Quiz B.
Quiz B supplied by Roobear will put a smile on your face

Have a look at the attachment called quiz18b-face.png.

You simple have to copy that effect using -moz-border-radius (or border-radius or webkit equivalent). No images are required.

As you move your mouse around the face you will see that the eyes folllow the cursor around.

So the idea is that the face looks at your cursor when you move it around. It then looks excited when you put the cursor over the face and just smiles and looks at you when the cursor is too far away.

Check the screenshot to see all the states in action.

For extra bonus points you could try and make the face scalable when the window is resized which shows how the corners will work better than images.

For extra extra bonus points make the display also work in other browsers that dont support the round corners where they would just get square blocks instead.

You can use your own html and CSS and it only needs to work perfectly in Firefox.

As usual no scripting or images are allowed.

Any questions just ask and remember this is just for fun

Solutions to both quizzes will be posted later in the week (or longer) depending on how it goes