Web Programming Step by Step, 2nd Edition

Chapter 4: Page Layout

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Valid XHTML 1.1 Valid CSS!

4.1: Styling Page Sections

Motivation for page sections

flow

The HTML id attribute

<p>Spatula City!  Spatula City!</p>
<p id="mission">Our mission is to provide the most
spectacular spatulas and splurge on our specials until our
customers <q>esplode</q> with splendor!</p>

Linking to sections of a web page

<p>Visit <a href=
		"http://www.textpad.com/download/index.html#downloads">
	textpad.com</a> to get the TextPad editor.</p>

<p><a href="#mission">View our Mission Statement</a></p>

CSS ID selectors

#mission {
	font-style: italic;
	font-family: "Garamond", "Century Gothic", serif;
}

Spatula City! Spatula City!

Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers esplode with splendor!

The HTML class attribute

<p class="shout">Spatula City!  Spatula City!</p>
<p class="special">See our spectacular spatula specials!</p>
<p class="special">Today only: satisfaction guaranteed.</p>

CSS class selectors

.special {                   /* any element with class="special" */
	background-color: yellow;
	font-weight: bold;
}
p.shout {                    /* only p elements with class="special" */
	color: red;
	font-family: cursive;
}

Spatula City! Spatula City!

See our spectacular spatula specials!

Today only: satisfaction guaranteed.

Multiple classes

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

Spatula City! Spatula City!

See our spectacular spatula specials!

Satisfaction guaranteed.

We'll beat any advertised price!

CSS for following examples

.special {
	background-color: yellow;
	font-weight: bold;
}
.shout {
	color: red;
	font-family: cursive;
}

Sections of a page: <div>

a section or division of your HTML page (block)

<div class="shout">
	<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>

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="shout">any advertised price</span>!</p>

Spatula City! Spatula City!

See our spectacular spatula specials!

We'll beat any advertised price!

CSS context selectors

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!</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

box model

Document flow - block elements

flow

Document flow - block and inline elements

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

CSS properties for dimensions

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.

Top/bottom margin collapse

margin collapse
margin collapse

4.3: Floating Elements

The CSS float property (reference)

property description
float side to hover on; can be left, right, or none (default)

Float example

<img src="images/borat.jpg" alt="Borat" class="headericon" />
Borat Sagdiyev (born July 30, 1972) is a ...
img.headericon {
	float: left;
}
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 Nation of Kazakhstan ...

Float vs. alignment

none 1 before
none 2 before
right #1
right #2
left #1
left #2
none 1 after
none 2 after

Common floating content and width

I am not floating, no width set

I am floating right, no width set

I am floating right, no width set, but my text is very long so this paragraph doesn't really seem like it's floating at all, darn

I am not floating, 45% width

I am floating right, 45% width

The clear property

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

homestar runnerHomestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with ...

My Homestar Runner Fan Site

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

Clear diagram

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

float clear

Common error: container too short (4.3.3)

<p><img src="images/homestar_runner.png" alt="homestar runner" />
	Homestar Runner is a Flash animated Internet cartoon.
	It mixes surreal humour with ....</p>
p { border: 2px dashed black; }
img { float: right; }

The overflow property

p { border: 2px dashed black; overflow: hidden; }

homestar runner Homestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with ....

property description
overflow specifies what to do if an element's content is too large;
can be auto, visible, hidden, or scroll

Multi-column layouts

<div>
	<p>the first paragraph</p>
	<p>the second paragraph</p>
	<p>the third paragraph</p>
	Some other text that is important
</div>
p { float: right; width: 20%; margin: 0.5em;
    border: 2px solid black; }
div { border: 3px dotted green; overflow: hidden; }

4.4: Sizing and Positioning

The position property (examples)

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

#menubar {
	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

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>

Details about inline boxes

The display property

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

HTML5 and layout: The old way

bad tags

HTML5 semantically meaningful tags

good tags