1 / 20

Cascading Style Sheets (Advanced topics)

Cascading Style Sheets (Advanced topics). Two Layout Techniques. Table Layout This works, but is considered a misuse of tables. Table layout is gradually phased out. CSS Layout CSS positioning is used to place elements. Standard compliant

krikor
Download Presentation

Cascading Style Sheets (Advanced topics)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cascading Style Sheets (Advanced topics)

  2. Two Layout Techniques • Table Layout • This works, but is considered a misuse of tables. • Table layout is gradually phased out. • CSS Layout • CSS positioning is used to place elements. • Standard compliant • Very old browsers and mobile devices may not render CSS correctly.

  3. The Concept of Normal Flow • Normal flow basically means how browsers normally lay out components without any special settings in CSS. • In the normal flow, text elements are laid out from top to bottom and from left to right (for ltr languages). • You can float any element with CSS (paragraphs, lists, divs, etc.) • Floats are used to create multicolumn layouts, navigation, etc.

  4. Normal Flow vs. Window Sizes 2 1 1 2 3 1 2 3 4 4 5 5 3 4 1 2 1 2 3 4 5 3 4 5 See Experiment 1 in css_float1.htm for more information.

  5. CSS float property • Values: left | right | none | inherit • img {float: right; margin: 20px} • See Figure 21-1 on p. 370 for screenshot. • Floated elements using this CSS property are removed from the normal flow. Surrounding content is reflowed to stay out of their way.

  6. CSS Clear Property • Values: left | right | both | none | inherit • img {float: left; margin-right: 10px} • h2{clear: left; top-margin: 2em} • See Figure 21-7 on p. 375 for screenshot. • Here is how to interpret the values of the Clear property • The left value starts the element below any elements that have been floated to the left edge of the containing block. • See Flotutorial’s Tutorial 3 for more info.

  7. CSS Position Property • Values: static | relative | absolute | fixed • Static: normal positioning • Relative: moves the element box, but its original space in the document flow is preserved • Absolute: positions an element at a specific location. The element is removed from the document flow. • Fixed: similar to absolute position, but places elements relative to the view port (browser window)

  8. CSS Positioning Properties • Left • Right • Top • Bottom • Example • div.a { position: absolute; height: 120px; width: 300px; background-color: yellow} • div.b{position; absolute; top: 20px; left: 10px}

  9. Handling Overflow • When an element is set to a size too small to contain all its contents, it is possible to specify how its content is to be displayed. • CSS Overflow property • Values: visible | hidden | scroll …

  10. CSS z-index Property • The z-Index property allows you to define the stacking order of elements. • The higher the z-index is, the higher in the layer stack an element will be. • Examples on p. 384

  11. Absolute Positioning • Absolute positioning is used to position an element at a certain location. • Three properties have to be met. • It is declared using { position: absolute } • It is positioned relative to the edges of its containing block using offset properties (e.g., top, left, bottom, and right) • It is completed removed from the document normal flow.

  12. Relative Positioning (1) • The main difference between relative positioning and absolute positioning is that the space where an element would have appeared in the normal flow is preserved in relative positioning and continues to influence the elements that surround it.

  13. Relative Positioning (2) • Four Properties of Relative Positioning • It is declared using { position: relative } • It is positioned relative to its initial position in the normal flow using offset properties (e.g., top, left, bottom and right) • Its original space in the document flow is preserved. • It can potential overlap other elements.

  14. Centering a Page • div.mypage { width: 500px;margin-left: auto;margin-right: auto;} • See other techniques on p. 419 – 421.

  15. Two-Column Layout (with Header and footer) Header Main Side bar Footer

  16. Two-Column Layout (Floats) <div class=“header”> … </div> <div class=“main”> … </div> <div class=“sidebar”> … </div> <div class=“footer”> … </div> .header { background-color: yellow; padding: 3px} .main {float:left; width:80%; margin-right: 3%;} .sidebar { width: 20%; float:left;} .footer {clear: left; padding:15px}

  17. Two-Column Layout (Absolute) <div class=“header”> … </div> <div class=“main”> … </div> <div class=“sidebar”> … </div> <div class=“footer”> … </div> .header { width: 780px; height: 70px;} .main {width:580px;} .sidebar { position: absolute; top: 70px; left: 580px; width: 200px} .footer {clear: left; padding:15px}

  18. Three-Column Layout • Similar to the two-column layout, you can do three-column layout using float or absolute positioning. • See exercises in class.

  19. Faux Columns (p. 432) Faux Columns can be applied to both table layout and CSS layout.

  20. CSS Floating and Other Techniques • Floatutorial – css.maxdesign.com.au [MR] • Understanding CSS z-Index – Mozilla [MR] Items marked as [MR] are must read items.

More Related