Castro Chapter 11


Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Castro Chapter 11

  1. 1. LAYOUT WITH STYLESHTML5 & CSS Visual Quickstart GuideChapter 11
  2. 2. A Bit of History• The ―old‖ way of page layout was using tables• CSS provides a new way, with several advantages: • Good for creating liquid layouts that can expand or shrink depending on the size of your visitor’s monitor • Keeping content separate from layout means you can easily apply the same layout to multiple pages • CSS + HTML combination tends to produce smaller file sizes • Since CSS and HTML are current standards, pages that adhere to their rules are guaranteed to be supported in future browsers
  3. 3. Considerations When Beginning a Layout• Always separate your content (HTML) and presentation (CSS)• Think about different browsers • Not everyone uses the same browser, operating system, or even device • Test your pages on a range of browsers before going live • As you continue developing, keep testing pages in a few browsers so you’ll have fewer issues to address at the end of development
  4. 4. Considerations, Part 2• Decide on a type of layout • Fixed layout has pixel-based widths • Fluid layout uses percentages, allowing page to shrink and expand • An elastic layout uses ems for width and other property sizes, so page scales according to user’s font-size settings• No single layout is right for every circumstance• There are even hybrid approaches to layout! • We will make a hybrid of a fluid and fixed layout • Columns are fluid, with percentage-based widths so they grow & shrink • Overall page width has a fixed maximum width
  5. 5. Structuring Your Pages• Divide your page into logical sections. • masthead, main, sidebar, footer, etc. Use divs only when no other semantic element seems appropriate• Put your content in an order that would be most useful if not using CSS • This allows browsers that don’t support CSS, such as many mobile browsers, to display the content before less important elements, like a header• Use heading elements (h1, h2, etc.) consistently to identify and prioritize information• Use comments to identify different areas of your page and their contents. It’s even a good idea to comment closing </div> tags to keep them straight.
  6. 6. The Box Model• Every element in your Web page is enclosed in an invisible box• Each box has 4 important properties: • The content area • The padding • The border • The margin• Each property can be controlled using CSS.
  7. 7. Padding & Margins: What’s theDifference?
  8. 8. Changing the Background• Refers not to the background of the entire page, but to the background of a particular element• You can change the background of any element—images, form elements, tables, and even the body itself• background-image, background-repeat, background- attachment, background-position, background-color• Or just use background to change multiple background properties at once
  9. 9. Setting the Height or Width for an Element• width: w, where w is the width of the element’s content area• height: h, where h is the height of the element’s content area• If not set, defaults to auto • auto value for width is calculated from width of the containing box minus the padding, borders, and margins • auto value for height is calculated based on the length of the content
  10. 10. Setting the Margins around an Element• Type margin: x, where x is the amount of desired space to be added• Can specify as a length, percentage, or auto• #wrap {margin: 20px auto;} • Would set the top and bottom margins to 20px, and automatic margins for left and right • If you use one value for margin, that value is applied to all four sides equally• Can add –top, -bottom, -left, -right to the margin property to adjust the margin for a particular side. For example: • margin-top: 10px
  11. 11. Adding Padding around an Element• Type padding: x, where x is the amount of desired padding.• As with margins, value can be specified in units or as a percentage• If you use 1 value, applies to all• 2 values, first applies to top/bottom, second to left/right• 3 values: 1st applies to top, 2nd applies to left/right, 3rd applies to bottom• 4 values: top, right, bottom, and left (clockwise) • padding: 10px • padding: 10px 20px • padding: 10px 20px 15px • padding: 5px 10px 15px 10px
  12. 12. Making Elements Float• You can make elements float, such as when you want text to wrap around images or figures• When you float an element to a side, content that would normally display after it flows around it instead• Do this using float property • float: left; • would cause the element to float to the left, and the rest of the page after that element to flow to the right of the element • The direction you choose applies to the element you’re floating, not to the elements that flow around it
  13. 13. Controlling Where Elements Float• You often need to control which elements an element can float next to and which it cannot• To keep an element from floating next to something you don’t want it to, use the clear property • clear: both; • will clear floating on both sides
  14. 14. Setting the Border• You can create a border around or on individual sides of an element• Can set the thickness, style, and color of the border• border-style: type (none, dotted, dashed, solid, double, groove, ridge, inset, or outset)• border-width• border-color• border: 1px solid green;• border-right: 2px dashed green;• (also border-top, border-bottom, border-left)
  15. 15. Offsetting Elements in the Natural Flow• Each element has a natural location in a page’s flow• Moving the element with respect to this original location is called relative positioning• Surrounding elements are totally unaffected• Use position: relative; top: -1.1em (for example)• To see this in action, look at Figure 11.25 and Figure 11.26 on page 178
  16. 16. Positioning Elements Absolutely• Natural flow of the page is top to bottom, left to right• So, if the img tag comes before the p, the image appears before the paragraph• You can take elements out of the normal flow by specifying their precise position with respect to the nearest positioned ancestor or to the body.• For example: • .photo {position: absolute; left: -112px; top: 3px;}
  17. 17. Positioning Elements in 3D• Once you start using relative, absolute, or fixed positioning, it’s easy to get yourself in a situation where elements are overlapping• CSS allows you to choose which element should display on top, using z-index property• The higher the z-index value, the higher up the element will be in the stack (the closer to the top)• Property only applies to elements positioned as absolute, relative, or fixed
  18. 18. Determining How to Treat Overflow• Sometimes, elements will spill out of their ―boxes‖ • The container might not be big enough • You might have positioned the content outside of the box, using: • negative margins • absolute positioning• When this happens, you may need to control the area outside the element’s box
  19. 19. The overflow Property• The overflow property allows this control • overflow: visible expands the box (default) • overflow: hidden hides content that doesn’t fit in the box • overflow: scroll adds scroll bars to the element • overflow: auto adds scroll bars only when necessary• The overflow property can also be used to stop floats
  20. 20. Aligning Elements Vertically• By default, elements (such as images) align to the bottom of the line• The vertical-align property overrides this default• Important notes: • The vertical-align property will only work on elements displayed inline, not elements displayed as a block
  21. 21. Possible Values of vertical-align• baseline: align element’s baseline with parent’s baseline• middle: aligns the middle of the element with the middle of the parent• sub: positions the element as a subscript of the parent• super: positions the element as a superscript of the parent• text-top: aligns the top of the element with the top of the parent• text-bottom: aligns the top of the element with the top of the parent• top: aligns the top of the element with the top of the tallest element on the line• bottom: aligns the bottom of the element to the bottom of the lowest element on the line• Or, type a percentage of the line height of the element, which may be positive or negative
  22. 22. Changing the Cursor• Browsers change cursor shape based on what visitor is pointing at • Usually an arrow • Pointing finger to highlight links • ―I‖ shaped cursor for text input • Etc.• CSS allows you control over this using cursor property• For example, changing the pointer to not indicate a link for navigation button to current page
  23. 23. Possible Values of cursor• cursor: pointer for links• cursor: default for an arrow• cursor: crosshair• cursor: move• cursor: wait• cursor: help• cursor: text• cursor: progress• cursor: auto• cursor: x-resize
  24. 24. Displaying and Hiding Elements• display property overrides element’s natural display type • Change from inline to block or vice versa• Can also prevent an element and its content from occupying visual space in the page• Values: • inline • block • inline-block allows element to appear on same line as other content, but otherwise behaves like block-level element • none
  25. 25. The visibility Property• Primary purpose is to control whether an element is visible• When you hide an element with visibility, a blank space shows where the element and its content would otherwise appear