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.

Motivation for page sections

• want to be able to style individual elements, groups of elements, sections of text or of the page
• (later) want to create complex page layouts

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>

• a tag used to indicate a logical section or area of a page
• has no appearance by default, but you can apply styles to it

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>

• has no onscreen appearance, but you can apply a style or ID to it, which will be applied to the text inside the span

CSS context selectors (4.1.3)

selector1 selector2 {
	properties
}

• applies the given properties to selector2 only if it is inside a selector1 on the page

selector1 > selector2 {
	properties
}

• applies the given properties to selector2 only if it is directly inside a selector1 on the page (selector1 tag is immediately inside selector2 with no tags in between)

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

The CSS Box Model (4.2.1)

• for layout purposes, every element is composed of:
  • the actual element's content
  • a border around the element
  • padding between the content and the border (inside)
  • a margin between the border and other content (outside)
• width = content width + L/R padding + L/R border + L/R margin
  height = content height + T/B padding + T/B border + T/B margin
  • IE6 doesn't do this right

Document flow - block elements

Document flow - inline elements

Document flow - a larger example

CSS properties for borders

h2 { border: 5px solid red; }

• thickness (specified in px, pt, em, or thin, medium, thick)
• style (none, hidden, dotted, dashed, double, groove, inset, outset, ridge, solid)
• color (specified as seen previously for text and background colors)

More border properties

Border example 2

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

• each side's border properties can be set individually
• if you omit some properties, they receive default values (e.g. border-bottom-width above)

CSS properties for padding

Padding example 1

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

Padding example 2

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

• each side's padding can be set individually
• notice that padding shares the background color of the element

CSS properties for margins

Margin example 1

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

• notice that margins are always transparent
  (they don't contain the element's background color, etc.)

Margin example 2

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

• each side's margin can be set individually

Firefox Firebug add-on (4.2.2)

CSS properties for dimensions (4.3, 4.4.1)

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

Centering a block element: auto margins

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

• works best if width is set (otherwise, may occupy entire width of page)
• to center inline elements within a block element, use text-align: center;

The CSS float property (reference) (4.3.1)

img.headericon {
	float: right;    width: 130px;
}

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

• removed from normal document flow; underlying text wraps around as necessary

Floating elements diagram

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

• often floating block elements must have a width property value
  • if no width is specified, the floating element may occupy 100% of the page width, so no content can wrap around it

The clear property (4.3.2)

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

Clear diagram

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

The position property (examples) (4.4.2)

div#ad {
	position: fixed;
	right: 10%;
	top: 45%;
}

Absolute positioning

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

• removed from normal flow (like floating ones)
• positioned relative to the block element containing them (assuming that block also uses absolute or relative positioning)
• actual position determined by top, bottom, left, right values
• should often specify a width property as well

Relative positioning

#area2 { position: relative; }

• absolute-positioned elements are normally positioned at an offset from the corner of the overall web page
• to instead cause the absolute element to position itself relative to some other element's corner, wrap the absolute element in an element whose position is relative

Fixed positioning

• removed from normal flow (like floating ones)
• positioned relative to the browser window
  • even when the user scrolls the window, element will remain in the same place

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

• size properties (width, height, min-width, etc.) are ignored for inline boxes
• margin-top and margin-bottom are ignored, but margin-left and margin-right are not
• the containing block box's text-align property controls horizontal position of inline boxes within it
  • text-align does not align block boxes within the page
• each inline box's vertical-align property aligns it vertically within its block box

The vertical-align property

• can be top, middle, bottom, baseline (default), sub, super, text-top, text-bottom, or a length value or %
  • baseline means aligned with bottom of non-hanging letters

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>

• red space under the image, despite padding and margin of 0
• this is because the image is vertically aligned to the baseline of the paragraph (not the same as the bottom)
• setting vertical-align to bottom fixes the problem (so does setting line-height to 0px)

The z-index property (4.4.3)

• higher z-index elements appears on top of lower ones
• can be auto (default) or a number

The display property (4.4.4)

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

• values: none, inline, block, run-in, compact, ...
• use sparingly, because it can radically alter the page layout

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

• lists and other block elements can be displayed inline
  • flow left-to-right on same line
  • width is determined by content (block elements are 100% of page width)

The visibility property

p.secret {
	visibility: hidden;
}

• hidden elements will still take up space onscreen, but will not be shown
  • to make it not take up any space, set display to none instead
• can be used to show/hide dynamic HTML content on the page in response to events