CSS - Quiz #3 Lecture Code: 170375 http://decal.aw-industries.com Web Design: Basic to Advanced Techniques

Today’s Agenda Web Design: Basic to Advanced Techniques Quiz & Attendance Announcements Revisit Absolute / Relative URLs CSS Selector Motivation CSS / Photoshop Layouts – Part 1 Finish Quiz & Attendance Lab Web Design: Basic to Advanced Techniques

Announcements Web Design: Basic to Advanced Techniques Mini Project 2 due tonight by 11:59PM Battleship or Instant Messenger? Need help? Post in the Chatroom! Did you finish a project early? Help others in the Chatroom! Confused about course material? Email me and take advantage of lab after class. Web Design: Basic to Advanced Techniques

Absolute vs. Relative URLs Are you linking to a different domain? yes http://B.com/redSmiley.jpg Use absolute URL no A.com B.com Is the item you’re linking to in a sub-folder of or in the same folder as the html document? Absolute URL yes no folderN/redSmiley.jpg Use relative URL /folderB/redSmiley.jpg Use root relative URL A.com A.com /folderA /folderA /folderB … Relative URL /folderN Root Relative URL

CSS Selector Motivation Say we want to style all the links that appear inside paragraphs of class .myPara HTML <p class=“myPara”> <a class=“pLink”></a> </p> CSS .pLink { } HTML <p class=“myPara”> <a ></a> <a></a> </p> CSS .myPara a { } We want to be as efficient as possible with our coding to keep file sizes down.

Basic to Advanced Techniques Web Design: Basic to Advanced Techniques Spring 2010 Tuesdays 7-8pm 200 Sutardja-Dai Hall CSS/Photoshop Layouts – Part 1 Web Design: Basic to Advanced Techniques

Building Our Layout Toolbox HTML Element: border: 1px solid #000000; <div></div> background-color: #000000; CSS Attributes: background-image: url(image.gif); background-repeat display: block; background-position block height: 10px; inline Also width inline-block float: left; position: absolute; clear: right; absolute z-index: 100; relative Also top/bottom, left/right margin: 10px 10px; Also padding

div Element How exactly is CSS doing this? What’s being styled? Without CSS With CSS How exactly is CSS doing this? What’s being styled?

div Element …continued View Source Source Code for Menu <div > <div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div >

div Element …continued div’s are our general layout building blocks/containers Used to logically group HTML elements Separate regions of code into functional regions “these HTML elements make up the menu system” Like span’s they have no visual effect on our HTML documents by themselves span’s are inline elements div’s are block elements What happens when we wrap a set of elements in div tags?

div Element …continued <div id=“menu”> <h3>Menu</h3> <a></a> </div> <h3>Menu</h3> <a></a> <a>print story</a> <h1>News Story</h1> <p> </p> <div id=“newsStory”> <a>print story</a> <h1>News Story</h1> <p> <a></a> </p> </div>

Spot the div’s Whenever you see multiple HTML elements behaving in unison, suspect a div.

CSS’n div’s <div id=“everything”> <div id=“arrow”></div> <div id=“menu”> …many links </div> <div id=“content”> <div class=“message”></div> …more messages

CSS’n div’s …continued After we break up our layout into div’s we use CSS to position and style them.

CSS Property: display Example: Common Values: a { display: block; } Common Values: block inline none Hides object inline-block (not supported in IE 6, inconsistent IE 7) Allows block level elements to be placed next to each other For compatibility: use floats instead Valid HTML: Still don’t nest block elements in inline elements. HTML syntax independent of CSS. block inline inline

CSS Properties: height, width Can only be set on block level elements and a few inline elements such as <img /> Example: div { width: 100px; height: 100px; } div { width: 100%; height: 100%; } Common Values: Pixels: 20px Percentage of parent: 100% Not set/auto: width of contents height: 100px; width: 100px;

CSS Properties: height, width …continued width: 100px; width: 100%; width: 100px; height: 100%; height: 100px; height: 100px; height: 100%; height: 100px; height: auto; width: 100px; width: auto;

CSS Property: border Example: Common Values: div { border: 1px solid #000000; } div { border-top: 1px solid #000000; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; } Common Values: Border width: 1px Border style: solid Border color: #000000 div solid ridge dotted inset dashed outset double groove div { border: 1px solid #000000; }

CSS Properties: margin, padding Margin: space between this object and others Padding: space between the objects border and contents Example: div { margin: 5px 10px; } div { margin: 5px 10px 5px 10px; } Order: top, right, bottom, left div { margin-top: 5px; margin-bottom: 5px; margin-left: 10px; margin-right: 10px; } Padding has same syntax Common Values: Pixels: 10px Div_1 margin Div_2 padding

CSS Properties: position Example: div { position: absolute; } Common Values: absolute Removes object from flow of document. Object takes up no space. Relative to closest parent who has its position set. If no parent qualifies, relative to document boundaries. relative Relative to the objects natural location. fixed Relative to browser window’s boundaries. static Don’t typically use this because it is already the default behavior.

CSS Properties: top/bottom, left/right Used in conjunction with position Example: div { position: absolute; top: 0px; left: 0px; } Common Values: Pixels: 10px

position Document Flow code: <span>A</span><div>B</div><span>C</span> div { position: static; } div { position: relative; } div { position: absolute; } or div { position: static; } span: “A” span: “A” span: “A” span: “C” div: “B” div: “B” div: “B” span: “C” span: “C”

top & left Effects div { position: static; top: 10px; left: 10px; } position: relative; top: 10px; left: 10px; } div { position: absolute; top: 10px; left: 10px; } top: 0px; left: 0px; top: 0px; left: 0px; span: “A” span: “A” top: 0px; left: 0px; span: “A” 10px span: “C” div: “B” 10px div: “B” div: “B” 10px div: “B” div: “B” 10px span: “C” span: “C”

A A B B absolute References code: <div id=“A”><div id=“B”></div></div> top: 0px; left: 0px; top: 0px; left: 0px; A A B B div { position: absolute; top: 10px; left: 10px; } div { position: absolute; } #A { top: 10px; left: 10px; } #B { bottom: 10px; right: 10px; }

absolute vs. fixed Please see included absolute_vs_fixed.html file for demo.

CSS Properties: float Effect on itself: Effect on others: A floated object moves left or right (depending on the value of float) until it encounters another floated object or its container’s boundaries. Effect on others: Like water flows around a floating item, adjacent objects flow around an object that has its float property set Also a type of positioning but not set with position. Can only be set if the position is relative, static or not set. Should set width and height of object when using float, else behavior can be unpredictable. Example: div { float: left; width: 100px; height: 100px; } Common Values: left right none

CSS Properties: clear Used to specify behavior of object interacting with a floated object clear forces the object to appear after the floated object ( if it’s a left float, right float, or both types ) Example: p { clear: left; } Common Values: left right both none

float & clear Demo Please see included float.html file for demo.

CSS Property: z-index Object must have position set to relative, absolute, or fixed. If not set, later elements have higher z-index’s that earlier ones. Higher numbers on top of lower numbers. Example: div { position: absolute; z-index: 100; } Common Values: positive integers later default 100 99 default 99 100 earlier

CSS - Quiz #3 Lecture Code: 170375 Then… Lab http://decal.aw-industries.com Web Design: Basic to Advanced Techniques