CSS InterstateHere we are, my last XHTML/CSS tutorial. To recap, we’ve moved from cave-painting HTML to flying-car XHTML. Then we learned how to dynamically style our XHTML with CSS. Then we found out how to style any little element we wanted using div, span, id and class. Now we’re going to grab those elements by their div handles and throw them around like a whacked-out rock star in a four-star hotel.

When you’re done with this tutorial, you’ll be able to lay out and style any site your imagination can dream up. (a litle graphic design skill helps here)

Let’s look at a demo page. This one is going to be slightly different than the demo page we used in the previous tutorials, because I want to really show what CSS positioning can do. Here is the XHTML:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<HTML xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta HTTP-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<title>Hello World!</title>
</head>
<body>

<div id=”title”>
<h1>Hello World!</h1>
</div>

<div id=”logo”>
<img xsrc=”http://www.blog.geeklimit.com/wp-content/uploads/2006/06/css-interstate.png” mce_src=”http://www.blog.geeklimit.com/wp-content/uploads/2006/06/css-interstate.png” alt=”logo” />
</div>

<div id=”main”>
<h2>Welcome to my site!</h2>
<p>
This is my page. There are many like it, but this one is mine.
</p>
</div>

<div id=”sidebar”>
<h2 class=”sidebar_title”>About</h2>
<p>
This is the site I made to demo CSS positioning.
</p>
<h2 class=”sidebar_title”>Links</h2>
<p>
<a xhref=”http://www.geeklimit.com” mce_href=”http://www.geeklimit.com” class=”sidebar_links”>GeekLimit</a><br />
<a xhref=”http://www.wc3.org” mce_href=”http://www.wc3.org” class=”sidebar_links”>W3C</a>
</p>

</body>
</html>

…and here is the CSS, as it is now. Not that I have changed the backgrounds of my different div’s to gray so I can see how the XHTML’s box model is laid out. This will come in handy in a moment:

/* Text Styling */

body {
color: white;
background-color: black;
margin: 0px;
}

#title {
background-color: gray;
}

#logo {
background-color: gray;
}

#main {
background-color: gray;
}

#sidebar {
background-color: gray;
}

h1 {
color: yellow;
border-bottom-color: yellow;
border-bottom-width: thick;
border-bottom-style: dashed;
padding-bottom: 10px;
}

h2 {
text-decoration: underline;
}

h2.sidebar_title {
color: yellow;
border-bottom-color: yellow;
border-bottom-width: thin;
}

a.sidebar_links {
color: yellow;
text-decoration: none;
}

This makes a page that looks like:

CSS 1

Okay, not bad, but you can see that we need some help with the alignment. (also not that I took the screenshot before I made the title background gray. Just imagine it looks like the others.)

CSS Spacing

First of all, before we start resizing things, we need to decide what we want. I’ll hop into photoshop and make a crappy box diagram of what I want my text/images to do:

css box diagram

A few things to note:

  • all boxes have 6px between them
  • all boxes have 6 px on the inside, to keep text off of the borders
  • the header and main boxes will expand to fit the screen
  • the header is 100px tall
  • the sidebar is on the right, and is 200px wide
  • the logo is covering the intersection of all 3 boxes

OK, now that I know what I want to do, I need to figure out all of the coordinates I need to draw the boxes.

Margins and Padding

If you’ve ever made an HTML table, you know about margins and padding. Think of them this way: you’ve got your kitchen table. That’s the web page. You’ve got a few boxes. Those are your XHTML elements. And you’ve got a few items. This is your text, images, etc.

Think of margins as the distance between the boxes. Think of padding as the distance between an item and the inside wall of its box. Simple, right?

OK, so back to our page, I’ve decided that I’m going to use the top-right corner of the page as my reference point. All of the elements on the page (the boxes) will be defined as starting xx pixels to the left of that point, and yy pixels down from that point. It’s important to note that we are defining the top-left corner position of the boxes.

Let’s define the title box first, and you’ll see what I mean:

The title box

I don’t need to specify much here. The title box is touching the top, left and right of the browser window, so I can fix that by changing #title to:

#title {
background-color: gray;
margin: 6px;
padding: 6px;
height: 100px;
}

There. The title box has the appropriate space between it and the browser window, and the text in the title box has the appropriate space between it and the walls of the title box. Such is margins and padding. (Also, the title box is now the correct height.)

The main text box

For my main text box, I know I’m going to have a problem. I need to to be expandable so that my page stretches across the whole screen, just like my title bar. But I also need to make sure that the right side of the box has enough room for the sidebar. How much room? Well, the sidebar is 6px from the right side, is 200px wide, and has 6px of space between it and the ‘main’ box. So that’s 212px of padding I need open to the right of the main text at all times. Easy enough, I’ll just tell the main text to have 6px padding like everyone else, and then tell it to have a 212px right padding:

#main {
margin: 6px;
padding: 6px 212px 6px 6px;
}

note: this is called shorthand. Basically, you specify ‘padding: 6px 212px 6px 6px’ instead of multiple lines saying ‘left-padding, etc.’. Just make sure you go to the W3C site and double-check that your numbers are in the correct order! (clockwise, starting at the top)

The logo

Here is where positioning gets really cool. Not only can you move elements around, you can place them on top of each other. My logo is 100px by 100px, so I’m going to make the box it’s in the same size. While I’m at it, I’m going to get rid of this box’s background color. And here is the setting that will knock your socks off: absolute positioning!

Sounds boring, I know, but it’s not! This setting allows me to grab any box and throw it anywhere on the page, as if it were on a transparency sheet. With this, we can put the box wherever we want, and not disturb the rest of the page.

The exact middle of the intersection is 109px down, and 209px from the right of the screen. To finish the CSS for the logo, we need to center the image on it. The top of the image needs to be 59px down (109px down to the intersection - (100px image height / 2). The right of the image needs to be 159px in (209px to the right - (100px image width / 2).

The image is now centered on the intersection. I’ll add a property called a ‘z-index’ to make sure that the logo never gets a box on top of it. (The ‘z-index’ specifies which box gets to go on top of each other when you have multiple boxes by using a score up to 99, with 99 being the highest)

#logo {
width: 100px;
height: 100px;
position: absolute;
top: 59px;
right: 159px;
z-index: 99;
}

The sidebar

Since we’ve already resized boxes and have done absolute positioning, the sidebar is a snap. Just combine the properties of the main and logo boxes, and change accordingly.

#sidebar {
background-color: green;
padding: 6px;
width: 200px;
text-align: right;
position: absolute;
top: 124px;
right: 6px;
z-index: 98;
}

note that i turned the sidebar green to see what i was doing. Let’s have a look at the final product (click to enlarge):

css3

…and what happens when we resize the browser?

css4

…and the final product, when we take away the background coloring?

css5

The final code:

XHTML:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<HTML xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta HTTP-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<title>Hello World!</title>
</head>
<body>

<div id=”title”>
<h1>Hello World!</h1>
</div>

<div id=”logo”>
<img xsrc=”http://www.blog.geeklimit.com/wp-content/uploads/2006/06/css-interstate.png” mce_src=”http://www.blog.geeklimit.com/wp-content/uploads/2006/06/css-interstate.png” alt=”logo” />
</div>

<div id=”main”>
<h2>Welcome to my site!</h2>
<p>
This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.This is my page. There are many like it, but this one is mine.
</p>
</div>

<div id=”sidebar”>
<h2 class=”sidebar_title”>About</h2>
<p>
This is the site I made to demo CSS positioning.
</p>
<h2 class=”sidebar_title”>Links</h2>
<p>
<a xhref=”http://www.geeklimit.com” mce_href=”http://www.geeklimit.com” class=”sidebar_links”>GeekLimit</a><br />
<a xhref=”http://www.wc3.org” mce_href=”http://www.wc3.org” class=”sidebar_links”>W3C</a>
</p>
</div>

</body>
</html>

CSS: (note that I’ve made corrections where the spacing wasn’t quite right)
body {
color: white;
background-color: black;
margin: 0px;
}

#title {
margin: 6px;
padding: 6px;
height: 100px;
}

#logo {
width: 100px;
height: 100px;
position: absolute;
top: 59px;
right: 159px;
z-index: 99;
}

#main {
margin: 6px;
padding: 0px 224px 6px 6px;
}

#sidebar {
padding: 0px 6px 6px 6px;
width: 200px;
text-align: right;
position: absolute;
top: 124px;
right: 6px;
z-index: 98;
}

h1 {
color: yellow;
border-bottom-color: ;
border-bottom-width: thick;
border-bottom-style: dashed;
padding-bottom: 10px;
}

h2 {
text-decoration: underline;
}

h2.sidebar_title {
color: yellow;
border-bottom-color: yellow;
border-bottom-width: thin;
}

a.sidebar_links {
color: yellow;
text-decoration: none;
}

Related: