Creating Content Border with Images

Website content blocks, often called modules, or widgets, can be surrounded by borders to make them stand out. Perhaps notepad paper or an old parchment.

Different surrounds and backgrounds can be used to make the content pleasing to the eye and to add distinction. The styling enables the content to be categorised either by content or importance.

CSS3 allows for the replacement of some of the older work, for example borders with radius corners and drop shadows.

However, to implement graphic design surrounds, an image is still chopped into segments, as previously.

Where possible the segments are created such that either a horizontal or vertical repeat can be implemented.

Care is taken to ensure that frilly or castellated edges are seen to blend smoothly, not with a jagged edge, step, or hard change of colour.

A repeat allows for an efficient use of downloaded images, keeping the weight of the web page downloaded to a minimum and allowing for expansion of the content area according to the content added.

The two methods generally employed to provide this border styling are tables and divs.

In both methods the image design is chopped up into segments which are either corners or repeats for the sides. There may also be background styling for the content within the block.

The smallest table is based upon a 3×3 grid. Whilst the div method uses a number of divs stacked one above the other.

Borders Using Tables

An example of the table layout is given below. It uses a combination of fixed size table cells.

<table>
<tr>
<td width="6" height="6" background="/images/topleft.gif"> </td>
<td width="100%" height="6" background="/images/top.gif" height="6"> </td>
<td width="6" height="6" background="/images/topright.gif"> </td>
</tr>
<tr>
<td width="6" height="100%"><img src="/images/left.gif" width="6"> </td>
<td width="100%" height="100%" >Content is added here</td>
<td width="6" height="100%"><img src="/images/right.gif" width="6"> </td>
</tr>
<tr>
<td width="6" height="6" background="/images/bottomleft.gif"> </td>
<td width="100%" height="6"><img src="/images/bottom.gif"  height="6"> </td>
<td width="6" height="6" background="/images/bottomright.gif"> </td>
</tr>
</table>

Here’s an image showing a container with blue and white edges, with a yellow background for the content

Creating ontent border with images: grid of images

Perhaps a little small to view properly, so here it is enlarged:

Creating content border with images: grid of images (enlarged)

As can be seen the corners are of a fixed size. The sides joining them are set to be the full length of that side. As shown the edge middle sections are 6px in length. To minimise the saved image this could be 1px.

The side and top/bottom images are set to to match the width (6px) or height (6px). These images will then be repeated within the table cell.

The table cell in the centre is the content area. Within this area will be added the appropriate code for the CMS to generate the content.

I have found that to ensure the desired results the images added along the top and sides should be specified fully, to avoid the browser making guesses as to your intent.

The table code above can be improved upon by adding CSS class references and moving the image and sizing to CSS.

For example here’s a 3×3 table with the HTML layout and associated CSS.

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="BlueBorder-tl"></td>
<td class="BlueBorder-tc"></td>
<td class="BlueBorder-tr"></td>
</tr>
<tr>
<td class="BlueBorder-cl"></td>
<td class="BlueBorder-cc">
Content goes here
</td>
<td class="BlueBorder-cr"></td>
</tr>
<td class="BlueBorder-bl"></td>
<td class="BlueBorder-bc"></td>
<td class="BlueBorder-br"></td>
</tr>
</tbody>
</table>

In the CSS below, I have merged the corner images together as a single image. This is then positioned to show the desired corner.

/* begin Box, BlueBorder */


.BlueBorder-tl
{
	width: 6px;
	height: 6px;
	background:url(images/BlueBorder-corners.png) no-repeat;
}

.BlueBorder-tr
{
	width: 6px;
	height: 6px;
	background:url(images/BlueBorder-corners.png) no-repeat;
	background-position: -6px 0px;
}

.BlueBorder-bl
{
	width: 6px;
	height: 6px;
	background:url(images/BlueBorder-corners.png) no-repeat;
	background-position: 0px -6px;
}

.BlueBorder-br
{
	width: 6px;
	height: 6px;
	background: url(images/BlueBorder-corners.png) no-repeat;
	background-position: -6px -6px;
}

.BlueBorder-t
{
	height: 6px;
	background: url('images/BlueBorder-t.png') repeat-x;
}

.BlueBorder-l
{
	height: 6px;
	background: url('images/BlueBorder-l.png') repeat-x;
}

.BlueBorder-r
{
	height: 6px;
	background: url('images/BlueBorder-r.png') repeat-x;
}

.BlueBorder-b
{
	height: 6px;
	background: url('images/BlueBorder-b.png') repeat-x;
}

/* end Box, BlueBorder */

Borders Using DIVs

The div method uses a number of divs either stacked on top of each other or absolutely positioned to give the same effect.

<div class="topLeft">
 <div class="topRight">
  <div class="top">
   <div class="left">
    <div class="right">
     Content is added here
    </div>
   </div>
  </div>
 </div>
</div>

Like the use of tables the original image is chopped up into segments which are then put back together.

In the div method all the items are of the same size the background images are moved to their appropriate edge and the repeat set for the x or y direction accordingly.

For example the top left corner is set using:

.topLeft{
background:url(/images/topleft.gif) no-repeat
}

I have found using this method that there is a need to stack the DIVs in a correct order to ensure that the edges and overlaps of the backgrounds match up and can be viewed correctly.

I have also used a method whereby each div is referenced sequentially with the use of absolute positioning moving the div to its required location.

Creating content border with images using divs

The image above shows an example of the result. In this case I have used a fixed width for the div sizing. It would be normal to allow 100% sizing, the div taking the full width of its bounding container.

Again the DIVs are stacked, but in many respects the code looks simpler to view and there is less chance of omitting one of the closing tags </div>.

Note how the edges are constructed first, allowing the corners to sit on top hiding the continuous edges.

<div class="border">
 <div class="top">
 <div class="left">
 <div class="right">
 <div class="bottom">
  <div class="topLeft">
  <div class="topRight">
  <div class="bottomLeft">
  <div class="bottomRight"> 
   <div class="content">Content is shown here </div>
  </div>
  </div>
  </div>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

And the associated CSS to position the above elements:

 .border{ position:relative; }
 .top{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-t.png) repeat-x;
 background-position:0 0;
 }
 .left{ position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-l.png) repeat-y;
 background-position:0 0;
 }
 .right{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-r.png) repeat-y;
 background-position:100% 0;
 }
 .bottom{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-b.png) repeat-x;
 background-position:0 100%;
 }
 .topLeft{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-tl.png) no-repeat;
 background-position:0 0;
 }
 .topRight{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-tr.png) no-repeat;
 background-position:100% 0;
 }
 .bottomLeft{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-bl.png) no-repeat;
 background-position:0 100%;
 }
 .bottomRight{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-br.png) no-repeat;
 background-position:100% 100%;
 }
 .content{padding:8px;}

Thoughts

I have found using a 3×3 table with border edges and a central content area was most successful.

The use of stacked DIVs with positioned images and the use of relative and absolute positioning didn’t always work, for example as a DotNetNuke container. The JavaScript associated with the container elements couldn’t derive the position and tended to then misplace the required action menu.

For efficiency there is an advantage to creating a single image comprising the components to be used. Only the single image is then downloaded which saves on the overhead employed in asking for each image download, checking it’s version.

The single image is then positioned as required. This is like taking a larger image and moving it behind a window cutout to show the desired section.

As shown in the examples above the border images are quite simple. The container themes below are more akin to this style of table and div layouts.

creating content border with images examples

Change Colour of Text Underline

Looking to set the underline colour of text to be a different colour to the text.

The default colouring will set the underline colour to be the same as the text, as illustrated below:

Example text with an underlined word.

We can use CSS for setting the colour using the parameter will be

text-decoration-color: #dd0000;

This may be included, targeting underlines in general, or by use of classes/ids.

Here’s the same underline, with the text-decoration-color set. In this example I’ve used the in-line style – its easier to use for ad-hoc styling examples.

Example text with an <u style=”text-decoration-color: #dd0000;”>underlined</u> word

Example text with an underlined word

WordPress

Whilst writing this article I noticed that the ready formatting options offered in the WordPress text editor don’t include an underline. Is this for simplicity, rationalising the options available in a limited space, maybe because the underline can so easily be confused with a link, or perhaps use of the tag is no longer encouraged.

I found that version 4.7 of WordPress, from late 2016, removed both the underline and justify options from the TinyMCE editor.

Remove the Dotted Line Around a Clicked Link

When I click on a link a dotted line appears around it.

As an example, the image below is taken from some recent development work. It shows a menu in white on a dark background.

Remove dotted line around clicked link showing dots

Here I have clicked on the link to the contact us page. The white, dotted border line is showing until this page is replaced by the next.

As viewed I think that the dotted outline, when clicking on the link is not in keeping with the rest of the menu. I would like to remove it.

The image below shows how I would like the transition to look.

Remove dotted line around clicked link without dots

The expectation is that the configuration of the line border is configured in CSS.

In fact its controlled by the CSS outline property.

I added the property to the a entry in CSS, example:

a:hover, a:focus{color:#004;text-decoration:none;outline:none;}

Job done!

Now when I click on on the menu link there is no surrounding dotted line

Posted in CSS

Adding ClearFix Clear Float after div

I was interested in clearing floats and adding clearfix after a section of content.

Working on a website theme I was integrating the output from a plugin. The plugin had a wrapper div with a series of entries each in a div.

Shown below is the wrapper div with the two floating elements.

<div class="features">
    <div class="feature">example</div>
    <div class="feature">example</div>
</div>

It could easily be a series of images, each floating left against its neighbour.

For presentation I was using the floats left and right.

.testimonials:nth-child(2n){float:left;}
.features:nth-child(2n+1){float:right;}

After this section of content I wished to cancel the floats. Leaving the float active affected the following content layout. I would assign clear:both.

Utilising the plugin I did not wish to add an empty div after the section. This would mean adding the HTML code within the editor. I chose to use the after pseudo element.

Given below is the clearfix equivalent added to the content wrapper.

.feature::after{
	content: " ";
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;
}

So there you have, a clearfix equivalent added to a wrapper div utilising the after pseudo element to save adding an extra empty div.

Change the Horizontal Line Colour in WordPress

On a WordPress website I added a horizontal line to divide two sections of content.

Within the WordPress editor I had added a horizontal line to space some text. Providing a divider between two sections of text on the web page.

To add the line I had used the HTML tag <hr />.

The WordPress editor doesn’t offer a horizontal line option. I added the line by flipping into Text mode and adding the HTML <hr /> code at the requisite point.

To add a further distinction I wanted to select a different colour for the hr tag. The body text was black on a white background. Black looked to be too strong I favoured a red colour, perhaps #dd0000.

I first tried setting the colour of the hr horizontal line using the CSS style color.

<hr style=”color: #dd0000;” />


But I found there was no change, the colour remained a dull grey.

How to change the colour of the hr html tag <hr />?

An alternative styling of the hr tag is border based. Define the border colour for each of the edges. For example:

<hr style=”border:#dd0000 solid 1px;” />


With this option the line was showing red as intended.

The website’s theme was a child theme built upon the popular bootstrap.

With the help of the FireFox FireBug add-on I was able to see that the default CSS for the hr tag was defined using borders.

I found that the hr tag is constructed from a single border line, not the full box.

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eeeeee;
}

Whilst this at first appeared to be counter to expectations it has the advantage that it is ready to change the line style to dots or dashes. The thickness can be easily amended. It can be shown as an open box or a couple of horizontal lines.

<hr style=”border:3px dashed #dd0000;padding:4px;” />


The border property takes precedence over the colour property. Once defined against the tag, either globally or within a section of the page, this method should be followed.

Maybe this is why the popular bootstrap framework uses border in its definitions.

For simplicity I added the CSS styling in-line using the style property.

To develop the presentation further the styling for the <hr> tag can be moved into the CSS supporting files. This maybe a generic rendering for all of the hr tags or more specific according to the page template and area of the page.

Outline-offset Alternative for Internet Explorer

Whilst constructing an addition for a website, a part of the spec was a border around an image.

The images to be shown were created by a gallery, each wrapped in a link to show the larger version of the image.

Unlike the usual border around an image. I wished to add a border which had a gap between it and the image edge.

Given below is an example of the gallery module output:

<div class="gallery6">
     <a class="" href="http://www.example.com" style="width:265px;height:25px;" >
          <img src="http://www.example.com/images/apples.jpg" alt="Apples" style="width:265px;height:25px;">
     </a>
     <a class="" href="http://www.example.com" style="width:265px;height:25px;" >
          <img src="http://www.example.com/images/plums.jpg" alt="Plums" style="width:265px;height:25px;">
     </a>
     <a class="" href="http://www.example.com" style="width:265px;height:25px;" >
          <img src="http://www.example.com/images/pears.jpg" alt="Pears" style="width:265px;height:25px;">
     </a>
</div>

I initially investigated styling the link and image appropriately, but circumstance didn’t make this a viable option. The gallery was controlling much of the rendering, including in-line styling of the link and image width and height.

Searching for alternative ideas and inspiration I found the outline-offset HTML CSS option.

Excellent I thought! I implemented the outline-offset in CSS and checked it in a number of browsers.

.gallery6 img{
     outline-offset:20px;
     border:1px solid #000;
 }

Then I looked with Internet Explorer. To my dismay there was no border.

Mozilla and w3 Schools provide information on the use of outline-offset.

The w3 website also summarises the browser compatibility of outline-offset. It shows only the one browser not supporting it: Internet Explorer

So an alternative approach is required.

I found reference to a workaround which adds the border using a pseudo element

Here’s that workaround for the outline-offset with Internet Explorer using the after pseudo element.

.gallery6 a{
    position:relative;
    width:265px;
    height:265px;
}
.gallery6 a:after{
    border: 1px solid #afa987;
    content:" ";
    display:block;
    position: absolute;
    top: -20px;
    left: -20px;
    width:305px;
    height:305px;
}

In this example the pseudo element is set to the greater width and height and given a negative move of the top left corner to position it correctly.

Don’t forget the relative, or absolute positioning of the main item. in this example gallery6 a.

Whilst Internet Explorer doesn’t support the property outline-offset a comparable result , ie a border surrounding an image offset by a number of pixels, can be achieved using the after pseudo element with a larger size and shifted the appropriate pixels left and up.

Don’t Inherit parent CSS opacity

In CSS once a parent element has its opacity set, the child elements inherit the same value.

This can render the child elements progressively more difficult to view.

But, now there are ways to prevent CSS child elements from adopting their parent’s setting.

When setting a CSS opacity on a div layer the child elements inherit this opacity value.

Ideally we want a parent element to be semi transparent with an opacity setting of, for example, 80% with the child elements bright and clear.

Here’s our example

<div style="background: #00d; opacity: 0.8; padding: 8px;">
<div style="background: #efefef;  padding: 8px;">
<strong>Title within</strong>

Content within div of opacity 80%.
</div>
</div>

Which renders as: Title within Content within div of opacity 80%.

If we use RGBA values instead, the opacity is set to the assigned element only and isn’t inherited to the child elements.

The rgba setting equivalent would be background:rgba(239,239,239,0.8)

RGBA values can be used in CSS to configure gradients, so manufactured bars and buttons will be OK.

However, we need to ensure that older browsers can serve the page as we wish.

To this end a background image is used, already created with a transparency level. I’m assuming that IE6 and its well known PNG file issues won’t be supported.

background:url(images/info-efefef-trnspnt-80.png);
background:rgba(239,239,239,0.8);

Note that the order of the CSS elements is important. The RGBA entry is to be positioned after the image. Otherwise the newer browser would select this setting over the RGBA one, which we wish it to use.

So there you are by changing the way colours are assigned we can set a transparency on a parent element which isn’t inherited by its child elements.

Add Quotes Around Text With CSS

Add quotation marks around a testimonial text using CSS, not in the testimonial entry.

Instead of adding quotation marks within the quoted text why not add them automatically using CSS?

For a WordPress website I had included a testimonials plugin. The plugin had a number of text fields. Wishing to simplify the customer’s actions. I didn’t want the customer to remember to add quotation marks to the start and end of the quoted body text.

I chose to use CSS to make the addition of the quotation marks.

Using the CSS before and after pseudo elements, characters can be added wrapping the content of an HTML element.

Given below is the sample HTML, a div with the class testimonial assigned to it. This wraps the testimonial content.

<div class=”testimonial”>A pleasure to do business with… </div>

The CSS below adds the quotation marks

.testimonial:before{content:"\""}
.testimonial:after{content:"\""}

Note the use of the back slash to escape out the quote.

This gives

“A pleasure to do business with…”

CSS Import

Using @import a second CSS stylesheet can be included as a reference from a CSS file.

An example of this referencing is shown below where the file stylesheetB.css has been referenced using @import.

@import url(“stylesheetB.css”);

@import should be added to the head of the CSS file.

Adding an import of another CSS file to a an existing file allows for reuse and management of code but will increase the time taken to download the files making the rendering of the site slower, affecting the Google site ranking given that site response is taken into consideration.

Some of the advantages and disadvantages of including a style sheet import are given below.

Advantages

There are occasionally situations where @import is appropriate Like using @media to apply different styles to different devices.

It can be practical to create one or more standard CSS construction files which are referenced according to the design or features implemented. For example references to the design/development company can be maintained separately as opposed to editing a CSS file across multiple sites or simply making it easier to find the file within a given site.

Commonly used features such as a Google font can be created and then referenced by each stylesheet as opposed to repeatedly including the code within each file. Updates are then mastered once rather than multiple times with the possibility of error or omission.

Disadvantages

Adding the import to an existing style sheet can affect the concurrency in the downloading of the files. This can lead to the referenced imported CSS file being held until the referencing file has been downloaded.

Each file downloaded has an overhead. Concentrating all of the CSS code into a single minified file is more efficient and will take less time to download.

JQuery Accordion with Different Header Colours

The JQuery Accordion is configured, by default, to have one colour style for the inactive headers and another for the active one. CSS can be used to give each header a different colour.

JQuery with different coloured headersUsing the CSS3 child numbering for elements different colour schemes can be assigned to each of the headers.

In the example image shown on the right, the highlighted entry is given a yellow background colour. The other sections are shown as red, green and blue.

The Accordion code is defined as a series of <h3> tags, with the associated content within a <div>.

The operation of the Accordion can be configured, but for the default operation clicking on a section opens it for view, whilst closing the previously open section.

The code example below shows the outline HTML for the accordion. In this view the heading sections are shown, together with some of their associated content.

<div id="accordion">                  
    <h3>Meat & Fish</h3>
    <div id="MeatFish">
        <div>British Chicken Breast</div>
        <div>British Pork Loin Steaks</div>
        <div>British Beef Mince</div>
        <div>Bacon</div>
        <div>Scottish Salmon Supremes</div>
        <div>Haddock Fillets</div>
        <div>Scottish Smoked Salmon</div>
    </div>
    <h3>Fresh Produce</h3>
    <div id="FreshProduce">
        <div>British Courgettes</div>
        <div>Green Beans</div>
        <div>British Cauliflower</div>
        <div>British Carrots</div>
        <div>Cucumber</div>
        <div>Tomatoes</div>
    </div>
    <h3>Fruits</h3>
    <div id="Fruits">
        <div>Apricots</div>
        <div>Gooseberries</div>
        <div>Raspberries</div>
        <div>Strawberries</div>
        <div>Bramley Apples</div>
    </div>
    <h3>Store Cupboard</h3>
    <div id="StoreCupboard">
        <div>British butter</div>
        <div>British Milk</div>
        <div>British Double Cream</div>
        <div>Low Fat Natural Yogurt</div>
        <div>British Free Range medium Eggs</div>                         
        <div>British Cheddar Cheese</div>
        <div>Somerset Brie</div>
        <div>Stilton</div>
    </div>
</div>

Using CSS3 with references to nth-child elements 1, 2 3 and 4 each of the sections can be configured.

Below is the associated CSS, in this case the first element is shown in full, with only partial content for the following 4 entries, together with a full entry for the selected (active) item.

#accordion .ui-accordion-header:nth-child(1){
    background:#b8001e;
    color:#ffffff;
    background: -moz-linear-gradient(
        center bottom,
        #9f2a3c 0%,
        #87141b 50%,
        #b8001e 100%
    );
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #9f2a3c),
        color-stop(0.50, #87141b),
        color-stop(1, #b8001e)
    );
    background: -o-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #9f2a3c),
        color-stop(0.50, #87141b),
        color-stop(1, #b8001e)
    );
    background: -ms-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #9f2a3c),
        color-stop(0.50, #87141b),
        color-stop(1, #b8001e)
    );
}

#accordion .ui-accordion-header:nth-child(2){
    background:#a6037a;color:#ffffff;
}
#accordion .ui-accordion-header:nth-child(3){
    background:#029bde;color:#ffffff;
}
#accordion .ui-accordion-header:nth-child(5){
    background:#88b033;color:#ffffff;
}
#accordion .ui-accordion-header:nth-child(6){
    background:#d8d818;color:#ffffff;
}
#accordion .ui-accordion-header.ui-state-active {
    background:#f8ed72;color:#000000;
    background: -moz-linear-gradient(
        center bottom,
        #ebf145 0%,
        #decc00 50%,
        #f6ff00 100%
    );
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #ebf145),
        color-stop(0.50, #decc00),
        color-stop(1, #f6ff00)
    );
    background: -o-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #ebf145),
        color-stop(0.50, #decc00),
        color-stop(1, #f6ff00)
    );
    background: -ms-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #ebf145),
        color-stop(0.50, #decc00),
        color-stop(1, #f6ff00)
    );
}

The CSS for the first element’s header class is defined using the reference #accordion .ui-accordion-header:nth-child(1). The background gradient is then defined for the different browsers.

#accordion is a reference to the wrapping div, with id of accordion

.ui-accordion-header refers to the class which the JQuery code automatically added to the <h3> elements, when it is called, once the page has been loaded. This is visible when the source of the web page is viewed either directly or using one of the browser tools to inspect an element.

#accordion .ui-accordion-header.ui-state-active is the CSS for the active, expanded section header.