#topnav{
width:100%;
height:30px;
background:#e5e5e5;
position:absolute;
top:100px;
left:0;
margin:0;
padding:0;
border:none;
}

/* We keep the style of ul the same for both vertical and horizontal navigation layouts  */
#topnav ul{
width:100%;
list-style:none;
margin:0;
padding:0;
}

/*
We add a 1px margin at the right hand-side to create a vertical separator by having the background color applied to #topnav (#E5E5E5) bleed through.
*/
#topnav ul li{
position:relative;
margin:0 1px 0 0;
padding:0;
float:left;
clear:none;
display:inline;
}

/*
#topnav ul li a:visited selector help keep the navigation links style remain the same whether the page is visited or not. Otherwise your link text may turn purple. That behavior can be user-friendly for links in a text section but will look just awful.
*/
#topnav ul li a, #topnav ul li a:visited {
display:block;
height:30px; /* vertically centers the hyperlink text  */
text-align:center; /* better than adding padding to left and right sides */
line-height:28px; /* vertical centering instead using padding to top and bottom sides. You can adjust this number as needed depending on the font used. */
color:#000;
background:#efefef;  /*  use a background color or background image to style these buttons  */
text-decoration:none;  /* removes the default underline  */
}

#topnav ul li ul{
width:150px; /* default width for the sub-menus */
height:auto;
overflow:hidden;
border:1px solid #ccc;
position:absolute;
top:30px;
left:0;
display:none; /* hide the sub-menus by default  */
z-index:1000; /* or any number to ensure the sub-menus will appear on top of every other element in the page. */
}

/* shows the sub-menu when the mouse is over the parent li element (i.e. li:hover) .  This selector will inherit all the styles applied to #topnav ul li ul. So we only need to override the display property to show the sub-menu during the hover state of the parent <li> container */
#topnav ul li:hover ul{
display:block;
}

/*
List items in a sub-menu should be vertically aligned. So, the floating will be set to none so these block-level elements can revert to their default alignment: stacked vertically.
*/
#topnav ul li ul li{
float:none;
margin:0;
padding:0;
}

/* Sub-menu links   */
#topnav ul li ul li a, #topnav ul li ul li a:visited {
display:block;
height:30px; /* redundant but just in case */
margin:0;
padding:0;
text-align:left; /* aligns sub-menu anchor text to the left */
text-indent:5px; /*adds a 5px spacing between anchor text and sub-menu left border */
text-decoration:none; /* redundant but just in case */
line-height:28px; /* redundant but just in case */
}

/* Because top level links such as home, services, … do not have the same number of text characters, it’s always a good idea to specify the width of each item proportionally to the amount of horizontal space needed.     */
#topnav ul li#home{
width:80px;
}

#topnav ul li#services{
width:120px;
}

#topnav ul li#products{
width:120px;
}

#topnav ul li#contact{
width:80px;
}

#topnav ul li#testimonials{
width:150px;
}

#topnav ul li#about{
width:80px;
}

/* It’s also wise the specify the width for each sub-menu. It’s just a matter of general look-and-feel. */
#topnav ul li#services ul{
width:180px;
}

#topnav ul li#products ul{
width:200px;
}

The main differences between the vertical and horizontal navigation layouts are:
- the alignment of the top-level align items using the float property
- the positioning of the sub-menu both vertically and horizontally.
- the text alignment of the top-level links (centered) and the sub-links (left aligned)

#leftnav {
width:200px;
height:auto;
overflow:hidden;
margin:0;
padding:0;
background:#efefef; /*light grey background color */
border:solid 2px #ccc; /* 2 pixels thick grey border  */
border-radius:10px; /* round corners with a 10 pixels radius */
-moz-border-radius:10px; /* mozilla Firefox web browsers */
-webkit-border-radius:10px; /* Webkit Engine Bases Wed browsers: Google Chrome & Apple Safari */
-o-border-radius:10px; /* Opera web browser */
-ms-border-radius:10px;
}

#leftnav ul{
width:100%; /* matches the width of its parent container #leftnav */
list-style:none; /* prevent the display of bullets  decoration */
margin:10px 0; /* makes sure the first and last <li>..</li> elements are 10px away from the top and bottom edges */
padding:0;
}

#leftnav ul li{
float:none; /* just in case */
margin:1px 0 0; /*   */
padding:0;
}

#leftnav ul li a{
display:block; /* Remove this rule and see what happens to help you understand its meaning    */
height:30px; /* defines the height of each link */
line-height:28px; /* use to vertically center the link text */
text-align:left /* flushes the link text to left */
color:#000; /* text color */
text-decoration:none; /* prevent the underline */
margin:0;
padding:0;
background:#e5e5e5; /* you can define a background color/image */
}
#leftnav ul li a:hover{
/* add rules to create a rollover effects: background color/image, text color, … */
background:#fff; /* changes the background color to white as a rollover effect */
}

#leftnav ul li a:visited{
color:#000; /* prevent text link to change color when the target page is already visited */
}

#leftnav ul li ul{
width:150px; /* default width of sub-menus */
height:auto;
overflow:hidden;
border:solid 1px #ccc;
position:absolute;
top:0; /* you can add a few more pixels to nudge it down   */
right:0; /* use left:0; instead for a right sidebar */
z-index:1000;
display:none; /* sub-menu will be hidden by default */
}

#leftnav ul li ul li{
width:100%;
}

#leftnav ul li ul li a{
/* not really needed unless the sub-links have CSS different from the top level navigation links */

}

#leftnav ul li:hover ul{
display:block; /*reveal the sub-menu when the mouse is over the main list/link item */
}

The ”list-style:none;” CSS rule defined earlier in the #leftnav ul selector also applies to sub-menus . Although the sub-menu selector #leftnav ul li ul is more specific, all the rules defined in the #leftnav ul selector apply to it unless overridden. In the same token, all the rules defines in the #leftnav ul li also applied #leftnav ul li ul li because the latter is just a special case. The same rules apply to #leftnav ul li a and #leftnav ul li ul li a selectors.
Adding CSS IDs to the top-level list item (e.g. <li id=”home”>…</li>) allows us in this case to target a specific sub-menu and also choose which main link should be highlighted to give your web site visitors an indication about which section of your web site the current page is part of. So let first use that specificity to target each sub-menu in our navigation bar.

Although we defined a default width of 150px in the sub-menu selector # leftnav ul li ul, because some links in the sub-menu have more anchor text than other in most case you would have different widths for those sub-menus. You can also define a default width that is enough to accommodate the longest anchor text in your sub-menus.

I personally call that choice a lack of aesthetic sense. It doesn’t hurt to write a few extra lines of CSS to get visually pleasing sub-menus. So here we go:

#leftnav ul li#services li ul{
width:180px; /* adjust this number as needed */
}
#leftnav ul li#products li ul{
width:200px; /* adjust as needed */
}

From experience also you would set a sub-menu width to allow 30 to 40px breathing room between  the anchor text and the right edge of the sub-menu item. In fact what I just called a breathing room or more of a safety zone.

You see some web browsers such as Safari tend to make your text bolder (anti-alias) then what you would have in say Firefox. When that happens, your text occupy more horizontal space and will wrap the anchor text if there isn’t enough room to display it in a single line.

Also keep in mind, if you chose a font that is not available to the end-user’s web browser it will be substituted by another font close to what you have defined. That also will affect the width needed to accommodate your sub-menus’ anchor text.

Let’s assume you use the following CSS media queries:
<!–  Smartphones in portrait mode and tablets in portrait mode  –>
<link rel=”stylesheet” media=”screen and (min-width: 128px) and (max-width: 640px)” href=”phone.css”>

<!–  Smartphones in landscape mode and tablets in portrait mode  –>
<link rel=”stylesheet” media=”screen and (min-width: 641px) and (max-width: 800px)” href=”portait.css”>

<!–  tablets in portrait mode and tablets in portrait mode  –>
<link rel=”stylesheet” media=”screen and (min-width: 801px) and (max-width: 960px)” href=”tablet.css”>

<!– larger tablets in landscape mode, laptop and desktops  –>
<link rel=”stylesheet” media=”screen and (min-width: 961px)” href=”full.css”>

Of course your choice of dimensions range depends on your web site design. Therefore the pixels (px) values above are just for illustration purpose.
The objective of media  queries is to use a specific stylesheet according to the dimensions the web browser’s viewport in other words  the screen width your web pages will be displayed on.

The advantage of using separate stylesheet is that the web browser will only load the css file(s) matching the conditions defined in the media query (min-width, max-width).
It also make your CSS style management more easier.

However if your stylesheets are small in size you could combine multiple files into one stylesheet and use media queries to get the same results as before.
For instance, given the fact that the user experience and features offered by the latest smartphones are quite similar to the one found in tablets, the stylesheets targeting those two platforms will be quite similar with just a few minor differences in CSS rules related to each device’s width.

You can create a external stylesheet named mobile.css combining the phone.css, portrait.css and tablet.css
/* CSS styles common to the combined stylesheets can be pasted in the section immediately below */
…

@media all and (min-width: 128px) and (max-width: 640px) {
/* CSS styles unique to phone.css will be pasted below */
…
}
@media screen and (min-width: 641px) and (max-width: 800px) {
/* CSS styles unique to portrait.css will be pasted below */
…
}

@media screen and (min-width: 801px) and (max-width: 960px) {
/* CSS styles unique to table.css will be pasted below */
…
}

You end up with the following markup in the head section of your HTML documents:
<!–  mobile devices: smartphones, tablets, e-readers  –>
<link rel=”stylesheet” media=”screen and (min-width: 128px) and (max-width: 960px)” href=”mobile.css”>

<!– larger tablets in landscape mode, laptop and desktops  –>
<link rel=”stylesheet” media=”screen and (min-width: 961px)” href=”full.css”>

In the end your web site will take a smaller bite off the end-user’s data plan. The optimization above also makes your site management easier.

<nav>
<ul>
<li id=”home”><a href=”http://your-domain-name”>Home</a></li>
<li id=”services”><a href=”/services.html”>Services</a>
<ul>
<li><a href=”/services/hardware.html”>Hardware</a></li>
<li><a href=/services/software.html”>Software Configuration</a><li>
<li><a href=”/services/network.html”>LAN Setup</a></li>
</ul>
</li>
<li id=”products”><a href=”/products.html”>Products<a/>
<ul>
<li><a href=”/products/lcds.html”>LCD Monitors</a><li>
<li><a href=”/products/connectors.html”>Connectors</a></li>
<li><a href=”/products/rams.html”>RAMs</a></li>
</ul>
</li>
<li id=”contact”><a href=”/contact.html”>Contact Us</a></li>
<li id=”testimonials”><a href=”/testimonials.html”>Testimonials</a><li>
<li id=”about”><a href=”/about.html”>About</a></li>
</ul>
</nav>

1)  Notice how the <nav>…</nav> wraps the entire navigation. It can not only serve as a navigation container but can be used to both position your navigation in your web page but also contain visual elements such as a background-color and background-image css styles. Because you might have more than one <nav>…</nav> element in a given web page, you can assign each one a CSS ID that will allow you to write a CSS style targeting that specific element.

In this instance, we could have <nav id=”topnav”>….</nav> for a horizontal navigation placed on top of your web pages, above or below your main header/banner. For a vertical navigation, having <nav id=”leftnav”>…</nav> or <nav id=”rightnav”>…</nav> makes more sense if your your main navigation is placed in the left/right sidebar.

2) Notice how the top-level <li>..</li>HTML tags are each assigned  a unique CSS ID (e.g. <li id=”home”>…</li>). Those CSS IDs allow you to target each main navigation section and define properties such as the width, single out its sub-menu and also pick which main section of the navigation should be highlighted as a visual aid (i.e. current page link).

3) Also pay attention to how sub-menus (italicized grey text) are defined under the “services” and “products” sections of this navigation. There is really no need to specify a CSS ID for the sub-menus. If for instance, you need to define a CSS style for a sub-menu in the “products” section, simply use the “li#products ul” selector.

So that’s it for the HTML aspect of your site main navigation. It’s simple, clean and can easily be adapted for mobile devices.

On Part 2, we’ll explore the CSS needed to position and define the look-and-feel of a vertical navigation placed on your web site’s sidebar. We’ll even include some CSS tips to make it work in IE6.

In Part 3, we’ll do the same for the horizontal navigation.

Then finally in Part 4, we’ll compared those 2 navigation orientations then look at the big picture to figure out the best location of your web site main navigation in your web pages HTML markup. Yes, that position matters as far as SEO is concerned. So stick around to get those gold nuggets.

You should preview your web pages on all popular web browser at every time you made a substantial change to the design or content. If you wait until you are done making those changes before your  preview your web pages, it might not be easy to quickly pinpoint the origin of an issue you just happen to notice.

If you are using Dreamweaver to design and manage your web site, you can launch a web browser to  preview your web page right from your document tool bar. The image above shows screen capture of the file preview functionality in Dreamweaver. The web page preview functionality is located in your document tool bar: it’s the “globe icon” on the right of the page title box.

It reveals different browsers you can use to preview your web page. You are also given the option to use the Adobe Device central to preview your web page in various portable devices (smartphones) and even navigate your web site using a browser emulator.

By default Dreamweaver only adds your default web browser to the list shown above. Therefore you will only see one web browser instead of a complte list of all web browsers installed in your computer. However you can add any web  browser installed in your computer system to that list by just clicking  the “Edit Browser List …“.

It opens the Preferences window where you can add a web browser by just clicking the + sign shown above the list.

You will then prompted to define a name from the new web browser you are about to add to the list in a dialog box.
For instance, if you adding Internet Explorer 7 then you could choose a name such as  ”IE7″.

Use the “Browse..” button to locate your web browser application in your computer, select it then click OK when you are done . That also closes the dialog box.

Repeat those steps to add more web browsers while you are sill in the Preferences window.
Obviously before you  add a  web browser that application has to be already installed in your computer. You must have the most popular web browsers — IE6, IE7, IE8, IE9, Firefox, Chrome, Safari and Opera —   installed in your system

If you are using  Dreamweaver CS5, you can also take advantage of Adobe Browser lab to quickly preview your web pages.

To add a button to a web form you can either use for instance the HTML tag
<input type=”submit” value=”Submit” id=”btnsubmit”>
to add a submit button or
<input type=”image” src=”path_to_image” id=”btnsubmit”>
if you prefer to use some fancy image as a submit button.

In the first case the styling of the button is left to the web browser. However you can apply a custom CSS style using the “btnsubmit” ID selector specified in the button markup.
For instance:
#btnsubmit {
width:70px;  /* defines the width of the button */
height:35px; /* defines the height of the button */
padding:0; /* removes any padding  */
text-align:center; /* horizontally center the text */
line-height:30px;  /* vertically centers text  */
background:#efefef;  /* light grey background color   */
color:#000; /* text color in black */
font-weight:bold; /* makes the text bold */
border: 2px outset #fff; /* creates a bevel effect at the right and bottom */
}

yields

You could also add a margin to help position that button against its closest HTML elements in the page.
Using CSS3 border-radius property, you can create a button with round corners by adding the following to the CSS style above:

#btnsubmit {
width:80px;  
height:40px; 
padding:0;  
text-align:center;
line-height:30px;  
background:#f9f9f9; 
color:#000;  
border:solid 3px #ccc; /* add a solid grey border of 3 pixels in thickness */
font-weight:bold;
border-radius:20px;
}
Yields:

Do keep in mind that the border-radius property is not yet universally adopted. You might need to add the prefix -moz-, -webkit-, -ms-, -o- to make it work with some of the modern web browsers except IE6, IE7 and IE8.

Those same CSS rules could be use with an HTML anchor tag. For instance:
<a href=”http://livetrainingsession.com”  id=”btnhome”>Home</a>

#btnhome{
width:75px; /* defines the width of the button */
height:30px; /* defines the height of the button */
padding:0; /* remove any padding */
text-align:center; /* vertically centers text */
background:#f9f9f9; /* light grey background color */
color:#000; /* text color in black */
border:solid 3px #ccc;
border-radius:20px;
display:inline-block; /* forces to match the specified width */
text-decoration:none; /* remove the underline */
font: bold 13px/28px Verdana, Geneva, sans-serif;
}

You can various combinations of background color, border color to achieve some interesting button designs.
If any approach shown above does not satisfy the look-and-feel you are after, you can still design a graphic button then use it as a background image instead. This approach will give you more flexibility in terms of site maintenance or when the time comes to adapt your site for mobile devices.

The web slices you create depend on the subtlety of your graphic design and how the final blocks in your HTML layout will interact. Therefore selecting web slices is an art in its own right and that task is better left to the person in charge of creating the HTML template.

You will now learn about the rectangular slice tool  in your Adobe Fireworks (CS3, CS4). You will later have the opportunity to compare it to the Photoshop slice tool in another upcoming post.

The screen capture above reveal the  slice tools located in the “Web” category of your Fireworks’ tools panel. With your slice tool “in hand“, you can just select the area of the canvas you would like to convert into a web slice with a simple click-drag-and-release.

A web slice can be easily spotted in the canvas by its green overlay. Once a new slice is created, you can see its properties – dimensions and position – as shown by the screen capture of the “Properties” panel below.

Fireworks automatically name each new slice created. However you are better off renaming your web slice (e.g. top_chair) to something that will make more sense during the HTML design stage.
You can also edit the width and height (W, H) of the current slice to modify its dimensions.  The X and Y values define the position of the slice in the canvas. You can changes those coordinates by just typing new values. You can also use your keyboard arrows in to change those values at 1pixel at a time.

The “Type” property let you choose between foreground and background image. A second drop-down list to select the slice file format (GIF, JPEG or PNG) and its compression. In the screenshot above,  ”JPEG- Better Quality” means a compression ratio of 80% in a JPEG file format.

For for each new slice created  Fireworks adds  a new layer under “Web Layer” folder as shown in the image on the left.

Just like  regular layers in your canvas, you can reorder web layers by just dragging one above or below another. You can also hide a given web slice by just clicking on the “eye icon” in front of its layer. To reveal a hidden slice, just click the empty space reserved for the eye icon of that layer.

The slice name defined in the properties panel is the same as the name of the web layer. By renaming the web layer you are renaming the web slice as well.

You can lock all or just a selected layer by clicking on that layer’s lock box  in the  column right next to the “eye  icon”. A locked layer shows the lock icon and the corresponding layer and web slice  can no longer be modified until it’s unlocked again.

Locking web layer is a safe way to avoid accidentally modifying that slice properties. You can lock all web layers at once by clicking the lock box left of the “Web Layer” folder icon.

Compared to Photoshop or Illustrator web slicing, Fireworks slice tool is more intuitive, easier to use  and packs all the functions you need for slicing and dicing in one spot. In a fast pace web production environment, Fireworks slice tool is a tremendous time saver.

Very often after I am done doing my part and transfered all the  web files  to the client , I receive an email/ phone call a day or so later inquiring why  some pages jump in web browser.

The very first thing the client blames is the current web browser s/he is using, and why not? Then after opening all the major web browsers at his disposition he realizes the issue remains the same on all browsers.

Now, may be I am the one who screwed up!
Nope!!

In all cases it’s because web pages have different amount of content some longer than others. When a web page is long enough to exceed the web browser’s height  then a vertical scroll bar appears.  If on the other hand the web page only has a small amount of copy, everything is shown above the fold and no vertical scroll bar is needed by the web browser.

Cause :
When using a fixed width layout with the left and right margins set to auto on your main container (#wrapper) , your web pages will be horizontally centered. The horizontal position of your web page depends on  the available width in your web browser viewport.

Let’s assume your browser window is 1024 pixels wide and that you have set your page layout to a fixed width of 980 pixels to be horizontally centered.

• If a page copy is concise  the entire page can be shorter than your browser window’s height. In this case no vertical scroll bar is necessary. You web page will therefore have a left and right margin of roughly (1024-980)/2, that is about 22 pixels on each side.
• Now left assume another web page has a lot of text copy. In this case the page height to exceeds the web browser’s window height. A vertical scrollbar appears therefore cutting down on the width of the browser’s viewport.
  The width of the scrollbar is about 20 pixels, so we are now left with only 1004 px (pixels).

  Using the same formulas as above (1004-980)/2, yields 12 pixels for the left and right margin for this web page. That’s what creates a 10px horizontal shift to the left when you navigate from short (no vertical scrollbar) to a longer page where the vertical scrollbar is required.

Solution:
To solve the issue we are facing the solution is to force the web browser to display the vertical scrollbar on every page no matter how much content there is in there.

1. - Option 1
   Using the ‘min-height” CSS property to  set a minimum height of your main container to match that maximum browser window height of your target audience.

   The problem is you do not yet  have that information yet you review your web analytics after your site went live.

   However from a personal experience, I found that setting the min-height to 1000px will generally do the trick. The only hiccup is the  ”min-height” CSS property is not understood by IE6. Therefore users using that version of  Internet Explorer will experience the horizontal page  shift.

2. - Option 2
   Add a just  enough line breaks (Shift+Enter) or empty paragraphs (Enter) after the content on pages with less copy.

Choose whichever option is more suitable to your  design and target audience.
I’ll go for option 2 for the time being until IE6 disappears from the web landscape.

Does it really matter if a web page shift just a few pixels. For most people, it doesn’t. heck, most site visitors will even notice or be bothered by it.

But it’s a great deal for digital artists. Graphic designers are a different breed. A graphic designer will “fight you” tooth and nail for 1 pixel and for a good reason. That doesn’t mean visual artists are very difficult people to work with, on the contrary. They just thrive for perfection.

To use this free trial version you need to login to  your adobe account first. No worries signing up to get an adobe account is free.  I have been a Macromedia and Adobe products fan for more than 10 years now, so my account is still in good standing.

Fulled loaded, Dreamweaver CS5 consumes about 133Mb of RAM, a little bit more than its predecessor, CS4. Mind you I am “still running” on Windows XP machine with 3Gb of RAM installed  and  a Pentium 4 (3GHz) processor. But I can almost feel my PC “sweating” when running this new application.
I certainly need to upgrade to a dual core or quad core before committing to the Adobe Master Suite CS5.

Anyway, the user interface of Dreamweaver CS5 has remained pretty much the same as with previous versions (CS3, CS4). The two visible improvements are the Adobe BrowserLab and  Business Catalyst sidebar panels.

I talked about Adobe BrowserLab in a previous article, so no surprise here: it works just fine and can be a real time saver. As for the Business Catalyst I have not gone through its documentation yet but I will less likely shed over $900 on that product.

As you guessed it, I am still tinkering with the most obvious features during this first hour. However, as I dig deeper I will most certainly discover some nuggets to share with you in the upcoming days.  So stay tuned.

Because of discrepancy between the display of web pages in different web browsers and even different operating systems, one needs to test the website on all major browsers to make sure the “web pages do not break”. The problem is if you are PC user on Windows, you need to get a hold of Mac as well and vice-versa for testing purpose.

There are already websites out there that offer similar site preview services. Some are free, others not so much. However most of them require a waiting period of an hour or more before you get  the preview screenshots by email.

With the new  Adobe Browser Lab service, you can test you entire new web site on different web browsers in different operating systems for free. It’s a live service that means, you get your preview result within seconds not hours.

All you need is have a free adobe account to start testing your web pages in the major browsers  shown here. Just go to https://browserlab.adobe.com and take it for a spin.

I am not quite sure yet why the Opera web browser is not included in the list but I can bet Adobe has a good reason for that. I’ll keep you in the loop once I get more information about that.

What’s even more interesting with Adobe Browser Lab is its integration with the soon to be released Dreamweaver CS5.

Once more Adobe listened to the web design community and as always answers with some new amazing products on each new release of its products suite.
I for one cannot wait to get a test drive of  the new Dreamweaver, Flash, Photoshop, Fireworks and After Effects from the CS5 Master Collection.