VISA/APCO/STAC 2P61 WEBSITE CREATION Fall Term 2012 CSS 4 TWO COLUMN LAYOUT MORE ON DIVS Last week: Applied margins borders and padding and calculating the size of elements using box model. Wrote CSS shorthand for these so the CSS is efficient. Created <div> (block level) and <span> (inline) elements and targeting them with CSS Used id= and class= to <div> to enable CSS to be more targeted Here are two ways to more specifically target your CSS Using descendent selectors e.g. how to write a rule for a specific <p> element e.g. in footer Sometimes called contextual selectors. #footer p font-size: 11px; color: #383330 Tells browser to look at any instance of the element p in the div footer and apply this rule Styling details in the span element Span element is inline <p> The <span class= primate >Famous Primates</span>website is a Web Standardistas production</p.=> Wrapping the word Famous Primates in a span and giving it a class of primate we can write a CSS rule and target it at all instance of the class primate..primate text-transform: uppercase; font-weight: bold; Styling with Class attributes Use a class attribute to add style to the image of King Kongʼs portrait. <img src= images/king-kong.jpg <width- 500 height= 350 alt= The mighty King Kong, a fearsome giant ape. Title= King Kong contemplates scaling yet another tall building. class= portrait </> The write a CSS rule to target only an image with the class of portrait.portrait 1
margin: 10px 0; border: 1px solid ##FFF7DD; padding: 4px; TWO COLUMN LAYOUTS WITH CSS Look at the examples in the Web Standardistas book Chapter 11 http://webstandardistas.com/11 TWO CONCEPTS FOR CREATING MULTICOLUMN LAYOUTS 1. document flow Elements on page flow down starting with the first element at the top left and subsequent elements below. e.g. all elements try to sit as close to the top left of the page as possible. 2. Floats We use the float property to remove elements from this document flow. Hereʼs a simple page with no floats: <h1>no Floats</h1> <div id= container > <div> class= box <h2>div 1</h2> </div> <div> class= box <h2>div 2</h2> </div> <div> class= box <h2>div 3</h2> </div> </div> styled in CSS body margin: 20px; padding: 0; font-family: ʻLucida Grandeʼ, Lucida Sansʼ, Arial, sans-serif; background-color: #CCCCCC #container width: 400px; height: 400px; border: 1px solid: #000000 background-color: #FFFFFF 2
.box width: 100px; height: 100px; This page http://www.webstandardistas.com/11/ displays in browser with 3 divs one below the other. Div is block level forces line break Follows normal document flow Apply a float: left to the class of box.box float: left; width: 100px; height: 100px; This page http://www.webstandardistas.com/11/floating_divs_02.html displays in browser All divs removed from normal document flow Moves them left so the three display horizontally Try float: right; This displays this way http://www.webstandardistas.com/11/floating_divs_03.html The order of the divs follows with div 1 going as far right as possible and the other following. What happens if all divs are not floated? <div id= content > <div class= boxspecial ><h2>div 1</h2></div> <div> class= box <h2>div 2</h2> </div> <div> class= box <h2>div 3</h2> </div> </div> note we have two different classes now box and boxspecial. We can target a CSS rule to each of these classes..box width: 100px; height: 100px; 3
.boxspecial float: right; width: 100px; height: 100px; The resulting page http://www.webstandardistas.com/11/floating_divs_04.html has only the boxspecial floated to the right. Div 2 and 3 have no float specified so they follow the normal document flow. You can set up divs of different sizes If they are larger than the container, then one has to occupy the first space below; See http://www.webstandardistas.com/11/floating_divs_05.html Where div 3 canʼt move to upper left and so it falls below div 2 because there is space available there. If we wanted div 3 to drop below div 1 we have to clear the floats of div 1 and div 2..box3 float: leftʼ width: 160px; height: 140px; clear: both; the result is http://www.webstandardistas.com/11/floating_divs_06.html the clear declaration on div 3 clears the floats. Add a sidebar to the 1 column layout we created last week The content is tagged as follows: <body> <div id= content > <div id= header > Header </div> <div id= content > Content </div> <div id= sidebar > Sidebar </div> <div id= footer > Footer </div> </div> </body> 4
Remember weʼre using a container and the aim is 2 columns Regardless of the order our content appears in the markup we can float the content or sidebar divs in either direction We control the display in the CSS with floats Changing the float values Creating a 2 column layout A 2 column layout with no floats http://www.webstandardistas.com/11/two_column_layout_01.html Uses the normal document flow A 2 column layout with content div floated left and sidebar floated right http://www.webstandardistas.com/11/two_column_layout_02.html A 2 column layout with content div floated right and sidebar floated left http://www.webstandardistas.com/11/two_column_layout_03.html Important: specify width on floated elements. An element without specific width should shrink to be as wide as the content within it. So always specify width Create markup in as logical a manner as possible and then control it with CSS Havenʼt specified height of sidebar div and it is only as tall as it needs to be to accommodate its content So background colour of container shows through 5
To make sure our footer (which has not width on it) displays below both the content and sidebar divs apply a clear: both property. Itʼs important to calculate width of elements to make sure they fit side by side in container Remember box model calculated by adding width of element and adding margins, padding and border. In http://www.webstandardistas.com/11/two_column_layout_03.html we see the divʼs full calculated widths for the content and sidbar divs are = to the width of the container. Padding-left + element width + padding-right Content div -- 20px + 510px +20px = 550 and sidebar div 20px + 200px + 20px = 240. Total 790px What if elements are too wide? In http://www.webstandardistas.com/11/container_too_small.html combined width of content and sidebar divʼs is too wide for the container. As a result, the sidebar floats to the right as it should but below the content. Collapsing margins When you have equal margins around all four sides of a paragraph or other element collapsing margins take hold. This means that: where two elements touch vertically the smaller of these margins collapses to zero. This creates even spacing between paragraphs and elements. It makes writing the CSS easier. It can be overridden (with an additional class) Applying a Float to an image In normal document flow if we have an image the paragraphs will simply line up below. But what if you want the image to rest beside the paragraphs? We can do this with a class See example http://www.webstandardistas.com/11/image_floated_left.html 6
The CSS rule will targets the class.tallprimate which is floated left with padding The XHTML adds the class= tallprimate to the img tag. What if the floated image were taller than the container? It will break out of the layout because it is taken out of the normal doc flow when floated. Solutions: Re-size image Add -- clear: both; on #footer Add overflow: auto; on #content Overflow property determines how content inside a div or other block level element should be displayed if its width or height exceeds that specified for the container element. Faux Columns Since our columns in the CSS 2 column only expand to fill the content they occupy the sidebar in this http://www.webstandardistas.com/11/two_column_layout_02.html does not fill the space. This may not be a problem if your container background colour is the same as your div background colour Ideally it would extend to fill the vertical space as the longer content column does. Hereʼs a solution: faux columns: Create and define a background-image for the container div that can be tiled vertically to create the effect of 2 columns. 790 x 10 px then adjust your #container CSS by adding background-imge: url(faux_column.jpg); background-repeat: repeat-y; the result will look like this: 7
In class work: Have a look at the King Kong page with a 2 column layout is CSS http://www.webstandardistas.com/11/king_kong.html Work on the gordo.html page. Go to: http://www.webstandardistas.com/11/assets.zip and you will get images to add to the gordo.html page. Use the container_bg.png from the assets to make the background-image for the container. Also add body_bg.png and famous_primates_brand.png Add a sidebar div Add a sidebar rule to CSS Measure the divs in the last version your only had one column. Now there will be a content div and a sidebar div. Youʼll need to widen the container div. Set appropriate widths for the content and sidebar divs. Add floats Add padding to your sidebar Add the faux columns to give the illusion that your content and sidebar divs are occupying the same vertical length 8