ANDROID BEST BUY

Thanks for staying with us and here we now have part 3 of 4 in our series of how to turn a psd to css/html. In part 1 and part 2 of this article we created some of the major elements that we will need in order to hold our content. This article will deal with the more difficult left column and all the content within it, as well as sorting out the. Files
Some people have pointed out that the files are missing for the original tutorials. So you can download the original PSD at the following location
PSD files
Note: its a zip file that requires downloading, so right click the above link.
As mentioned in the first article the psd, files etc are all licensed under the Creative commons licence.

psd - css tutorial continued

The current state of play can be seen in the image below and at the following location.
Figure 14

If we compare this to the original PSD shown in figure 15 below you can see that we still have some work to do.
Figure 15

The elements we will tackle in this and the following article can be listed as follows.
1) Position the watermark image at the base of the left and right columns
2) Add the search form on top of the big image in the header section.
3) Add content to the three columns along with the associated graphical icons
4) Add the copyright message to the footer.
Most of the above is just basic CSS and the only two main problem areas that I envisage causing trouble are the watermark images that sit at the base of the left and right columns and the graphical form elements. We will of course work through the rest of the content step by step but that shouldnt cause us any problems.

Watermark

For the first task we will try and place the following image at the base of the outer columns.

Figure 16

There are a number of problems to overcome and it is good to list them so that we have an idea of what needs to be achieved.
In no particular order we must :
1) Place the image at the bottom of the column so that it always sits at the bottom no matter how long the column is.
2) Ensure the image is in the background and under the text content
3) Ensure the image is on top of the existing background fade and matches seamlessly
To accomplish Number 1 above requires a little bit of lateral thought because the columns actually have no height in reality as they are created by background images on the parent container. Therefore we will follow the example we set in part 1 of the article and we will position the watermark from an element that is below the columns which is our footer element. As the footer already has a background image in place we cant use another background image on the same element. Therefore I am going to place the images absolutely from the footer and place them with a negative top position to bring them into place.
For number 2 above we will need to ensure that each of our elements has the appropriate z-index level set so that we can control the level of the initial background, the absolutely placed watermark image and the text content. That means there are 3 levels to consider in this process. In order for z-index to take effect we must make sure that non positioned elements have position:relative applied to create a local stacking context and also allow us to place the absolute elements with respect to the current context and not the viewport.
Number 3 is a little more involved and I am not sure what is going to work here and will have to use trial and error and see what the end result looks like. As I am constructing this layout in real time (so to speak) I am allowing myself the option to change my mind later if the approach taken doesnt work out very well. I have two methods in mind and the first method is to create a transparent gif with a transparent background. The background will be green to match the current background color but will be set as the transparent color so that it hopefully hides the ragged images in our index transparent gif. If this method fails (doesnt look good) then I may need to use a transparent PNG and use the alpha image loader filter for IE as already mentioned in earlier in this article.
Tackling Number 3 first I have created this image for the left column and this image for the right column by slicing the appropriate elements from the PSD.
To position the image (numbers 1 and 2) the footer first needs to have position:relative added to create a stacking context and also to allow us to be able to set a suitable z-index. To ensure the image stays on top of the content above we will give the content above a z-index of 1 and give the footer a z-index of 2. Then we can give the actual floated columns a z-index of 3 to keep the text above the watermark image. We do not have any background images or background colors on the floated columns themselves so there is nothing to worry about there.
The CSS needed is as follows:
The extra CSS has been merged into the existing stylesheet as shown above. The only things to note are that I have used a class called "watermark" which defines a few consistent properties for the elements and then I used classes of "w1" and "w2" to provide the positional differences. This saves about 4 lines of code but is worth doing because anything that reduces code weight is good as long as readability and usability doesnt suffer. The classes are applied together using a space to separate them.
e.g. class="watermark w1"
You can use as many classes as you want in this manner as long as you separate them by a space and they will follow the normal rules of the cascade in that the later styles of same weight and origin will win out.
There are no spare elements to use for the watermarks so I am going to use two empty divs and then absolutely place the divs into position. I dont like using empty elements but sometimes there isnt a choice and I just have to grin and bear it.
The html is as follows:
The result as seen in Firefox is shown in Figure 17.

Figure 17

Although the images look really jaggy when viewed individually and out of context we can see that once they are placed on the background then the edges are softened and merge in with the background. Bearing in mind that most of the time there will be text content overlapping these images Im happy to accept this level of quality. If you wanted much sharper images then you would need to use PNG images with the aforementioned hacks for IE6 and under.
The live example can be seen here for you to examine and compare.
For those of you using IE6 and under you will notice that we have a problem!
The bottom of the layout (which was previously fine) has all gone awry as seen in figure 18 and is in desperate need of help.

Figure 18

We seem to have lost the bottom part of the layout and we need to bug hunt and find out what caused IE6 to misplace this section.
The easiest way to see whats causing the problem is to retrace our footsteps and remove one element at a time until we find the trigger for this behaviour. This is why you must check your work at each stage in various browsers or you could build a whole page on this broken issue.
The first step in my bug hunt is to remove the two watermark divs from the HTML as this is the most likely culprit. Removing the 2 divs and checking again in IE shows that everything is now back to normal. Now that we know what the problem is we need to find away of doing what we want without breaking IE6. Is there a specific style that triggers the effect. To test this out we need to put back the HTML for the watermark divs and then selectively delete styles that apply to them and see if we can trigger a response. It soon becomes apparent that we can delete all the styles that refer to the watermark without finding an actual trigger for the effect.
This leads to the conclusion that the problem must be the HTML that we added. We already know that removing the HTML will set the layout back to its correct position. Fortunately I have seen this bug before and know what the solution is. IE6 doesnt like the fact that we have placed empty divs in the footer especially with all the styles currently applied to it. The solution is easy and we simply need to ensure that we have some real content in the footer and our image will return. If we add a line of text that will eventually be the copyright message we see everything jumps back to normal.
IE6 now shows everything correctly and we can continue with our testing by adding content to the three columns and check that our layering is in fact correct and everything overlaps as it should. Grabbing the text content form the PSD and inserting it into the HTML (unstyled for now and unformatted) we can then test our layout so far.
Unfortunately, we must have done something wrong because our layout has overlapped incorrectly as can be seen in this live example and in the screenshot below.

Figure 19.

We have incorrectly addressed the z-index layering of our elements and the watermark is now on top of our text content which is not a good thing.
Referring back to our original plan we set our content (#main) to have a z-index of 1 and the footer a z-index of 2 and then we gave the columns a z-index of 3. Although this may sound logical it is in fact flawed because the columns are contained within #main which only has a z-index of 1. Ultimately it is the parents z-index that determines the stacking level of all its children in relation to other elements outside our current stacking context. We could have given the columns a z-index of 100000 but it would be to no avail because #main is z-index:1 and the footer is z-index:2 and is outside of #main. Therefore the footer will always be on top of #main and any of its children no matter what their z-index may be.
One solution to this problem is to remove the z-index from #main and to bring all the children under the same roof and to have the same parent (#outer). This means that the childrens z-index will be honored amongst each other and this does indeed fix the issue in most browsers as shown in the Firefox screenshot below.

Figure 20

Unfortunately, and once again, we have problems in IE all the way from IE7 backwards. The watermark still overlaps the text even though we have removed the z-index from #main. The problem is that IE incorrectly assigns a z-index of zero when an element is positioned instead of applying a value of "auto" as defined in the CSS specifications. This means that IE will always create a local stacking context for its childre

visit link download