1. IS1825 Developing Multimedia Applications for Business Lecture 4: CSS Positioning and Flow Rob Gleasure R.Gleasure@ucc.ie http://corvus2.ucc.ie/phd/rgleasure/index.html

2. IS1825 Today’s lecture  CSS flow  CSS positioning  CSS backgrounds  CSS layers

3. The doctype declaration Generally when we are creating HTML pages, we will start with a tag that lets a browser know the version of HTML that we are running We haven't worried about this until now, but we need to add this in to help our CSS render consistently across browsers We are using HTML 4.01 transitional, which can be represented by the following tage

4. A starting point for your HTML files For all of your HTML pages, you can start with the following basic template This line lets a browser know the version of HTML that we are running (HTML 4.01 transitional) This line specifies the character set used for the page

5. CSS Flow We noted previously that and behave differently in one key way  Placing an item in a caused the item to be placed on a new line  It did this because has a flow type of ‘block’, whereas has a flow type of ‘inline’ We’ve come across this before, e.g. and are displayed by default according to a ‘block’ flow, and are displayed by default according to an ‘inline’ flow

6. CSS Block Flow Block Flow Block elements by default are as wide as the container surrounding them and fall on a new line  Try out this code: div {height: 200px; border-style: solid; padding:10px; } div#container { width: 550px; height:700px; } div.small { width: 250px; background-color: red;} div#big { background-color: green;}

7. CSS Inline Flow Inline Flow Inline elements stack left until a new line is necessary to fit content. They also technically ignore width specifications*  Try out this code: div {height: 200px; border-style: solid; padding:10px; } div#container { width: 550px; height:700px; } div.small { width: 250px; background-color: red; display: inline;} div#big { background-color: green; display: inline;}

8. CSS Floats Items can also be set to rest to the leftmost or rightmost available position using the float property,  Try out this code: img#left { float:left; } img#right { float:right; } div#container { border-style:solid; width: 600px; height:400px; } Look what happens to the positioning of the images Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at rhoncus magna. Sed leo nunc, viverra eget tincidunt ut, venenatis in nibh Vivamus leo nunc, malesuada fermentum consequat id, sagittis vel urna. Mauris nunc justo, convallis lacinia lacinia nec, tincidunt pellentesque felis.

9. Three Kinds of Positioning Fixed positioning, i.e. Element is positioned relative to the browser window and will not move even if the window is scrolled, e.g. #fixedEg { position: fixed; top: 100px; left: 100px; } Absolute positioning, i.e. Element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is, e.g. #absEg { position: absolute; top: 100px; left: 100px; } Relative positioning, i.e. Element is positioned relative to its normal default position, e.g. #relEg { position: relative; top: 100px; left: 100px; }

10. Relative Positioning of Divs Look at what happens when we try out the following code Relative positioning <!-- #first { border:2px solid rgb(00,250,00); position: relative; top: 0px; left: 0px; width: 800px; height: 800px; padding:0px; margin:0px; } #second { border:2px solid rgb(250,00,00); position: relative; top: 200px; left: 200px; width: 400px; height: 400px; padding:0px; margin:0px; }

11. Relative Positioning of Divs (cont) #third { border:2px solid rgb(00,00,250); position: relative; top: 100px; left: 100px; width: 200px; height: 200px; padding:0px; margin:0px; } -->

12. Absolute Positioning of Divs Look at what happens when we try out the following code Absolute positioning <!-- #first { border:2px solid rgb(00,250,00); position: absolute; top: 0px; left: 0px; width: 800px; height: 800px; padding:0px; margin:0px; } #second { border:2px solid rgb(250,00,00); position: absolute; top: 200px; left: 200px; width: 400px; height: 400px; padding:0px; margin:0px; }

13. Absolute Positioning of Divs (cont) #third { border:2px solid rgb(00,00,250); position: absolute; top: 300px; left: 300px; width: 200px; height: 200px; padding:0px; margin:0px; } -->

14. Fixed Positioning of Divs Look at what happens when we try out the following code Fixed positioning <!-- #first { border:2px solid rgb(00,250,00); position: absolute; top: 0px; left: 0px; width: 800px; height: 800px; padding:0px; margin:0px; } #second { border:2px solid rgb(250,00,00); position: fixed; top: 200px; left: 200px; width: 400px; height: 400px; padding:0px; margin:0px; }

15. Fixed Positioning of Divs (cont) #third { border:2px solid rgb(00,00,250); position: absolute; top: 300px; left: 300px; width: 200px; height: 200px; padding:0px; margin:0px; } -->

16. CSS Backgrounds and Images Background Images  We have seen already that CSS allows images to be used as a background for images, e.g. body { background-image: url(‘bg.gif’);}  We can also choose whether we would like the backgroudn image to be fixed or to scroll with the page using the background- attachment property, e.g. background-attachment: fixed; or background-attachment: scroll;

17. Background Property Tiled backgrounds  We can also specify whether the image repeats on the screen, as well as how it repeats p{ background-repeat: repeat-x; } /* Tile Horizontally */ p{ background-repeat: repeat-y; } /* Tile Vertically */ p{ background-repeat: repeat; } /* Tile Vert. & Horiz. */ p{ background-repeat: no-repeat; } /*Do not tile*/ Note: resizing background images is awkward with CSS and is best done with Photoshop, GIMP, etc

18. Background Property Try out the following code div#container { background-image: url('http://bis.ucc.ie/Images/UCC%20logo.png'); width: 550px; height:700px; border-style: solid; } div.small { width: 250px; }

19. Background Property You should see the following: Insert the following line of code and you should see: div#container { background-image: url('http://bis.ucc.ie/Images/UCC%20logo.png'); width: 550px; height:700px; border-style: solid; background-repeat: repeat-y; }

20. Background Property To place the image only once, change this to: div#container { background-image: url('http://bis.ucc.ie/Images/UCC%20logo.png'); width: 550px; height:700px; border-style: solid; background-repeat: no-repeat; }

21. Background Property We can also stop an image from scrolling using the background- attachment: value of fixed: div#container { background-image: url('http://bis.ucc.ie/Images/UCC%20logo.png'); width: 550px; height:900px; border-style: solid; } body { background-image:url('https://encrypted- tbn1.gstatic.com/images?q=tbn:ANd9GcSzg142QHHn3NvFWHK6w0y4EsjMHtKhkhTJO31VPNaO-3LP7SniAg'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; }

22. CSS and Layering As we discussed when we were covering the CSS ‘box model’, HTML elements are layered on top of one another automatically, each item nested inside others  We can over-ride this for our layout using CSS To manually define a priority, we set a z-index value.  The larger the value of an element, the higher the priority h1{ z-index: 2;} p {z-index: 1;} Here, the heading would be placed on top of the paragraph

23. CSS and Layering (cont) Copy the following code into a new webpage and save it as layers.html #first {background-color:rgb(00,150,200); z-index: 0; position: fixed; top: 100px; left: 100px; width: 400px; height: 400px;} #second { background-color:rgb(00,200,100); z-index: 1; position: relative; top: -50px; left: 250px; width: 200px; height: 200px;} #third {background-color:rgb(200,00,50); z-index: 2; position: absolute; top: 100px; left: 100px; width: 200px; height: 200px; } #fourth {background-color:rgb(200,00,250); z-index: 3; position: absolute; top: 250px; left: -50px; width: 200px; height: 200px; } #fifth {background-color:rgb(250,200,00); z-index: 4; position: absolute; top: 275px; left: 75px; width: 200px; height: 200px; } first second third fourth < div id="fifth">fifth

24. Note on Centralising Content in CSS We centre things in CSS using a very simple line of code, i.e. margin: 0 auto  Note that for this to work in IE we need to include the doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> div {height: 200px; border-style: solid; padding:10px; } div#container { width: 550px; height:700px; } div.small { width: 250px; background-color: red; margin: 0 auto}

25. Exercise Save this basic template as lecture13.html div { border-style:solid; border-width: 2px;} div#left_nav { padding-left:10px; background-color: #99CC00; } Lorem Lorem ipsum

26. Exercise (continued) In the internal CSS  For the body element Set the background-image to url(‘http://media.24ways.org/2011/verou/1.png’) Set the background-position to right Set the background-repeat to repeat-y  Create the banner ID, then set the width to 1000px and the height to 250px  Create the main_content ID, then set the width to 750px and the height to 800px  Create the footer ID, then set the width to 850px and the height to 100px

27. Exercise (continued)  Centre-align the banner, main_content and footer IDs by setting the margin property to 0 auto  For left_nav Set the width to 750px and the height to 800px Set position to be fixed, then set top to 250px and left to 275px Use the z-index to bring this div to the front  Set the a:hover to increase font-size to 200%

28. Exercise You should end up with a page that looks like this

29. Want to read more? http://www.w3schools.com/css/ http://www.vision.to/articles/the-difference-between-the-flow- and-positioning-for-web-pages.php http://www.vision.to/articles/the-difference-between-the-flow- and-positioning-for-web-pages.php http://www.tizag.com/cssT/index.php http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based- Layout-with-CSS/2/ http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based- Layout-with-CSS/2/ http://www.yourhtmlsource.com/stylesheets/csslayout.html http://css-tricks.com/absolute-positioning-inside-relative- positioning/ http://css-tricks.com/absolute-positioning-inside-relative- positioning/ http://dev.opera.com/articles/view/37-css-absolute-and-fixed- positioning/ http://dev.opera.com/articles/view/37-css-absolute-and-fixed- positioning/ http://www.tizag.com/cssT/background.php