Web Programming Step by Step

Chapter 4
Page Layout

Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller.

Valid XHTML 1.1 Valid CSS!

4.1: Styling Page Sections

Motivation for page sections

flow

Sections of a page: <div> (4.1.1)

a section or division of your HTML page (block)

<div class="standout">
	<h2>Spatula City!  Spatula City!</h2>
	<p class="special">See our spectacular spatula specials!</p>
	<p>We'll beat any advertised price!</p>
</div>

Spatula City! Spatula City!

See our spectacular spatula specials!

We'll beat any advertised price!

Inline sections: <span> (4.1.2)

an inline element used purely as a range for applying styles

<h2>Spatula City!  Spatula City!</h2>
<p>See our <span class="special">spectacular</span> spatula specials!</p>
<p>We'll beat <span class="standout">any advertised price</span>!</p>

Spatula City! Spatula City!

See our spectacular spatula specials!

We'll beat any advertised price!

CSS context selectors (4.1.3)

selector1 selector2 {
	properties
}
selector1 > selector2 {
	properties
}

Context selector example

<p>Shop at <strong>Hardwick's Hardware</strong>...</p>
<ul>
	<li>The <strong>best</strong> prices in town!</li>
	<li>Act while supplies last!</li>
</ul>
li strong { text-decoration: underline; }

More complex example

<div id="ad">
	<p>Shop at <strong>Hardwick's Hardware</strong>...</p>
	<ul>
		<li class="important">The <strong>best</strong>
		prices in town!</li>
		<li>Act <strong>while supplies last!</strong></li>
	</ul>
</div>
#ad li.important strong { text-decoration: underline; }

4.2: Introduction to Layout

The CSS Box Model (4.2.1)

box model

Document flow - block elements

flow

Document flow - inline elements

flow

Document flow - a larger example

flow

CSS properties for borders

h2 { border: 5px solid red; }

This is a heading.

property description
border thickness/style/size of border on all 4 sides

More border properties

property description
border-color, border-width,
border-style
specific properties of border on all 4 sides
border-bottom, border-left,
border-right, border-top
all properties of border on a particular side
border-bottom-color, border-bottom-style,
border-bottom-width, border-left-color,
border-left-style, border-left-width,
border-right-color, border-right-style,
border-right-width, border-top-color,
border-top-style, border-top-width
properties of border on a particular side
Complete list of border properties

Border example 2

h2 {
	border-left: thick dotted #CC0088;
	border-bottom-color: rgb(0, 128, 128);
	border-bottom-style: double;
}

This is a heading.

CSS properties for padding

property description
padding padding on all 4 sides
padding-bottom padding on bottom side only
padding-left padding on left side only
padding-right padding on right side only
padding-top padding on top side only
Complete list of padding properties

Padding example 1

p { padding: 20px; border: 3px solid black; }
h2 { padding: 0px; background-color: yellow; }

This is the first paragraph

This is the second paragraph

This is a heading

Padding example 2

p {
	padding-left: 200px; padding-top: 30px;
	background-color: fuchsia;
}

This is the first paragraph

This is the second paragraph

CSS properties for margins

property description
margin margin on all 4 sides
margin-bottom margin on bottom side only
margin-left margin on left side only
margin-right margin on right side only
margin-top margin on top side only
Complete list of margin properties

Margin example 1

p {
	margin: 50px;
	background-color: fuchsia;
}

This is the first paragraph

This is the second paragraph

Margin example 2

p {
	margin-left: 8em;
	background-color: fuchsia;
}

This is the first paragraph

This is the second paragraph

Firefox Firebug add-on (4.2.2)

Firebug Firebug Firebug

4.3: Floating Elements

CSS properties for dimensions (4.3, 4.4.1)

p { width: 350px; background-color: yellow; }
h2 { width: 50%; background-color: aqua; }

This paragraph uses the first style above.

An h2 heading

property description
width, height how wide or tall to make this element
(block elements only)
max-width, max-height,
min-width, min-height
max/min size of this element in given dimension

Centering a block element: auto margins

p {
	margin-left: auto;
	margin-right: auto;
	width: 750px;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

The CSS float property (reference) (4.3.1)

img.headericon {
	float: right;    width: 130px;
}
Borat Borat Sagdiyev (born July 30, 1972) is a fictional Kazakhstani journalist played by British-Jewish comedian Sacha Baron Cohen. He is the main character portrayed in the controversial and successful film Borat: Cultural Learnings of America for Make Benefit Glorious ...
property description
float side to hover on; can be left, right, or none (default)

Floating elements diagram

float

Common float bug: missing width

I am not floating, no width

I am floating right, no width

I am not floating, 45% width

I am floating right, 45% width

The clear property (4.3.2)

p { background-color: fuchsia; }
h2 { clear: right; background-color: yellow; }

homestar runnerHomestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with references to 1980s and 1990s pop culture, notably video games, classic television and popular music.

My Homestar Runner Fan Site

property description
clear disallows floating elements from overlapping this element;
can be left, right, or none (default)

Clear diagram

div#sidebar { float: right; }
p { clear: right; }

float clear

4.4: Sizing and Positioning

The position property (examples) (4.4.2)

div#ad {
	position: fixed;
	right: 10%;
	top: 45%;
}
property value description
position
static default position
relative offset from its normal static position
absolute a fixed position within its containing element
fixed a fixed position within the browser window
top, bottom,
left, right
positions of box's corners

Absolute positioning

#sidebar {
	position: absolute;
	left: 400px;
	top: 50px;
}
absolute positioning

Relative positioning

#area2 { position: relative; }
absolute positioning

Fixed positioning

fixed positioning

Alignment vs. float vs. position

  1. if possible, lay out an element by aligning its content
    • horizontal alignment: text-align
      • set this on a block element; it aligns the content within it (not the block element itself)
    • vertical alignment: vertical-align
      • set this on an inline element, and it aligns it vertically within its containing element
  2. if alignment won't work, try floating the element
  3. if floating won't work, try positioning the element
    • absolute/fixed positioning are a last resort and should not be overused

Details about inline boxes

The vertical-align property

property description
vertical-align specifies where an inline element should be aligned vertically, with respect to other content on the same line within its block element's box

vertical-align example

<p style="background-color: yellow;">
<span style="vertical-align: top; border: 1px solid red;">
Don't be sad!  Turn that frown 
<img src="images/sad.jpg" alt="sad" /> upside down!
<img style="vertical-align: bottom" src="images/smiley.jpg" alt="smile" /> 
Smiling burns calories, you know.  
<img style="vertical-align: middle" src="images/puppy.jpg" alt="puppy" /> 
Anyway, look at this cute puppy; isn't he adorable!  So cheer up,
and have a nice day.  The End.
</span></p>

Common bug: space under image

<p style="background-color: red; padding: 0px; margin: 0px">
<img src="images/smiley.png" alt="smile" />
</p>

The z-index property (4.4.3)

property description
z-index sets which absolute positioned element will appear on top of another that occupies the same space

The display property (4.4.4)

h2 { display: inline; background-color: yellow; }

This is a heading

This is another heading

property description
display sets the type of CSS box model an element is displayed with

Displaying block elements as inline

<ul id="topmenu">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>
#topmenu li {
	display: inline;
	border: 2px solid gray;
	margin-right: 1em;
}

The visibility property

p.secret {
	visibility: hidden;
}

Since nobody can see this anyway: ca-ca poo-poo pee-pee!!!

property description
visibility sets whether an element should be shown onscreen;
can be visible (default) or hidden