Jan's Working with the Web

Step-by-Step: Horizontal Rule

 Start with:   , hector 20-Lastname-Firstname.htm, resource files

Add Horizontal Rule

1. If necessary, open hector20-Lastname-Firstname.htm in your text editor to see the source code.

2.  Save as hector21-Lastname-Firstname.htm to the web project2 folder on your Class disk.

3. Move your cursor to the right of the closing H2 tag, </h2>, of the second line of text on the page and press ENTER.
   This creates a blank line below.
   
4. Type <hr>.
   
   <h2 style="clear:both">My house is your house!</h2>
   <hr>
   
   <h3>My Job</h3>

5.  Save.
   [hector21-Lastname-Firstname.htm]

6. Switch to your browser and edit the address to show the hector21 version.
7. Refresh.

   A thin line shows across the page below the subtitle.
   

External Style Sheet: Horizontal Rule

You can use CSS to choose the length, the height (that is, the thickness), and the color of the horizontal rule. Some browsers do not render these features quite as expected.

The method below creates a flat, solid color line in all three browsers, IE, Chrome, Firefox. You will set both the border and the background-color to get the same results in all three browsers.

1. Switch to the text editor and show the external style sheet, hchavez-Lastname-Firstname.css.

2. Add a style for all the HR tags.
   hr {
       background-color:navy;
       height:1px;
       width:80%;
       border:1px solid navy;
   }

   This code creates a flat, solid line with total height 3 pixels and color navy. The line's height comes from 1 pixel from HEIGHT plus the top and bottom border, 1 pixel each. Total height is 3 px. The border and background must be the same color to get a flat line.

   Compact declaration: The code above for border is an example of a compact declaration: width (of the border), line type, color. Many compact declarations must be in a specific order! Of course, you can also set these separately as border-width, border-style, border-color. If you do not set  both the border and background-color for HR, you may not see any changes to the default look.

3. Save as hchavez21-Lastname-Firstname.css to the web project2 folder on your Class disk.

   We have been saving Hector's page with a different name in each lesson to make it easier to go back to an earlier stage. Now that there is an external style sheet, we will save that sheet with a matching number. You will have to edit the LINK so that the version of Hector's page pulls the correct external style sheet.

4. Switch to your text editor window that shows the source code for Hector's page.
5. Edit the LINK in the HEAD section to read:
   <link rel="stylesheet" href="hchavez21-Jan-Smith.css" type="text/css">

6.  Save.
   [hector21-Lastname-Firstname.htm]

7. Switch to your browser and Refresh.
   Is the horizontal rule different now?

8. Switch back the text editor and add a horizontal rule between each section by adding <hr> before the H3 or H4 tag for the next section, (except Travel) like:

   so I am not done with traveling yet.</p>
   <hr>
   <h4 style="clear:both">Fishing</h4>

9.  Save.
   [hchavez21-Lastname-Firstname.css]

10. Switch to the browser and Refresh.

    Hmmm. Some of the new horizontal rules are bumping into the floating images on the left instead of being centered in the available space. Did you expect that?

    You need to make the HR drop down clear of the images. It is easy to add another declaration to the HR style in the external style sheet.

11. Switch back to your text editor and the CSS file.

12. Edit the HR style to include clear:both;.
    
    hr {
        background-color:navy;
        height:1px;
        width:80%;
        border:1px solid navy;
        clear:both;
    } 

13.  Save.
    [hchavez-Lastname-Firstname.css]

14. Switch to the browser and Refresh.
    Better.

External Style Sheet: Format IMG and Class

Those horizontal rules are really close to the bottom of the floating images. It would be better if there was a bit of space.

You have a couple of options. You could add some vertical space below each image with an inline style or a class. Or you could add some vertical space to the HR styling. Let's do a style for the IMG tags that adds clear space at the bottom.

You will create styling in an external style sheet for IMG tags and then create a class to apply to some IMG tags.

1. Switch back to your text editor and the CSS file.

2. Add a declaration for images:
   img {margin-bottom:10px;}

3.  Save.
   [hchavez-Lastname-Firstname.css]

4. Switch to the browser and Refresh.
   Those images on the left look better! The only problem with this method is that you might not want ALL images to have space at the bottom.

5. Look at the two inline images in the Travel paragraph and the mail box at the bottom of the page.
   They also got the bottom margin. Not a happy effect in those cases! In that case, you need to create a class and apply it to selected images.

6. Switch back to your text editor and the CSS file.

7. Add a new class named .plainimg with margin set to zero pixels all around.

   .plainimg {margin:0px;}

8.  Save.
   [hchavez21-Lastname-Firstname.css]

9. Swtich back to the text editor with Hector's page
10. Edit the IMG tags for the pyramids, China, and the mail box to include the attribute class="plainimg".
    Partial code:
    <img class="plainimg" src="HTML/pyramids2.gif"
    <img class="plainimg" src="HTML/china2.jpg"
    <img class="plainimg" src="HTML/Mail.gif"

11.  Save.
    [hector21-Lastname-Firstname.htm]

12. Switch to the browser and Refresh.
    Ah. Much better! The three inline images sit on the same line as the text.
    

13. Experiment: Window size effect on page layout
    Horizontal rules are normally 100% the width of the container, whether its the whole page or a DIV or inside a table. What happens when the window size changes and the rule was not 100% width? What else changes as the window width changes?
    • Drag your window edge to make the window much narrower.
    • Scroll the page.
      What was affected? Any problems that need fixing?
    • Maximize your window.
    • Scroll the page.
      What was affected? Any problems that need fixing?
      If your source code matches the lesson directions, everything should wrap nicely, even at very large or very small window sizes. If you spot a glitch, just dig around in the source code to find the error.

Your recent work clearly illustrate that the web author does NOT have complete control over what the viewer of the web page sees. There are many factors involved. Keep this in mind... always!!