CSS Layouts: Fixed widths and float
This tutorial will take you through the process of building a modern page design using CSS for layout and bearing in mind best practice in terms of document structure. The layout that we will be building demonstrates two useful techniques in terms of CSS layouts. We are going to design a page with a fixed width, centered layout and we will also be using the float property within this layout – so if you have been wondering how to do a fixed width layout or how float can be used for CSS positioning then this tutorial will hopefully answer some of your questions!
As this is quite a complex tutorial and we skip through some of the things quite quickly that are covered in other tutorials I have included the CSS and XHTML files in the code download, so you can compare your results with mine or use mine as a starting point for experimenting with this layout.
| Beginner | |
| Technologies: | CSS, XHTML, HTML |
| Number Of Pages: | 13 |
Fixed widths and float – A CSS Layout
At this point in time, if you have a brand new site to design, you should be considering up to date methods and techniques in order to design and create your site. Otherwise, your site might look out of date as soon as it is launched.
This tutorial will take you through the process of building a modern page design using CSS for layout and bearing in mind best practice in terms of document structure. The layout that we will be building demonstrates two useful techniques in terms of CSS layouts. We are going to design a page with a fixed width, centered layout and we will also be using the float property within this layout – so if you have been wondering how to do a fixed width layout or how float can be used for CSS positioning then this tutorial will hopefully answer some of your questions!
As this is quite a complex tutorial and we skip through some of the things quite quickly that are covered in other tutorials I have included the CSS and XHTML files in the code download, so you can compare your results with mine or use mine as a starting point for experimenting with this layout.
The Site
The fictional company for whom I'm designing the site is "Veg 2 U", an organic produce delivery company. They want a site that allows their customers to create their orders online for home delivery. The homepage should include a navigation menu that lists the different categories of products available and a menu to the main pages of the site, some brief information about the company for new visitors and a login form for current customers to log into their account and update their orders. There should also be some brief information on how to use the site and also place for special offers to appear. The site needs to look attractive and welcoming, be easy to use and search engine friendly as the company hope to get customers through people finding them when searching for organic products.
Marking-up the content
I'm going to start with the site content instead of the design, while I have some idea of the design that I want to create, with CSS I can play around with that all I like, however getting the structure of the content right first means that I have a strong position from which to start, and also means that I am less tempted to plan my content structure around my design, possibly leading to the site becoming less accessible.
In Dreamweaver I create a new, XHTML compliant document. I know that on the homepage I am going to have:
- A login form for username and password
- Introductory content
- How to use this site
- Navigation menu
- Category listings of available products
- Special Offers
I need to decide the order in the document that this content is displayed – this will be important for people using text only devices such as screen readers. As many of our visitors are likely to be return visitors who will want to be able to quickly login and make up their order I'm going to start with the login form so that a user of a text only device can immediately login.
Next, I'm going to put the introductory content, so if the visitor is a new visitor they can quickly find out about the site and what type of products are available. Having the main content high up on the page will have a side effect of making the page very search engine friendly. This text, which includes a description of the site and therefore the words that likely visitors will search on, is one of the first things the search engine will find on the page.
I am then going to put the 'how to use this site' content, followed by the navigation menu, the category listing and finally the special offers.
After adding the content my document displays in Dreamweaver like so:
The content in Dreamweaver
I have made the title above the main content a level one heading <h1></h1>.
"How to use this site" is a level two heading <h2></h2>.
The menus are both unordered lists and the headings "Product categories" and "This week only" are level three headings <h3></h3>. The XHTML mark-up now looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Veg 2 U - Fresh, organic fruit and vegetables
delivered to your door</title>
</head>
<body>
<form name="form1" id="form1"
method="post" action="">
Login:
<label>User Name:
<input type="text" name="textfield"
/>
Password:
<input type="text" name="textfield2"
/>
<input type="submit" name="Submit"
value="Login" />
</label>
</form>
<h1>Veg 2 U - Purveyors of fine, organic produce</h1>
<p>Veg 2 U bring fresh, organic produce right
to your front door. We have been selling organic fruit and vegetables for
five years from our local farm shops, however we know that it's not always
convenient to travel to one of our stores to collect your products. With our
new web site you will be able to select products online and schedule a delivery
date for a one off or regular delivery of all your favorite organic foods.
</p>
<p>Our product ranges change regularly, depending
on the season, so keep an eye on this web site for updates and availability.
Some fruit and vegetables are only available for a short time each year and
we'll make sure that when they are available we highlight it here so you don't
miss out! Check out our current ranges from the category menu. </p>
<p>We buy only the best and freshest organic
products from local farmers and bring it to you - keeping storage and processing
down to a minimum so that you always get your products in the freshest condition
possible. You'll really taste the difference when you use Veg 2 U. </p>
<h2>How to use this site</h2>
<p>To use this site browse our products using
the category menu, select any products that you would like delivered and place
them in your shopping basket. Once you have assembled your order simply go
through the checkout process where you can select your delivery date. When
you order for the first time you create a username and password - so next
time you come to the site you can simply login and you can add to an order
that hasn't yet been delivered or view old orders and use them as a starting
point for a new order.</p>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Latest Newsletter</a></li>
<li><a href="#">Products A
- Z</a></li>
</ul>
<h3>Product Categories</h3>
<ul>
<li><a href="#">Mixed fruit
boxes</a></li>
<li><a href="#">Mixed veg
boxes</a></li>
<li><a href="#">Mixed fruit
and veg boxes</a></li>
<li><a href="#">Fruit by item</a></li>
<li><a href="#">Veg by item</a></li>
<li><a href="#">Herbs</a></li>
<li><a href="#">Dairy</a></li>
</ul>
<h3>This week only</h3>
<p>Our special offer this week is on strawberries.
Buy one box of strawberries and get a second half price. </p>
</body>
</html>
Rachel Andrew
Rachel Andrew is a trained dancer and singer, whose CV lists jobs as diverse as company choreographer for a physical theatre company to chargehand carpenter for "The Mousetrap" at St. Martin's Theatre in London's West End. After leaving the theatre when pregnant with her daughter, Rachel started to design sites mainly out of curiosity into how it worked. It didn't take too long for her to figure out that her skills lay in development as opposed to design and these days she tends to leave the design to designers so she can concentrate on writing code, dismantling computers and installing Linux on anything that stays still long enough.
Rachel has worked in the industry as a webmaster, technical project manager and senior web developer but in September 2001 set up her own company ‘edgeofmyseat.com', which provides complete web solutions and outsourced development services for design agencies and Internet start-ups who do not have in-house web developers.
As well as managing and doing much of the development on projects for edgofmyseat.com Rachel is a published author and worked as a co-author on the following titles for Glasshaus:
Dynamic Dreamweaver MX ISBN:1904151108
Fundmental Web Design and development Skills: ISBN:1904151175
Dreamweaver MX Design Projects: ISBN:1904151272
Rachel is also a member of the Web Standards Project serving on The Dreamweaver Task Force.
In her spare time Rachel studies for ‘fun' with the Open University, does family and local history research and spends time with her 5 year old daughter and her other half, Drew McLellan.
