Week 3

Assignment 3: Image Gallery

Create a page with, or add to your portal, some floating elements that form a list of thumbnails. These should be div tags that float left. They should form at least 2 rows. We will do an example of this in class on Thursday.
Add a link to this assignment on your project portal. This page must be published and complete before class starts next Tuesday.

Reading

Book: CSS Mastery
Chapter: 2 – Visual Formatting Model Recap
Section: All
Pages: 28-42

Lecture Notes

The Box Model

  • Content (the element’s innerHTML)
  • Padding (between content & border)
  • Border (outer edge)
  • Margin (distance from border to neighboring elements)

box_model

IE6 Quirks Mode Model

IE6, in quirks mode, will render the box model in a non-standard way. Refer to your book, page 30, for more notes on this topic.

Margin Collapsing

To prevent a 10px margin around thumbnails becoming a 20px margin between rows, margins collapse upward. They will only do this vertically and only if they are touching. Let’s view some diagrams in the book and play with this in class.

The Visual Formatting Model

Types of Elements

  • block-level elements
    • p,h1,div,etc…
  • inline elements
    • span,a,em,strong,etc…

Changing Display Type

Using the CSS ‘display’ property, you can change the way a box displays:

  • inline
  • block
  • none

Block level elements stack vertically, while inline elements float to the left.

Anonymous Blocks

The following XHTML compliant snippet will render an anonymous box around ‘some text’:

<div>
some text
<p>Some more text</p>
</div>

Relative Positioning

.relativeElement {
   position:relative;
   top:10px;
   left:10px;
}

Relative positioning will set the element to use it’s original rendering location as a starting point to handle any offsets you may add with ‘left’/’top’/’right’/’bottom’ parameters. The code above will take the original starting point of the element and push it 10px down and 10px to the right. This may cause it to overlap other elements.

Absolute Positioning

.absoluteElementName {
   position:absolute;
   top:10px;
   left:10px;
}

Absolute positioning will place the element relative to its nearest positioned ancestor or, if it doesn’t have one, to the initial containing block (either the canvas or HTML element, depending on the browser). When an element is set to have absolute positioning, it is removed from the document flow. This means its position, size, etc will no longer affect other elements on the page.

Fixed Positioning

Fixed Positioning is a type of absolute positioning. The element is removed from normal document flow but is now static. No matter how the window scrolls, the element will be locked in relation to the viewport.

.sideNavigation{
   position:fixed;
   top:10px;
   left:10px;
}

Floating

.leftFloat {
   float:left;
}
.rightFloat {
   float:right;
}

A float pulls the element out of the normal document flow and makes it wrap left or right.
See pages 37-38 in your book for detailed examples of floating.

Clearing the Float

There are cases where you will need to clear a float to prevent elements below a floating element from floating as well. You can clear only one type of float or both:

.clearLeft{
   clear:left;
}
.clearRight{
   clear:right;
}
.clear{
   clear:both;
}

z-index

When elements overlap, you may want to adjust which elements are on top of other elements. This is handled using the z-index CSS property:

.elementClass {
   z-index: 1;
}
.higherElementClass{
   z-index: 2;
}
.aboveEverything{
   z-index: 99999;
}

In Class Examples

Margin Collapsing and Position Demonstrations:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Valid XHTML Document!</title>
		<style type="text/css"><!--
		/* Margin Collapsing Experiment */
		body {
			margin:0;
			padding:0;
			color:#fff;
			font-weight:bold;
			text-align:center;
		}
		.gallery {
		background-color:#00CCFF;
		height:800px;
		}
		/*  gallery elements or .thumb if
			we had a class on them :) */
		.gallery > div, .box{
			position:relative;
			top:10px;
			left:10px;
			background-color:#036;
			margin:20px;
			width:100px;
			height:100px;
		}
		.gallery > div.absoluteEl {
			position:absolute;
			top:10px;
			left:200px;
		}
		.gallery > div.fixed {
			position:fixed;
			background-color:#900;
			z-index:2;
		}
		.thumb {
			float:left;
		}
		.clearfix, 
		.gallery > div.clearfix {
			clear:both;
			width:0;
			height:0;
		}
		--></style>
    </head>
    <body>
    <div class="gallery">
        <div>empty</div>
        <div class="absoluteEl">absolute</div>
        <div class="fixed">fixed</div>
        <div class="thumb">thumb</div>
        <div class="thumb">thumb</div>
        <div class="thumb">thumb</div>
        <div class="thumb">thumb</div>
        <div class="clearfix"></div>
    </div>
    <div class="box">box</div>
    </body>
</html>

Making a Gallery

Let’s do this in class together on Thursday. We will be implementing the Lytebox JavaScript library with this gallery. Here is the template:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
    	<link type="image/x-icon" rel="shortcut icon" href="favicon.ico" />
		<title>Assignment #3: Gallery</title>
		<style type="text/css"><!--
		img {
			border:none;
		}
		.clear {
			clear:both;
		}
		.gallery div {
			float:left;
			margin:10px;
			background-color:#69c;
			border:10px solid #036;
			width:150px;
			height:180px;
			line-height:180px;
		}
		.gallery a {
			display:block;
			text-align:center;
		}
		.gallery img {
			width:100px;
			vertical-align:middle;
		}
 
        --></style>
        <script type="text/javascript" src="lib/lytebox/lytebox.js"></script>
		<link rel="stylesheet" href="lib/lytebox/lytebox.css" type="text/css" media="screen" />
    </head>
    <body>
    <div class="gallery">
        <div>
            <a href="http://ipirates.net/img/Adam_Hand_1.jpg" rel="lyteshow[adam]">
            	<img src="http://ipirates.net/img/Adam_Hand_1.jpg" alt="Hand 1" />
            </a>
        </div>
        <div>
            <a href="http://ipirates.net/img/Adam_Hand_2.jpg" rel="lyteshow[adam]">
            	<img src="http://ipirates.net/img/Adam_Hand_2.jpg" alt="Hand 2" />
            </a>
        </div>
        <div>
            <a href="http://ipirates.net/img/Adam_Hand_3.jpg" rel="lyteshow[adam]">
            	<img src="http://ipirates.net/img/Adam_Hand_3.jpg" alt="Hand 3" />
            </a>
        </div>
        <div>
            <a href="http://ipirates.net/img/Adam_Hand_4.jpg" rel="lyteshow[adam]">
            	<img src="http://ipirates.net/img/Adam_Hand_4.jpg" alt="Hand 4" />
            </a>
        </div>
        <div>
            <a href="http://ipirates.net/img/Adam_Hand_5.jpg" rel="lyteshow[adam]">
            	<img src="http://ipirates.net/img/Adam_Hand_5.jpg" alt="Hand 5" />
            </a>
        </div>
        <div>
            <a href="http://ipirates.net/img/Adam_Hand_6.jpg" rel="lyteshow[adam]">
            	<img src="http://ipirates.net/img/Adam_Hand_6.jpg" alt="Hand 6" />
            </a>
        </div>
        <div class="clear">
            <a href="http://ipirates.net/img/Adam_Hand_7.jpg" rel="lyteshow[adam]">
            	<img src="http://ipirates.net/img/Adam_Hand_7.jpg" alt="Hand 7" />
            </a>
        </div>
        <div>
            <a href="http://ipirates.net/img/Adam_Hand_8.jpg" rel="lyteshow[adam]">
            	<img src="http://ipirates.net/img/Adam_Hand_8.jpg" alt="Hand 8" />
            </a>
        </div>
        <p class="clear">hey, yo!</p>
    </div>
    </body>
</html>

Favicon

Favicon Creation Utility

Adding it to your site

Upload your favicon.ico file to your site root folder.
In the head element of your page, add this:

<link type="image/x-icon" rel="shortcut icon" href="favicon.ico" />

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Web Development Courses, Rants, Tutorials and Hacks