Lecture 3 explains positioning and layout in css, media query and at-rules

1. Introduction to Web
Technologies
Lecture 3
Julie Iskander,
MSc. Communication and Electronics

2. Visual
Formatting and
Layout

3. CSS layout and formatting
 After parsing the html into a document tree (DOM)
 Each node is rendered as one or more rectangular boxes
 Types of Boxes:
 Block Boxes :
 for block elements ex. div, p
 Elements with display : block| list-item| table;
 Inline Boxes: for inline elements
 For inline elements ex.span, b, em
 Elements with display : inline | inline-table | inline-block;

4. BOX Model
 Applies to block-level elements

5. BOX Model
 Applies to block-level elements
 Overall calculated dimension of element =
 Height/width + margin + padding + border
.box
{
width:300px;
height:200px;
padding:10px;
margin:15px;
border: 1px solid #000;
}

6. DEMO
How to center a block?

9. Positioning
 Positioning Schemes:
 Normal Flow (includes relative positioning)
 Floating
 Absolute Position (includes fixed positioning)
 http://www.barelyfitz.com/screencast/html-training/
css/positioning/

10. position : static
 Default
 Elements rendered in order of normal flow

11. position : relative
 At start works just like static positioning
 To shift box, use :
 top: px, %, auto,inherit;
 bottom: px, %, auto,inherit;
 left: px, %, auto,inherit;
 right: px, %, auto,inherit;
 W.R.T the flow, the element in its original position. When
shifted a hole is left in it’s place

12. position : absolute
 Element is completely removed from document flow.
 No effect on next elements,
 Can overlap other contents
 Positioned w.r.t. the next parent element with relative (or
absolute) positioning.
 If no such parent,
 it will be placed relatively to the page itself.
 To determine position, use :
 top, bottom, left and right (must take values, or they take the original values of
their place in the document flow)
 width and height

13. position : fixed
 Similar to absolute positioning.
 Positioned relative to viewport
 Won’t move with scrolling, always fixed.
 Not supported by IE 6 or earlier.
 To determine position, use :
 top, bottom, left and right
 width and height

14. Floating
 float: none | left | right
 Floated elements is shifted to one side and all the others
will flow along the opposite side
 Taken out of the normal flow
 For a containing block to accommodate a floating child,
must be floating or overflow property not visible
 Can’t float up or down.

15. Clearing
 clear : both | left | right;
 To force an element to start below any floated
element
 Mainly used to make footer below all floated column

16. Note
 If position : absolute or floated and width:auto
 Generated box shrink to dimension of content
 Recommended to set width
 if a block contains only floated and absolutely
positioned elements  then it has no content, zero
dimension
 If width:100% don’t use margins, paddings or
borders to avoid overflowing or pushing elements
wider than available.
 Recommended use width : auto and apply margin,
padding and border only

17. DEMO
How to create a menu?

20. z-index: number
 Is the positioning along the z-index
 Larger z-index elements is rendered in front of lower
z-index elements
 Can take –ve values

21. At-rules
 Are instructions to the CSS parser.
 Example:
 @import:
 For importing a css into another.
 @media:
 Specifies one or more rules to be applied on a certain
media type

22. Before we continue, what
is media types ?!!
 Examples of Media Types:
 All: Suitable for all devices.
 Braille: Intended for braille tactile feedback devices.
 Embossed: Intended for paged braille printers.
 Handheld: Intended for handheld devices (typically small
screen, limited bandwidth).
 Print: Intended for paged material and for documents viewed
on screen in print preview mode. Please consult the section on
paged media for information about formatting issues that are
specific to paged media.
 Screen: Intended primarily for color computer screens.

23. @import
 Fully supported by FF, Safari, Opera, Chrome, IE 9+
 Format :
@import {URI | string} [media type,…….];
 To import one css into another.
 Example:
@import url(/css/screen.css) screen
@import “mobile.css” handheld
 Must precede all rule sets, if it follows one/more rule
sets it is ignored.

24. @media
 Fully supported by Opera 9.2+, Safary 3+, chrome
2+
 Buggy support by IE 6+, FF1+
 Format:
@media media type,……{
ruleset
}
 To specify rules to be applied to specific media only

25. media query
 CSS 3 extension to media types, limited support
 A logical expression, evaluated to true/false, to test whether
device features to determine whether to apply the css or no.
 Used in <link> tag, @import, @media at-rules.
 CSS is only applied if evaluated to true.
 Examples:
<link rel=“stylesheet” type=“text/css” href=“/style.css” media=“all and (color)”
 all output media that are capable of color.
@media handheld and (min-width:20em){…….}
 Handheld devices with width at least 20em
 http://reference.sitepoint.com/css/mediaqueries

26. Example

27. Example

28. References
 http://reference.sitepoint.com/css
 http://www.w3.org/TR/CSS21/
 http://www.w3.org/TR/CSS2/
 http://www.w3.org/TR/2011/NOTE-css-2010-
20110512/
 https://developer.mozilla.org/en-US/docs/CSS
 http://www.daaq.net/old/css/index.php?page=using+
css