CSS for Page Layout 2015 Robert K. Moniot 1
OBJECTIVES In this unit, you will learn: How to use style sheets for layout Controlling text flow, margins, borders, and padding Controlling visibility of elements dynamically Aligning and positioning elements, and text within elements Tips for debugging style sheets A technique for working around browser incompatibility 2015 Robert K. Moniot 2
CSS Box Model All block-level elements are considered to be inside a box surrounded by padding, a border, and a margin. Typically the border is black, and margin and padding provide space around it. Margin Border Padding Content 2015 Robert K. Moniot 3
Borders, Margins, Padding Widths can be set all around (e.g. border-width, margin) or on each side individually (e.g. bordertop-width, margin-top). Different border styles can be selected with borderstyle. Default is none, i.e. border is invisible. 2015 Robert K. Moniot 4
Floats Block-level objects can be floated, so that they are positioned all the way to left or right on a page. Usually used for images, but also useful for text whose width has been made less than full page. Position specified by float property, with values left or right. Adjacent floats are rendered next to each other if space allows. 2015 Robert K. Moniot 5
Text Flow Around Float Text following a float flows around it unless the clear attribute is used: clear: left no floats on left side of text clear: right no floats on right side of text clear: both no floats on either side clear: none default, floats OK on both sides Example 2015 Robert K. Moniot 6
Overflow Floating elements have no effect on size of containing element. A large image with a small amount of text can overflow its box. Example Correct this using overflow: hidden on containing element. Corrected Example 2015 Robert K. Moniot 7
Centering Center a block-level element by Giving it a width less than 100% Setting equal margins left and right (use auto) Alignment of block content is not affected use text-align to control its alignment. Example 2015 Robert K. Moniot 8
New HTML5 elements New in HTML5: header, section, footer, aside, nav, article, figure, figcaption, hgroup No default styling except display:block Site can set style rules so pages using these follow uniform look Also helpful for Semantic Web Example: without style Example: with style 2015 Robert K. Moniot 9
Positioning Elements can be positioned out of the normal flow by using the position attribute, with values: relative moved relative to where it would otherwise go absolute moved to given location on page, scrolls with page fixed located at fixed position in window, does not scroll with page Example 2015 Robert K. Moniot 10
Controlling display Rendering of elements can be controlled using display property. Values: none : element will not be rendered inline : element will be rendered in-line with surrounding content, like a <span> block : element will be rendered as a block, i.e. with line break before and after, like a <div> Use to change block elements to inline or vice versa Can change dynamically, e.g. using hover pseudoclass Example 2015 Robert K. Moniot 11
Invisibility There is also a visibility:hidden property that makes an element invisible, but it still takes up space in the rendered document. Use this if you will be changing visibility of object and don t want location of elements around it to change 2015 Robert K. Moniot 12
Debugging Styles Firebug for Firefox is a powerful tool for debugging style sheets. http://getfirebug.com Or use Firefox Tools Developer Style Editor To see what style rules apply to element: Click on element in page source displayed below rendered page. Or right-click on element in rendered page and select Inspect Element. Example 2015 Robert K. Moniot 13
Compatibility Issues Browsers do not all comply with W3C standards. Internet Explorer has been a particular offender, but is better now. Example shows workaround to include IE-only code Place IE-specific rules in special stylesheet Proprietary IE conditional comment ignored by other browsers Nowadays need to turn on Compatibility View to get bad old IE behavior Example 2015 Robert K. Moniot 14
Compatibility, cont'd JavaScript & PHP provide more general facilities to detect browser make and version and adapt style rules appropriately. Bugs in code can make browsers behave differently always validate HTML and CSS before blaming browser. Compatibility with major browsers listed in documentation at w3schools.com. Install different browsers and test. 2015 Robert K. Moniot 15