CSS Positioning: bye-bye, tables!

Tables? We don't need your stinkin' tables!

Remember all that pain and suffering we went through to figure out how tables work? You ain't seen nothin' yet.

You can actually use styles to do the same layout stuff as tables and frames, and a lot more. It's called CSS-P, which stands for Cascading Style Sheets Positioning.

Of course, it'll only work in modern browsers, so you wouldn't want to do this for everybody. If your audience is likely to be using older browsers, and you absolutely want that layout you're set on, you're pretty much stuck with tables.

Luckily, for the rest of us, there's CSS-P.

HTML documents are basically a bunch of stacked boxes, either one inside the other or one after the other. These boxes are a block-level elements--the ones that begin and end a line, like <html></html>, <h1></h1>, <p></p>, etc. Inline elements, ones that don't start and stop on their own line, like <span></span>, <b></b>, <br />, etc. are placed within block-level elements.

CSS lets you define a variety of properties for all of these boxes. CSS positioning lets you take these boxes out of the normal flow and positioning them where you want them to be.

The position declaration lets you control the position of an element. Choices are:

   static (in the flow of the page)

   relative (also in the flow, but slightly adjusted)

   absolute (fixed position in the document), or

   fixed (fixed position on the screen).

position: static means that the HTML element is positioned by the natural flow of the page. That's what all HTML defaults to, unless you tell it otherwise via CSS-P.

position: relative places the HTML element in the natural flow of the page (between the preceding element and before the next one), and lets you adjust its position relative to where it is. What? Okay, once more, in plain language. We're currently in a column that takes up half the page and starts 10 pixels from the left side of the page. Suppose I want the next paragraph to start 10 pixels down from the end of this paragraph, and I want it indented 15 pixels from the left margin of this paragraph. I'll use a relative position, which will calculate from the position it would take in the normal flow of the page.

This is a paragraph with position: relative and top: 10px; left: 15px.

<p style="position: relative; top: 10px; left: 15px; padding-bottom:10px;">This is a paragraph with <em>position: relative</em> and <em>top: 10px; left: 20px</em>.</p>

position: absolute puts the HTML element in a position that's fixed in the document, regardless of the other content. It can even be placed over other elements on the page, like a layer (using z-index to decide whether it goes above or below another layer). We use absolute positioning to lay out items on a page, like on this 2-column page you're reading.

position: fixed gives the HTML element a fixed position in the browser window, so that it stays in the same place even when you scroll--similar to what frames do. Don't trust it to work in Internet Explorer.

See examples of all these CSS positions at http://www.quirksmode.org/css/
position.html

How the heck did he do that?

Nice of you to ask. Here's the code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Positioning: abandoning what we've learned</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body {
margin:10px 10px 0px 10px;
padding:0px;
}

#leftcontent {
position: absolute;
left:10px;
top:100px;
width:45%;
background:#fff;

} #rightcontent {
position: absolute;
right:10px;
top:100px;
width:45%;
}

p,h1,pre {
margin:0px 10px 10px 10px;
}

</style>
</head><body>
<h2>CSS Positioning: abandoning what we've learned</h2>
<div id="leftcontent">
<p>
Remember all that pain and suffering... </p>
</div>
<div id="rightcontent">
<p>How the heck did he do that?
<p>Like this!</p>
</div>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

Frames? We don't need your stinkin' frames, either!

If you think that was something, wait till you see this. Using CSS-P with fixed positioning, I can do something that looks like a frame, wherein one side of the page stays put while the other side scrolls.

This won't work in anything but the latest browsers. If it doesn't work in one (such as MS Internet Explorer), try another (such as Mozilla/Netscape or Opera).

How the heck did he do that?

Nice of you to ask. Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Positioning: throw away your frames</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body {
margin:10px 10px 0px 10px;
padding:0px;
}

#leftcontent {
position: fixed;
left:10px;
top:50;
width:48%;
background:#fff;
}

#rightcontent {
position: absolute;
right:10px;
top:50;
width:48%;
}

p,h1,pre {
margin:0px 10px 10px 10px;
}
#source {
font-family: courier, courier new, fixed;
}
</style>
</head>

<body>
<div id="leftcontent">
<h2>
Frames? We don't need your stinkin' frames, either!</h2>
<p>If you think that was something, wait till you see this...</p>
</div>
<div id="rightcontent">
<p>How the heck did he do that?
<p>Nice of you to ask. Here's the code...</p>
</div>
</body>
</html>

 

Big deal. Make it work in Internet Explorer

Using CSS-P with fixed positioning, I can do something that looks like a frame, wherein one side of the page stays put while the other side scrolls.

Fat lot of good that'll do me if it doesn't work in the most popular browser, MS Internet Explorer.

No problem. Use a table to separate the text as you want it, then use the style to set the size and area of the part you want to scroll.

How the heck did he do that?

Nice of you to ask. Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Positioning: throw away your frames</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body {
margin:10px 10px 0px 10px;
padding:0px;
}

#leftcontent {
background:#fff;
}

#rightcontent {
height:400px;
width:400px;
overflow: auto;
padding:0;
}

p,h1,pre {
margin:0px 10px 10px 10px;
}
#source {
font-family: courier, courier new, fixed;
}
</style>
</head>

<body>
<table><tr><td>
<div id="leftcontent">
<h2>Big deal. Make it work in Internet Explorer</h2>
<p>Using CSS-P with fixed positioning, I can do something that looks like a frame...</p>
</div>
</td><td>
<div id="rightcontent">
<p>How the heck did he do that?
<p>Nice of you to ask. Here's the code...</p>
</div>
</div>
</td></tr></table>
</body>
</html>

CSS-P gone wild

Great. Now what are you supposed to do with that?

Well, just wait...

This is a look forward to those of you who might continue working with HTML. It's another page that doesn't seem to work in the most current version of MSIE, sadly.

If you're interested, see if you can figure out how I kept the bottom right div from scrolling over the top right div.

I suppose someone's wondering how this page was created. Code's over there. -->

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Practicing CSS-P</title>
<style type="text/css">
div.one, div.two, div.three { position: fixed; width: 45%; height: 40%; border:solid; border-width: 1px; padding:10px;
}
div.one { top: 50px; left: 10px;}
div.two { top: 50px; left: 50%; z-index:2; background-color:#ffffff }
div.three { top: 55%; left: 10px; }
div.four { position: absolute; width: 45%; top: 55%; left: 50%; border: solid; border-width: 1px; padding:10; z-index:1 }
</style></head>

<body>
<div class="one"><p>Great. Now what are you supposed to do with that?</p>
</p>
</div>
<div class="two">
<p>This is a look forward to those of you who might continue working with HTML.</p>
</div>
<div class="three"><p>I suppose someone's wondering how this page was created... </p></div>
<div class="four" style="font-family: courier, courier new, fixed">Now you know!</div>
</body></html>

 

 

 

 

 

 

 

 

 

Terms and concepts to know

Page Layout
div
block
inline

position: absolute
position: relative
position: fixed
position: static

Readings

CSS position explanations and examples
http://www.quirksmode.org/css/position.html

CSS positioning, from Brainjar
http://www.brainjar.com/css/positioning/

More information

CSS layout techniques
http://glish.com/css/

MaKo CSS Positioning tutorial
http://www.mako4css.com/TPos.htm

 

Laying out a page with CSS

One way that you can lay out your page with CSS is to take the story board and then, with pencil, draw a grid across the page.  Once you have drawn the grid, take some time to figure out how to describe the positions and relationships, then try coding it using CSS-P divs for everything you're placing.  Elements of your site, such as graphics, text and color, can now be plugged into the divs, creating the same look as the story board. 

CSS-P Layout Challenge

This will not be turned in for a grade. If you have questions or problems, create a thread in the bulletins/discussions part of the Website and we can use that forum to help one another out.


Part 1: The document below was created using CSS-P. Using this picture as a template, write the code for this document.Try to get your page to look as close as possible.

Welcome to Earth
 

Here is the image
Earth

 

Part 2: This next example may seem a little intimidating... but the example below can be created using fairly simple CSS.

SSCC WWW Club News



Here are the images used in the example above.

  library

Photoshop 5.5 brochure

 

 

Take Assessment Module 09 Homework/quiz: CSS Positioning

Top of Form

Assistive Technology Tips [opens in new window]

 

Name:

Module 09 Homework/quiz: CSS Positioning

Instructions:

Tables are for data; CSS positioning is for layout.

Multiple Attempts:

This Test allows multiple attempts.

Force Completion:

This Test can be saved and resumed later.

Show

 Question Completion Status:

 

 

1Question Incomplete

2Question Incomplete

3Question Incomplete

 

Question 1 text  Question 1

12 points  

Save  

 

Creating tables and frames without using tables or frames:

Use CSS-P to create three pages that look like those in the image.

Feel free to change the colors, add some content, etc. to make them more interesting.

Run your code through the validator at http://validator.w3.org/ and correct any errors it finds.

Upload the pages, check them to make sure they work, then copy the URLs and paste them into the box below.


Inline image module07a.gif

Question 1 answers

Smart Text Plain Text HTML

  Insert Equation  Insert MathML Check Spelling Preview Preview

 

 

Question 2 text  Question 2

23 points  

Save  

 

Using CSS-P for Page Layout: Using CSS-P with no tables, create the document pictured below. For the content, select a subject of interest to you. Write a brief paragraph on why you chose this subject. On the left-hand side, provide links to three sites that contain some information about the subject that you picked. Feel free to use any color combination you like.

You may re-use the content and colors and any other content from the similar exercise using tables.

Run your code through the validator at http://validator.w3.org/ and correct any errors it finds.

FTP the completed page (and any accompanying images, if you chose to have any) to your student account. When you are pleased with the way everything looks, copy the direct URL to the page and paste it into the answer box below.


Inline image module7b.gif

Question 2 answers

Smart Text Plain Text HTML

  Insert Equation  Insert MathML Check Spelling Preview Preview

 

 

Question 3 text  Question 3

15 points  

Save  

 

Page layout: Select a border from the site below. Create a document using that border as the body background image in the style sheet.

body { background-image:url(yourimage.gif); }

Now use CSS-P to lay out text so it does not interfere with the border.

1.      Go to the URL, http:// www.free-backgrounds.com/

2.      Click on "borders"

3.      Find one you like, and click on "preview" (don't click on "download")

4.      Hold the mouse over a part of the page without any text on it, click the right mouse button, and choose "save background as"

5.      Save the image to your computer

6.      Use this image as the value for the BODY BACKGROUND attribute of the Web page you're making

7.      Use CSS-P to keep the text out of the left-hand border area of the background image

Run your code through the validator at http://validator.w3.org/ and correct any errors it finds.

FTP the completed page (and any accompanying images, including the background image) to your student account. When you are pleased with the way everything looks, copy the direct URL to the page and paste it into the answer box below.

Question 3 answers

Smart Text Plain Text HTML

  Insert Equation  Insert MathML Check Spelling Preview Preview

 

 

Bottom of Form