1 / 14

CSS Positioning

CSS Positioning. WRA 210 11.4.13. Today’s Agenda. Review: <div> and CSS Box Model Review: HTML5 structural objects Intro: CSS float property for positioning Activity: use float to fully position your layout Activity: Begin to style your pages as they look in your design docs.

aure
Download Presentation

CSS Positioning

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. CSS Positioning WRA 210 11.4.13

  2. Today’sAgenda • Review: <div> and CSS Box Model • Review: HTML5 structural objects • Intro: CSS float property for positioning • Activity: use float to fully position your layout • Activity: Begin to style your pages as they look in your design docs

  3. The CSS Box Model • All objects are part of the box model (not just <div>) • margin: space outside the border, between objects • border: perimeter, boundaries • padding: space inside border, between content • height, width: space between padding • control single sides of a box or all sides at once

  4. Example <div> object <div id="header"> <h1>This is My Cool Website</h1> <ul id="navigation"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Me</a></li> <li><a href="resume.htm">Resume</a></li> </ul> </div><!-- #header -->

  5. DIVs vs HTML5 Structural Objects Structural Markup in HTML4 Structural Markup in HTML5

  6. Tonight: CSS Float • Where we start to lose our semanticness • Cheating at the box model • Positioning objects • Weirdness • Activity: use floats to begin positioning your structural markup

  7. ThinkBack: The "Inverted L" • Remember? • Built our structure, shaped with widths • Why do "nav" and "content" need altering?

  8. Behavior of Objects in Box Model • By default, objects take 100% width of parent • Even with fixed width, objects take up 100% of horizontal plane • By default, objects are defined by their top and bottom boundaries • Translation: we cannot have objects positioned next to one another. Unless ...

  9. What does float do to an object? • Allows content of other objects to wrap • paragraph text, header text, links, etc • Makes its borders invisible to other objects • objects will overlap if not contained properly • Makes possible: • text wrap around images • multi-column designs

  10. Short Activity 1: test float • Go to Thimble • Create 4 paragraphs • Add an image above the first paragraph, use this url: http://cosmicmonkeycomics.com/AaronRenierThumb.jpg • Add style attribute to image tag • Apply style "float:left"; • Change style to "float:right";

  11. Short Activity 2: recreate Inverted L • Download and open source file • Discuss: what's happening with structure? • Size and position stable objects • container, header, footer • Experiment with float on nav and content • The importance of the overflow style in containing floated objects

  12. Build From Wireframes

  13. Long Activity: Style Your Structures • If you haven't already, begin applying widths to your container objects (assuming 960px) • Start using floats for positioning • More about multi-column layouts (if needed): • Two-column layouts • Three-column layouts • Think about containers and overflow

  14. For Next Time • Continue to develop CSS, position structure • CSS and Color • CSS Backgrounds - About and Tutorial • CSS Images (explore the entire site) • CSS font properties • CSS web-safe fonts (reminder)

More Related