Joomla 1.5 Template

Материал из База знаний Joomla.

Извеняюсь за бардак, но нет времени все доделать! Текст из PDF первые 20 из 52 страниц для перевода.

Chapter 11 In this chapter, we'll go through the steps of creating a Joomla template. Specifically, we will create a template that uses cascading style sheets (CSS) to produce a layout without use of tables. This is a desirable goal as it means that the template code is easier to validate to World Wide Web Consortium (W3C) standards. It will also tend to load faster, be easier to maintain and perform better in search engines. We will discuss these issues in detail later in the chapter. Included in this chapter are the following sections • What is a Joomla Template? Explains what functions are performed by a Joomla template and the difference between a template with no content and when content is added into the CMS • Localhost Design Process How the design process differs to that when designing a static (X)HTML web page. • W3C and Tableless Design The implications of tableless design in Joomla and the relationship between W3C standards, usability and accessibility • The Template Components What files make up a Joomla template and what functions thev perform • Using CSS to create a layout How to create a source ordered 3 column layout using CSS rather than tables • The Default Joomla CSS An introduction to basic CSS styles that should be used with Joomla. alone with the default list of styles that are used by the Joomla core • Modules How to place, and style modules, including new techniques for rounded corners. • Menus A simple strategy to produce lean CSS menus that mimic the effect of those developed with JavaScript • Hiding Columns How to control when columns are shown and how to hide them when no content is present • Making a Real 1.5 Template Here we will actually use a proper design and go through the steps to create a useable template for Joomla 1.5 What is a Joomla Template? The Joomla template is a series of files within the Joomla CMS that control the presentation of the content. The Joomla template is not a web site, neither is it to be considered a complete web site design. The template is the basic foundation design for viewing your Joomla web site. To produce the effect of a "complete" web site, the template works hand in hand with the content stored in the Joomla databases. An example of this can be seen in Figure 11-1. Fig. В - Joomla Template with little or no content Fig. A - Joomla Template With sample content

Figure 11-1 Template with and without content This screenshot shows the template in use with sample content. Figure В shows the template as it may look with a raw Joomla installation with little or no content. The template is styled so that when your content is inserted, will inherit the stylesheet defined in the template such as link styles, menus, navigation, text size and colors to name a few. Notice how the images associated with the content (the photos of the people) are not part of the template, whereas the image in the header is рай of the template. Using a template for a CMS. as Joomla does, has a number of advantages and disadvantages: • There is a complete separation of content and presentation, especially when CSS is used for layout (as opposed to having tables in the index.php file). This is one of the main criteria for a site that meets modern web standards. • A new template, and hence a completely new look to a web site can be applied instantly. This can even have different locations/positioning of content as well as colors and graphics. • If different layouts are called for within one web site, it can be difficult to achieve. Although different templates can be applied to different pages, this built in functionality is not reliable. Much better is to use conditional PHP and create a layout that dynamically adjusts the number of columns based on what content is published. The Localhost Design Process The web page you see at a Joomla powered web site is not static. That means it is generating dynamically from content stored in the database. The page that you see is created through various PHP commands that are in the template. This presents some difficulties in the design phase. It's common now to use a "what you see is what you get" (WYSIWYG) HTML editor such as Dreamweaver. This means that the designer does not even need to code the HTML. However, this is not possible in the Joomla template design process. WYSIWYG editors cannot display a dynamic page. This means that the designer must code "by hand" and the view the output page from the PHP on a served page. With a fast enough connection this could be a web server, but most designers use a "local server" on their own computer. This is a piece of software that will serve the web pages on the designer's computer. There is no "right way" to create a web page, it depends on the designer's own background. Those more graphical make an "image" of a page in a graphics program like Photoshop and then break up the images to use (known as slice and dice). More technologically inclined designers will often just jump straight into the CSS and start coding. However, as mentioned above, the Joomla template designer is limited in that he cannot instantly see the effect of his/her coding in the same editor, the modified design process is: 1. Make edits with HTML editor, save changes 2. Have localhost server running in background to "ran" Joomla. 3. View edits hi a web browser 4. Gotol. Localhost Server Options In chapter 3 we saw how to install a web server that will run on your computer. We described one for window called Winamp. To move further in this chapter you will need to have this installed. If you need to. I'll wait right here while you go and install it. Tip One useful technique to make the design process more efficient is to serve a web page that you are designing and then copy and paste the source into an editor. For example, once your layout CSS is set up. you can use one of these localhost servers to serve a page, then View_Source. You then copy and paste that into your editor. You can now easily style the page using CSS and not have to go through the cycle of steps described above. A Free XHTML Editor For those not able to pay for a commercial editor such as Dreamweaver, there a some free editors available. Nvu is a solid choice and has built in validation and it is 100% open source. This means anyone is welcome to download Nvu at no charge (nvu.com/dowiiload.html). including the source code if you need to make special changes. W3C and Tableless Design Usability, accessibility and search engine optimization are all phrases used to describe high quality web pages in today's world wide web. In reality, there is a significant amount of overlap between them and a web page that demonstrates the characteristics of one does so for all three, this is shown in figure 11-2. The easiest way to achieve these three goals is to do so using the framework laid out in the W3C web standards. For example, a site that is (x)html semantically structured (the xhtml explains the document, not how it looks) will be easily read in a screen reader by someone who has poor vision. It will also be easily read by a search engine spider. Google is effectively blind in how it reads your web site

Figure 11-2 The overlap between SEO. accessibility and usability A site that is validates to the World Wide Web Consortium's (W3C) web standards has a much better foundation for making it accessible, usable and search engine optimized. Think of these as building codes for your house. A web site built with them is stronger and safer. You can check your pages with the W3C's HTML validation service (validator.w3.org/). for free. At its simplest, a site that meets W3C validation uses semantic (x)html and separates content from presentation using CSS. To help you understand where web standards came from, some history is helpful. Many web pages are actually designed for older browsers. Why? Browsers have continually evolved since the www started. New ones have appeared and old ones have disappeared (remember Netscape?). Another complicating factor is that different browser makers (like Microsoft) tend to have their browsers interpret html/xhtml in slightly different ways. This has lead to web designers having to design their websites to support older browsers rather than new ones. It's often decided that the web page needs to appear properly to these "legacy" browsers. Web standards put into place a common set of "rales" for all web browsers to use to show a web page. The main organization pushing these standards is the World Wide Web Consortium (WC3). whose Director. Tim Berners-Lee has the distinction of actually inventing the world wide web in 1989. Ask five designers what web standards are and you will get five answers. But most agree that they are based on the following valid code, whether html or xhtml (or others). Earlier we used an example of building codes for construction. The standards outlined for the code that makes a web page have been developed to achieve consistency. It's easy to check your code at validator.w3.org. Make sure you use the correct DOCTYPE when you try and validate your code. This article at Compass Design helps explain this more: www.compassdesigns.net/rutorials/joomla-tutorials/installing-joomla-doctype-and-the-blank-joomla-template.html Semantically Correct Code We mentioned before that being semantic means that the (x)html in the web page describes only content, not presentation. In particular this means structured organization of hl/h2 etc tags and only using tables for tabular data, not to layout a web page. Cascading Style Sheets (CSS) Closely related to having semantic code, is using cascading style sheets to control the look and layout of your web page. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. (Source: www.w3.org/Style/CSS/). They exist parallel to the (x)html code and so let you completely separate content (semantic code) form presentation (CSS). The best example of this is CSS Zen Garden, a site where the same semantic XHTML is shaped in different and unique ways with different CSS. The result is pages that look very different but have the same core content. Designing Joomla powered sites currently presents considerable challenges to meet validation standards. In the first series of releases. 1.O.X. the code uses a significant amount of tables to output its pages. This isn't really using CSS for presentation, nor does it produce semantically correct code. This problem is compounded by the fact that very few 3rd party developers are using CSS either, most use table to generate their code too. Fortunately, the Joomla Core Development team recognized this issue of Joomla. In the 1.5 version it's possible for template designers to completely override the output of the core (called a view) and strip out the tables, customize the layout, whatever they want. Regardless, care can still be taken when creating a template so that it is accessible (e.g. scalable font sizes), usable (e.g. clear navigation) and optimized for search engines (e.g. source ordered). The Template Components In order to understand the contents of a template, we will start by looking at a blank joomla template. The template contains the various files and folders that make up a Joomla template. These files must be placed in the /templates/ directory of a Joomla installation in their own folder. So. if we had two templates installed, our directory would look something like: /templates/element /templates/voodoo Note that the directory names for the templates must be the same as the name of the template, in this case element and voodoo. Obviously they are case sensitive and shouldn't contain spaces. Within the directory of a template, there are a number of key files: /element/templateDetails.xml /element/index.php These two filenames and location must be matched exactly as this is how they are called by the Joomla core script. templateDetails.xml (note the uppercase "D") An XML format metadata file that tells Joomla what other files are needed when loading a web page that uses this template. It also details the author, copyright and what files make up the template (including any images used). The last use of this file is for installing a template when using the admin backend. index.php This file is the most important. It lays out the site and tells the joomla CMS where to put the different components and modules. It is a combination of PHP and (X)HTML. In almost all templates, additional files are used. It is conventional (although not required by the core) to name and locate them as shown below: /element/template_thumbnail.png /element/css/template.css /element/images/logo.png These are just examples, let's examine each one in turn. /element/template thumbnail.png A web Browser screenshot of the template (usually reduced to around 140 pixels wide and 90 pixels high). After the template has been installed, this functions as a "Preview image" visible in the Joomla administration Template Manager and also the template selector module in the frontend (if used). /element/css/template.css The CSS of the template. The folder location is optional, but you have to specify where it is in the index.php file. You could call it what you like. Usually the name shown is used, but we will see later that there are advantages in having other css files too. /element/images/logo.png Any images that go with the template. Again for organization reasons, most designers put this in an images folder. Here we have an image file called logo.png as an example. The templateDetails.xml The templateDetails.xml must include all the files that are part of the template. It also includes information such as the author and copyright. Some of these are shown in the admin backend in the Template Manager. An example xml file is shown below:

<?xml version="l.0" encoding="utf-8"?> <install version="l.5" type="template"> <name>TemplateTutoriall5</name> <creationDate>December 2006</creationDate> <author>Barrie North</author> <copyright>GPL</copyright> <authorEmail> compassdesigns@gmail.com </authorEmail>

<authorUrl>www.compassdesigns.net</authorUrl>

<version>l.0</version> <description>Template for Official Joomla documentation guide</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>js/somejsfile.js</filename> <filename>images/threecol-l.gif</filename> <filename>images/threecol-r.gif</filename> <filename>css/customize.css</filename> <filename>css/layout.css</filename> <filename>css/template css.css</filename> </files> <params> <param name="showComponent" type="radio" default="l" label="Show Component" description="Show/Hide the component output"> <option value="0">No</option> <option value="l">Yes</option> </param> </params> </install> Let's explain what some of these lines mean: <install version="l.5" type="template"> The contents of the XML document are instructions for the backend installer. The option type="template" tells the installer that we are installing a template and that it for Joomla 1.5 <name>TemplateTutoriall5</namf Defines the name of your template. The name you enter here will also be used to create the directory within the templates directory. Therefore it should not contain any characters that the file system cannot handle, for example spaces. If installing manually, you need to create a directory that is identical to the template name. <creationDate>December 2006</creationDate> The date the template was created. It is a free form field and can be anything like May 2005. 08> June-1978. 01/01/2004 etc. <author>Barrie North</author> The name of the author of this template - most likely your name <copyright>GPL</copyright> Any copyright information goes into this element. A Licensing Primer for Developers & Designers can be found on the Joomla forums. <authorEmail>compassdesigns@gmail.com</authorEmail> Email address where the author of this template can be reached. <authorUrl>www.compassdesigns.net</authorUrl> The URL of the author's web site <version>l.0</version> The version of this template <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>js/somej sfile.js</filename> <filename>images/threecol-l.gif</filename> <filename>images/threecol-r.gif</filename> <filename>css/customize.css</filename> <filename>css/layout.css</filename> <filename>css/template_css.css</filename> </files> The "files" sections contains all generic files like the PHP source for the template or the thumbnail image for the template preview. Each file listed in this section is enclosed by <filename> </filename>. Also included would be any additional files, here we use the example of a JavaScript file that is required by the template. All image files that the template uses are also listed in the <files> section. Again each file listed is enclosed by <filename> </filename>. Path information for the files is relative to the root of your template, e.g. if your template is in the directory called 'YourTemplate' and all images are in a directory 'images' that is inside 'YourTemplate'. the correct path is: <filename>images/my_image.jpg</filename> Lastly any stylesheets are listed in the files section. Again the filename is enclosed by <filename> </filename> and it's path is relative to the template root. The index.php What actually is in an index.php file? It is a combination of (X)HTML and PHP that determines everything about the layout and presentation of the pages. First we will look at a critical part of achieving valid templates, the DOCTYPE at the top of the index.php file. This bit of code that code goes at the very top of any web page. At the top of our page we have this in our template. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN' "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this- >language;  ?>" lang="<?php echo $this->language;  ?>" dir="<?php echo $this- >direction;  ?>" ■I A web page DOCTYPE is pail of the fundamental components of who a web page is shown by a browser, specifically, how that browser interprets CSS. To give you a sense, an observation from alistapart.com says: [information on W3C's site about doctypes is] "written by geeks for geeks. And when I say geeks, I don't mean ordinary web professionals like you and me. I mean geeks who make the rest of us look like Grandma on the first day She's Got Mail. ™" Anyway, there are several doctypes you can use. Basically, the doctype tells the browser how to interpret the page. Here the words "strict" and "transitional" start getting floated around (float:left and float:right usually). Essentially, ever since the WWW started, different browsers have had different levels of support for CSS. This means for example, that Internet Explorer won't understand the "min-width" command to set a minimum page width. To duplicate the effect you have to use "hacks" in the CSS. Note Some say that serving XHTML as text/html is considered harmful. If you actually understand that statement you are well ahead of the game and beyond this guide. You can read more at hixie.ch/advocасy/xhtml. Strict means the html (or XHTML) will be interpreted exactly as dictated by standards. A transitional doctype means that the page will be allowed a few agreed upon differences to the standards. To complicate things, there is something called "quirks" mode. If the doctype is wrong, outdated, or not there, then the browser goes into quirks mode. This is an attempt to be backwards compatible, so Internet Explorer for example, will render the page pretending as if it was IE4. Unfortunately, people sometimes end up in quirks mode accidentally. It usually happens two ways: • They use the doctype declaration straight from the WC3 web page, the link ends up as: DTD/xhtmll-strict.dtd Except this is a relative link on the WC3 server. You need the full path as shown above. • Microsoft set up IE6 so you could have valid pages, but be in quirks mode. This happens by having an "xml declaration " put before the doctype. <?php echo '<?xml version="l.0" encoding="utf-8"?' .'>'  ?> The reality is that an xml declaration is not really needed, so we will leave it off. The part about IE6 quirks mode is important. In this chapter we will only be designing for IE6+, so we will make sure that it's running in standards mode. This will minimize the hacks we have to do later on. Making a page standards compliant, where you see "valid xhtml" at the bottom of the page does not mean really difficult coding, or hard to understand tags. It merely means that the code you use matches the doctype you said it would. That's it! Nothing else. Designing your site to standards can on one level be reduced to saying what you do. and then doing what you say. Some useful links: www.quirksmode.org/css/quirksmode.html www.alistapart.com/stories/doctype www.w3.org/QA/2002/04/Web-Quality

http: //forum. j oomla. org/index .php/topic .7537.0. html http: //fonun. j oomla. org/index .php/topic .6048.0. html What else is in index. php? Let's look at the structure of the header first, we want to be as minimal as possible, but still have enough for a production site. The header information we will use is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <htmi xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo Sthis->language;  ?>" lang="<?php echo $this->language;  ?>" dir="<?php echo $this >direction;  ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.ess" type="text/css" /> </head> What does all that mean? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo Sthis->language;  ?>" lang="<?php echo $this->language;  ?>" dir="<?php echo $this >direction;  ?>" > We talked about this above. The <?php echo $this->ianguage;  ?> is pulling the language from the site global configuration. <jdoc:include type="head" /> Header stuff that is set in the global configuration again. It includes the following tags (in a default installation): <title>Joomla 1.5 Template Tutorial</title> <meta name="generator" content="Joomla! 1.5" /> <meta name="description" content="Joomla! - the dynamic portal engine and content management system" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, follow" /> <meta name="keywords" content="joomla, Joomla" /> «clink href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> <link href="http://localhost/Joomlal5/feed.php?option=com content&view=frontpag e&Itemid=l&format=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" /> <link href="http://localhost/Joomlal5/feed.php?option=com_content&view=frontpag e&Itemid=l&format=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" /> It includes a number of metatags. the favicon and also the RSS feed URL's. <link rel="styiesheet" href="templates/<?php echo $this->template ?>/css/template.ess" type="text/css" /> This line links to the CSS file for the template. The PHP code <?php echo $this->tempiate ?> will return the name of the current template. Writing it in this way rather than the actual real path makes the code more generic. When you create a new template you can just copy it (along with the whole head code) and not worry about editing anything. A blank Joomla template body This will be very very easy! Ready? <body> <?php echo $mainframe->getCfg('sitename' ) ;?> <jdoc:include type= "modules" name= "top" /> <jdoc:include type= "modules" name= "left" /> <jdoc:include type= "component" /> <jdoc:include type= "modules" name= "right ;» /> </body> </html> OK. so at this point it does not look very awe inspiring. The output is shown in figure 11-3 We have in a reasouablv logical order: 1. name of the site 2. top module 3. left modules 4. main content 5. right modules The goal is to try and come as close to semantic markup as possible. From a web point of view, it means a page can be read by anyone, a browser, a spider or a screen reader. Semantic layout is the cornerstone of accessibility. Joomla 1.5 Template Tutorial Yesterday all servers in the U.S. went out on strike in a bid to get more RAM and better CPUs. A spokes person said that the need for better RAM was due to some fool increasing the front-side bus speed. In future, busses will be told to slow down in residential motherboards. • Home • Joomla! Overview • What's New in 1.5? • Joomla! License • More about Joomla! • FAQ • The News • Web Links • News Feeds • Extensions • Content Layouts • Example Pages • Joomla! Home • Joomla! Forums • Joomla! Help • OSM Home • Administrator Username Password ! Remember me [Login Lost Password? No account yet? Register Welcome to Joomla! Wiinen ОуЛФЩлшша Thursday, 12 0etoe*25Je "'A

• * Joomla! 1.5.0 Beta should NO J to be used for live" or * production' sites. * *

Joomla! is a free open source framework and content publishing system designed for quickly creating highly interactive multi language Web sites, online communities, medio portals, bloas and eCommerce applications. Joomla! provides an easy-to-use graphical user interface that simplifies the management and publishing of large volumes of content including HTML, documents, and rich media. Joomla! is used by organisations of all sires for Public Websites. Intranets and Extranets and is supported by a community of thousands of users. LestJpoctod (Wednesday 11 ОЯаЬегСССС 16:J" > Read more... Figure 11-3 An uiistyled template You can read more about semantic layout in Appendix В Note Now it's worth noting that what we have here really is only the potential for semantic layout. If one were to go ahead and put random modules in random locations, then you would have a mess An important consideration for CMS sites, a template is only as good as the population of the content. It is this that often trips designers up when trying to validate their site. You will notice that we have used the first of a number of commands specific to Joomla <?php echo $mainframe->getCfg('sitename'] i ;?> <jdoc: :include type= "modules" name= "top" , /> <jdoc: :include type= "modules" name= "left" /> <jdoc: :include type= "component" /> <jdoc: :include type= "modules" name= "right' • /> The PHP echo statement simply outputs a string from the configuration.php file. Here we are using the site name, we could as easily have had: The name of this site is <?php echo $mainframe->getcfg('sitename');?> The administrator email is <?php echo $mainframe->getcfg('mailfrom');?> This template is in the <?php echo $this->template?> directory The URL is <?php echo Smainframe->getcfg('live site');?> The j doc statement inserts various types of XHTML. <jdoc:include type="component" /> This inserts the output from a component. What component it is will be determined by the menu link. Note Interestingly enough, you seem to be able to have multiple instances of component output. Not sure why you would want to. but I thought I would let you know! <jdoc:include type="modules" name="right" /> This inserts the output for a module location. The full syntax is actually: <jdoc:include type="modules" name="LOCATION" style="OPTION" /> We will look at the various options for styles later in the chapter. Using CSS to create a layout We will be using CSS to make a 3 column layout for the Joomla template. We will also be making it a fluid layout. There are two main types of web page layout, fixed and fluid, and they both refer to how the width of the page is controlled. The width of the page is an issue because of the many browser resolutions that people surf the web at. Although the percentage is dropping, about 17% of surfers are using an 800x600 resolution. The majority. 79%. are using 1024x768 and higher1. Making a fluid layout means that your valuable web page won't be a narrow column in the 1024 resolution, and will all be visible on smaller monitors. A typical design might use tables to layout the page. They are useful in that you just have to set the width of the columns as percentages, but they have several drawbacks: They have lots of extra code compared to CSS layouts. This leads to longer load times (which surfers don't like) and poorer performance in search engines. The code can roughly double in size, not just with markup but also something called "spacer gifs". Even big companies sometimes fall into the table trap as seen by a recent controversy about the new disnev.co.uk website2. 1 www.upsdell.com/BrowserNews/stat trends.htm#res 2 www.compassdesiqns.net/ioomla-bloq/qeneral-ioornla/what-rnakes-a-qood-desiqner.html • They are difficult to maintain. To change something you have to figure out what all the td/tr are doing. With CSS there are just a few lines to inspect. • The content cannot be source ordered. Many surfers of the web do not see web pages on a browser. Those viewing with a text browser or screen reader will read the page from the top left corner to the bottom right. This means that they first view everything in the header and left column (for a 3 column layout) before they get the the middle column, the important stuff. A CSS layout on the other hand allows for "source-ordered" content, which means the content can be rearranged in the code/source. Perhaps your most important site visitor is Google, and it uses a screen reader for all intents and purposes. Let's look at our layout using CSS. You can position elements (stuff) in several ways using CSS. For a quick introduction a good source is Braiujar's CSS Positioning3. If you are new to CSS you might read at least one "beginners guide to CSS". Here are a few suggestions: • Kevin Hale's - An Overview of Current CSS Layout Techniques http://particletree.com/features/an-overview-of-current-css-layout-techiiiques/ • htmldog's CSS Beginner's Guide w ww .htmldo g. с om/guides/c ssbe ginner/ • yourhtmlsource.com www.yourhtmlsource.com/stylesheets/ We will be using float to position our content. At its most basic, the template might look Figure 11-4. Still not very exciting, but let's see what the part are all about here. The CSS styles are defined here in the head of the file to show what is going on. but normally they would be in the template. ess file. Everything is contained in a element called #wrap. This had a width of 80% of the viewport at anv time. 3 www.brainiar.com/css/positioninq/

Figure 11-4 Veiy basic template layout Tip: CSS Shorthand Its possible to reduce the amount of CSS by using "shorthand". One example of this is padding and margin styles applied to an element. margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px; can be replaced by: margin: 5px lOpx; There are 'shorthand' styles at the beginning of each style definition. Once you have figured out the styles, fill the shorthand versions in and delete the long versions. The syntax is: font: font-size I font-style | font-variant I font-weight I line-height I font-family Here is an example, rather than this... font-size:lem; f:nt-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:bold; line-height:1.3em; Have this: font:bold lem/1.3em Arial,Helvetica,sans-serif italic; Read more at An Introduction to CSS shorthand properties about this syntax. http://home.no.iiet(iuniun litml/shorthand.html The left, middle and right columns are each given their own element. Each is floated left and given a percent width that add up to 100%. The clear :both style on the footer tells the browser to "stop floating" and makes the footer stretch across all three columns. When we build our second template in this chapter, we will have to use a more advanced clearing technique.

To improve the layout, and to add some breathing room to the content, we need to add some column spacing, commonly called "gutter". Unfortunately, there is a problem here. You might know that Internet Explorer does not interpret CSS correctly. One problem is that calculates width differently. We solve this problem by not using any padding or borders on something that has a width. To get our gutter we add another