Test your CSS skills - Number 4

**Paul O'B** · May 24, 2004 07:10

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

**Buddy Bradley** · May 24, 2004 07:47

Done the first one.

**xhtmlcoder** · May 24, 2004 07:49

Yes, that one wasn't too bad and far easier in Mozilla to achieve.

**Paul O'B** · May 24, 2004 07:59

That was quick !

Well done both of you

**jodmcc** · May 24, 2004 08:07

Well it sounded easy until you mentioned no child selectors.

**Paul O'B** · May 25, 2004 07:16

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

**Paul O'B** · May 25, 2004 09:26

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

**jamslam** · May 25, 2004 11:39

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

**Paul O'B** · May 25, 2004 14:18

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

**Paul O'B** · May 27, 2004 07:34

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

**ro0bear** · Jan 15, 2009 08:17

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.

**Paul O'B** · Jan 15, 2009 09:09

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.

**candlebain** · Aug 6, 2009 16:10

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?