SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Hybrid View

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

    Test your CSS skills - Number 4

    Hi,

    This weeks test is an easy one and will give those new to css a chance to have a go as well.I will alternate each week between easy and hard to try to please both camps. (Although I expect better solutions from the more accomplished so theres nothing to stop you trying the easy ones anyway)

    There are two simple tasks this week and can be seen in the attached image.

    http://www.pmob.co.uk/temp/multicolouredtext.gif

    The first task is to re-create some text that is red on the top half and blue on the bottom half. This will introduce you to the css positioning properties and will allow you to gain experience in placing your layout.

    The second task is in much the same vein and is just the alphabet with alternating coloured text of red and blue. In this test you are not allowed to use lots of spans in this type of format:
    Code:
    <p class="blue">a<span class="red">b</span>c<span class="red">d</span>e<span class="red">f</span> etc..... (you get the picture)
    That would be too easy lol.

    You are allowed to use only one nested element in the paragraph which may or may not be a span depending on your solution but obviously must be valid code.

    Rules:
    • No frames or iframes
    • No javascript or scripting of any kind
    • NO TABLES
    • No inline styles
    • No images
    • No expression,conditional comments, behaviours etc.
    • Use Valid CSS
    • Use Valid xhtml
    • No hacks, no child selectors, no universal selecors, no means of offering separate code to each browser. The same code must work for both browsers.
    • Must work in Firefox and ie6 exactly the same as my example above
    There are no prizes other than the self satisfaction of being the first to complete this. If you solve it then post a message here but PM me the solution so that other people can still have a go.

    As with the other tests these aren't meant to be suggestions for layout but more an exercise in using css to achieve something different and having fun at the same time. (The methods used in this example won't make sense if css is turned off but that's not the point of this exercise anyway.)

    Have fun.

    Paul

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Done the first one.

  3. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Yes, that one wasn't too bad and far easier in Mozilla to achieve.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    That was quick !

    Well done both of you

  5. #5
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well it sounded easy until you mentioned no child selectors.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Nick (doctornick) has offered the solution to the second problem (in theory) but has not provided the code so I can't call him the winner yet.

    I haven't had any PM's regarding either problem so if you want your name in lights then be the first with the solution. I thought the second problem was quite easy but then I knew the answer didn't I

    Paul

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Massachusetts
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    Nick (doctornick) has offered the solution to the second problem (in theory) but has not provided the code so I can't call him the winner yet.

    I haven't had any PM's regarding either problem so if you want your name in lights then be the first with the solution. I thought the second problem was quite easy but then I knew the answer didn't I

    Paul
    Ah damn... If I knew that I would have PMed you my solution, I had thought those guys that posted above already PMed you.

    I'll PM it to you now though, just to get approval

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Tconley79 is the winner of this little quiz. Well Done
    His is the first solution to reach me that does what I asked for.

    I won't post the solution yet just in case anybody else is working on it. I'll post his and my solutions in a couple of days (and anybody elses if they're interesting enough).

    Paul

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Jamslam,

    Well done on your solution you are the second correct entry to solve both problems

    I shall post the winners and runners up solution in a day or so.

    Hope you've all enjoyed the test

    Paul

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Here are the solutions :

    My original :
    http://www.pmob.co.uk/temp/alternatetext.htm

    Code form the winner tconley79:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>tconley79</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!-- 
    h1.a{
    color:blue;
    height:20px;
    overflow:hidden;
    margin:0;
    padding:0;
    position:relative;
    top:20px;
    z-index:2;
    } 
    h1.b{
    margin:0;
    padding:0;
    color:red;
    z-index:1;
    } 
    pre.c{
    color:blue;
    height:20px;
    margin:0;
    padding:0;
    }
    pre.d{
    color:red;
    height:20px;
    margin:0;
    padding:0;
    margin-top:-20px;
    }
    -->
    </style>
    </head>
    <body>
    <h1 class="a">This is Multicolored Text!</h1>
    <h1 class="b">This is Multicolored Text!</h1>
    <pre class="c">a  b  c  d  e  f  g  h  i  j  k  l  m  n  o  p  q  r  s  t  u  v  w  x  y  z</pre><pre class="d">   b	 d	 f	 h	 j	 l	 n	 p	 r	 t	 v	 x	 z</pre>
    </body>
    </html>
    Code from Runner up Jamslam:
    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" xml:lang="en-US" lang="en-US">
    <head>
    <title> CSS Quiz #4 - jamslam</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    p#originalText, p#overlapText {
    position: absolute;
    top: 50px;
    left: 5px;
    font-size: 180%;
    font-weight: bold;
    }
    p#originalText {
    color: #ff0000;
    }
    p#overlapText {
    color: #0000ff;
    height: 20px;
    overflow: hidden;
    }
    p#alphabet_blue, p#alphabet_red {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 140%;
    letter-spacing: 10px;
    font-family: courier;
    }
    p#alphabet_blue {
    color: #0000ff;
    }
    p#alphabet_red {
    color: #ff0000;
    text-indent: 23px;
    }
    </style>
    </head>
    <body>
    <p id="originalText">This is some multicoloured text!</p>
    <p id="overlapText">This is some multicoloured text!</p>
    <p id="alphabet_blue">a c e g i k m o q s u w y</p>
    <p id="alphabet_red">b d f h j l n p r t v x z</p>
    </body>
    </html>
    Thanks to all taking part and congratulations to the above.

    Look out for more tests/quizzes next week.

    Paul

  11. #11
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I was just having a go at this challenge...
    Now in 2009 five years after the end of the challenge, tconley79's solution doesnt work properly in Firefox 3, but Paul O'B's solution and Jamslam's solution still work perfectly.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I think it lost it's formatting when I posted the code in here.

    This works locally but may not work if copied from here;

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>tconley79</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!-- 
    h1.a{
    color:blue;
    height:20px;
    overflow:hidden;
    margin:0;
    padding:0;
    position:relative;
    top:20px;
    z-index:2;
    } 
    h1.b{
    margin:0;
    padding:0;
    color:red;
    z-index:1;
    } 
    pre.c{
    color:blue;
    height:20px;
    margin:0;
    padding:0;
    }
    pre.d{
    color:red;
    height:20px;
    margin:0;
    padding:0;
    margin-top:-20px;
    }
    -->
    </style>
    </head>
    <body>
    <h1 class="a">This is Multicolored Text!</h1>
    <h1 class="b">This is Multicolored Text!</h1>
    <pre class="c">a  b  c  d  e  f  g  h  i  j  k  l  m  n  o  p  q  r  s  t  u  v  w  x  y  z</pre><pre class="d">   b     d     f     h       j     l     n     p       r     t     v     x     z</pre>
    </body>
    </html>

    Edit:


    Yes the spacing gets lost when posted in here but the code does work in its original form with the spaces intact.

  13. #13
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not that I expect anybody to be around here now , but just in case, I have a question:

    What benefit is the overflow: hidden; on the span#duplicate tag in Paul's solution?

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    To clip the content of course-he set a width and height.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    SitePoint Zealot candlebain's Avatar
    Join Date
    May 2009
    Location
    Phoenix, AZ
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, of course...so otherwise the blue would've buried the red.

    I gotta spend more time with Firebug...

    Thanks as usual Ryan!

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by candlebain View Post
    Oh, of course...so otherwise the blue would've buried the red.

    I gotta spend more time with Firebug...

    Thanks as usual Ryan!
    Exactly, you got it. Your welcome.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •