SitePoint Sponsor

User Tag List

Results 1 to 25 of 42

Threaded View

  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)

    CSS - Test Your CSS Skills Number 26

    CSS - Test Your CSS Skills Number 26 : Quiz now ended - solutions in post #20

    Here is another short quiz (code wise) that can be in two parts due to browser differences. The task this week is similar to the age old image and caption question where following caption text should wrap at the limits of the image and not push wider than the image.

    However, I have changed this slightly and the task is to have some heading text that will dictate the width of the box and then the following text should wrap at the limits of the heading.

    All will be clear if you look at the attached screenshot "headers.png".

    As you can see the header could be one word or ten words and the resulting box is always the width of the header and the text wraps nicely within that box.

    You can't just set a different width for each box as the header could be one word or ten words and the same code must work for all boxes.

    Part one of the quiz is to make it work for IE8, Firefox 2.0+, Safari 3 and opera 9.2+. The result should be usable in a real life situation and could fit anywhere into an existing page without causing problems.

    The second part of the quiz is to get something to work in IE7 and as you can see from the screenshot I have a working example. However the layout in IE7 wouldn't really be useful in real life for a number of reasons but it's a good test all the same. The same rules applies and you cannot approximate the widths of each box because it should work on any variable length header.

    Here is the html to use and you cannot change the html in the body but you can of course use whatever css you like.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    </style>
    <![endif]-->
    </head>
    <body>
    <div>
        <h2>This is a small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>Small heading</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    <div>
        <h2>This is a much longer heading for testing</h2>
        <p>This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : This is the text text will wrap at the end of the heading : </p>
    </div>
    </body>
    </html>
    As usual there is no scripting allowed and no IE expressions etc. You can use the conditional comments for IE7 only of course. (I was unable to get this to work in IE6 so if you want to be one up on me then make it work there also but I dont think it's possible.)

    I am away on holiday from the 3rd - 12th August
    so please PM your answers to Erik J
    and do not post your answers in this thread so that others can have a go without seeing your answers. (You must make sure that it works before you send the PM )

    Edit:


    Note that Erik can't test FF2 or safari3 but if your design works in FF3 and Safari4 it is also likely to work in the other two also.



    Any questions or if anything is unclear just ask and remember this is just for fun

    Solutions to the quiz will be posted at the end of the week (or longer) depending on how it goes

    Have fun .

    Paul

    PS. : In case you missed the other tests you can find them here:
    test 1: test 2: test 3: test 4: test 5: test 6: test 7: test 8: test9: test10: test11: test12:
    test13: test 14: test 15: test 16: test 17:test18 test 19:
    test 20 test 21: test 22:test 23 :test 24 : test 25
    Attached Images Attached Images
    Last edited by Paul O'B; Aug 13, 2009 at 02:12.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •