Examples Page » Building Basic Block Links
This is a page of various examples of basic block links (using the <h3></h3> heading) with their accompanying CSS attributes. The CSS used in this link type must be inline or classed otherwise all links would be block-style and that would most likely be problematic. I will use an anchor (link) class called block followed by the example letter in each of the examples on this page. Except where noted, the hover and focus properties shown on the links on this page are inherited from whatever attributes are CSS-assigned to the links on this web site and a colored background is added so you can more clearly see link activation.
A. The Basic Block Link
The basic block link is not restricted. It will simply provide a large clickable area spanning the available width. The height of the block is determined by font-size and padding.
a.blockA {
display : block;
}
Block Link Example A (Hover here to see it in action)
B. Block Link With a Border
This block link is like the basic block link except padding and a border was added.
a.blockB {
display : block;
padding : 5px;
border : 1px solid #666;
}
Block Link Example B (Hover here to see it in action)
C. Block Link With a Border & Background
This block link is like the basic block link with a border except a default state (inactive) background color was added.
a.blockC {
display : block;
padding : 5px;
border : 1px solid #666;
background-color : #ccc;
}
Block Link Example C (Hover here to see it in action)
D. Width-Specified Block Link
In this example, the width is specified to 300 pixels, otherwise it is just like the example above.
a.blockD {
display : block;
padding : 5px;
border : 1px solid #666;
background-color : #ccc;
width : 300px;
}
Block Link Example D
E. Mutiple Block Links in a List
Here I have taken the example above and multiplied in by three. Since we are seeing multiple links, I have put them in a proper unordered list. List attributes have been added to the CSS.
a.blockE {
display : block;
padding : 5px;
border : 1px solid #666;
background-color : #ccc;
width : 300px;
}
ul, li {
margin : 0;
padding : 0;
list-style-type : none;
}
Note: The links shown above would be touching normally with margin and padding set to zero. The element <h3></h3>, however, has been given 10px of top and bottom margin for layout clarity.
F. Upping the Style Factor
Here I have taken the example above and added more style information to the list itself. I have given the list its own width and its own background color. The list-style type is still none as it’s inheriting that from the example above, but this time I added some margin to the list-item. Though it is not show, I also attributed a new background color and font color for the link itself to jazz things up.
li.blockF, a.blockF {
display : block;
padding : 5px;
margin : 5px;
border : 1px solid #666;
background-color : #99cc66;
color : #fff;
width : 300px;
}
li.blockF {
width : 325px;
background-color : #999;
}
a.blockF:hover, a.blockF:focus, a.blockF:active {
background-color : #999;
color : #000;
}
G. Styling with Images
Here I have taken the example above and added image links for the backgrounds in addition to everything that was done above — though I did modify background colors in case images are off while CSS is on. This is a simple step but can make huge difference in how it all looks. Notice the negative margin adjustment to keep the images aligned. Do be sure to keep the images small, or better, pre-load them by incorporating them into the page (below the footer or something) and hide them with your CSS using the display property with the “none” attribute.
li.blockG a.blockG {
display : block;
padding : 5px;
margin : 5px;
border : 1px solid #666;
background-color : #ccc;
width : 300px;
}
a.blockG {
display : block;
padding : 5px;
margin : 5px;
border : 1px solid #666;
background : #99cc66 url(images/block_img1_on.jpg) no-repeat -10px -15px;
width : 300px;
color : #fff;
}
a.blockG:hover, a.blockG:focus, a.blockG:active {
background : #999 url(images/block_img1.jpg) no-repeat -10px -15px;
border : 1px solid #fff;
color : #000;
}
li.blockG {
width : 325px;
background : #ccc url(images/block_img1.jpg) no-repeat 0 0;
}
Note: This could have been done in a more simplfied way with a transparent background on the anchor in it’s hover/focus state, but a colored background was called for. Disable images to see the benefit.
Summary
This is just a start. You can use a single image and adjust its positioning per link and all sorts of advanced techniques. You can also apply background properties to the unordered list itself and any division it may live in. You can display the list in-line (horizontal), and more. There are all manner of possible customizations. I may write a Part 2 to this article to cover some of the advanced techniques in the future. Stay tuned and for now, be blocky, experiment, play.
