A CSS Three-Column Floated Layout - “The Holy Grail”

This is one of the most sought after techniques on the web. A semantically correct 3 Column Layout using CSS (Cascading Style Sheets). Interestingly enough it is very easy to do. If you haven’t read Part 2 of Using Dreamweaver CS3 and CSS To Control Page Layout then I suggest you take a look before continuing with this example as it is very closely related.

The only difference being the addition of 2 more divs inside the content div. One for the Main Content and the other for the Secondary Content. If you recall from Part 2 we had a Wrapper Div, Main Navigation Div, Content Div and a Footer. The Main Nav was floated to the left and the Content to the right, creating a “virtual gutter” between the two.

This time inside the Content Div, I am going to use the same principal. By adding a mainContent div and floating that to the left and then adding a secondaryContent div and floating that to the right.

As with the 2 Column Layout the CSS is very straight forward.

The last thing that I would do is to remove the padding from the content element and apply it to the content of the secondary content instead.

You should now be left with a very solid 3 Column Layout.

Don’t miss more great content and tutorials, make sure you SUBSCRIBE to the Dreamweavers Spot’s RSS Feed.

In Part 1 of Using Dreamweaver CS3 and CSS To Control Page Layout I showed you a simple way to center a design using auto margins and negative margins. In Part 2 we will tackle the 2 Column Float Based Layout.

CSS Float Based Layouts - Two Column

Personally I find this layout technique to be the easiest method of them all to implement. Some people like using absolute positioning and negative margins but for me the floats are king. Put simply, in a CSS float based layout all you need to do is set the width of the element and then float it left or right. Sound Simple enough?

It is important to note that when using floating elements they are taken out of the normal flow of the document. Therefore the floats need to be cleared at various points in the layout. What I would suggest and it is probably the most common way to do this is to float nearly everything and then clear maybe once or twice at different point in the page, for example the page footer.

Let’s have a look at an example.

1. The basic (X)HTML markup would start something like this:

In this case the Main Navigation will be on the left and the Content will appear on the right. From a useability and accessibility standpoint you will notice that the Content Area appears before the Main Navigation. This is so that screenreader users etc do not have to go through a long list of links before they get to the content.
Read the rest of this entry »

Probably the most common way to use lists for navigation purposes is a Vertical Navigation Bar and in a previous article I took you through How To Create A Vertical Navigation Bar In Dreamweaver Using CSS. In this article I will take you through how to Create a Horizontal Navigation Bar.

1. Let’s Start with a simple, unordered list.

2. Next Let’s Zero out the padding and margins and remove the default bullets. I have also set the width of the nav bar to 720px and have a repeating blue gradient image as a background.

3. At this point the list is still displaying vertically. To make it display horizontally simply add this to your css style sheet.

I tend to use this method as it is a bit less buggy than the other methods.

4. We now need to set the display: property to block as we want the list items to act as buttons. Now I want the width of the buttons to be determined by the anchor text so rather than setting a width on each element I have applied 2ems of padding to the left and right sides. To vertically align the text I have set the line-height to 2.1ems.

Next I want to create a divider in between each link. To achieve this I have applied a divider background image to each of the anchor links.

5. Last thing is to change the color of the text on rollover.

There we have it, a Horizontal Navigation Bar designed using CSS and Dreamweaver CS3.

If you would like more of these great tips then Sign Up for our Web Design Tips Newsletter.

One of the things I love about Cascading Style Sheets (CSS) is the ability to control the layout of a web page without having to use presentational markup. A common misconception when designing a page layout with CSS is that it is a difficult task, especially if you are new to the language. I think this is mainly to do with the fact that there are so many browser inconsistencies around and the fact that there are so many different techniques on the web today. When I first started out using CSS to design layouts I often found myself scouring the web and finding quick and easy layout technique that would give me a fast result without understanding how it works. This is something that I don’t want you to do, I want you to understand how the techniques I use work. So if you haven’t done so already Subscribe to the RSS Feed so you don’t miss the rest of the series.

Create a CSS Layout Test Site

First thing is first let’s create a new site definition to house our Layout Test Site.

1. Launch Dreamweaver 8 and choose Dreamweaver Site from the Create New column in the Start Page menu. Alternatively, once you launch Dreamweaver, choose Site > Manage Sites > New, then click Site. Click the Advanced tab if necessary.

2. In the Site Name text box, type CSS Test Layout.

3. Click the file folder icon next to the Local Root Folder text box.

4. In the Choose local root folder dialog box, browse to an appropriate place on your hard drive and click the New Folder icon to create a new folder called css_test_layout.

5. Select the css_test_layout folder as the local root folder for your site.

6. Click OK to accept these minimal settings. If you came to the Site Definition dialog box from the Manage Sites dialog box, click Done from within the Manage Sites dialog box.

Now that you have your site defined, I will guide you through the first exercise, Centering a Design. Read the rest of this entry »

Have you ever wondered how to create Navigation Bars using pure CSS in Dreamweaver. Over the next few days I will be teaching you how to do just that. In this first article I will show how to easily create a Vertical Navigation Bar using some simple list styling techniques.

1. First thing first and let’s start with some great HTML framework.

2. In your CSS file the first thing I like to do is remove the bullets and set the margins to zero.

Read the rest of this entry »

As forms become one of the most important parts of any website or web application. Forms give YOUR users the ability to interact with the website and more importantly gives you the opportunity to capture some very important information from your visitors. If you have an existing web form on your site or you are creating a new one and you have an existing color pallet font style etc that your site uses then why not style your web forms as well to match the appearance of your site.

Even today there are sites that use the stock standard formatting and appearance of web forms, but with a few little, easy changes they could become visually appealing and more professional. In this article I will show you how to add a more professional look to those web forms that you have. Below is the Working Contact Form made in Dreamweaver that I outlined in a previous article. With a few simple HTML markups and CSS code the result is a lot more appealing than the standard form.

Read the rest of this entry »

In this tutorial you will learn how to create your all important Dreamweaver Contact Form and have the details of the form emailed straight to your INBOX. Capturing Contact Information of potential customers in extremely important in the business world. Don’t let those potential customers or clients disappear just because you didn’t have a Contact Form on your website. By following this Dreamweaver Tutorial you will have a WORKING Contact Form up and running in a few easy steps.

NOTE: Before we start you will need to download this PHP Form to Email Script and unzip it to the root directory of your website. A file named FormToEmail.php will be there.

Now you are ready to begin inserting the form and the fields you would like onto the page. In this example I am going to create anew page, but you can easily add this to an existing page if you already have one in mind for the form to be placed on.

1. In Dreamweaver, choose File > New The New Document Dialog Box appears.
2. In the Blank Document list, choose HTML, then click Create to create a new HTML document.
3. In the Title text field in the Document toolbar, enter Contact Form to add a title to your document.

Read the rest of this entry »

The Behaviors Panel is located on the right hand side of your Adobe Dreamweaver, Tag > Behaviors, Click the + button to find all the available behaviors.

Some behaviors only work for some browsers, make sure you set your Behaviors for IE 6.0.

You also have the choice to Get More Behaviours, to download more Behaviours for Adobe Dreamweaver you can visit Adobe.com

Example Behaviours:

Here I am going to show you how to create a behaviour for your web page.
Read the rest of this entry »

Creating a Internal Text Link:

Highlight your text and go to the bottom properties panel and insert the page you want it to link to, for me it was the homepage.

Your link action should be like this: Link
Read the rest of this entry »

Inserting Images:

To Insert a image go Insert > Image (Ctrl+Alt+I)

Find your image and click OK.

Linking Images:

Click on your image and go to the properties panel which is at the bottom of your dreamweaver, go to Link and type in the url you want it to take the visitor to.
Read the rest of this entry »