ag design

Sleek Design Code - HTML

This is guide to coding the Sleek Shiny Design Tutorial, and there is a live demo here.

1. We start off with the following basic default html file:

<!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>website.com</title>
      <link href="style.css" type="text/css" rel="stylesheet" title="website.com style" />
   </head>
   <body>
   </body>
</html>

Now for the content. Inside the body tags, add the following:

<div id="top">
   <h1><a href="#"><span>website.com</span></a></h1>
<div>

First of all, the div tag defines this section of code, and has been given the id "top". This allows you to style it in the css as #top.

Next, the a tags make the header a link, with the href="#" being where it links to.

And finally the span tags come in handy later with the CSS.

2.Next up, the following section is for the sites navigation:

<div id="nav">
   <p>
      <a href="#">Home</a> |
      <a href="#">Portfolio</a> |
      <a href="#">About</a> |
      <a href="#">Links</a>
   </p>
</div>

Again, the div is defining the section of code, now containing a p tag with the sites links.

Each link has its own a tag making it a link, then all the tags are closed again.

Thats pretty much it for the HTML, unless you want to div your content.

Sleek Design Code - CSS

3. Start of with the usual:

*
{
padding: 0;
margin: 0;
}

This removes any browser default margin/padding so you know exactly whats being applied where.

Now we style the sites background. First of all you need to save the background image. Using the same colours and pattern as we did in the original tutorial, with a 1600 x 9px selection, you should save this image as back.gif (using "Save for Web" to keep the file size down).

Now you can apply this image to the site:

html
{
background: #f5f5f5 url(img/back.gif) center repeat-y;
}

Applying this image the the html tag, the image is centerd, and allowed to repeat along the y-axis. The colour will be used if the image fails to load, or where the image runs out (on wide monitors).

4. Next, onto the header, using this code:

#top h1
{
width: 590px;
background: #fff;
padding: 5px;
margin: 0 auto;
}

First of all, ive selected the h1 tag on the top div, making it 590px wide as it was in the original Photoshop document.

Next, the white background and 5px spacing has been added, which is then centerd by using an auto margin.

Now to work on the actual header link/image. So first of all save the header image (should be 590 x 100px), and save it as header.gif. So to style the link, using #top h1 a:

#top h1 a
{
text-decoration: none;
display: block;
width: 590px;
height: 100px;
background: url(img/header.png) no-repeat;
}

First of all, remove the underlining from the link. Next, the link is set to display: block so you can apply the specific width and height making the whole image a link. And finally, the image is added as a background, with no-repeat just to be safe ;]

And finally, using the span we added earlier, you can hide the header text, finishing the top:

#top h1 span
{
visibility: hidden;
}

5. Now onto the navigaion. First of all, you need to save the navigation background images. Making sure your selection is 9px wide so its tile-able, call the side parts "nav_side.gif", and the middle section "nav.gif". Heres the two images:

Now to apply the side part to the navigation div:

#nav
{
height: 40px;
background: url(img/navside.gif) repeat-x;
}

This sets the 40px height and applying the background image across the entire site width.

Next up, the style for the middle section:

#nav p
{
width: 600px;
height: 40px;
background: url(img/nav.gif) repeat-x;
margin: 0 auto;
padding-top: 6px;
text-align: center;
font-size: 22px;
color: #fff;
}

First of all the height and width is stated so the section can be aligned, then the background image is applied. Next up, the top padding aligns the text vertically, then text-align: center does the same horizontally. Finally the text colour and size is chosen.

#nav a
{
color: #fff;
text-decoration: none;
}

#nav a:hover
{
color: #888;
}

Now, the colour for the links has been added, the underline removed, and the hover state.

6. Thats pretty much it, though you may want to apply the following to your content div so thats its aligned the white background:

#body
{
width: 590px;
background: #fff;
padding: 5px;
margin: 0 auto;
height: 300px;
}

Finally...

There are lots of ways to implement this design and many people may disagree with how I do things but frankly I don't care.

This design is very accessible and should be sound on Firefox, IE and Safari.

Sleek Design Code - HTML

Sleek Design Code - CSS

Finally...

Home > Tutorials > Sleek Design Code