"Creating a Layout with CSS"
Unit N: Creating a Layout with CSS Objectives: Understand CSS layouts Create the HTML file Create divs and assign IDs Create ID-based style rules Use a container div Create floating columns Clear float Because browsers differ in the way the display CSS layout elements, designing your own CSS layouts can be challenging. Designing a successful layout requires much experimenting and a fair bit of knowledge about the nuances of CSS. However, learning some layout basics will help you start creating your own page layouts. Understanding CSS layouts CSS has many properties you can use to control the positioning of divs and other elements on a page. Achieving the layout you want is a matter of becoming familiar with these properties and combining them to create the design you desire. Using CSS to position elements is not as straightforward as using it for typography or other purposes. For example, if you want to create a multi-column layout, you cannot simply specify this in CSS, because CSS does not include a column property that allows you to dictate the number of columns. Instead, you need to use a different method, such as using the float property to achieve the effect of multiple columns. Using floats is just one way to create a two-column layout. The more you know about CSS properties and how they affect that flow of elements on a page, the more flexibility you will have in creating your layouts. Before you create a CSS-based layout, you should understand: The process of creating CSS layouts When creating a CSS layout from scratch, you should first sketch out what you want the page to look like, then determine how many divs you will need to create the layout and what you want to call the divs. Next, you create a blank HTML page, then add the necessary divs to the page and assign them each a unique id. The divs act as containers for the content, and the ids provide a way to attach the style rules that control the way the divs will be positioned on the page. Next, you create style rule for each div using its id as the selector. Finally, you modify the properties of each element to create the layout you desire. The flow of HTML elements HTML elements flow in a defined way relative to other elements within a page. The way an element interacts with other elements on the page is determined by what type of element it is. The two basic types of elements are block-level and inline. Block-level elements are larger elements such as divs, tables, and paragraphs. They can contain other block-level elements or they can contain inline elements. By default, block-level elements always appear on their own line, stacked one on top of the other, on the page. That means you would not have two tables side-by-side or a paragraph beside table unless you create a special style rule to display them that way. Block-level elements appear on the page in the order in which they appear in the code. Inline elements are smaller elements such as images, lists, or hyperlinks. They can only contain text or other inline elements. By default, inline elements are not displayed on their own separate lines; they are displayed side-by-side. So if you place an image element on a page and then a list element, they would not stack on top of each other. How floats work Floats are a mainstay of CSS layouts. As you learned in previous units, when you use the float property on an element, you can set the attribute to float left or right. An element with the float property set will exist outside the normal flow of HTML. It does not behave as a normal block- level element or as an inline element. Instead, it floats on top of all the other elements around it and pushes the content in those elements to the side. For example, if the element is floated to the right, it takes up the right side and pushes other content to the left. The importance of testing Every browser available today has a few bugs that affect the way CSS layouts are displayed. This is what makes CSS layouts so challenging to design. You can understand the properties, follow the rules, and have a design that is technically correct, but a browser bug could cause it to be displayed incorrectly in one or more browsers. It is critical that you text in one browser as you design and that you also text in other browsers that your visitors are likely to be using. Creating the HTML file When you need to build a separate section of a Web site, it is usually best to create a separate folder within the site’s root folder to hold the files for that section, in order to keep your files organized. Creating DIVS and Assigning IDs The first step in creating a CSS layout is to create div elements in the HTML page. The divs hold content and allow you to position it on the page. To position a div, the div must have an id assigned to it. As you have learned, it’s best to assign a semantic id that describes the function or content of the div rather than its placement on the page. For example, if you add a div to the left column that will contain branding content, such as a logo, it’s better to assign the id “branding” rather than the id “left column.” The divs and their assigned ids are all contained the HTML code. Ordering divs in the HTML code Using the positioning and layout properties of CSS, it is possible to display divs in one order in your HTML code, but have them appear in a different order on the page. For example, you might want to have main content appear first in the source code, but have your navigation or masthead appear first on the page. Putting your main content at the top of the THML code can help your site rank higher in search engine results. It can also be helpful for visitors with disabilities and those browsing on handheld devices. Creating ID-Based Style Rules Creating CSS layouts requires that you create id-based style rules. By creating a style rule and using a selector that consists of the # followed by an id name, the properties of the style are automatically applied to the element on the page that is using the id. When creating CSS layouts, it can be helpful to temporarily assign background colors to each div so that you can see how the divs are being positioned on the page. You should choose background colors that are easy to distinguish form each other. They do not have to look nice or match your site’s design because you will be removing the colors once you have created and tested the basic layout structure. Using a Container Div When creating a CSS-based layout, it’s a good idea to first create and style a div that will act as a container for the others on the page. Styling this container div allows you to control the overall width and placement of all page divs at once. Once the container div is in place, you create each div in the order in which it should appear on the page. The container div holds the other divs and allows you better control over the page layout. By setting a width, margins and other properties on the container div, you can define the overall parameters of the page layout. When building your CSS layout, it’s important to preview your layout in a browser often because Expression Web and other WYSIWYG editors don’t always accurately render the layouts. Creating Floating Columns To create a two-column layout, you can simply float one div to the left and a second div to the right. But whenever you add a float property to an element, you should also give it a width. If you neglect to do this, the browser doesn’t know how much space to set aside for that element, so the results are unpredictable. Deciding which browsers to test in If you Web site is already up and running, you can look at your sever logs to find out which browsers your visitors are using. This information can help you decide which browsers to use to test your designs. If you are creating a new site, you will not have access to existing server logs. In that case, a good place to start is to find out which browsers are the most popular and test in those. To find statistics for browser popularity, type browser statistics into your favorite search engine. New versions of browsers are always being released, so the statistics do change over time. Clearing floats The CSS clear property allows you to specify that when an element is placed on a page, no floating content is allowed to be displayed on either the right side, left side, or both sides of the element (depending on what you specify). Essentially, it “clears” the floats from around that element. Think of it as cancelling the float. Using CSS layout templates If you do not want to create your own CSS layouts but would like more options than are provided in Expression Web, many Web sites provide free basic layouts that you can download and modify for your site. To find these sites, type CSS layout into your favorite search engine. You can find layouts with different numbers of columns, with and without headers and footers, and with flexible and liquid widths. Make sure you choose designs that have been tested in the most popular browsers. (Most sites indicate exactly which browsers were used to test the layouts.) Using these basic layouts can save you a lot of time and provide a basis for customizing your own design.