CSS - Test Your CSS Skills Number 34 - fix this

PaulOB · April 16, 2010, 11:20am

Thanks antitoxic that was the correct answer - well done and thanks for taking part

I’ll let the quiz run over the weekend and then draw it to a close on Monday so anyone who wants to try has a few days left.

The next quiz will be a little harder but it was good to do a real life example this time.

tristan625 · April 16, 2010, 11:52am

how do i get to see the answer to this

Paul_Wilkins · April 16, 2010, 12:01pm

The answer will be posted after the competition ends on Monday. Give it a go yourself and see if you can come up with the answer before then.

PaulOB · April 16, 2010, 12:02pm

You wait until the quiz finishes and I post the solutions (which will be early next week)

Or you have a go yourself and try to solve it.

Edit:

Beaten to the punch by another Paul

tristan625 · April 16, 2010, 1:09pm

here is my answer, hope i did it right,

PaulOB · April 16, 2010, 1:29pm

No don’t post your answers here - Please Pm them to me direct so that others can still have a go.

YuriKolovsky · April 16, 2010, 1:19pm

oh no tristan, your not supposed to post your answer here!

PaulOB · April 19, 2010, 5:56pm

I have a correct entry from Jason (deathshadow) that works very well as expected.

I’m running late today and will wrap the quiz up tomorrow so if anyone else wants to try you’ve got 24 hours left.

markbrown4 · April 19, 2010, 10:42pm

[ot]

Wow, haven’t seen deathshadow around here in a while[/ot]

gary_turner · April 20, 2010, 11:09am

@Paul:

If you have some small degree of influence around here, try to get your inbox quota upped a bit.

cheers,

gary

PaulOB · April 20, 2010, 11:49am

Sorry Gary - I’ll go and delete a load of old messages now

PaulOB · April 20, 2010, 9:50pm

Solution Time

Thanks for all the entries and thanks for taking the time to have a go as it is appreciated.

There were quite a number of correct entries so I won’t post the code for all but I will mention the names below. (Apologies if your name is missing but I am only posting the fully correct entries.)

The following all completed the task:

Ryan Reese, Eric Watson, Yurikolovsky, Mr Alexander, Markbrown4, Kravvvitz, xscott, antitoxic, deathshadow, Erik J.

Well done to all the above and well done to all the near misses also.

Ryan was the quickest entry but as a number of entries were similar I have chosen one winner from random from the entries that managed to do this without changing the html at all.

Therefore this week markbrown4 is the winner and receives the great prize of… umm… - just seeing his name in lights.

This was one of the easier quizzes although a couple of you struggled at first. The main trick was to place the fixed footer at 100% width and then use a centred inner element with a max-width to do the shrinking and expanding as required and to stay pace with the layout.

It could all be done without changing the html in these two rules here:


#fixedfoot {
    width:100%;
    height:60px;
    position:fixed;
    bottom:0;
    left:0;
    font-size:93%;
    color:#fff;
}
#fixedfoot p {
    width:100%;
    max-width:930px;
    min-width:300px;
    margin:0 auto;
    height:45px;
    padding:5px 10px 0;
    background:#20805e;
    border:5px solid #000;
}

Here is the full code that I used:


<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    height:100%;
    margin:0;
    padding:0;
}
#outer {
    width:910px;
    min-height:100%;
    border-left:5px solid #006f48;
    border-right:5px solid #006f48;
    background:#00ab6f;
    padding:0 10px;
    margin:auto;
    color:#fff;
}
h1, p {
    margin:0 0 2em;
    line-height:1.3;
}
* html #outer {
    height:100%
}
#fixedfoot {
    width:100%;
    height:60px;
    position:fixed;
    bottom:0;
    left:0;
    font-size:93%;
    color:#fff;
}
#fixedfoot p {
    width:100%;
    max-width:930px;
    min-width:300px;
    margin:0 auto;
    height:45px;
    padding:5px 10px 0;
    background:#20805e;
    border:5px solid #000;
}
a.back {
    float:right;
    background:#006f48;
    padding:5px;
    height:60px;
    border:2px solid silver;
    margin:-20px 20px 0 0;
}
p.last {
    padding-bottom:60px;
    margin:0;
}
#fixedfoot a {
    color:#fff
}
</style>
</head>
<body>
<div id="outer">
    <h1>Fixed footer</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p class="last">end</p>
</div>
<div id="fixedfoot">
    <p><a class="back" href="#">Back to top </a> | &copy; 2010 www.pmob.co.uk | <a href="#">Terms and conditions</a> | <a href="#">Sitemap</a> |</p>
</div>
</body>
</html>

Here was markbrown4’s entry:


<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    height:100%;
    margin:0;
    padding:0;
}
#outer {
    width:910px;
    min-height:100%;
    border-left:5px solid #006f48;
    border-right:5px solid #006f48;
    background:#00ab6f;
    padding:0 10px 60px;
    margin:auto;
    color:#fff;
    position: relative;
}
h1, p {
    margin:0 0 2em;
    line-height:1.3;
}
* html #outer {
    height:100%
}
#fixedfoot {
    position: fixed;
    bottom: 0;
    left: auto;
    right: auto;
    width: 100%;
    max-width: 910px;
    height: 55px;
    font-size: 93%;
    color: #fff;
}
#fixedfoot p {
    height: 45px;
    padding: 5px 10px 0;
    background: #20805e;
    border: 5px solid #000;
    margin-left: -15px;
    width: 100%;
}
a.back {
    float:right;
    background:#006f48;
    padding:5px;
    height:60px;
    border:2px solid silver;
    margin:-25px 20px 0 0;
}
#fixedfoot a {
    color:#fff
}
p.last {
    margin:0;
}
</style>
</head>
<body>
<div id="outer">
    <h1>Fixed footer</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p class="last">end</p>
    <div id="fixedfoot">
        <p><a class="back" href="#">Back to top </a> | &copy; 2010 www.pmob.co.uk | <a href="#">Terms and conditions</a> | <a href="#">Sitemap</a> |</p>
    </div>
</div>
</body>
</html>

Many of you did similar so well done to all that tried but I won’t bother posting all your entries.

Some used slightly different methods so I will post a few of the variations so you can see how others have tackled this.

Eric Watson:


<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    height:100%;
    margin:0;
    padding:0;
}
#outer {
    width:910px;
    min-height:100%;
    border-left:5px solid #006f48;
    border-right:5px solid #006f48;
    background:#00ab6f;
    padding:0 10px;
    margin:auto;
    color:#fff;
}
h1, p {
    margin:0 0 2em;
    line-height:1.3;
}
* html #outer {
    height:100%
}
#fixedfoot {
    position:fixed;
    bottom:0;
    width:930px;
    height:45px;
    padding:5px 10px 0;
    background:#20805e;
    margin-left:-25px;
    border:5px solid #000;
    font-size:93%;
    color:#fff;
}
#fixedfoot a {
    color:#fff
}
p.last {
    margin:0;
}
#boo-ya {
    max-width:930px;
    margin:auto;
}
#boo-ya b {
    float:right;
    margin-right:100px;
}
#boo-ya b .back {
    position:fixed;
    bottom:0;
    background:#006f48;
    padding:5px;
    height:60px;
    border:2px solid silver;
}
</style>
</head>
<body>
<div id="outer">
    <h1>Fixed footer</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p class="last">end</p>
    <div id="fixedfoot">
        <p> | &copy; 2010 www.pmob.co.uk | <a href="#">Terms and conditions</a> | <a href="#">Sitemap</a> |</p>
    </div>
</div>
<div id="boo-ya"><b><a href="#" class="back">Back to top </a></b></div>
</body>
</html>

Deathshadow:


<!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"
    lang="en"
    xml:lang="en"
><head>

<meta
    http-equiv="Content-Type"
    content="text/html; charset=utf-8"
/>

<title>
    Template Design CSS
</title>

<style type="text/css">
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
    margin:0;
    padding:0;
}

img,fieldset {
    border:none;
}

hr {
    display:none;
}

p {
    padding:0.5em;
}

html, body {
    height:100%;
    position:relative; /* opera bugfix */
}

body {
    text-align:center; /* center in IE 5.x */
    font:normal 85%/130% arial,helvetica,sans-serif;
}

#pageWrapper {
    min-height:100%;
    width:756px;
    margin:0 auto;
    background:#4A4;
    border:solid #040;
    border-width:0 2px;
}

h1 {
    position:relative;
    padding:0.5em 0 0.2em;
    font:bold 160%/120% arial,helvetica,sans-serif;
}

#content {
    padding-bottom:4em;
    text-align:left;
}

#footerWrapper {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    min-width:288px;
    font:normal 12px/14px arial,helvetica,sans-serif;
}

#footer {
    position:relative;
    min-width:288px;
    max-width:768px;
    margin:0 auto;
    background:#6C6;
    height:40px;
    border:solid #040;
    border-width:2px 2px 0 2px;
}

#backToTop {
    position:relative; /* depth sort over UL if neccessary */
    float:right;
    display:inline; /* prevent IE margin doubling */
    padding:4px 8px;
    height:50px;
    margin:-20px 12px 0 -12px;
    background:#282;
    border:solid #040;
    border-width:2px 2px 0;
}

#footer ul {
    list-style:none;
    padding-top:6px;
    text-align:left;
}

#footer li {
    float:left;
    padding:0 0.6em 0 1em;
    border-right:1px solid #FFF;
}

#footer .last {
    border:0;
}

#footer a {
    color:#FFF;
}

#footer a:active,
#footer a:focus,
#footer a:hover {
    color:#8F8;
}
</style>

</head><body>

<!--
    empty tags like SPAN and B below are image sandbags for
    sliding doors or glider-levin replacement - do not remove!!!

    Horizontal rules and .jumpto menus should be removed by CSS
    and are present for CSS off users only.
-->

<div id="pageWrapper">

    <h1>
        Site Title
        <span></span>
    </h1><hr />

    <div id="content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p><p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p><p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p><p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p><p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p><p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    <!-- #content --></div>

<!-- #pageWrapper --></div>

<div id="footerWrapper"><div id="footer"><hr />

    <div id="backToTop">
        <a href="#pageWrapper">Back to Top</a>
    </div>

    <ul>
        <li>Footer Item Here</li>
        <li>Another Item</li>
        <li>Yet Another</li>
        <li class="last">&copy; 2010</li>
    </ul>

<!-- #footer, #footerWrapper --></div></div>

</body></html>

Erik J:


<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body{
    height:100%;
    margin:0;
    padding:0;
}
#outer{
    width:910px;
    min-height:100%;
    margin:auto;
    border:solid #006f48;
    border-width:0 5px;
    padding:0 10px;
    background:#00ab6f;
    color:#fff;
}
h1, p{
    margin:0 0 2em;
    line-height:1.3;
}
#fixedfoot{
    position:fixed;
    right:0;
    left:0;
    bottom:0;
    color:#fff;
    font-size:93%;
}
#fixedfoot p{
    position:relative;
    margin:0 auto;
    border:5px solid #000;
    padding:5px 90px 0 10px;
    max-width:830px;
    height:45px;
    background:#20805e;
}
a.back{
    position:absolute;
    bottom:0;
    right:0;
    border:2px solid silver;
    padding:5px;
    height:60px;
    background:#006f48;
}
#fixedfoot a{
    color:#fff
}
p.last{
    margin:0;
}
</style>
</head><body>

<div id="outer">
    <h1>Fixed footer</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p class="last">end</p>
</div>
<div id="fixedfoot">
    <p><a class="back" href="#">Back to top </a> | &copy; 2010 www.pmob.co.uk | <a href="#">Terms and conditions</a> | <a href="#">Sitemap</a> |</p>
</div>

</body></html>

Rayzur:


<!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=utf-8" />
<title>Quiz 34 ~ Rayzur</title>
<style type="text/css">
html, body {
    height:100%;
    margin:0;
    padding:0;
}
#outer {
    width:910px;
    min-height:100%;
    border-left:5px solid #006f48;
    border-right:5px solid #006f48;
    background:#00ab6f;
    padding:0 10px;
    margin:auto;
    color:#fff;
}
h1, p {
    margin:0 0 2em;
    line-height:1.3;
}
span {font-size:.65em}

* html #outer {
    height:100%
}
p.last {
    margin:0;
    padding-bottom:65px;
    font-weight:bold;
    color:red;
}

/*=== Begin Fixed Foooter Styles ===*/
#fixfoot {
    position:fixed;
    height:55px;
    left:0;
    right:0;
    bottom:0;
}
#inner{
    max-width:940px;/*the trick for IE7*/
    height:45px;
    margin:0 auto;
    padding:5px 10px 0;
    background:#20805e;
    border:5px solid #000;
    font-size:93%;
    color:#fff;
}
.back {
    float:right;
    background:#006f48;
    padding:5px;
    height:60px;
    border:2px solid silver;
    margin:-25px 20px 0 0;
}
#fixfoot a {
    color:#fff;
}
</style>
</head>
<body>

<div id="outer">
    <h1>Fixed Footer Jump Link <span>(Quiz 34 ~ Rayzur)</span></h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p class="last">Last line of text</p>
</div>
<div id="fixfoot">
    <div id="inner">
        <p><a class="back" href="#">Back to top </a> | &copy; 2010 www.pmob.co.uk | <a href="#">Terms and conditions</a> | <a href="#">Sitemap</a> |</p>
    </div>
</div>

</body>
</html>

Kravvitz


<!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=utf-8" />
<title></title>
<style type="text/css">
html, body {
    height:100%;
    margin:0;
    padding:0;
}
#outer {
    width:910px;
    min-height:100%;
    border-left:5px solid #006f48;
    border-right:5px solid #006f48;
    background:#00ab6f;
    padding:0 10px 80px;
    margin:auto;
    color:#fff;
}
h1, p {
    margin:0 0 2em;
    line-height:1.3;
}
* html #outer {
    height:100%
}

#fixedfoot {
  text-align: center;
  width: 960px;
  margin: 0 auto;
}

#fixedfoot .footInner,
#fixedfoot .footInner2 {
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    text-align: left;
    margin:0 auto;
    font-size:93%;
}

#fixedfoot .footInner {
    max-width:930px;
    height:45px;
    padding:5px 10px 0;
    background:#20805e;
    border:5px solid #000;
    color:#fff;
}
*:first-child+html #fixedfoot .footInner,
*:first-child+html #fixedfoot .footInner2 {
    left: auto;
    right: auto;
    margin-left: -480px;
}
*:first-child+html #fixedfoot .hShim {float: right;}
#fixedfoot .footInner p {
  padding-right: 10em;
}

#fixedfoot .footInner2 {
    height: 1px;
    max-width:960px;
}

a.back {
    float: right;
    background:#006f48;
    padding:5px;
    height:60px;
    border:2px solid silver;
    margin:-73px 20px 0 0;
}
#fixedfoot a {
    color:#fff
}
p.last {
    margin:0;
}
</style>
</head>
<body>
<div id="outer">
    <h1>Fixed footer</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel varius tortor. Suspendisse massa velit, elementum sit amet tempus sit amet, viverra a leo. Maecenas molestie tempus quam, ut facilisis lectus sodales nec. Quisque augue justo, mollis ac tincidunt id, auctor sed est. Suspendisse potenti. Nulla lacinia ipsum sed leo placerat ut malesuada justo mattis. Donec eu iaculis tellus. Praesent pretium nibh et ligula ultricies accumsan. Nullam ut risus vitae felis imperdiet rutrum ac in turpis. Donec elementum scelerisque erat, eu consectetur tellus tincidunt sed. Integer in sem lacus. Phasellus congue molestie feugiat. Sed aliquam porttitor feugiat. Integer faucibus mi non sapien consectetur congue. Praesent sed dolor purus, eget varius eros. </p>
    <p class="last">end</p>
</div>
<div id="fixedfoot">
  <div class="footInner">
    <p> | &copy; 2010 www.pmob.co.uk | <a href="#">Terms and conditions</a> | <a href="#">Sitemap</a> |</p>
    <span class="hShim"></span>
  </div>
  <div class="footInner2">
    <a class="back" href="#">Back to top </a>
  </div>
</div>
</body>
</html>

Most of the other entries were a mix of the above so well done to all and hope that you enjoyed one of our easier quizzes. If that’s whet your appetite then don’t forget to check out the previous quizzes and look out for the next one in a couple of weeks.

RyanReese · April 20, 2010, 11:24pm

Congratulations to all! Some solutions seem very weird, though unique nonetheless

Paul_Wilkins · April 20, 2010, 11:46pm

It’s okay Ryan, he stated that you have the fastest time, and picked a person at random from the pool successful people, which also includes yourself.

Well done.

markbrown4 · April 21, 2010, 5:55am

<justkidding>
RyanReese, In Your Face!
</justkidding>

YuriKolovsky · April 21, 2010, 7:14am

hahaha

i think even the virtual prize of having a name displayed is worth something and makes it more like a competition, giving a initiative to actually do it.

PaulOB · April 21, 2010, 7:42am

Yes, there were a number of similar entries so it was hard to pick an outright winner based on code alone.

I always mention the fastest so that is an award by itself.

However, the winner is not always going to be the fastest as that would be unfair to different time zones etc.

It’s a little easier to choose a winner in the harder quizzes because the entries are usually different enough to make a choice.

Well done to all that took part.

YuriKolovsky · April 21, 2010, 8:15am

However, the winner is not always going to be the fastest as that would be unfair to different time zones etc.

unless someone is sleeping it is pretty fair considering the message is sent instantly, while someone could be sleeping even an day time, this is solved by making a post 6 hours before a quiz (or more) is to be posted telling that it will be posted in exactly 6 hours.
also we could pick a relatively neutral time period where usa, australia and uk are all mostly awake (uk timezone covers most of europe).
but all this takes organization and extra work…

I’m just pointing this out because when its a competition more people seem to take part (but it also requires a quiz to be less than insane difficulty)

i think the honorable mentions from before are good:

fastest
smallest code
best code
most original
most unnecessarily complicated but still working

RyanReese · April 21, 2010, 9:36pm

I agree as well! I was just a bit confused on Pauls’ logic (:

system · April 23, 2010, 4:47pm

Not wild about the reformatting of my code there