Design Oahu

Web design blog from the middle of the pacific.

Using valid XHTML markup with CSS (part II)

If you haven’t read it yet, you may want to check out part I of this series where we go over the basics of the differences between HTML and XHTML and start off wit a simple markup. Thank you to everyone that sent me an email of their site that they would like to be sed as the example. I have decided to go a slightly different route though. I wanted to pick a website that is familiar to a lot of people that suffers from the old table based HTML design, so I picked MySpace. MySpace is great way to keep in touch with old friends, but I think the websites user base grew much quicker than their web designer team. If you have ever tried to customize your MySpace, it is a pain in the @ss trying to figure out how all the tables work. Mike Davidson wrote a nice tutorial on Hacking A More Tasteful MySpace that helps you get past the mess of markup to style your MySpace. What I will be doing is taking the default profile layout which is table based HTML and turning it into valid XHTML/CSS markup while keeping the look the same. I will show you step by step what I am doing, so that you can do the same with your own project.

So, first of all I went to my profile in MySpace and then viewed the source in my browser and copied the code. I was a bit overwhelmed and I was thinking that I bit off more than I can chew with this project. Never the less I continued on. Since this series is not about unobtrusive javascript I started off by removing all <script> tags and the scripts contained between them. The nested tables are quite a beast and the tabs or spacing is quite random, so I went through and re-spaced the code. What I did was I added two spaces for indentation on table data <td> tags. This helps us to visually see how the table is laid out. Here is the current state of the code.

By looking through the source code there should be a few things that you notice that need to be worked on based on what you learned in part 1 of this series. You see a lot of uppercase tags being used. I also see a lot of <br> tags instead of <br />. Also a lot of the image tags as well are like <img src=”"> instead of like <img src=”" />. You will notice that the Document Type Definition is missing from the top. Something I don’t like to see is <style> tags, especially within the <body>. All style information should be linked to an external CSS file that is included with a <link> tag. Something else that I didn’t mention in the first part of the series is that attributes should be double quoted. You will see a few instances where the attributes are not quoted. For example the <OPTION value=AddToFriends>Add to Friends</OPTION>, should look like this: <option value=”AddToFriends”>Add to Friends</option>. Another thing that should not be used is naming a class after a color. You will notice classes named like “whitetext”, or “orangetext”. This kind of defeats the purpose of have a style because what if you decide to change the orange text to red at a later date. You can simply change the color in the stylesheet, but now you need to remember that orange is actually red, or else go back and change the class throughout the markup as “redtext”. You should name it something like “profile_heading” that actually has a meaning.

Well after reviewing the source code you can tell that it most likely started off as a table based design, then as new elements were added, they started to incorporate more modern design methods such as including stylesheets and what not. We are going to take this one step further though, and scrap everything they have been piecing together and start fresh.

We will now build off of our index.html and style.css files that we were working on in part 1. Our goal for part 2 of this series is to get the basic template up. As we go forward in this series we will start to get the actual pieces of the profile going, but for this part we just want to get the basic template going. By the way my myspace url is http://myspace.com/etono. If you would like to see it for reference. Here is the index.html file:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MySpace.com - Jeremy - 27 - Male - Ichinomiyashi, Aichi - www.myspace.com/etono</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="leaderboard">
</div>
</div>
<div id="navigation">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>

The <div> tags are being used to “divide” sections of our design. Basically we have a container and below that we have a footer. Inside the container we have a header, navigation, and content sections. Also inside the header we have a leaderboard. Now we will style these div tags to give us our basic template. Here is our finished stylesheet:

body{
margin:0;
padding:0;
background-color:#e5e5e5;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
}
#container{
margin:0 auto;
padding:0;
width:800px;
border:none;
}
#header{
margin:0;
padding:0;
width:800px;
height:134px;
background-color:#003399;
}
#leaderboard{
margin:0 auto;
padding:0;
width:738px;
height:90px;
background-color:#ffffff;
}
#navigation{
margin:0;
padding:0;
width:800px;
height:26px;
background-color:#6698cb;
}
#content{
margin:0;
padding:0;
width:800px;
height:800px; /*Only temporary until we have some content*/
background-color:#ffffff;
}
#footer{
text-align:center;
}

First of all the body is what is shown in the browser. We want to make sure that the background color covers the whole screen and that our contain will start at the top so we set the margin and padding both to zero. We set the background color to the gray color MySpace uses and specified our font. Also we specified the text alignment to center to make sure the container will be in the middle.

Next we have our container. This does not actually display anything on the screen, but is used as a holder to keep everything inside. We set our margin to “0 auto” this is actually a shorthand way of writing “0px auto 0px auto” the order goes “top right bottom left” in clockwise order. We used the shorthand which is “top&bottom right&left”. We set the top and bottom margins to zero pixels and auto for left and right which will automatically balance the left and right margins to center our container. Also if you are specify zero pixels you can just write the number “0″ without the “px”. We also set the width to 800 pixels which is the same as MySpace used for their table. We did not specify a height as the height can vary depending on the content. Also we didn’t specify a background color because like I mentioned before this is just a holder.

Next up we are styling our header which is 800 x 134 pixels and has the blue background. Taking a look back at the index.html file we have our leaderboard which is contained inside our header. The leaderboard is where the advertisement is placed. It has a width of 738 pixels and a height of 90 pixels which is the standard size for a leaderboard banner advertisement. We set the background to white just so that it will stand out.

The navigation is our lighter blue color with the 800 pixel width and a 26 pixel height. Below that is our content. Normally we would not specify a height, but I added one in there just so that we can see how the profile template is shaping up, but we will remove it in the future. It also has an 800 pixel width and has a white background.

The footer doesn’t really have anything in it right now, but we did specify that the text is going to be centered. Well, there you have the basic framework for our next XHTML and CSS driven MySpace recode project. You can already start to see the resemblance. Here is the current version of the MySpace profile recode.

If you liked what you read you may be interested in subscribing to our RSS feed or email alerts. You may also want to read up about what RSS feeds are all about.

Leave a Comment