CSS: Layout Part 2 Robert A. Fulkerson College of Information Science and Technology http://www.ist.unomaha.edu/ University of Nebraska at Omaha http://www.unomaha.edu/ CSS for layout and formatting: clear clear Using the clear attribute allows you specify that an element should not be allowed to float next to anything. You can clear an element from items floating to the left or the right or both. Slide #2 The HTML Page (see complete page on website) 4. <title>page!</title> 5. <meta charset="utf-8" /> 6. <link rel="stylesheet" type="text/css" href="css/normalize.css" /> 7. <link rel="stylesheet" type="text/css" href="css/layout-c.css" /> 8. <!--[if lt IE 9]> 9. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> 10. </script> 11. <![endif]--> 12. </head> 13. <body> 14. <header>this is a header.</header> Slide #3 1
layout-c.css example 11. padding: 10px; /* added to push header down a bit for vert centering */ 17. } Slide #4 layout-c.css example 18. #col2 { 19. width: 28%; 20. padding-top: 10px; 21. margin-left: 72%; 22. } 23. #pic { 24. float: left; 25. padding-right: 10px; 27..firstp { 28. margin-top: 0px; 29. } 30. footer { 31. clear: both; /* move footer past any floats on either side */ 32. height: 75px; /* set it to be as tall as image below */ 33. background: url("../images/back.jpg") repeat-x; /* put in the image */ 34. font: italic 0.75em "Times New Roman", serif; /* set the font */ 35. text-align: center; /* center the text */ 36. padding-top: 25px; /* push the text down a bit to center vertically */ 37. } Slide #5 CSS for layout and formatting: border border border-width border-color border-style Using the border family of attributes allows you decorate your boxes with borders. border-width values: sizes or percentages border-style values: none, dotted, dashed, solid, double, groove, ridge, inset, outset border-color values: a color specified by a color name, hex value, RGB or RGBA value. border values: any of the values above in the order width style color. Slide #6 2
The HTML Page (see complete page on website) 4. <title>page!</title> 5. <meta charset="utf-8" /> 6. <link rel="stylesheet" type="text/css" href="css/normalize.css" /> 7. <link rel="stylesheet" type="text/css" href="css/layout-b.css" /> 8. <!--[if lt IE 9]> 9. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> 10. </script> 11. <![endif]--> 12. </head> 13. <body> 14. <header>this is a header.</header> Slide #7 layout-b.css example 11. padding: 10px; 17. padding-right: 15px; /* to move the border away from the text */ 18. border-right: 2px inset; /* look, a border! */ 19. margin-bottom: 20px; /* to push the footer away from the content */ 20. } Slide #8 layout-b.css example 21. #col2 { 22. width: 28%; 23. padding-top: 10px; 24. margin-left: 72%; 25. margin-bottom: 20px; /* to push the footer away from the content */ 27. #pic { 28. float: left; 29. padding-right: 10px; 30. } 31..firstp { 32. margin-top: 0px; 33. } 34. footer { 35. clear: both; 36. height: 75px; 37. font: italic 0.75em "Times New Roman", serif; 38. text-align: center; 39. padding-top: 25px; 40. border-top: 3px double blue; /* look, another border! */ 41. } Slide #9 3
CSS for layout and formatting: An unordered list for nav Now, let s add a navigation section after the header. In this navigation section, we ll put an unordered list that we ll convert to a navigation menu that fits in with our page s look. Slide #10 The HTML Page (see complete page on website) 4. <title>page!</title><meta charset="utf-8" /> 5. <link rel="stylesheet" type="text/css" href="css/normalize.css" /> 6. <link rel="stylesheet" type="text/css" href="css/layout-b.css" /> 7. <!--[if lt IE 9]> 8. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> 9. </script> 10. <![endif]--> 11. </head> 12. <body> 13. <header>this is a header.</header> 14. <nav><ul><li><a href="http://w3c.org">w3c</a></li></ul></nav> Slide #11 layout-b.css example 11. padding: 10px; 17. padding-right: 15px; /* to move the border away from the text */ 18. border-right: 2px inset; 19. margin-bottom: 20px; /* to push the footer away from the content */ 20. } Slide #12 4
layout-b.css example 21. #col2 { 22. width: 28%; 23. padding-top: 10px; 24. margin-left: 72%; 25. margin-bottom: 20px; /* to push the footer away from the content */ 27. #pic { 28. float: left; 29. padding-right: 10px; 30. } 31..firstp { 32. margin-top: 0px; 33. } 34. footer { 35. clear: both; 36. height: 75px; 37. font: italic 0.75em "Times New Roman", serif; 38. text-align: center; 39. padding-top: 25px; 40. border-top: 3px double blue; 41. } Slide #13 CSS for layout and formatting: display display Using the display attribute allows you change the way a particular element is displayed. Values for display are: block, which is like using a sectioning element, where the element takes up an entire chunk of the browser from the left side to the right side, and unless you move it around with positioning, blocks are stacked on top of blocks, like our original page at the very beginning of this example. inline, which is like putting two words in the middle of a sentence. Inline elements display in the line of other elements and cannot have any properties such as height, width, margin and padding added because they re part of the line of text. inline-block, which displays the element inline but allows you to add properties such as height, width, margin, and padding. none, which hides the element completely from displaying in the page. Slide #14 The HTML Page (see complete page on website) 4. <title>page!</title><meta charset="utf-8" /> 5. <link rel="stylesheet" type="text/css" href="css/normalize.css" /> 6. <link rel="stylesheet" type="text/css" href="css/layout-d.css" /> 7. <!--[if lt IE 9]> 8. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> 9. </script> 10. <![endif]--> 11. </head> 12. <body> 13. <header>this is a header.</header> 14. <nav><ul><li><a href="http://w3c.org">w3c</a></li></ul></nav> Slide #15 5
layout-d.css example 11. padding: 10px; 17. padding-right: 15px; /* to move the border away from the text */ 18. border-right: 2px inset; 19. margin-bottom: 20px; /* to push the footer away from the content */ 20. } Slide #16 layout-d.css example 21. #col2 { 22. width: 28%; 23. padding-top: 10px; 24. margin-left: 72%; 25. margin-bottom: 20px; /* to push the footer away from the content */ 27. #pic { 28. float: left; 29. padding-right: 10px; 30. } 31..firstp { 32. margin-top: 0px; 33. } 34. footer { 35. clear: both; 36. height: 75px; 37. font: italic 0.75em "Times New Roman", serif; 38. text-align: center; 39. padding-top: 25px; 40. border-top: 3px double blue; 41. } Slide #17 layout-d.css example 42..menu li { /* set how li elements inside the menu class behave */ 43. display: inline; /* change from block to inline */ 44. } Slide #18 6
CSS for layout and formatting: The rest of the CSS for nav This is the final set of CSS we ll look at for this example. In this example, we look at a whole bunch of different properties you can use to create a navigation menu using an unordered list. Many of the properties we ve already looked at before, but we throw them into the CSS all at once instead of introducing them one by one. Slide #19 The HTML Page (see complete page on website) 4. <title>page!</title><meta charset="utf-8" /> 5. <link rel="stylesheet" type="text/css" href="css/normalize.css" /> 6. <link rel="stylesheet" type="text/css" href="css/layout-final.css" /> 7. <!--[if lt IE 9]> 8. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> 9. </script> 10. <![endif]--> 11. </head> 12. <body> 13. <header>this is a header.</header> 14. <nav><ul><li><a href="http://w3c.org">w3c</a></li></ul></nav> Slide #20 layout-final.css example 11. padding: 10px; 17. padding-right: 15px; /* to move the border away from the text */ 18. border-right: 2px inset; 19. margin-bottom: 20px; /* to push the footer away from the content */ 20. } Slide #21 7
layout-final.css example 21. #col2 { 22. width: 28%; 23. padding-top: 10px; 24. margin-left: 72%; 25. margin-bottom: 20px; /* to push the footer away from the content */ 27. #pic { 28. float: left; 29. padding-right: 10px; 30. } 31..firstp { 32. margin-top: 0px; 33. } 34. footer { 35. clear: both; 36. height: 75px; 37. font: italic 0.75em "Times New Roman", serif; 38. text-align: center; 39. padding-top: 25px; 40. border-top: 3px double blue; 41. } Slide #22 layout-final.css example 42..menu li { 43. display: inline; 44. } 45..menu { /* change the menu class, which is applied to an unordered list */ 46. list-style-type: none; /* make sure there are no bullets */ 47. margin: 0px; /* set the margin */ 48. padding: 7px 0px; /* TB and LR */ 49. text-align: center; /* center the enter ul in avail space: 800px/85% */ 50. } Slide #23 layout-final.css example 51..menu li a:link,a:visited { /* change how links and visited links look */ 52. color: #ffffff; /* text is white */ 53. background-color: #b291c3; /* background is purplish */ 54. text-align: center; /* center text in each link */ 55. padding: 5px; /* put a little breathing room around it */ 56. text-decoration: none; /* remove underlines */ 57. text-transform: uppercase; /* convert to all uppercase */ 58. } 59..menu li a:hover { change how links being hovered over look */ /* 60. color: #b291c3; /* text is now purplish (from above) */ 61. background-color: #ffffff; /* background is now white */ 62. text-align: center; /* the rest of these need to stay the */ 63. padding: 5px; /* same for consistency between non- */ 64. text-decoration: none; /* hovered elements and hovered */ 65. text-transform: uppercase; /* elements */ 66. } Slide #24 8
CSS for layout and formatting There are many properties we haven t looked at in this example, including other types of list-style-type values, text-decoration values and other properties. We also didn t look at fixed, relative or absolute positioning. Those are available, but using a fluid layout like we ve put together here allows you to put together a responsive web design layout that adapts to different media/device types such as tablets, mobile phones, etc. If you re interested in layout and design, you are encouraged to go investigate other types of layout and considerations for good design. Slide #25 9