Welcome to part 2 of our tutorial. In part 1 we created the basic structure of the site on which we are going to build our photography site. This is the second in our 4 part series on how to take a PSD file and convert it into a fully CSS based html page. These are the first in a series of tutorials in which we build a fully working Photography site, all in clean Xhtml and CSS. All the code, templates and files are available for you to play with, and we encourage you to download and play with what is provided. The design template is licenced under the creative commons licence.
We are still working from the same PhotoShop file (PSD) and in this part of the tutorial we are going to flesh out the layout a little more and by the end it should be looking a lot more like the design we are working from.
In case you need reminding or are new to this series of articles, below is what we are aiming to achieve. Here is the first PSD to CSS html tutorial
PSD to CSS part 2
At the end of part 1 we finished by creating the very top Navigation of the site, part 2 is going to start with the logo and tagline below the top nav. Lets get going..
Logo and Tagline
The first main graphical element is the logo and tagline that is reproduced in Figure 2 below.
Figure 2
Choices, choices , choices......
As with any graphical element you should look at ways that sections can be repeated to save on file size. Unfortunately for this element there is no uniform section that can be repeated as there is an undulating wave effect covering the whole layout. Also there are rounded corners and beveled edges to consider and the number of images used would be many.
Time to compromise....
In order to simplify things I am going to place most of the image in one go. I will remove the logo on the left side and also remove the lorem ipsum text from the right side. This will leave us with a background as shown in Figure 3.
Figure 3:
We can then place the company logo on the right hand side and also turn it easily into an anchor that will point to the home page as per usual.
The lorem ipsum text was removed from the image because it may be changing on different pages throughout the site so I wanted to make it easier to adjust later on. The text is clearly graphical and as it is part of the logo I am going to place it as an image but use some text replacement techniques so that the content is still available to search engines and people alike. The image will have to be placed exactly to match the background but this shouldn't be too difficult as you can compare the positions from the positions that you cut out from the PSD.
I am going to place the image shown in Figure 3 as a background image and then overlay the logo as a foreground image because I think the logo is important. As mentioned the lorem ipsum tagline text will be an image but will have a text alternative for screen readers etc. Any image replacement fails at some stage but some are better than others and again its another choice that only you can make as to whether you should follow this route or not.
There is another issue of what elements to use for the logo and tagline?
Some people advocate using an H1 element for the logo on the first page and some will argue against it. I think that an H1 should describe the page content exactly and if the logo has a text equivalent to the main heading then it could be used. In our page the logo says "Sanke Photography" but further down the page we have another heading that says Sanke Photography Tutorials. So which is it to be?
I can't answer this question for every case but it seems to me that the site heading should be Sanke Photography and the sub heading is "Sanke Photography Tutorials". Therefore in this case I am going to put the logo in an H1 element but to hedge my bets I am also going to include the tag line within the h1 as it will add extra content and meaning to the subject. However , I would have no objections to having the logo and tag line in paragraph tags and the main heading as the "Sanke Photography Tutorials" heading which is further down. As you can see I'm sitting on the fence here a bit so feel free to make your own mind up.
We are going to use an element called #tagline which will hold our logo and tagline so we need to create an element of the correct dimensions to hold our background image. We also need an overlapping effect due to the graphic on the right of the image that rises up alongside the text. We can create this with a negative top margin on #tagline which will pull the image upwards and next to the navigation. To avoid stacking issues we will set position:relative on the nav and on #tagline and then set the z-index on each so that the nav has a higher z-index and sits on top of the background on #tagline. This is accomplished as follows.
CSS:
-
ul#nav{
-
position:relative;
-
z-index:2
-
}
-
#tagline{
-
width:975px;
-
height:116px;
-
margin:-40px 0 0 0;
-
background:url(images/tagbg.jpg) no-repeat 0 0;
-
position:relative;
-
z-index:1
-
}
Remember that only positioned elements can have a z-index applied so you need to add position:relative if the element isn't already positioned. The other use of position:relative is that it sets a stacking context for further positioned elements and allows us to place our logo and tagline absolutely into position within this element and not based from the viewport.
The image replacement method we will use is to place the image in an inner element and then drag it on top of the text content to hide it. As long as we set a width that matches the height and with of the image we can then set overflow to hidden and any text that spills out will be hidden. This allows for the text to be available to screen readers and users alike should images or CSS be turned off. We do this for both the logo and the tagline and end up with HTML and CSS as follows.
HTML:
-
<div id="tagline">
-
<h1><a href="#">Sanke Photography<em><img src="images/logo.jpg" title="Sanke Photography logo" alt="Sanke Photography" /></em></a><span>Sanke Photography simply the best for your photography tutorials<em></em></span></h1>
-
</div>
CSS:
-
/* tagline code */
-
#tagline{
-
width:975px;
-
height:116px;
-
margin:-40px 0 0 0;
-
background:url(images/tagbg.jpg) no-repeat 0 0;
-
position:relative;
-
z-index:1
-
}
-
#tagline a,
-
#tagline a em{
-
position:absolute;
-
width:218px;
-
height:68px;
-
overflow:hidden;
-
left:27px;
-
top:39px;
-
}
-
#tagline a em{
-
cursor:pointer;
-
left:0;
-
top:0;
-
/*background:url(images/logo.jpg) no-repeat 0 0; use this as an alternative to image in the html*/
-
}
-
#tagline span,
-
#tagline span em{
-
position:absolute;
-
width:383px;
-
height:51px;
-
overflow:hidden;
-
left:408px;
-
top:51px;
-
}
-
#tagline span em{
-
left:0;
-
top:0;
-
background:url(images/tagline.jpg) no-repeat 0 0;
-
}
Images used:
The cursor:pointer is added to the em that is inside the anchor to help IE remember that it is still an anchor and show the correct cursor.
If we look closely at the html we can see that the h1 has no real styling and therefore we can get rid of the div surrounding the h1 and apply the ID directly to the h1 instead as follows. We simply give the H1 the tagline ID and remove the div surrounding it.
HTML:
-
<h1 id="tagline"><a href="#">Sanke Photography<em><img src="images/logo.jpg" title="Sanke Photography logo" alt="Sanke Photography" /></em></a><span>Sanke Photography simply the best for your photography tutorials<em></em></span> </h1>
The only CSS change is to remove the following code which is now redundant.
CSS:
-
#tagline h1{
-
margin:0;
-
}
The layout so far can be viewed here and you should check it matches with yours if you are working along with this. Just view source and you can see the code as the relevant CSS is still embedded in the head.
Figure 4 shows the result of our work so far.
Figure 4
That looks pretty good and at this stage you check in as many browsers as you can to make sure all is well. You should also try resizing the text to see if there is any overlap that is unacceptable. There are bound to be some minor things on text resize but you should endeavor to always keep the page usable within reasonable limits.
Figure 5 shows the text resized to smallest and largest in IE6 and all is looking good.
Figure 5
Search Box and Background Image
Moving on the next element which is the search box and the main page image graphic we need to decide what quality this image will need to be. Its a big image and will be a very heavy file size. I have optimised it down to about 50k (which is still large) but it was originally about 4 times that size. Because this is a photography site then we probably need to make sure the images are of a good quality and at this stage I would cut the image out and make 2 versions in case the client wants a better quality at a later stage. So when you save a big image like this do yourself a favour and save a higher quality version also just in case.
Remove the search box from the image and cut the image to the right dimensions. It is also worth looking a little further down the page and you will see that the next elements has rounded corners and beveled edges so we can save some time by including the top of the next element with the search box image and end up with an image like this and as seen in figure 6.
Figure 6
As this element is a fixed width and height and there is not really any text that will break out when resized so we can place this whole image as one background image with a fixed width and height. That makes things very easy and we can still overlay our search box in position using absolute positioning. In order to make use of absolute:positioning inside this element we will need to make sure once again that we set position:relative on the parent as follows.
CSS:
-
#search{
-
width:975px;
-
height:275px;
-
background:url(images/search-bg.jpg) no-repeat 0 0;
-
position:relative;
-
}
HTML:
-
<div id="search"></div>
That was pretty painless and our layout is now starting to take reasonable shape as seen in figure 7.
Figure 7
Main 3 column Section
We start to move on to some more complex areas and this is the main part of the site with three columns across the screen. The columns can simply be floated across but we are going to have to think about 3 main things.
- 1) The vertical faded gradient that is on each column.
- 2) The 3 equal columns that will match each others height.
- 3) The bottom round corner on the right column
Issue one has two solutions that we could use. We could take a vertical slice of each of the columns in turn of about 5px x 250px which contains the whole gradient. We would then need to repeat that image in each of the floated columns as required. The only problem with this method is that the PSD shows a slight gradient horizontally as well and also shows fading beveled edges. If we were to carry on with these small slices we would need at least another 4 images for each edge as well and forget about the horizontal gradient altogether.
The second solution is to simply cut the whole background out in one go. While this may seem a bit heavy handed we can actually cut a rather big image of 975px x 270px but optimise it right down to about 3k with little loss of color. This saves multiple background images and gets us much closer to the original design. This is the method we will use and results in this image being produced and can be seen in Figure 8. As with all the other images I have cut some of the background with the image to allow for the slight background fade.
Figure 8
Issue two can be tackled by creating a horizontal slice that contains all three column colours and we can repeat this on the main parent of this section that is holding all three floats. We create the slice by ensuring that we slice from the finishing colour of the vertical gradient. This gives us the following image.
Figure 9
This image will be repeated on the y-axis of the parent in this section and will provide full length column colours that always remain equal with each other. We will then overlay on the top part of this image the larger gradient image as shown in figure 8 so that we get the good gradient effect we wanted. This will mean that an extra element will have to be nested to hold this image but it is worth it.
As the page expands the repeating slice comes into play and if we have cut the images out correctly there should be a seamless transition between the two images.
Therefore the html we need will now be as follows:
HTML:
-
<div id="main">
-
<div id="content" class="clearfix">
-
<div id="col1"></div>
-
<div id="maincol"></div>
-
<div id="col2"></div>
-
</div>
-
</div>
The nested element named #content has been added to hold the big gradient image while #main will hold the repeating slice. As #content will also contain our three floated columns we need to make sure the floats are cleared and we can do that simply by adding our clearfix class to the element in question. This will ensure that the floats are cleared and the background of the parent extends with the floats and isn't left behind.
Floats are removed from the flow and will float out of their parents reaches unless you do something to stop them. I'm quite happy to use the 'clearfix' method in this case but you should be aware of the various issues associated with each method.
The CSS we need is simply as follows:
CSS:
-
#main,#content{width:975px}
-
#main{background:url(images/3col-bg.jpg) repeat-y 0 0}
-
#content{
-
background:url(images/3col-top.png) no-repeat 0 0;
-
min-height:270px;
-
}
-
* html #content {height:270px}/* for ie6 and under*/
The hack for IE6 and under is because it doesn't understand min-height but luckily does treat height almost as min-height which suits our purpose nicely. We need a min-height here because of the vertical gradient and if we don't allocate enough height our repeating slice will repeat from a section that doesn't match.
The result of the above code can be seen in figure 10.
Figure 10
You can view the state of play here in a real example also.
To allow content to be pout into these columns just requires us to measure the columns and apply the necessary margins to our floats to make then all line up where we want. the measurements I have come up with are as follows:
CSS:
-
#col1{
-
width:207px;
-
margin:0 28px 0 18px;
-
display:inline;/* cure IE6 double margin bug*/
-
float:left;
-
}
-
#maincol{
-
width:444px;
-
margin:0 48px 0 0;
-
float:left;
-
}
-
#col2{
-
width:180px;
-
float:left;
-
margin:0 50px 0 0;
-
display:inline;/* cure IE6 double margin bug*/
-
}
You must make sure that all these dimensions fit in your container otherwise floats will drop or be misplaced. We have 975px to play with and the widths and margins for the floats adds up to exactly 975px. There is also a fix in the code for IE6 and under which will double the margins on floats where their side edges meet their parent's container. The fix is to add display:inline to the floats in question and miraculously fixes the problem. Floats are display:block and cannot be made to be display:inline so the fix is really nonsense and should have no effect but luckily for us it cures this bug. Other browsers will take no notice of display:inline because it does not apply to floats.
All that's left (graphically) for this section is to somehow add a rounded corner base to the bottom of the right column as seen in the original design. Its also worth noting that the whole page is capped off with 2 more rounded corners as well. There is no real way that we can find the bottom of the right column in order to place a rounded base there because the right column content is simply a float of content height. Therefore we will take a different approach and simply apply the whole base by using a background image in our footer element to complete the illusion.
The Footer
Slicing the whole three column base in one goes results in an image like this which is also shown in figure 11.
Figure 11
The CSS is straight forward as follows:
CSS:
-
#footer{
-
width:975px;
-
padding:20px 0 0 0;
-
background:url(images/3col-base.jpg) no-repeat 0 0;
-
clear:both;
-
}
HTML:
-
<div id="footer"></div>
We can take a look at the layout so far and I have coloured the 3 columns red so we can check the positions are correct.
Figure 12:
That looks just about right so the red colour can now be removed. The layout so far can be seen in this live example.
Things Left to do
We have completed the major structure of the site and will take a rest now
In the next part of the article we will add the content for each column along with the search form that we forgot to put in place. We also need to find a way to implement one last remaining structural graphical issue in that we will need to find a way of placing the watermark image that can be seen at the bottom of the outer columns. This is the image and is shown in Figure 13 also.
Figure 13:
This will prove quite tricky as the image is anchored to the bottom of columns 1 and 3 and at times will overlap the gradient background. However we will leave that to next time but you may wish to experiment and try for yourself.
There will also be some tidying up to do and once we have tested the result thoroughly in the browers we want to support we will remove the CSS from the Head and once again validate the CSS and HTML to avoid any unforseen errors.
Part 3 of this article will follow in a couple of weeks
No comments:
Post a Comment