Style Sheets for a Useful Links Page - Tricks with Lists

(Page 4 of 4 )

Okay, so we've looked at some basic usage in creating lists for useful links pages, not to mention all other kinds of lists. It is, however, always nice to have something that looks a little different.

I mentioned and showed previously how an image can be added to a <LI> tag. Let's get professional about this and use a style sheet to customize the look of the list for a simple menu. Also, next to the menu item can be placed any images that you choose. First, however, we need to create an ID for the styles applied to the unordered lists.

Feel free to edit as needed for the required font styles that fit the web site page being edited. First, the font size and color will be styled. The ID tag shall be named "menus."

#menus ul li a{ font-family: Arial;font-size : 14pt; text-decoration :
none; color :#000000}

Notice this will only apply to the <UL> tags. Next, the anchor hover styles:

#menus ul li a:hover{ font-family: Arial; text-decoration : none;
color :#663366}

It is not necessary to see the <UL> tag styles implemented, so let's turn them off:

#menus ul{ list-style:none}

Now for the HTML code, a <DIV> tag will be used to correctly position the menu on the page. First the <DIV> tag opens and a <P> tag is styled for the menu items. Change the images - yourimage.gif - to whatever is required next to the menu items:

<div ID="menus"><p STYLE="font-family: Arial; font-size : 14pt; font-
weight :bold; color :#0033FF">:
 

<ul>
 

  <li><img src="images/yourimage.gif" height="20" width="15" alt=""
border="0" align="center"><a href="">Go to the Moon</a>
 

  <li><img src="images/yourimage.gif" height="20" width="15" alt=""
border="0" align="center"><a href="">Go to Mars</a>
 

  <li><img src="images/yourimage.gif" height="20" width="15" alt=""
border="0" align="center"><a href="">Go to Jupiter</a>
 

  <li><img src="images/yourimage.gif" height="20" width="15" alt=""
border="0" align="center"><a href="">Just go away</a>
 

</ul>
 

</div>

Just enter the URL being visited in the href=" " parts.

A Final Look At List Item Etiquette

There are there main points to bear in mind when creating lists so that they look crisp and professional on the web page:

• Watch the image sizes. By this I mean the actual size, not the physical size in kilobytes.

• If the links perform different actions, make it clear on the links or in brackets next to the links. If the link is opening an email, or a PDF, or visiting another web site, ensure that a brief mention of this is added to the link. If it is a different web site, it is good practice to add a 'target = "_blank" ' in the <A> line. That way they have not been taken away from the site.

• Do not use graphical headers. Use the <H1>....<H6> tags available as it looks neater and helps with consistency.

Have fun with your lists for those useful links pages.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

Comments On: Style Sheets for a Useful Links Page

>>> Be the FIRST to comment on this article!