Web Programming Language CSS – Part 2 Dr. Ken Cosh (CSS II)

Review Last time we learnt about CSS. Defining Selectors HTML Selectors Class Selectors ID Selectors The power of and Site styles The focus was on using CSS for Style…

This week CSS can also be used to help with layout, and this week we will investigate this. We touched on it briefly last time on slide 18

Slide 18 revisited… The general syntax for an ID selector is: #IDSelector {Property:Value;} For example: #layer1 {position:absolute; left:100;top:100; z-Index:0} #layer2 {position:absolute; left:140;top:140; z-Index:1} THIS IS LAYER 1 POSITIONED AT 100,100 THIS IS LAYER 2 POSITIONED AT 140,140

What did that do? Well, it created 2 ‘layers’. But, lets take a closer look… I think ‘top’ and ‘left’ should be clear enough, but what about the other parameters? The key is “position:_____”

position: static; Default = ‘static’ This doesn’t really mean a lot, except that the element is not positioned, and appears where it normally would in the document!

THE CODE:.position-static { position:static; } Here is some staticly positioned text - exciting isn't it???

position: absolute; absolute allows you to remove elements from the page, and position them precisely. #top-corner { position:absolute; top:0; right:0; width:200px; } This would create a box that appears in the top right corner of the page, irrespective of any other elements around it.

THE CODE.position-absolute { position:absolute; top:0; right:0; width:200px; } This is text absolutely positioned in the top right corner of the page - awesome stuff! :)

position: relative Relative positioning places an element on the page relative to where it should be… #down-left { position:relative; top:20px; left:-40px; } This would move the element down (20 pixels) and to the left (40 pixels). Note that while the element moves on the page, it remains where it is in the document.

THE CODE.position-relative { position:relative; top:40px; left:-40px; } This text is positioned a little down and to the left of where it should be (relative to the page)

Combining Relative & Absolute We can also place an absolutely positioned element within a relatively positioned element. Some Element In this case the relative element is relative to the document, while the absolute element is positioned precisely within the relative element.

THE CODE.position-relative2 { position:relative; width:400px; }.position-absolute { position:absolute; top:0; right:0; width:200px; } This text is positioned absolutely within a relatively positioned element. The relative element is 400 pixels wide, while the absolute element is in the top right of that box.

Tables in CSS! Remember in HTML we had troubles positioning elements on the page, and resorted to using tables? Well, its much easier in CSS to precisely position elements on the page, and it is a small step forward to create a table like structure using CSS. Some Element Other Element

THE CODE.position-relative2 { position:relative; width:400px;}.position-absolute { position:absolute; top:0; right:0; width:200px;}.position-absolute2 { position:absolute; top:0; left:0; width:200px;} This text is positioned absolutely within a relatively positioned element. The relative element is 400 pixels wide, while the absolute element is in the top right of that box. This text is also positioned absolutely within the relatively positioned element. Even though this text appears to the left, in the HTML document it occurs after the text to the right! Thats because they are both absolutely placed!

The absolute problem The problem with the absolute elements is that as they are removed from the page. This means they will appear over any subsequent elements. We could use the height property to specify how large the element will be.

THE CODE.position-relative3 { position:relative; width:400px; height:200px;}.position-absolute { position:absolute; top:0; right:0; width:200px;}.position-absolute2 { position:absolute; top:0; left:0; width:200px;} This text is positioned absolutely within a relatively positioned element. The relative element is 400 pixels wide, while the absolute element is in the top right of that box. This text is also positioned absolutely within the relatively positioned element. Even though this text appears to the left, in the HTML document it occurs after the text to the right! That’s because they are both absolutely placed!

Problem with height We could use the height property to specify how large the element will be. But often we don’t know the height Different font sizes Different amounts of text

Float The Float property can be used to float elements to a particular position. This is often used as a way to wrap text around an image. float:left;

THE CODE.position-relative3 { position:relative; width:400px; height:200px;}.position-float { float:left; width:200px;} The element to the left is a picture of some great legs! It is floated to the left of the element, which means this text will wrap around the bottom of the picture, assuming there is enough text that is, which is why I am writing such a long boring paragraph of content here! How much text can I write before it will finally wrap around the bottom? Clearly this isn't going to work for a 'table' with different sized columns.

Float for Tables We can float more than one column in a table to the left, so they neatly appear next to each other, without needing to worry about the heights of each column. The problem comes after the floats finish – where exactly in the document should the browser continue from?

THE CODE.position-relative3 { position:relative; width:400px; height:200px;}.position-float2 { float:left; width:150px;} The element to the left is a picture of some great legs! It is floated to the left of the element, which means this text will wrap around the bottom of the picture, assuming there is enough text that is, which is why I am writing such a long boring paragraph of content here! How much text can I write before it will finally wrap around the bottom? Clearly this isn't going to work for a 'table' with different sized columns.

clear:both A powerful CSS tag is “clear:both”, have a look what happens after we call it…

THE CODE.position-relative3 { position:relative; width:400px; height:200px;}.position-float { float:left; width:200px;}.clear { clear:both;} The element to the left is a picture of some great legs! It is floated to the left of the element, which means this text will wrap around the bottom of the picture, assuming there is enough text that is, which is why I am writing such a long boring paragraph of content here! How much text can I write before it will finally wrap around the bottom? Clearly this isn't going to work for a 'table' with different sized columns. Just use a "clear:both" class to solve that problem!

CSS for Layout I normally have 2 stylesheets for a website – one for style and one for layout. Design the site on paper. Identify classes and id’s. Reuse ‘useful’ styles…

Assignment Check Out the Design of Ken’s Baby Store. It is your job to create a page (using HTML, CSS) that looks just like it!