CSS redesign
I hang around the Polycount messageboards, and every few weeks someone posts a new portfolio website. Practically every time I comment on it and then say ‘You should have done it with CSS’.
I’m like a broken record.
Rhinokey/Tracy Hunt just popped up a new one, and I offered to convert it to CSS and document the process, just to show how easy it was. The initial design looked like this:
It’s pretty simple, but it has overlapping areas. The first thing to do is to try and separate out the definable blocks of content. The site has only 3 key areas - the header, the navigation bar, and the main content block:
So now we know what we are working with we can get started. The navigation bar would lend itself well to a little bit of php code to change the colour of the active tab, but I want to avoid and code. Instead I’m going to use a little trick of overriding a bit of the stylesheet on each page. This is simple and effective.
At this point I’d stick my nose in and point out that the line weights vary from section to section, so I’ll ask if some of those can be unified.
Organisation
The first thing I always do it think about the file structure of the site - we don’t lump everything into one folder. We’ll need a folder to store the site graphics (I’ll keep those separate from the the portfolio or content graphics), and one to store the CSS include files in. Since the pages all have the same layout we’ll create one page, and make each one pull in the content from a separate file. If we put each template in a separate folder we can store the content in the folder too. We’re going to have a fill structure like this:
Baby Steps
OK, back to the rework keeping it the same as the old version. The site uses a fixed layout, which makes it easier to layout. The first thing to do is to set up a base index and CSS file and get them onto the server. In this case, I’m using a /tmh folder on my own server. I’ll do the editing in Textwrangler (it’s free) and upload via Cyberduck (free too) - I can drag an drop files. I’m not averse to WYSIWYG editing at all, it’s much better these days than hacking text, but I simply don’t own one so decided to do this using tools that everyone has.
The CSS is simple - I’m just redefining the body tag to tell it what font to use, and what background image to use:
body {
background-image: url(/tmh/sitegfx/background.jpg);
font-size:2em;
}
The HTML is also really simple:
<!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 profile=”http://gmpg.org/xfn/11″>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /><title>tmhunt.com</title>
<link rel=”stylesheet” href=”/tmh/includes/style.css” type=”text/css” media=”screen” />
</head>
<body>
<div id = “header”>
The header
</div>
<div id = “navigation”>
Navbar
</div>
<div id = “mainblock”>
main block
</div>
</body>
</html>
I set the font to twice the normal size simply as a quick test to check that the stylesheet was working, just in case I got the path to the image wrong. I had done.
Something I noticed was that the background was 33k in size - running this through Photoshops ‘Save for Web’ at 75% took it down to 8.7k, about a quarter of its original size.
I’ll set the background colour of the site to be #DD901E, the same orange as the image, as the colour will be displayed before the image and will prevent a nasty pop from gray.
body {
background-color: #DD901E;
background-image: url(/tmh/sitegfx/background.jpg);
font-size:2em;
}
Time for something real
Right, I now know that the site is working and the stylesheet is being read, so time for some real work. Everything would be simple if it wasn’t for that head photo overlapping everything. The simplest thing to do is chop the bottom off it (as has already been done using tables), and paste it on over the top. That gives us a nice clean sheet to work with.
Getting the masthead in was simple. The original had been cut into several parts, so I reassembled the image in Photoshop to get this:
It was already compressed, so I saved it as a 128bit GIF image. Once that is on the page, I’ll float the menu items over the top of it and position them so that they sit in the blank spaces.
My HTML still looks like this at present - stage 1.
You’ll notice I have <div> id = “header”</div> in there. The div is a container, and I’ve given it the id name of header. In CSS you get 2 types of containers, id and class. This simplest way to remember it is that an id is used once and once only on a page to define something specific, and a class is used to define something you use over and over again, like a date or a picture border. You can read up on this here.
Anyway, lets use css to style that header section. I’m going to float the menu over the blank spaces in the image, so in effect the header is simply going to be an empty box for now with the background image set. I’ll also set the size of this container to be the same size as the background image, 1035 wide by 154 high, and I’ll also tell it to draw a 1pixel wide blue border (this is incorrect sizing, but this is just for a quick test).
Whats wrong? The image is there, my old text is there (as I never removed it), but it’s floating away from the edge of the screen! This is because all browsers automatically add some padding to each website, so we just need to set that to 0.
body {
padding: 0px;
margin: 0px;
background-color: #DD901E;
background-image: url(/tmh/sitegfx/background.jpg);
font-size:2em;
}
And we’ve got a masthead displaying.
Next up, I’ll tackle the content box.