Static layouts with css

1,822 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,822
On SlideShare
0
From Embeds
0
Number of Embeds
112
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Static layouts with css

  1. 1. Static layouts with CSSHow to layout webpages using the display, float, clear, and properties
  2. 2. CSS layout basics, in 10 slides
  3. 3. CSS layout basics, in 10 slides
  4. 4. display: inline• Used mostly for text, which “fills up” its container• Inline element types include span, a, strong, em, and (confusingly) img• New elements go on the same line, immediately after the previous one
  5. 5. Inline span elements<span class="first">Lorem ipsum dolor ...</span><span class="second">Ut enim ad minim veniam, ...</span>
  6. 6. display: block• Structural elements that allow you to set width/height, margins, padding and borders• Block element types include div, p, form, h1, h2, h3, etc.• New elements stack vertically
  7. 7. Block div elements<div class="first">Lorem ipsum dolor ...</div><div class="second">Ut enim ad minim veniam, ...</div>
  8. 8. CSS Box Model Block only • width, height • padding • Inline + block border • marginDiagram by Rich Hauck
  9. 9. float: left, float: right• Floating causes block elements to stack horizontally• Elements keep stacking until the container width is filled• Additional elements are added below, much like inline content does
  10. 10. Floated divs<div class="float">Lorem ipsum dolor sit amet</div><div class="float">consectetur adipisicing elit,</div><div class="float">sed do eiusmod tempor incididunt</div><div class="float">ut labore et dolore magna aliqua.</div><div class="last float">Ut enim ad minim veniam</div>
  11. 11. clear: both• Clearing your floats is necessary to resume vertical stacking• It also has the effect of giving the parent a height & width• You can assign “clear: left” and “clear: right,” but sticking to “clear: both” is simpler
  12. 12. Clearing the floats<div class="float">Lorem ipsum dolor sit amet</div><div class="float">consectetur adipisicing elit,</div><div class="float">sed do eiusmod tempor incididunt</div><div class="float">ut labore et dolore magna aliqua.</div><div class="last float">Ut enim ad minim veniam</div><br class="clear" />
  13. 13. Floating left and right Note that b comes “before” a with float: right<div class="left">&larr; left a</div><div class="left">&larr; left b</div><div class="right">right a &rarr;</div><div class="right">right b &rarr;</div><br class="clear" />

×