Web Programming Step by Step

Lecture 6-A

Reading: 4.4

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

Valid XHTML 1.1 Valid CSS!

4.4: Sizing and Positioning

The position property (examples) (4.4.2)

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