1. CSS - Quiz #3 Lecture Code: 170375
Web Design: Basic to Advanced Techniques

2. 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

3. 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? me and take advantage of lab after class.
Web Design: Basic to Advanced Techniques

4. Absolute vs. Relative URLs
Are you linking to a different domain?
yes
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

5. 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.

6. 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

7. 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

8. 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?

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

10. 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?

11. 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>

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

13. 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

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

15. 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

16. 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;

17. 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;

18. 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; }

19. 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

20. 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.

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

22. 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”

23. 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”

24. 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; }

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

26. 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

27. 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

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

29. 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

30. CSS - Quiz #3 Lecture Code: 170375 Then… Lab
Web Design: Basic to Advanced Techniques