269200 Web Programming Language

269200 Web Programming Language Week 3 Dr. Ken Cosh (CSS II)

Review • Last time we learnt about CSS. • Defining Selectors • HTML Selectors • Class Selectors • ID Selectors • The power of <DIV> and <SPAN> • 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: <HTML><HEAD><style type="text/css">#layer1 {position:absolute; left:100;top:100; z-Index:0}#layer2 {position:absolute; left:140;top:140; z-Index:1}</style></HEAD><BODY><div ID="layer1"><table border="1" bgcolor="#FFCC00"><tr><td>THIS IS LAYER 1<br>POSITIONED AT 100,100</td></tr></table></div><div ID="layer2"><table border="1" bgcolor="#00CCFF"><tr><td>THIS IS LAYER 2<br>POSITIONED AT 140,140</td></tr></table></div></BODY></HTML>

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; } <div class="position-static">Here is some staticly positioned text - exciting isn't it???</div>

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; } <div class="position-absolute">This is text absolutely positioned in the top right corner of the page - awesome stuff! :)</div>

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; } <div class="position-relative">This text is positioned a little down and to the left of where it should be (relative to the page)</div>

Combining Relative & Absolute • We can also place an absolutely positioned element within a relatively positioned element. <div class="position-relative2"> <div class="position-absolute"> Some Element </div> </div> • 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; } <div class="position-relative2"> <div class="position-absolute"> 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. </div> </div>

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. <div class="position-relative2"> <div class="position-absolute"> Some Element </div> <div class=“position-absolute2”> Other Element </div> </div>

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;} <div class="position-relative2"> <div class="position-absolute"> 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. </div> <div class="position-absolute2"> 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! </div> </div>

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;} <div class="position-relative3"> <div class="position-absolute"> 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. </div> <div class="position-absolute2"> 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! </div> </div>

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;} <div class="position-relative3"> <div class="position-float"> <img src="splash.jpg"> </div> 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? <br> Clearly this isn't going to work for a 'table' with different sized columns. </div>

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;} <div class="position-relative3"> <div class="position-float2"> <imgsrc="splash.jpg" width="150"> </div> <div class="position-float2"> 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? <br> Clearly this isn't going to work for a 'table' with different sized columns. </div> </div>

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;} <div class="position-relative3"> <div class="position-float"> <imgsrc="splash.jpg"> </div> <div class="position-float"> 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? <br> Clearly this isn't going to work for a 'table' with different sized columns. </div> </div> <div class="clear"></div><br> Just use a "clear:both" class to solve that problem!

CSS for Layout • You could 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!

269200 Web Programming Language