Web Programming Step by Step, 2nd Edition

Lecture 6-A: Positioning

Reading: 4.4

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 HTML5 Valid CSS

4.4: Sizing and Positioning

The position property (examples)

div#ad {
	position: fixed;
	right: 10%;
	top: 45%;
property value description
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.

Common bug: space under image

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

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

The opacity property css3

body     { background-image: url("images/marty-mcfly.jpg"); background-repeat: repeat; }
p        { background-color: yellow; margin: 0; padding: 0.25em; }
p.mcfly1 { opacity: 0.75; }
p.mcfly2 { opacity: 0.50; }
p.mcfly3 { opacity: 0.25; }

Marty McFly in 1985

Marty McFly in 1955 fading away, stage 1

Marty McFly in 1955 fading away, stage 2

Marty McFly in 1955 fading away, stage 3

property description
opacity how not-transparent the element is; value ranges from 1.0 (opaque) to 0.0 (transparent)