Hour 2 Code Samples – Sams Teach Yourself Responsive Web Design in 24 Hours

Hour 2 Code Samples

Listing 2.1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Table for a Layout</title>
</head>

<body>
<table border="1">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
</body>
</html>

Listing 2.2

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Table for a Layout</title>
</head>
<body>
<table role="presentation" style="width: 100%" border="1">
    <tr>
        <td colspan="3">Dandylions!</td>
        <td>&nbsp;</td>
        <td rowspan="3">Big Dandelion Pic</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td colspan="3">Not Your Mother's Weed</td>
    </tr>
    <tr>
        <td colspan="4">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="4">&nbsp;</td>
        <td rowspan="3">Seeded Dandelion Pic</td>
    </tr>
    <tr>
        <td colspan="4">Navigation links</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="3">Column 1</td>
        <td rowspan="3">Column 2</td>
        <td rowspan="3">Column 3</td>
    </tr>
    <tr>
        <td>Smaller Dandelion Pic</td>
    </tr>
    <tr>
        <td>Field of Dandelions Pic</td>
    </tr>
</table>
</body>
</html>

Listing 2.3

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Using Absolute Positioning</title>
<link href="rwd code 2.4.css" rel="stylesheet" type="text/css">
</head>

<body>
<header id="banner">
  <h1>Dandylions!</h1>
  <h2>Not Your Mother's Weed</h2>
</header>
<nav>
Navigation Links
</nav>
<article id="column1">column 1
</article>
<article id="column2">column 2
</article>
<aside id="column3">column 3
</aside>
<aside id="rightcol">
  <div id="bigflower">big flower</div>
  <div id="seededflower">seeded flower</div>
  <div id="closeup">close up flower</div>
  <div id="field">field</div>
</aside>
</body>
</html>

Listing 2.4

@charset "UTF-8";

div, header, nav, article, aside { border: solid 1px black; }

#banner {
    width: 1200px;
    height: 500px;
    position: absolute;
    top: 0px;
    left: 0px;
}
h1 {
    position: relative;
    top: 24px;
    left: 7px;
}
h2 {
    position: relative; 
    top: 24px;
    left: 201px;
}
nav {
    width: 1200px;
    height: 45px;
    position: absolute;
    top: 500px;
    left: 0px;
}
#column1 {
    width: 412px;
    min-height: 700px;
    position: absolute;
    top: 545px;
    left: 0px;
}
#column2 {
    width: 466px;
    min-height: 700px;
    position: absolute; 
    top: 545px;
    left: 412px;
}
#column3 {
    width: 322px;
    min-height: 700px;
    position: absolute;
    top: 545px;
    left: 878px;
}
#rightcol {
    width: 400px;
    min-height: 1312px;
    position: absolute;
    top: 0px;
    left: 1200px;
}
#bigflower, #seededflower, #closeup, #field {
    width: 400px;
    height: 328px;
    position: relative;
    top: 0px;
    left: 0px;
}

Listing 2.5

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 3 Columns</title>
<style>
#columns {
    width: 100%;
    background-color: #BBF0F9;
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-rule: 4px dashed blue;
    -webkit-column-rule: 4px dashed blue;
    column-rule: 4px dashed blue;
}
div h1 {
    color: blue;
    font-size:x-large;
    -moz-column-span: all;
    -webkit-column-span: all; 
    column-span: all;
}
</style>
</head>

<body>
<div id="columns">
    <h1>This Headline Spans The Columns</h1>
    <p>Proin quis ultrices ipsum, ut molestie leo. Donec condimentum erat nulla, at cursus leo rhoncus non. Etiam dui quam, laoreet quis tristique et, facilisis id risus. Curabitur sit amet nisi ante. Integer a nisl sapien. Curabitur accumsan nibh eu suscipit varius. Donec posuere tortor vitae magna fermentum scelerisque. Curabitur at odio nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>Quisque ac urna id nisl vehicula iaculis. Nam turpis libero, pulvinar faucibus quam suscipit, fringilla semper mi. Quisque molestie cursus tortor, non ullamcorper metus accumsan vitae. Maecenas ultricies, augue et blandit sodales, massa nulla mollis enim, vitae mattis ligula nulla eget tortor. Vestibulum nisi enim, lobortis sit amet suscipit nec, hendrerit sed est. Nunc lobortis nisi sit amet adipiscing facilisis. Nullam porta, mauris a molestie commodo, tellus tortor ultricies tellus, in elementum purus odio ultricies diam. Mauris ipsum turpis, convallis at ullamcorper quis, mattis consectetur est. Fusce lobortis vel dolor vitae semper. Mauris metus nulla, consectetur in egestas eget, consequat non lectus. Mauris quis elit elit. Mauris at porta velit.</p>
    <p>Aliquam sodales volutpat turpis, laoreet ultricies dolor egestas nec. Vestibulum vitae tortor massa. Maecenas ultrices consectetur adipiscing. Sed a felis pretium, pulvinar risus sed, venenatis nunc. Nunc egestas purus sed quam accumsan vulputate. Ut elit velit, aliquet vel accumsan at, consequat vel tortor. Proin tincidunt augue a diam eleifend pulvinar. In sagittis massa non leo iaculis, nec pharetra arcu pretium. Phasellus a justo neque.</p>
    <p>Sed diam ligula, pharetra non tellus id, viverra vestibulum elit. Pellentesque non ante quam. Pellentesque auctor tortor non dolor pellentesque, vitae iaculis lectus aliquam. Duis cursus urna vitae tortor feugiat accumsan. Integer vitae interdum odio, vel faucibus dolor. Vestibulum eget congue mauris, et vehicula velit. Sed lacinia diam vitae sapien tristique tristique. Nulla quam lorem, convallis ac nisl at, feugiat porta turpis. Duis dignissim purus nisl, at congue leo luctus quis. Proin rhoncus porta molestie. Integer nec pharetra neque. Nulla volutpat nulla lacus, vitae scelerisque turpis elementum non. In posuere, ante eget tincidunt varius, turpis est fermentum erat, quis sollicitudin justo ligula ut erat. Nullam pharetra purus elit.</p>
    <p>Vivamus ultrices arcu et facilisis posuere. Vivamus vestibulum nulla vel turpis ornare laoreet. Nunc quis mollis metus. Nam interdum elit lorem, imperdiet porta neque pretium vel. Mauris tristique ligula sit amet sagittis venenatis. Mauris pretium tortor sed congue fermentum. Pellentesque sed augue urna. Cras at purus id lacus commodo vestibulum ut vel augue. Duis nisi sapien, congue ac velit ut, sagittis ornare elit. Vestibulum aliquet lorem eget mauris semper imperdiet quis eget leo. Vestibulum consectetur aliquet massa vitae facilisis.</p>

</div>
</body>
</html>

Listing 2.6

if (window.applicationCache) {
    document.write("Browser supports offline web apps");
} else {
    document.write("Browser does not support offline web apps");
}

Leave a Reply

Your email address will not be published.