CSS by thewackonerd

Fixed widths and float – A CSS Layout Rachel Andrew

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.

Page 1 of 13

Fixed widths and float â&#x20AC;&#x201C; A CSS Layout Rachel Andrew

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" /> Copyright ÂŠ 2004 DNzone.com All Rights Reserved to get more go to DNzone.com

Page 2 of 13

Fixed widths and float â&#x20AC;&#x201C; A CSS Layout Rachel Andrew

<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>

Creating the CSS Now that we have all of our content in place we can begin to add the style. For the header of the site I have an image that is 760 pixels in width. I want to use this as my heading image and make the actual layout fixed width and centered.

Page 3 of 13

Fixed widths and float â&#x20AC;&#x201C; A CSS Layout Rachel Andrew

Adding a wrapper div First, we need to wrap our content in a div, so that we can position the div to center the content. Switch into Code View and, after the opening body tag type: <div id="wrapper"> Then at the bottom of the page, just before the closing body tag, close this div by adding: </div>

The CSS Styles for #wrapper In Design View, using the CSS Styles Panel in the Design Panel Group, select New CSS Style. Under Selector Type select the 'Advanced' radio button. Under Selector: type #wrapper.

Styles for #wrapper As this is the first CSS style that we have created, select to create in a New Style Sheet File. Click OK, and save your stylesheet into your site before proceeding. This div #wrapper is the container for our design. In the CSS Style Definition Dialog we need to add a variety of rules in the different categories to style the wrapper.

Background In Background Image select Browse and browse for the image veg-header.jpg (in the download) for this tutorial. Under Repeat select no-repeat. Horizontal Position: left Vertical Position: Top

Page 4 of 13

Fixed widths and float – A CSS Layout Rachel Andrew

The Background category for #wrapper This will add the veg-header.jpg image to the background of our wrapper and position it at the top of the wrapper.

Block Set Text align to left Box Width: 760 Padding – Top: 180 pixels Margin – Right: auto Left: auto

Page 5 of 13

Fixed widths and float â&#x20AC;&#x201C; A CSS Layout Rachel Andrew

The Box category for #wrapper The width sets the width of the wrapper to the same width as the image veg-header.jpg. The top padding moves the content down so that it starts after the veg-header image stops. The Right and Left margins set to auto, centers the wrapper.

Border Leave all checkboxes set to 'Same for All' and add a solid 6 pixel border, color #940D1E. Click OK and you should see your page load with a bordered box with the image at the top.

The layout after styling the box The CSS rules for #wrapper should now look like this in your stylesheet: #wrapper { text-align: left; width: 760px; margin-right: auto; margin-left: auto; padding: 160px 0px 0px; background-image: url(veg-header.jpg); background-repeat: no-repeat; background-position: left top; border: 6px solid #940D1E; }

Styling the body tag We now need to add some styles to the body tag. Create a New CSS Style, select tag and choose body.

Page 6 of 13

Fixed widths and float – A CSS Layout Rachel Andrew

Type Set the Font to 'Verdana, Arial, Helvetica, sans-serif Set the size to 1 ems

Background Set the background color to #FFFFFF

Block Set Text align to center

Box Set margin and padding to 0 Click OK to see the changes take effect. The above has added the following to your stylesheet. body { margin: 0px; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; background-color: #FFFFFF; text-align: center; }

Styling the login form We can now create styles for the login form which will display at the top of the page just underneath the image. Create a new CSS Style, selecting 'Advanced' and typing #login.

Type Size: 80% - this will set the size of the login text to 80% of 1em.

Block Text align: Right

Box Padding – Top: 2 pixels; Right: 5 pixels; Bottom: 2 pixels; Left: 5 pixels

Page 7 of 13

Fixed widths and float â&#x20AC;&#x201C; A CSS Layout Rachel Andrew

To apply this ID to the form, select the form in the Tag Selector in Dreamweaver, right click on the tag selector and choose 'Set ID', then select 'login'. Laying out the rest of the elements To position the rest of the elements we first need to wrap each element in a div so that we can use these to apply styles to. Switch into Code View. After the closing form tag type: <div id="content"> Before the opening <ul> tag of the first list close this div and open the navigation div. </div> <div id="nav"> After the closing </ul> of the navigation close the navigation div and open the specials div: </div> <div id="specials"> Before the closing #wrapper div close the specials div. </div> My document mark-up is now as follows: <!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> <link href="main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <form name="form1" id="login" 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> <div id="content"> <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 organic fruit and vegetables for five years from our local farm shops, however 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 a delivery date for a one off or regular delivery of all your favorite organic </p> Copyright ÂŠ 2004 DNzone.com All Rights Reserved to get more go to DNzone.com

Page 8 of 13

selling we know schedule foods.

Fixed widths and float â&#x20AC;&#x201C; A CSS Layout Rachel Andrew

<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> </div> <div id="nav"> <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> </div> <div id="special"> <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> </div> </div> </body> </html> The styles for this next section are time-consuming to add in the CSS Styles dialog so we will simply add them to our stylesheet. Open the stylesheet in Dreamweaver, and add the following styles to the bottom of it. #content { width: 480px; float: right; } #content p { font-size: 90%; Copyright ÂŠ 2004 DNzone.com All Rights Reserved to get more go to DNzone.com

Page 9 of 13

Fixed widths and float â&#x20AC;&#x201C; A CSS Layout Rachel Andrew

}

line-height: 1.8em;

#nav { float:left; width: 220px; } #special { clear: both; } What we are doing here is floating the div content right and the div #nav left. Float takes the element out of the flow of the document and puts it into the available space after the block level element before it. As we have given #nav and #content a width that in total is less that the total width of the wrapper, there is a space next to #content that #nav can 'float' into. As #nav and #content are now out of the flow of the document we need to clear #special using the rule clear: both so that it knows to come after these elements and not fit into the gap between them. Remove the rule clear: both to see what happens if you do not do this. Our document now looks like this:

The site in a web browser

Finishing the Design To finish off we simply need to style the remaining elements in the layout. I have added to the rules for #special styles to display this item in a brightly colored box to ensure that it is noticed, and also styled the h3 tag within #special: #special { clear: both; margin-left: 270px; Copyright ÂŠ 2004 DNzone.com All Rights Reserved to get more go to DNzone.com

Page 10 of 13

Fixed widths and float â&#x20AC;&#x201C; A CSS Layout Rachel Andrew

}

margin-right: 30px; margin-bottom: 10px; background-color: #FF9006; color: #000000; padding: 0 6px 4px 6px; border: 2px solid #975300;

#special h3 { margin:0; padding:0; font-size: 110%; }

As we are using lists for the navigation we can easily style these to make an attractive navigation menu: #nav { float:left; width: 220px; margin-top: 20px; } #nav ul{ padding-left: 0; margin-left: 0; border-bottom: 1px solid #940D1E; width: 170px; } #nav li { list-style: none; margin: 0; padding: 0.25em; border-top: 1px solid #940D1E; font-size: 90%; } #nav li a { text-decoration: none; color: #940D1E; font-weight: bold; } #nav li a:hover { color: #FF9006; } #nav h3 { color: #FF9006; background-color: transparent; font-size: 110%; padding-left: 0.25em; } Copyright ÂŠ 2004 DNzone.com All Rights Reserved to get more go to DNzone.com

Page 11 of 13

Fixed widths and float – A CSS Layout Rachel Andrew

To learn more about styling lists check out the Premium Content Tutorial – List Basics in CSS and XHTML (http://www.dmxzone.com/go?6255). To finish off I have added styles for the h1 and h2 tags within the content: #content h1 { font-size: 130%; color: #940D1E; background-color: transparent; } #content h2 { font-size: 120%; color: #940D1E; background-color: transparent; border-bottom: 1px dotted #FF9006; }

The download contains the document and CSS file in order that you can explore this layout yourself. My final layout displays as in the following screenshot in the browser. Dreamweaver MX 2004 does a pretty good job of rendering this layout, however it does look slightly different to the layout seen in the browser and you should not rely on Dreamweaver's view of things too heavily when working with complex CSS!

The Final Layout

Page 12 of 13

Fixed widths and float â&#x20AC;&#x201C; A CSS Layout Rachel Andrew

Summary We have covered a lot of ground to produce this layout. However the techniques used here are just one of the ways to lay out a page with CSS and a way that works well when you have a fixed width layout like ours as you can set widths on your elements that you know will not change. Use the download files to experiment with this technique using your own images and layout ideas.

Page 13 of 13