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.
Static layouts with CSSHow to layout webpages using the display, float,             clear, and properties
CSS layout basics, in 10 slides
CSS layout basics, in 10 slides
display: inline• Used mostly for text, which “fills up”  its container• Inline element types include span, a,  strong, em,...
Inline span elements<span class="first">Lorem ipsum dolor ...</span><span class="second">Ut enim ad minim veniam, ...</span>
display: block• Structural elements that allow you to  set width/height, margins, padding  and borders• Block element type...
Block div elements<div class="first">Lorem ipsum dolor ...</div><div class="second">Ut enim ad minim veniam, ...</div>
CSS Box Model                        Block only                                         •   width, height                 ...
float: left, float: right• Floating causes block elements to  stack horizontally• Elements keep stacking until the  contai...
Floated divs<div   class="float">Lorem ipsum dolor sit amet</div><div   class="float">consectetur adipisicing elit,</div><...
clear: both• Clearing your floats is necessary to  resume vertical stacking• It also has the effect of giving the  parent ...
Clearing the floats<div class="float">Lorem ipsum dolor sit amet</div><div class="float">consectetur adipisicing elit,</di...
Floating left and right          Note that b comes “before” a with float: right<div class="left">&larr;     left a</div><d...
Nächste SlideShare
Wird geladen in …5
×

Static layouts with css

1.924 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie, Design
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

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

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" />

×