Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
CSS Floats & Positioning<br />Colin Gourlay & Kevin Vanderbeken<br />
Today:<br />Floating Elements<br />Clearing Floated Elements<br />
introduction<br />
different boxes<br />
block elements<br /><div>, <p>, etc.<br />I’m text inside a block element<br />So am I.<br />I’m in a block element too!<b...
inline elements<br /><span>, <a>, etc.<br />I’m text inside an inline element<br />So am I.<br />I’m in<br />an inline ele...
block and inline elements support the box model in different ways<br />
<ul><li>The Width property wont do anything on inlines since they are defined by their content and run inline with other c...
Margins are only possible on the left and right, not top and bottom.
...and other things left to your experimentation :-) </li></li></ul><li>In the CSS layout model, text elements are laid ou...
When the window or containing element is resized, block elements expand or contract to the new width.<br />block element<b...
When the window or containing element is resized, inline elements reflow to fit. <br />inline element<br />inline<br />inl...
elements don’t overlap or bunch up, they make room for one another<br />
floated elements<br />a.k.a<br />‘floats’<br />
floats can be used to create:<br />multi-column layouts<br />navigation toolbars<br />table-like alignment<br />(without t...
float: left;<br />float: right;<br />float: none;<br />
things you should know about floated elements<br />
a floated element is like an island in a stream<br />I’m a block element that is beside an image that has been floated to ...
floats stay in the content area of the containing element<br />this isn’t possible<br />
margins are maintained<br />img{ float: right; margin-left: 5px; margin-right: 5px; }<br />I’m a block element that is bes...
always provide a width for floated elements<br />p.floatRight{ float: right; margin: 5px; width: 120px; }<br />I’m a block...
floated inline elements behave as block elements<br />
elements do not float higher than their reference in the source<br />
you can float multiple elements<br />Because I am beside two floated<br />elements (one left, one right), I wrap around bo...
there is one noticeable side effect of using floats...<br />
what we actually want to see is this...<br />
to achieve this effect, we need to make use of clearing<br />
clearing floated elements<br />
clear: left;<br />clear: right;<br />clear: both;<br />
clear: left;<br />The left value starts the element below any elements that have been floated to the left<br />
clear: right;<br />Similarly, the right value makes the element clear all floats on the right edge of the containing block...
clear: both;<br /> If there are multiple floated elements, and you want to be sure an element starts below all of them, us...
My position is governed by the floated elements to the left. I have not been cleared in any way.<br />I have been cleared,...
next week...<br />
Nächste SlideShare
Wird geladen in …5
×

1 07-2-css floats-and_positioning

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

1 07-2-css floats-and_positioning

  1. 1. CSS Floats & Positioning<br />Colin Gourlay & Kevin Vanderbeken<br />
  2. 2. Today:<br />Floating Elements<br />Clearing Floated Elements<br />
  3. 3. introduction<br />
  4. 4. different boxes<br />
  5. 5. block elements<br /><div>, <p>, etc.<br />I’m text inside a block element<br />So am I.<br />I’m in a block element too!<br />
  6. 6. inline elements<br /><span>, <a>, etc.<br />I’m text inside an inline element<br />So am I.<br />I’m in<br />an inline element too!<br />
  7. 7. block and inline elements support the box model in different ways<br />
  8. 8. <ul><li>The Width property wont do anything on inlines since they are defined by their content and run inline with other content.
  9. 9. Margins are only possible on the left and right, not top and bottom.
  10. 10. ...and other things left to your experimentation :-) </li></li></ul><li>In the CSS layout model, text elements are laid out from top to bottom in the order in which they appear in the source, and from left to right.<br />
  11. 11. When the window or containing element is resized, block elements expand or contract to the new width.<br />block element<br />block element<br />block element<br />block element<br />block element<br />block element<br />
  12. 12. When the window or containing element is resized, inline elements reflow to fit. <br />inline element<br />inline<br />inline element<br />element<br />inline element<br />inline element<br />inline element<br />
  13. 13. elements don’t overlap or bunch up, they make room for one another<br />
  14. 14. floated elements<br />a.k.a<br />‘floats’<br />
  15. 15. floats can be used to create:<br />multi-column layouts<br />navigation toolbars<br />table-like alignment<br />(without tables)<br />and much, much moreTM<br />
  16. 16. float: left;<br />float: right;<br />float: none;<br />
  17. 17. things you should know about floated elements<br />
  18. 18. a floated element is like an island in a stream<br />I’m a block element that is beside an image that has been floated to the<br />right. My contents will wrap around the image.<br />
  19. 19. floats stay in the content area of the containing element<br />this isn’t possible<br />
  20. 20. margins are maintained<br />img{ float: right; margin-left: 5px; margin-right: 5px; }<br />I’m a block element that is beside an image that has been floated to the<br />right. My contents will wrap around the image.<br />
  21. 21. always provide a width for floated elements<br />p.floatRight{ float: right; margin: 5px; width: 120px; }<br />I’m a block element that is beside an paragraph that has been floated to the right. My contents <br />I’m a paragraph element, floated to the right, with a defined width<br />will wrap around the paragraph.<br />
  22. 22. floated inline elements behave as block elements<br />
  23. 23. elements do not float higher than their reference in the source<br />
  24. 24. you can float multiple elements<br />Because I am beside two floated<br />elements (one left, one right), I wrap around both of them. <br />
  25. 25. there is one noticeable side effect of using floats...<br />
  26. 26.
  27. 27. what we actually want to see is this...<br />
  28. 28.
  29. 29. to achieve this effect, we need to make use of clearing<br />
  30. 30. clearing floated elements<br />
  31. 31. clear: left;<br />clear: right;<br />clear: both;<br />
  32. 32. clear: left;<br />The left value starts the element below any elements that have been floated to the left<br />
  33. 33. clear: right;<br />Similarly, the right value makes the element clear all floats on the right edge of the containing block<br />
  34. 34. clear: both;<br /> If there are multiple floated elements, and you want to be sure an element starts below all of them, use the both value to clear floats on both sides<br />
  35. 35. My position is governed by the floated elements to the left. I have not been cleared in any way.<br />I have been cleared, so I start below the floated elements.<br />
  36. 36. next week...<br />
  37. 37. CSS Positioning<br />&<br />CSS Grid Systems<br />

×