Web Design Discussion

Sometimes a normal horizontal menu is not enough to satisfy the customer. Recently I designed a web site which contained anchor links to several different sections on the page. I placed links to all the sections at the top of the page. After almost completing the site, he asked if that page could be changed to have a horizontal drop down menu. Instead of creating a DHTML menu I decided to build it with CSS and a little javascript (to make it correctly in IE 6).

Read the rest of this entry »

For years most web designers used the traditional style navigation menus for building web sites. The last few years many have moved to creating css menus. Technological changes have enabled web designers to create web sites that attract visitors from the search engines. Instead of using the once popular table-based design, they now create the whole site using css and xhtml.

Read the rest of this entry »

CSS menus have much greater versatility than the traditional javascript-based menus placed in tables.

Here are some of the main benefits for CSS Menus:

1. Quickly create horizontal or vertical navigation menus without cluttering up your html code.

2. Fast loading. Search engines can spider the code faster than javascript or flash menus because it generates clean code.

3. Versatile. You have the capability to create horizontal, vertical and drop down navigation menus for any site. You also have the ability to create hover effects and use background images. This gives you alot of creativity in developing the best navigation menu for your web site.

4. Accessibility. A CSS-based navigation menu is accessible to all types of computer users no matter what type of browser, screen resolution or computer they use.

5. Flexibility. If you need to create multiple css menus, use css classes in your web page design.

Recently I had to convert an entire web site’s navigation from using applets (often created using the now defunct Front Page Editor) to a css menu. I had to use multiple css classes (instead of ids) to create multiple horizontal menus.

CSS Horizontal Menu Using Classes

Here’s how the css horizontal menu is displayed on a web page:
http://www.ihost-websites.com/test2.htm

CSS


.navcontainer
{
margin-left: 0;
margin-right: 0;
text-align:center;
}
ul.navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

<div class=”navcontainer”>
<ul class=”navlist”>
<li class=”active”><a href=”#” class=”current”>LINK1</a></li>
<li><a href=”#”>LINK2</a></li>
<li><a href=”#”>LINK3</a></li>
<li><a href=”#”>LINK4</a></li>
<li><a href=”#”>LINK5</a></li>
</ul>
</div>


Here is the same CSS horizontal menu using DIV IDS

CSS


#navcontainer
{
margin-left: 0;
margin-right: 0;
text-align:center;
}
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}
–>
</style>


HTML


<div id="navcontainer">
<ul id=”navlist”>
<li id=”active”><a href=”#” id=”current”>LINK1</a></li>
<li><a href=”#”>LINK2</a></li>
<li><a href=”#”>LINK3</a></li>
<li><a href=”#”>LINK4</a></li>
<li><a href=”#”>LINK5</a></li>
</ul>
</div>


This CSS tutorial will discuss how to use the same CSS links throughout the design of your web site. If you place them all at the
beginning of your CSS style sheet the links on all your web pages will behave the same.

You will notice I haven’t defined the size of the links because they will inherit the size of the font styled in the body of your cascading style sheet.

CSS


<style type="text/css">
a:link {color: #0000FF;}
a:visited {color: #3366FF;}
a:active {color: #FF0000;}
a:hover {text-decoration: underline;}
</style>


Here are the 4 different styles of links called selectors:

a:link
Defines the style for normal unvisited links.
The color is dark blue in the example above.

a:visited
Defines the style for visited links.
The color of the visited link above is light blue.

a:active
Defines the style for active links.
A link becomes active once you click on it.
The color of the active link above is dark red.

a:hover
Defines the style for hovered links. A link is hovered (changes color or form) when the mouse moves over it. The hover link becomes underlined in the above example.

The next CSS tutorial will discuss how to create multiple link styles on the same page so you use different colors and font sizes according to what your design needs are.

Here is the conventional method How to Format the Heading Tags

HTML


<H1>Chinese and Thai Cooking Classes: Recipes,
  foods, and more!</H1>
  <H2>Chinese Cooking Classes</H2>
    <H3>Chinese Recipes: Mandarin and
      Cantonese</H3>
    <H3>Chinese Food Preparation</H3>
  <H2>Thai Cooking Classes</H2>
    <H3>Thai Recipes</H3>
    <H3>Thai Food Preparation</H3>


Notice that the H1 tag describes what the page is about. The other heading tags are the sub-headings to help guide the reader through the page.

Customizing the Heading Tag Using CSS

Normally the Heading Tag is very large and may not fit well within the structure of your page. It often contains too much space around it and therefore will move other elements further down the page. This will create an unprofessional appearance to your site.

Read the rest of this entry »

CSS lists are a great way to create fast loading, search engine friendly pages without using javascript.
Recently I redesigned a new site that needed 2 lines of navigation links at the top of the page. One line wouldn’t cut it because it would extend beyond the width of the web page. Visitors would have to scroll horizontally to view the page which essentially means they will immediately click elsewhere.

Read the rest of this entry »

I was recently asked to create a framed page for a customers web site. I did not want to use a framed page because they are not search engine friendly. A great alternative was to use the CSS Overflow Property to create frame-like pages.

Read the rest of this entry »

Most web sites these days use some type of rollover navigation structure. When the mouse is passed across the link it changes colors. This is usually achieved with a lot of javascript code which clutters your web pages making them slow loading and not very search engine friendly.

A great alternative is to use a css list for the vertical navigation or a css nested list if you require something more complex.
I use the css list if I have a number of categories that need to be divided into subcategories.

Benefits of a CSS Listed List

Read the rest of this entry »

Most web site banners are created using images. However images can slow the loading of your web pages and search engines don’t read images particularly if they contain text. Many sites often use images for navigation. This prevents search engines from spidering them.

Using CSS you can replace the images and get the added benefits of fast loading, search engine friendly pages.

How to create a text banner.

Read the rest of this entry »

Search engines give more weight to a web page that has content closer to the top of the HTML document. I am referring to the
source code not the visual content you see in your browser. If you incorporate this in the design of your web site, it may just give you the edge to outrank your competitors.

Read the rest of this entry »