Horizontal Lines | The HTML Shark

Main page

About the site

Horizontal lines on a page is done with the tag <HR>. Lines are usually just black, thin, solid lines, but they can be styled with color, thickness, width etc. and they can be dashed, dotted, etc. You can find references to optional attributes for modifying how the line looks, but they are relics, and using standard attribues is recommended, as they work a lot better and gives you more options. The standard line using <HR> looks like this: What you can't see on the line, is that it is actually a groove, where the black part is the shadow. If you remove the shadow, i.e. set the attribute NOSHADE to noshade, i.e. NOSHADE="noshade", you get the following effect: The line being a groove can be seen when the attribute SIZE is set to 10 (SIZE="10"), then you get this effect: If you decide you want a wide, fully colored, solid line, e.g. in black, you are going to have a couple of problems with the browsers. Internet Explorer can only create a black line by using STYLE="background-color:#000000; border-color:transparent", and make a line with square ends, while Firefox requires the attribute STYLE="color:#000000" to work, and that will give you rounded ends on the lines. The color can be managed, by setting STYLE="color:#000000; border-color:transparent; background-color:#000000", providing the following effect (requires watching it with both browsers to see the difference): If you want something that looks like a bar with square ends, no matter what browser is used, you need to make a box instead. This could be something like a DIV with black background color, the height 10px and the width 100%. In code it looks like this: <DIV STYLE="background-color:#000000; height:10px; width:100%;"> On the page it looks like this: If you compare the thickness of the lines, you will see that for Firefox the height 10px gives the same line height for both HR and DIV, while Explorer, for some reason, makes the lines using the HR tag 12px in height. Som standard er linjen sat til 100% i bredde. Dette kan man selvfølgelig ændre til enten en fast bredde i pixels eller relativ i procenter, f.eks. 50%: Placeringen styres med attributten ALIGN, f.eks. ALIGN="left": Man kan godt gøre linjen længere end 100%, f.eks. 110%, så den stikker uden for afgrænsningerne: