Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Creating the XHTML Base

We've used XHTML instead of HTML for the markup for this project. (If you're unsure about XHTML markup conventions, refer back to Project 4, " Creating a Complex Layout with CSS-P.")

  1. Create the DOCTYPE declaration for XHTML 1.0 Transitional in your markup document tabpage.html.

  2. In the head section of the document, tabpage.html, insert the tags necessary to link the external CSS files.

    Note that we created two external stylesheets in the previous step: common.css and advanced.css. Because advanced.css contains rules that will only apply to later browsers, including some rules that may cause problems in version 4 browsers, we'll use the @import method of linking an external stylesheet. For common.css we will use the <link> tag.

    Note the order: @import comes before the <link>. This is because any @import rule must precede all other style rules specified for a document.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    <title>Project 13: Tabbed interface demo</title>
        
    <style type="text/css" title="supplement">
          <!-- 
          @import "inc/advanced.css"; 
          -->
          </style>
        <link rel="Stylesheet" rev="Stylesheet" href="inc/common.css" />

NOTE

As you saw in Project 4, older browsers, such as Netscape 4.x, do not recognize the @import rule. We're using this seeming deficiency to our advantage here, to make sure that any CSS style rules that aren't interpreted properly are isolated from Netscape 4.x. All these rules are put in the advanced.css stylesheet.

For more information about the @import rule, see the W3C specifications at http://www.w3.org/TR/REC-CSS2/cascade.html#at-import.

  1. In the head section of the markup document, tabpage.html, insert the <script></script> tags to link the external JavaScript files.

        <script src="inc/docobj.js" type="text/javascript"></script>
          <script src="inc/tabs.js" type="text/javascript"></script>
    
    </head>
  2. In the body section of the document, create the markup for the contents.

    Arrange the content logically so that it can be easily read even if the browser in use does not recognize CSS or JavaScript. The text inside the tabs becomes the header for each section.

    Each of the three table cells that make up a tab have a class or id designation: the left side table cells have a class attribute value of tableft; the right side table cells have a class value of tabright; and the middle section table cells have the id values tabmiddle1, tabmiddle2, and so on.

    Each div has a unique id.

    <body>
    
    <div id="tab1">
    <table cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td width="8" height="24" class="tableft">
    <img src="images/dot.gif"alt="" width="8" height="24" border="0"></td>
    <td id="tabmiddle1">overview</td>
    <td class="tabright">
    <img src="images/dot.gif" alt="" width="7"height="24" border="0"></td>
    </tr></table>
    </div>
    
    
    <div id="box1">
    <!-- content of the first text box. Omitted for clarity. -->
    </div>
    
    
    <div id="tab2">
    <table cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td width="8" height="24" class="tableft">
    <img src="images/dot.gif" alt="" width="8" height="24" border="0"></td>
    <td id="tabmiddle2">background</td>
    <td class="tabright">
    <img src="images/dot.gif" alt="" width="7"height="24" border="0"></td>
    </tr></table>
    </div>
    
    <div id="box2">
    <!-- content of the second text box. Omitted for clarity. -->
    </div>
    
    <div id="tab3">
    <table cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td width="8" height="24" class="tableft">
    <img src="images/dot.gif"alt="" width="8" height="24" border="0"></td>
    <td id="tabmiddle3">best recipes</td>
    <td class="tabright">
    <img src="images/dot.gif" alt="" width="7"height="24" border="0"></td>
    </tr></table>
    </div>
    
    
    <div id="box3">
    <!-- content of the third text box. Omitted for clarity. -->
    </div>
    
    
    <div id="tab4">
    <tr>
    <td width="8" height="24" class="tableft">
    <img src="images/dot.gif"alt="" width="8" height="24" border="0"></td>
    <td id="tabmiddle4">etcetera</td>
    <td class="tabright">
    <img src="images/dot.gif" alt="" width="7" height="24" border="0"></td>
    </tr></table>
    </div>
  • + Share This
  • 🔖 Save To Your Account