Web Page Borders

Good Fences

We are going to look at three different methods to create a borders between div areas, the first is the one using the border properties in the css file. Not as elegant as I would have liked, but the first to work for me reasonably well. The second is again a border property, however, this time more refined, targeted and oh so simple. What's not to like? The final one that caused me grief when I thought it might be the tag that held inherent properties needed to separate areas on the main page. My approach failed miserably. However, I now believe that again the css file holds the answer to control the nasty features inherent in the span tab. All are described below.

Built-in, Take All

No matter how I change the site, this page will retain the early version of the border. So just look above to see the border between the banner area holding our site name and these vertical columns below. We begin at the div tag for the banner where an id controls this element:

   <div id="header">

We now go to the appropriate portion of the css file, where we look at the portion setting the border properties:

   #header {
        ...
       border-style:  solid;
       border-color: #ffffff #ffffff #000000 #ffffff;
       border-bottom-width: 15px;
    }

Note the border colors*. It begins at the top where it and and both sides are set to white. Only the bottom takes a full black. The matching of the background color by all sides but the bottom makes the three invisible. So all sides are present, but we only can infer the presence of the sides by noting the slight angular clip at each end of the bottom bar. [If you have doubts, change one of the sides color and see them appear.]

* Notice the ordering of the border color setting is in a clockwise fashion, starting at the top, right, bottom, left sides.

One Is Better

A better way is to simply to specify the bottom border. We can do this just by making a new id for the banner area and then set the attributes of the border. First our changing of the div tag:

   <div id="header-square-edge">

Now look carefully at the changes in the css code, the changes are not radical:

   #header-square-edge {
        ...
       border-bottom-style: solid;
       border-bottom-color: #000000;
       border-bottom-width: 15px;
    }

Not that bad was it? The code changes are simple, two lines are changed to from border plus attribute to inserting it's only the bottom border that is of interest. Now to really see the change hit the link Square Border. That was nice wasn't it?

With SPAN?

No, that's not a typo I really mean the span tag. In reality, it's a poor route to pursue to put in a border, however, when I started this site I had the impression that the span tag had built in characteristics I found it actually lacks. Consider this more of an academic type test to see how something inappropriate can be bent and twisted to the point that it functions. To my mind something like Perl scripting that prides itself in too numerous ways to accomplish the same task. Lets do our twisted work.

  #header-with-Span  {
    font: Veranda, Arial, Helvetica, sans-serif;
    background-color: #ffffff;
  }

and its css code:

  #with-Span  {
    font-size: 20px;
    font-weight: 900;
    width: 100%; 
    color: #000000;
    text-align: justify;
  }

Test Span

Here is a test Span Page.

Is Span Worth the Effort?

Probably not, but there are times we all take the wrong path. It need not be an overall loss. Learn from the experience.

In a real sense this review was a lark, based on an attribute and one tag was pulled in almost gratuitously. However, there is a purpose here. Too often the messy parts are cleaned up, the scenario presented is not the one traversed and the whole venture it is made to seem logical when the actual experience was anything but mind altering. Sure the solution is straight forward and simple, however, that may not be the route you took to solve the problem. Moreover, sometimes temporary fixes just have to be used. Those are the real take away lessons to be learned from this review.

[Here is another lesson that may be of value, that was learned after completing this article. Look at the square border discussion above. Simple, direct syntax that seemed to fail when working on adjacent div areas. I was able to create four borders, vary the color, width and type (e.g. starting with dotted moving to solid. That is if I used only the attribute "border:" followed by the 3 values. Then I was able to do the side only that was my original intent, but again I was limited to using "border-right: " followed by the same three values. Played with it changing sizing, padding, etc. But the original version I typed would not work. I checked to make sure that colons followed the attribute name, that semi-colons were at the end of each line and I sought misspellings. None were found. The error was the proper attribute was "border-right-style: ", not "border-right-type" as I had. This was pointed out to me on the Mozilla forums. Hence, it might be best to copy working code, making sure you use the correct replacement word if you make any modifications. I hope this helps you a bit to avoid the same dumb errors.]

[Later still I inadvertently solved another border/div problem serendipitously when my first correct hunch failed due to examining the code in the wrong section. See being in a rush or feeling pressed can result in stupid errors, however, you might be a crack coder that is immune to such failures (so why are you reading this?). In any case, I will remind you where I used a white boarder to hide a gray area I was seeing in the header div. I immediately suspected I did not place that div properly, but as mentioned I must have looked at the incorrect div section in the css file. I added this to that file to make certain the header div floated to the top left of the page:

  #header-what-do-you-call-it {
       position: relative;
       top: auto;
       float: left;
       width: 100%;
       height: 100px;
       ...
       background-color: #ffffff;
       /*  border-top-style: solid;
       border-top-color:  #ffffff; */
       border-bottom-style: solid; 
       border-bottom-color: #000000;
       border-bottom-width: 15px;
    }

the top of the code block shows the placement. Note now the extra top white boarder is superfluous, hence, commented out. Again I suggest if the real solution eludes you, try a temporary fix, but remember the problem. In most instances, as did this one, the solution will smack you in the face later. Good hunting.]

I hope you enjoyed the change of pace. Corrections, suggested extension or comments write: How-To-Guy. If the mailto does not work, use this: hcohen [-At-] bst-softwaredevs.com.

     © Herschel Cohen, All Rights Reserved

Return Home or Problems Page

References