CSS Laying the Foundation by ntz11397


									CSS: Laying the Foundation
Josh Nichols
Web Communications
University of Missouri-Columbia

                                  » XHTML and structured mark-up
                                  » Accessibility tips
                                  » The box model
                                  » Floating
                                  » Absolute and relative positioning
                                  » Bugs
                                  » CSS resources
structured mark-up

               » Meaning over presentation
               » Use XHTML tags appropriately
               » Avoid “divitis” and “span-maina”
               » Is your site useable unstyled?
               » Validate!!
Accessibility tips

            » Use structured mark-up
            » Alt attributes on images
            » Text styled with relative measurements
            » Make links clearly distinguishable
            » Anchors for jumping to navigation and content
            » Indicate focus / Tab control
            » Support does not equal same
            » Adaptive Computing Technology Center
The box model

                This box has a set width
                of 70 pixels, but it takes
                up 100 pixels on the
                screen when rendered.

                Padding, margins and
                border dimensions are
                added to the dimensions
                of the box.
IE 5/6 quirks mode

                     IE 5/6 uses a different
                     box model in quirks
                     mode. Padding is not
                     added to the dimensions
                     of the box.

                     To keep IE from going into
                     quirks mode, be sure to
                     state a DOCTYPE at the
                     beginning of your XHTML.
Margin collapsing

                    When two or more
                    vertical margins meet,
                    they will combine to form
                    one margin measuring
                    the height of the larger
Block vs. Inline

Block level elements are rendered on their own line and end with a
line break. Margins, padding and borders are rendered vertically and
Examples: <div>, <h1>, <h2>, <form>, <p>

Inline elements are rendered on the same line as other inline elements.
Margins, padding and borders are only rendered horizontally and the
height of the line is the height of the tallest element in the line.
Examples: <em>, <strong>, <span>, <q>

Block level elements can contain other block level or inline elements.
Inline elements cannot contain block level elements.

           Floating is not the same
           as align.

           It takes the element out
           of the normal flow of the

           Floating also causes
           the element to take up
           no vertical space in its
           containing element and
           line boxes will wrap
           around it.

           Floated elements will drop
           down when they run out
           of hoizontal space.

           If an element is in the way,
           the ones that drop down
           will get “caught” on it.
Clearing floats

                 Use the “clear” property
                 to stop elements from
                 flowing around floated

                 Usually, this is applied to
                 a footer.

                 You can also use an
                 empty element to
                 clear rows of irregular
Clearing floats

                 Floats take up no space in
                 the element that contains

                 To make the containing
                 element expand around
                 the floats, you can use
                 an empty element to
                 clear them.
Relative positioning

                       Relative positioning
                       takes an element from its
                       normal place in the page
                       flow and offsets it.
Absolute positioning

                   Absolute positioning
                   takes an element out of
                   the normal page flow and
                   offsets it.

                   The flow of other
                   elements on the page
                   are not affected by the
                   absolute positioned

       » Most CSS problems are not browser
         bugs. Most come from a designer’s
         misunderstanding of how CSS works.

       » First assume you made a mistake
       » Validate!!
       » Use hacks sparingly
       » Simplify your code
Internet Explorer and “layout”

           » Internet Explorer on Windows has a proprietary
             display characteristic, called “hasLayout,” that
             changes the rendering of and the relationships
             between elements. Some CSS properties trigger
             this quality and cause the element to display

           » A lot of CSS bugs are related to “hasLayout.”
           » Most “hasLayout” problems can often be solved
             by applying a width or height to the element.

           » More info on “hasLayout”:
Common bugs

          » Double-margin float bug (IE 5/6)
          » Three-pixel text jog bug (IE 5/6)
          » Duplicate character bug (IE 6)
          » Peek-a-boo bug (IE 6)
          » Relative positioning bug (IE 6)
              Find help at Position is Everything
CSS resources

Books                                  Web
HTML Mastery, Paul Haine               A List Apart, www.alistapart.com
Web Standards Solutions,               Vitamin, www.thinkvitamin.com
Dan Cederholm
                                       Yahoo! UI Library,
CSS Mastery, Andy Budd                 developer.yahoo.com/yui/
Bulletproof Web Design,                Firefox add-ons
Dan Cederholm
                                       Web Developer’s Toolbar,
Stylin’ with CSS, Charles Wyke-Smith   chrispederick.com/work
Transcending CSS:                      /web-developer
The Fine Art of Web Design,            Firebug, www.getfirebug.com
Andy Clarke
Created June 2007 for the University of Missouri-Columbia’s Web Developers’ Group
Built with the Adobe Creative Suite
Typeset with Helvetica Neue
Background images from www.sxc.hu

To top