Webpage layout using CSS

1. Webpage layout using CSS The box model http://www.w3schools.com/html/html_layout.asp https://developer.mozilla.org/en-US/docs/CSS/position SE-2840Dr. Mark L. Hornick

2. The <div> element is used to group block-level elements together html html body body head head h1 p p p h1 div p title title p p strong strong em em em em em strong em strong SE-2840 Dr. Mark L. Hornick

3. A <div> element usually contains an id or class attribute • Setting the style on a <div> element affects all nested elements • Provides a way to split a document into sections of related content whose presentation should be similar html body head h1 div p title p p strong em em em strong SE-2840 Dr. Mark L. Hornick

4. <span> essentially allows you to create custom in-line elements HTML: <p id=“ex”>This is <span id=“courier”>Courier</span> text.</p> This is Courier text. CSS:#ex { font-family: “Arial”; color:blue; }#courier {font-family:”Courier”; color:black;} <span> generally must have an id or class attribute to be useful • Although you also can use a CSS selector like: p#ex span {font-family:”Courier”; color:black;} SE-2840 Dr. Mark L. Hornick

5. The CSS box model The box model applies to both block and inline elements From the perspective of CSS, every element in an HTML doc is a box, including • Content area • Imaginary element box surrounding text (or image) • Optional Padding • The space between Content and Border; default is 0px • Optional Border • Various widths, styles, colors; default is invisible • Optional Margin • The space between Border and other elements; default is 0px SE-2840 Dr. Mark L. Hornick

6. Without Padding, Border, or Margin SE-2840 Dr. Mark L. Hornick

7. Padding and Margins can be simultaneously specified for all 4 sides… <style type="text/css"> body { margin: 30px; border: 5px solid gray; padding: 20px; } </style> SE-2840 Dr. Mark L. Hornick

8. …or individually <style type="text/css"> body { margin-right: 30px; margin-top: 5px; margin-left: 100px; border: 5px solid gray; padding: 20px; padding-right: 100px; padding-bottom:80px; } </style> SE-2840 Dr. Mark L. Hornick

9. The width and height properties of elements can also be specified The width attribute specifies the width of the content area only Total width = left-margin + right-margin + left-border + left-padding + content + right-padding + right-border + right-margin SE-2840 Dr. Mark L. Hornick

10. TheFlow is what a browser uses to layout HTML elements The browser flows block elements from top to bottom, inserting a line break between each <h1>…</h1> <div> </div> <p>…</p> <p>…</p> <p>…</p> SE-2840 Dr. Mark L. Hornick

11. Every character and element in a line of text is represented by an inline box Inline elements are flowed from top-left to bottom-right Note this is similar to Java Swing’s Flow Layout • For text, the inline box size depends on the font size and the value of the line-height attribute <h1> </h1> text text <div> </div> <p> </p> text img a text em span <p> </p> text <p> </p> img img SE-2840 Dr. Mark L. Hornick

12. Flow proceeds horizontally from left to right as long as there is room on the right <h1> </h1> text text <h1> </h1> text text <div> </div> <div> </div> <p> </p> text img a <p> </p> text img text em span a text em span <p> </p> text <p> </p> text <p> </p> img img <p> </p> img img SE-2840 Dr. Mark L. Hornick

13. Static is the default positioning scheme applied to elements by the browser There are four basic types of positioning • static (normal, the default) • relative • absolute • fixed <style type="text/css"> body { /* default! */ position: static; } </style> SE-2840 Dr. Mark L. Hornick

14. Relative positioning uses nearest nesting element as the containing block The element’s “theoretical” position w.r.t. computation of normal flow is preserved But the element is actually positioned w.r.t. the containing block The adjacent elements behave like the relative block was in the static position <style type="text/css"> #a { position: relative; top: 70px; left: 50px; } </style> SE-2840 Dr. Mark L. Hornick

15. Absolute positioning removes an element from the normal flow The element’s position w.r.t. normal flow is eliminated • Remaining normal elements are used in the flow as if the absolutely positioned element did not exist <style type="text/css"> #id1 { position: absolute; top: 70px; left: 50px; width: 100px; z-index: 5; } </style> Note: Elements in the normal flow always appear beneath positioned elements Z-index only applies to positioned elements Z-index specifies the stack order of elements (higher numbers in front, and negative numbers are valid) SE-2840 Dr. Mark L. Hornick

16. Absolute elements are positioned with respect to their nearest containing ancestor… • …whose position is not specified as static Here, the blue <div> is the nearest containing element, but it is part of the normal flow (static)… …so the green element defaults to being positioned w.r.t the <body> or <html> element SE-2840 Dr. Mark L. Hornick

17. Fixed positioning uses the browser window as the containing block Position is always fixed with respect to the browser window <style type="text/css"> #a { position: fixed; top: 70px; left: 50px; width: 100px; } </style> SE-2840 Dr. Mark L. Hornick

18. Floating an element is another way of positioning it The floated element’s position with respect to normal flow is eliminated • …but the remaining normal elements respect the boundary of the floated element • contents of the normal flow elements will flow around it the floated element A floated element should be given a specific width the green element is floated w.r.t the blue <div> SE-2840 Dr. Mark L. Hornick

19. An element floats w.r.t. the element immediately above it the green element is floated after the yellow <p> SE-2840 Dr. Mark L. Hornick

20. An element can be floated either left or right the green element is floated w.r.t the <body> the green element is floated w.r.t the <div> SE-2840 Dr. Mark L. Hornick