Today’s objectives Layouts | floats Measurement units Type properties Hierarchy Page Box width | border-box Sprites Navigation | Table
Layouts
Types of Layouts Fixed Width - regardless of the browser window’s width, the page content’s width remains the same. Fluid. Design adjusts to fit the browser’s width— whatever it may be. (http://css-tricks.com/) Elastic. A fixed width with type size flexibility. Define page’s width using em values. An em changes size when the browser’s font size changes, page width is based on the browser’s base font size. (http://www.msn.com/)
<div id=“wrapper”> <header id=“banner”> </header> <nav id=“main-nav”> </nav> <div id=”main-content”> </div> <footer id=“site-info”> </footer>
Normal Flow <html> <body> Div id=“wrapper” HEADER id=“banner” NAV id=“main-nav” DIV id=“main-content” FOOTER id=“site-info” <body> <html>
DIV id = wrapper HEADER id = banner NAV id = main-nav DIV id = main-content FLOAT LEFT FOOTER id = site-info
DIV id = wrapper HEADER id = banner NAV id = main-nav DIV id = main-content <style> #wrapper,#banner,#main-nav, #main-content, #site-info {padding:10px;} #wrapper {border:1px solid #0C0;background-color:#F90;} #banner {border:1px solid #0C0; background-color:#099;} #main-nav { border:1px solid #099; background-color:#069; width:200px; float:left; } #main-content { border:1px solid #03F; background-color:#09C; margin-left:222px; #site-info {border:1px solid #933; background-color:#CC9;} </style> FLOAT LEFT FOOTER id = site-info
L Normal Flow FLOAT LEFT 1. BANNER 2. NAVIGATION 3. CONTENT 1.BANNER 2
R Normal Flow FLOAT RIGHT 1. BANNER 1.BANNER 2. NAVIGATION 3.CONTENT 2
L L R Normal Flow FLOAT Left & RIGHT 1. BANNER 1.BANNER 2. NAVIGATION 3.CONTENT 4 3. CONTENT L L R 4. EVENTS
L L R R Normal Flow FLOAT Left & RIGHT 1. BANNER 1.BANNER 2. COL WRAPPER 2. COL WRAPPER L 2 Col wrapper 2 3. CONTENT 4 3.CONTENT 5 L R R 4. NAVIGATION 5. EVENTS
Widths and heights
Height and width properties Assign a height and width to the content area of a style. width: 20em; width: 30%; height: 300px;
Height and width properties min-height - min-height: 4em; min-width - min-width: 800px; max-height - max-height: 50px; max-width - max-width: 940px; Often use the max-width and min-width properties in conjunction when creating fluid layouts.
Height and width properties The general rule of thumb is NOT to sets heights on a pages. BANNER Height: 150px; Nav CONTENT Ads Height: 550px;
Height and width properties Width given by the web browser is the total of the widths of the margins, borders, padding, and width properties. If you set the following properties: width: 800px; padding: 15px; border-width: 5px; margin: 10px Total width = 830px
Content #wrapper { width: 800px; padding: 15px; border-width: 5px; } Padding and Border add to the overall width of an element <div id=“wrapper”> PADDING Content #wrapper { width: 800px; padding: 15px; border-width: 5px; } PADDING PADDING Total width = 820px </div> PADDING
Height and width properties Source: CSS: The missing manual. (2009). David Sawyer McFarland, Oreilly, p.166.
Step 1 Step 2 #wrapper {width:300px;} p {width:100px; float: left; padding:0;} <div id="wrapper"> <p>1</p> <p>2</p> <p>3</p> </div> #wrapper {width:300px;} p {width:100px; float: left; padding:10px;} <div id="wrapper"> <p>1</p> <p>2</p> <p>3</p> </div> <div id="wrapper"> <div id="wrapper"> Padding added 1 2 1 2 3 3 </div> </div>
Step 1 Step 2 #wrapper {width:300px;} p {width:100px; float: left; padding:0;} <div id="wrapper"> <p>1</p> <p>2</p> <p>3</p> </div> #wrapper {width:300px;} p {width:100px; float: left; padding:10px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } <div id="wrapper"> <p>1</p> <p>2</p> <p>3</p> </div> Padding added to inside of box without increasing overall size of box <div id="wrapper"> <div id="wrapper"> 1 2 3 1 2 3 </div> </div>
Measurement units
Pixels Using Pixels Independent from any browser settings. Fixed size Specify 55-pixel font size for an <h2> element, the web browser displays text that’s 55 pixels tall. p {font-size: 36px;}
Using Keywords, Percentages, and Ems Keywords, percentages, and ems add to or subtract from base text size. Most browsers text displayed 16 pixels tall - base text size. When resizing text, browser uses base text size (e.g., 16 pixels) and adjusts it according to keyword, em, or percentage value.
Keyword Seven keywords assign a size that’s relative to the base text size: xx-small, x-small, small, medium, large, x-large, and xx-large. p { font-size: large;} Medium is the same as browser’s base font size. Each of options decreases or increases the size by a different factor.
Keyword xx-small is equivalent of 9 pixels (assuming base font size is 16 pixels) x-small is 10 pixels small is 13 pixels medium is 16 pixels large is 18 pixels x-large is 24 pixels xx-large is 32 pixels
Percentages Adjust text in relationship to base text size. Give finer control than keywords. Base text size for a browser is equivalent to 100%. Font-size to 100% = 16 pixels (usually).
I think, all type in P elements will be 100% of default browser type size of 16px – so any type in a P element will sized at 16px. div {font-size:200%} p {font-size: 100%;} <div> Content <p>Hello World</p> </div> I think, all type in P elements will be 50% of default browser type size of 16px – so any type in a P element will be sized at 8px. div {font-size:200%} p {font-size: 50%;} <div> Content <p>Hello World</p> </div>
Content Content Hello World How it looks in browser div {font-size:200%} p {font-size: 100%;} Content Hello World <div> Content <p>Hello World</p> </div> How it looks in browser div {font-size:200%} p {font-size: 50%;} Content Hello World <div> Content <p>Hello World</p> </div>
Context is important here! How it looks in browser div {font-size:200%} p {font-size: 100%;} Content Hello World <div> Content <p>Hello World</p> </div> Text in P element is same size as text in DIV????? 200% of default font size of 16px = 32px 100% of 32px = 32px How it looks in browser div {font-size:200%} p {font-size: 50%;} Content Hello World <div> Content <p>Hello World</p> </div> Text in P element is 50% the size of text in DIV. 50% of 200% = 100% or 50% of 32px = 16px Context is important here!
Ems EM and percent work the same. 1em equals a value of 100%. A percentage value - same as em multiplied by 100. .8em is 80 percent, .55em is 55 percent, 2em is 200%, and so on. font-size: 80% is same as font-size: .8em Em units are preferred for type because em is topographical unit of measure.
CSS Typography font-family font-style font-variant font-weight Five properties control font characteristics font-family font-style font-variant font-weight font-size
font-family Value is a list of font names in decreasing order of preference – the font stack. p { font-family: "The Sans", verdana, helvetica, sans-serif } Names separated by a space should be in “ “
font-style & font-variant font-style may be normal, italic or oblique (i.e. slanted) font-variant may be normal or small-caps
font-weight Values normal and bold have expected effect Many font families have more than two weights, with no standard names font-weight may be 100, 200,…, 900
font-size Sizes relative to browser default may be chosen from xx-small, x-small, small, medium, large, x-large, xx-large Sizes may be a percentage of inherited value, or specified in em units of inherited font
Leading line-height property specifies leading Use percentage (150%), ratio (1.5) or ems (1.5em) to specify leading relative to font size
Alignment text-align property can take values left, right, center or justify body { text-align: left } p.display { text-align: center }