[CSS]
/* main CSS Document */
/* general styling first */
/* reset css styles individually instead of universal selector. */
/* based on http:///eric/thoughts/2007/05/01/reset-reloaded/ */
html, body{
margin: 0;
padding: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
border-left:0;
}
div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
color: black;
background: white;
font-family: Verdana,Arial, Helvetica, sans-serif;
}
ol, ul {list-style: none;}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
/* end reset styles */
/* clearing technique *
.clearfix:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* mac hide */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
/*……….. do not change or amalgamate the above clearfix styles ……*/
p,h1,h2,h3,h4,h5,h6,ul,ol {margin-bottom:.5em}
a img,img{border:none;display:block;}
a{
text-decoration:none;
color:#252e1c;
}
h1,h2,h3,h4,h5,h6{
font-weight:bold;
}
h1{font-size:197%}/* 26px */
h2{font-size:182%}/* 24px */
h3{font-size:167%}/* 22px */
h4{font-size:152%}/* 20px */
h5{font-size:136%}/* 18px */
h6{font-size:122%}/* 16px */
body{
font-size: 13px;
text-align:center; /* for ie5.+*/
}
[/CSS]
IE only CSS served from CSS file via conditional comments:
[CSS]
/* IE CSS Document */
body {font-size:x-small;font-size:small}/*ie5 and 5.5. that are one size out*/
body table{font-size:x-small;font-size:small}
[/CSS]
This will be served as follows:
[HTML]
[/HTML]
I have used Eric Meyers Reset CSS method to give uniform defaults to all elements and then used a font sizing method similar to the one used on Yahoo YUI. I am also going to use the :after method of clearing floats as documented on PIE as this allows floats to be cleared without structural mark-up and works nicely without too many side effects. All this will give a consistent base to work from and provides a good template for any page. Having this all set up to start with means that you can more or less get on with the job of converting the PSD without further ado.
You can copy the base files from here and get ready to roll.
base.htm
main.css
ie.css
Step 2
Assuming you have set up some reasonable defaults for text, link colors and font styles etc we can now get on with the job of construction. I have set the main font family to verdana in the body element because most of the page is in that font and that will save us from specifying it everywhere.
When I’m constructing a site for the first time I always work with the CSS in the head of the document (apart from the default sheets we already set up of course) because this makes it so much quicker to review and edit while working on the same page. Once the page is fully working and tested then the CSS can be added to the main external CSS file. It is also worth getting into the habit of checking your work at each stage in the browsers you want to support especially when you are learning. I more or less know what will or won’t work but checking in 3 or 4 browsers at each stage makes sure that there are no discrepancies and things can be fixed easily at this stage rather than waiting until the whole thing is finished when indeed it may be impossible to fix.
You should also take these testing opportunities to quickly validate your HTML and CSS so that typos can be kept out of the code and ensure that the code you are using is legitimate.
I won’t mention testing again (until the end) but you can assume that at each stage the above tests will take place.
From top to bottom
Working from the top down we will start with the body element itself and apply the gradient background as a repeating slice to the background of the body and repeat it along the x-axis. The background-color of the body will be set to the closing gradient color which happens in this case to be black. This will effect a seamless transition as the page goes from gradient to solid color.
The gradient is 800px high and therefore we have no choice but to slice the whole height of the gradient. Don’t be tempted at this point to make the image 1px by 880px high because that means the browser will have to repeat that image 1024 times for a 1024px wide page and that takes a lot of effort on the browsers behalf. I would use at least a 5px wide slice or even 10px wide slice to save the browser working too hard and for the page to be drawn quickly. If the slice is 10px wide then the browser will only need to repeat the image 102.4 times rather that 1024 times which is a considerable difference.
There is always a trade-off between image file size and the time it takes to repeatedly draw it on the screen so don’t be tempted to use 1px images everywhere or the page will slow to a crawl.
Slice the background of the PSD to create an image that is 5px x 880px and save it as bodybg.jpg.
This will give us the following CSS to add inside the head of our page (inside the appropriate style tags of course):
[CSS]
body{
background:#000 url(images/bodybg.jpg) repeat-x 0 0;
}
[/CSS]
Now we move to the main content and need to create the page wrapper that holds all the content. Measure the page and then centre it. I have added a fix for ie5 already in the defaults that I set up earlier and have applied text-align:center to the body which will make ie5.x centre nested block elements such as our main wrapper #outer. We must however remember to set text-align back to left on #outer otherwise the text will be centred also.
Here is the resulting code from measuring the page and centering it using auto margins.
[CSS]
#outer{
width:975px;
margin:auto;/* center the page*/
text-align:left;/* reset text back to left due to ie5.x fix */
}
[/CSS]
Header and Nav
The header is given a width to avoid “haslayout” issues in IE and ensure that we don’t suffer from the myriad of associated bugs.
[CSS]
#header{
width:975px;
}
[/CSS]
The navigation can be made horizontal by setting the list elements to generate “inline boxes” instead of “block boxes” and allow then to line up horizontally. Using lists for repeated navigation elements is now the accepted way of coding these elements and adds semantic structure to the page rather than a load of bare anchors that can cause accessibility problems with assisted technologies like screen readers. Adding padding to the ul allows the navigation to be spaced out correctly from the right edge and allow room for the overlapping graphic.
What font is is?
We run into out first problem in that the designer has to decided to use a non standard font for the navigation. Therefore you have to make choices (the first of many) on how to proceed.
If the design must have that exact font then there would be no alternative but to use images for the navigation as the font specified is unlikely to be present on 99.9% of systems. Using images for navigation can hurt your SEO (Search Engine Optimisation) prospects ins some cases so its worth avoiding doing this unless absolutely necessary. The main font used in the content of the page is Verdana so that would be the first font to try and see how close it looks. Unfortunately it didn’t look too good but on testing further it seems that Arial is a close match especially when made italic and sized to match.
Here is a screenshot of the original navigation taken from the PSD compared to our layout in Firefox 2 using Arial.
Figure 1
The top line is the original and as far as I’m concerned that’s pretty close. We can never match the anti aliasing and partial bolding that Photoshop offers anyway. If your client wants it exact then you will have to replace the text with images instead and use a suitable image replacement technique instead.
We can assume from the PSD that the word in green is the current page and can probably also assume that each word will rollover with the green color also so we will build that into the nav from the start. We simply apply a class of current to our list structure so that we can target that specific anchor and then also effect a change on hover for other elements. You may think that it would be better to add the class to the anchor instead but I find that putting the class on the list allows me to target the list element uniquely if needed and to also target the anchor uniquely therefore possibly saving using an extra class at a later date.
The full styles for the above are as follows.
CSS:
[CSS]
ul#nav{
font-size:92%;
padding:18px 115px 5px 0;
text-align:right;
}
ul#nav li{
display:inline;
padding:0 13px 0 0;
text-transform:uppercase;
font-style: italic;
font-weight:bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
ul#nav li a{
color:#fff;
}
ul#nav li a:hover,
ul#nav li.current a{color:#8bbd25}
[/CSS]
HTML:
[HTML]
[/HTML]
Note that I have used text-transform:uppercase to make the navigation in uppercase rather than typing in uppercase. There are a number of reasons for this. First ITS RUDE TO SHOUT as we all know but more importantly the effect is really decoration and should be carried out via CSS and not the html and thirdly it makes the HTML look neater.
The navigation is more or less finished but we may need to tweak its positions later on so we will leave it as it is form now and come back later if we need to move it around.
That concludes part 1 of the Tutorial, Part 2 should be ready in a few days and will go more indepth into getting the page looking like the original PSD.
