Wiley CSS Instant Results 978-0-471-75126-7 User Manual
Product codes
978-0-471-75126-7
Code and Code Explanation
To create tabs using CSS and XHTML, follow these steps:
1.
Create the following markup documents; the differences between each document are
highlighted:
highlighted:
<!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’ xml:lang=’en’>
<head>
<meta http-equiv=’Content-Type’ content=’text/html; charset=UTF-8’ />
<title></title>
<link rel=’stylesheet’ type=’text/css’ href=’tabs.css’ />
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src=’/ie7/ie7-standard-p.js’ type=’text/javascript’></script>
<![endif]-->
</head>
<body id=’wrox’>
<ul id=’tabs’>
<li id=’tab1’><a href=’wrox.html’><span>Wrox P2P</span></a></li>
<li id=’tab2’><a href=’amazon.html’><span>Amazon</span></a></li>
<li id=’tab3’><a href=’google.html’><span>Google</span></a></li>
<li id=’tab4’><a href=’slashdot.html’><span>Slashdot</span></a></li>
<li id=’tab5’>
<a href=’twit.html’><span>This Week in Tech</span></a>
</li>
</ul>
<div id=’iframe’>
<iframe src=’http://p2p.wrox.com’
frameborder=’0’ marginheight=’0’ marginwidth=’0’></iframe>
</div>
</body>
</html>
2.
Save the first document as
wrox.html
.
<!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’ xml:lang=’en’>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” />
<title></title>
<link rel=’stylesheet’ type=’text/css’ href=’tabs.css’ />
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src=”/ie7/ie7-standard-p.js” type=”text/javascript”></script>
<![endif]-->
</head>
<body id=’amazon’>
<ul id=’tabs’>
3
Tabs
04_75126x ch01.qxp 3/8/06 10:24 AM Page 3