CHouseLive

Creating a styled link list using CSS and a definition list

There are many reasons why you might want to include a vertically styled link list on your website. Perhaps you simply want to use it as a menu or you want to provide a list of resources for your readers. The good news is, these types of lists are easy to style and implement. Today we are going to look at how one creates such a list using a definition list.

image

The Structure

The HTML structure for such a list is very simple. We are simple going to create a div (with a class called “link-list”) which will display a repeating background image.

Within the div we will use a definition list <dl></dl>. A definition list is in turn made up of two parts:

  • The definition title <dt></dt>; and
  • The definition description <dd></dd>.

The basic definition list’s structure looks as follows:

<dl>
  <dt></dt>
  <dd></dd>
</dl>

We will then place the link list title within the definition title tag <dt></dt> and each link <a href=”#nogo”></a> within a definition description tag <dd></dd>.

To differentiate between the links header and the links description we will place the description within a span <span></span> and use a break </br> to force the description to start on a new line.

The resulting code will look as follows:

<div class="link-list">
  <dl>
    <dt>Title</dt>
    <dd>
      <a href="#nogo">Link1 header<br />
      <span>Link description</span></a>
    </dd>
    <dd>
      <a href="#nogo">Link2 header<br />
      <span>Link description</span></a>
    </dd>
    <dd>
      <a href="#nogo">Link3 header<br />
      <span>Link description</span></a>
    </dd>
  </dl>
</div>

Before styling, the visual result of our coding is a little disappointing.

image

Styling the link list using CSS

Now that we have the HTML structure in place, we will use CSS to turn the list into a visually appealing element of the web page.

.link-list

Start by styling the “link-list” class.

.link-list{
  background:#566381 url(images/denim.jpg) repeat;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #fff;
  width: 280px;
  margin: 0 auto;
  padding: 10px;
}

background:#566381 url(images/denim.jpg) repeat;

First off we have specified that the background colour of the div should be blue (#566381), in case the browser does not display images:

image

Then we have told the browser to use an image (url(images/denim.jpg)) and specified where the image can be found:

image

Lastly we have instructed the browser that this image must be repeated (repeat) so that background denim pattern will be displayed for the entire height and width of the div, regardless of what these measurements may be.

font-family: Verdana, Arial, Helvetica, sans-serif;

This line simply tells the browser what font to use.  If it can’t find Verdana then it should use Arial and so on. If you have already set a font-family for your page, and you would like to use that font, them simply leave this line out.

font-size: 16px;

This specifies the size of font to be used. Again, if you have already specified a font-size then this line can also be left out.

color: #fff;

Another font attribute, the colour this time, which is set to white so that it shows up clearly on the blue background. This attribute is only required if you wish to add additional text below or above the definition list.

width: 280px;

Width specifies the width of the div and can be adjusted to fit within a column. Remember, if you are placing the link-list within an existing column, the sum of the width, left and right padding and left and right margins should not exceed that of the existing columns width.

margin: 0 auto;

The 0 specifies a top and bottom margin of 0px. If you wish to create white space above and below your link list, you can change this value as required. For example you could use

margin: 10px auto;

Which would create a 10px gap above and below the div. You can also specify different measurements for the top and and bottom margin as follows:

margin: 10px auto 15px auto;

Now you will have a 10px gap above the div and and a 15px gap below.

Setting the left and right margin to auto will centre the div within the page or column. As with the top and bottom margins, you can set this to meet the requirements of your page.

padding: 10px;

Lastly we have created a 10px gap between the edge of the div and any content that will be placed within the div. As with margins you can specify individual values for the  top, right, bottom and left padding using the following formula:

padding: top right bottom left

Saving your work and previewing your page in the browser should give you something similar to the following:

image

.link-list dl

The next step is to style the actual definition list.

.link-list dl{
  border: #fff dashed 2px;
  padding: 0;
  margin: 0;
}

border: #fff dashed 2px;

This simply places a white dashed border of two pixels in width around the entire definition list.

padding: 0; and  margin: 0;

To over-ride any default or preset list indents we set the padding and margin to 0. These values can be changed to suite your design.

And the result:

image

.link-list dt

Now we will style the definition title.

.link-list dt{
  font-weight: bold;
  font-size: 1.2em;
  color: #FF8000;
  letter-spacing: .05em;
  padding: 10px 15px;
  margin:0;
  border-bottom: #fff dashed 2px;
}

font-weight: bold; font-size: 1.2em; color: #FF8000;

We can style the look, size and colour of the font used in the title.

letter-spacing: .05em;

Letter-spacing increases the distance between each letter.

padding: 10px 15px;

Use padding to increase the spacing between the letters and the border.

margin:0;

Set the margin measurements to over-ride default and pre-set settings.

border-bottom: #fff dashed 2px;

We can use a bottom border to separate the title from the links.

image

.link-list dd

Next the definition description tag must be styled.

.link-list dd{
  margin: 6px;
  font-size: 1em;
}

margin: 6px;

Set the margin to create a little space between each link and remove the pre-set default indent.

font-size: 1em;

To make the links smaller than the heading set the font size.

image

.link-list a

Now the actual links will be styled.

.link-list a{
  padding: 10px 15px;
  border: #BF6000 dashed 1px;
  color: #FF8000;
  display: block;
  text-decoration: none;
}

padding: 10px 15px;

Set the padding around the links to create space between the words and the border.

border: #BF6000 dashed 1px;

This will create a thin (1px), dashed, dark orange border around each link.

color: #FF8000;

Set the colour of each link.

display: block;

Display: block will apply the link to the entire line as apposed to the area directly around the words.

text-decoration: none;

Remove the default link underline.

image

.link-list a:visited

a:visited sets the style of links which have already been visited.

.link-list a:visited{
  color: #fff;
}

In this case the link will be white if the link has previously been visited.

image

.link-list a:hover

Using hover we can determine what will happen when the reader passes their mouse over the link.

.link-list a:hover{
  border-color: #fff;
  color: #fff;
}

The above code changes the links border and colour from orange to white.

image

.link-list span

The last step is to style the link's description. As this description had been placed in a span, we will now style the link-list's span tags

.link-list span{
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  color: #fff;
}

font-family: "Times New Roman", Times, serif;

We will use font-family to change the descriptions fonts to a serif font.

font-style: italic;

Font-style is used to specify italics.

color: #fff;

Color, of course, is used to change the font colour to white.

image

That's all!

0 comments:

Post a Comment

Copyright CHouseLive - 2010 - All Rights Reserved