HTML5 in 24 Hours

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

· 4 min read

Listing 13.1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>RWD 13 - Close Links Hard to Click On</title>
<meta name="viewport" content="width=device-width">
</head>

<body>

<ul>
	<li><a href="#a">test can you click on this?</a></li>
    <li><a href="#b">test can you click on this?</a></li>
    <li>test can you click <a href="#c">on</a> this? </li>
    <li><a href="#e">test can you click on this? </a></li>
    <li><a href="#d">test</a> <a href="#j">can</a> you <a href="#h">click</a> <a href="#i">on</a> <a href="#k">this</a>?</li>
    <li><a href="#f">test can you click on this? </a></li>
    <li><a href="#g">test can you click on this? </a></li>
</ul>
</body>
</html>

Listing 13.2

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Listing 13.2 - Basic HTML for Navigation</title>
</head>

<body>
<nav>
    <ul id="navigation">
        <li><a href="#">Home<br> 
        <small>Where Dandelions roam free</small></a></li>
        <li><a href="#">Products<br> 
        <small>These flowers will grow on you</small></a></li>
        <li><a href="#">Services<br> 
        <small>We care for the flowers you have</small></a></li>
        <li><a href="#">Support<br> 
        <small>We love to help with dandelions</small></a></li>
        <li><a href="#">About<br> 
        <small>Why we love dandelions so much</small></a></li>
        <li><a href="#">Reading<br> 
        <small>Read more about this wondrous plant</small></a></li> 
        <li><a href="#">Contact<br> 
        <small>Ask us about your dandelion needs</small></a></li>
    </ul>
</nav>
</body>
</html>

Listing 13.3

/\* font family \*/
@font-face {
    font-family: 'bitstream\_vera\_serifbold';
    src: url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.eot');
    src: url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.woff') format('woff'),
         url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.ttf') format('truetype'),
         url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.svg#bitstream\_vera\_serifbold') format('svg');
    font-weight: normal;
    font-style: normal;

}
/\* basic reset \*/
\*, \*:before, \*:after { 
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/\* nav bar \*/
nav {
    width: 100%;
    margin: auto;  
}
 
nav ul {
    list-style: none;
    overflow: hidden;
	background: #000;
}
nav li a {
    display: block;
	float: left;
    width: 14.28%; 
    padding: 10px;
    background: #000;
    border-right: 1px solid #fff;
    color: #fbd91f;    
    font: 400 13px/1.4 bitstream\_vera\_serifbold, Baskerville, "Palatino Linotype", Palatino, "Times New Roman", serif;	
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
/\* small text \*/
nav small {
    color: #aaa;    
    font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
    text-transform: none;
}

Listing 13.4

/\* font family \*/
@font-face {
    font-family: 'bitstream\_vera\_serifbold';
    src: url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.eot');
    src: url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.woff') format('woff'),
         url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.ttf') format('truetype'),
         url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.svg#bitstream\_vera\_serifbold') format('svg');
    font-weight: normal;
    font-style: normal;

}
/\* basic reset \*/
\*, \*:before, \*:after { 
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/\* nav bar \*/
nav {
    width: 100%;
    margin: auto;  
}
 
nav ul {
    list-style: none;
    overflow: hidden;
	background: #000;
}
nav li a {
    display: block;
	float: left;
    width: 12em;
    min-height: 8em;
    padding: 1.2em;
    background: #000;
	border-right: 1px solid #fff;
    color: #fbd91f;
    font: 400 0.8em/1.4 bitstream\_vera\_serifbold, Baskerville, "Palatino Linotype", Palatino, "Times New Roman", serif;	
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
/\* small text \*/
nav small {
    color: #aaa;
    font: 100 0.85em/1 Helvetica, Verdana, Arial, sans-serif;
    text-transform: none;
}

Listing 13.5

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Listing 13.5 - Basic HTML with Select List for Navigation</title>
<link href="rwd code 13.6.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>

<body>
<nav>
    <ul id="navigation">
        <li><a href="#">Home<br> 
        <small>Where Dandelions roam free</small></a></li>
        <li><a href="#">Products<br> 
        <small>These flowers will grow on you</small></a></li>
        <li><a href="#">Services<br> 
        <small>We care for the flowers you have</small></a></li>
        <li><a href="#">Support<br> 
        <small>We love to help with dandelions</small></a></li>
        <li><a href="#">About<br> 
        <small>Why we love dandelions so much</small></a></li>
        <li><a href="#">Reading<br> 
        <small>Read more about this wondrous plant</small></a></li> 
        <li><a href="#">Contact<br> 
        <small>Ask us about your dandelion needs</small></a></li>
    </ul>
    <select id="mobileNav">
    	<option value="">Go to...</option>
    	<option value="/home">Home</option>
       <option value="/products">Products</option>
       <option value="/services">Services</option>
       <option value="/support">Support</option>
       <option value="/about">About</option>
       <option value="/articles">Reading</option>
       <option value="/contact">Contact</option>
    </select>
</nav>

<script>
$(function() {
	$("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
    });
});
</script>
</body>
</html>

Listing 13.6

/\* font family \*/
@font-face {
  font-family: 'bitstream\_vera\_serifbold';
  src: url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.eot');
  src: url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.woff') format('woff'),
    url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.ttf') format('truetype'),
    url('fonts/bitstreamveraserif\_bold\_macroman/VeraSerif-Bold-webfont.svg#bitstream\_vera\_serifbold') format('svg');
  font-weight: normal;
  font-style: normal;

}
/\* basic reset \*/
\*, \*:before, \*:after { 
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/\* nav bar \*/
nav {
  width: 100%;
  margin: auto;  
}
 
nav ul {
  list-style: none;
  overflow: hidden;
	background: #000;
}
nav li a {
  display: block;
  float: left;
  width: 14.28%; 
  padding: 10px;
  background: #000;
  border-right: 1px solid #fff;
  color: #fbd91f;  
  font: 400 13px/1.4 bitstream\_vera\_serifbold, Baskerville, "Palatino Linotype", Palatino, "Times New Roman", serif;	
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
/\* small text \*/
nav small {
  color: #aaa;  
  font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
  text-transform: none;
}

/\* default to smallest browser size \*/ 
nav ul { display: none; }
nav select { display: inline-block; }

/\* change to full nav for larger screens \*/ 
@media screen and (min-width: 481px) {
  nav ul { display: block; }
  nav select { display: none; }
}