From PSD to CSS/HTML in Easy Steps – Part 3


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

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

PSD to slice

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 shouldn’t 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 can’t 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 doesn’t 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 (doesn’t 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:

[CSS]/* main content */
#main,#content{width:975px}
#main{
background:url(images/3col-bg.jpg) repeat-y 0 0;
position:relative;
z-index:1;
}
#content{
background:url(images/3col-top.png) no-repeat 0 0;
min-height:270px;
}
* html #content {height:270px}/* for ie6 and under*/
#col1{
width:207px;
margin:0 28px 0 18px;
display:inline;/* cure IE6 double margin bug*/
float:left;
position:relative;
z-index:3;
}
#maincol{
width:444px;
margin:0 48px 0 0;
float:left;
position:relative;
z-index:3;
}
#col2{
width:180px;
float:left;
margin:0 50px 0 0;
display:inline;/* cure IE6 double margin bug*/
position:relative;
z-index:3;
}
/* footer and copyright */
#footer{
width:975px;
padding:20px 0 0 0;
background:url(images/3col-base.jpg) no-repeat 0 0;
clear:both;
position:relative;
z-index:2;
}
.watermark{
background:url(images2/flame2.gif) no-repeat 0 0;
position:absolute;
width:186px;
height:209px;
clear:both
}
.w1{left:45px;top:-189px}
.w2{
right:45px;
top:-170px;
height:176px;
background:url(images2/flame3.gif) no-repeat 0 0;
}[/CSS]

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 doesn’t 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 don’t like using empty elements but sometimes there isn’t a choice and I just have to grin and bear it.

The html is as follows:

[HTML]

[/HTML]

The result as seen in Firefox is shown in Figure 17.

Figure 17

Watermark

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 I’m 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

IE6 Problem

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 what’s 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 doesn’t 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.

[HTML]

This is a copyright message

[/HTML]

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.

Incorrect z-index

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 children’s 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

z-index removed

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 children and causes the problems we are experiencing. In order to combat this behaviour we also need to remove the position:relative from #main so that a local stacking context isn’t created and once again all children can live under the same roof.

Removing the position:relative from #main fixes IE and we now get the result seen in figure 20 above. The only downside is that this prohibits us from placing any absolute elements in relation to #main if we ever needed to in the future. However, for the time being we don’t need to do this so we will call this a solution for now and end up with this final code which you should compare to yours if you are working along with me. Ignore for the moment the content that we pasted from Photoshop as the html needs to be tidied up and applied semantically so we will be changing it all shortly.

Column 1

Now that we have sorted the watermark and the layering issues we will turn our attention to the more mundane tasks of styling the content in the columns. We already have some dummy html in place but now we need to format it and style it correctly. As a refresher see Figure 21 for the result we want to achieve.

Figure 21

left column layout

The issues to overcome in this section are as follows.

1) Create the heading at the appropriate level and in the closest font to match the PSD (or perhaps use an image if we can’t get close).

2) Slice the graphical components from the PSD. (i.e. The various icons, the faded underline, the photo of the month image) .

3) Position the elements with the correct spacing and margins to match the design.

The only slightly complicated task above will be placing the page icon that goes before the lorem ipsum text. We could use a background image for this at the start of the line but we would need to ensure the line was high enough to show the image and that content doesn’t wrap over the image. Although we could do this with padding it would mean that all lines will be as high as the image which probably isn’t a good idea.

A second approach would be to float the image into place in the background of an element of appropriate dimensions and this would allow the text to wrap quite nicely. All that would be needed would be to insert a span and apply the appropriate styles to it. The only downside is that all the dimensions would need to be specified and addressed correctly in order for the image to sit correctly.

A third (and my preferred) approach is simply to use an image in the html. Nine times out of ten when a designer sticks an icon in the page like the one above they also want that icon to be a link to more content. It is so much easier to use an image in the HTML as it does not incur additional code overheads or extra mark-up in order to place it correctly. As long as the image is “inline” by default we can control its vertical alignment and it can easily be turned into a link if required all without setting dimensions or much CSS at all. It also aids accessibility in that the image alt attributes are available to all unlike a background image. Therefore we will take this approach and see how it all pans out.

Headings

Let’s tackle the headings first.

The first thing to note is that the designer has again used a non standard font and we need to get the closest match we can or use an image combined with image replacement techniques (or SIFR if you are into flash based alternatives). I am going to try to use Arial text in the same way that I did for the navigation because it looks quite similar to me. It is so much better to have text headings in the HTML as it is better for all and of course so much easier to work with. However if it doesn’t look good then it’s another matter and you will need to discuss with your client what options to take.

The results look good enough for me but I know they won’t be good enough for some and this is a decision only you can make.

I am going to use Arial in an H3 heading as I think that will be the correct level for this column. It seems that this style is consistent so I will style the h3 directly without the need for a class. I also notice that column1 (#col1) is slightly misplaced so I will line it up by changing the margins a bit. The revised CSS is as follows:

[CSS]
#col1{
width:207px;
margin:0 21px 0 25px;
display:inline;/* cure IE6 double margin bug*/
float:left;
position:relative;
z-index:3;
}
[/CSS]

The extra style for the H3 element also follows:

[CSS]
h3{
color:#fff;
text-transform:uppercase;
font-style: italic;
font-weight:bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size:131%;
margin:6px 0 10px 0;
letter-spacing:-.04em;
}
[/CSS]

Once again we have let CSS turn the text into uppercase so that we don’t have to type in capitals in out HTML. I have also used letter-spacing to shorten the width of the text a little bit so that it matches more closely the PSD.

Figure 22 shows a comparison between our HTML version (on top) and the original PSD heading below.

Figure 22

Heading comparison

Although there are still some differences I am happy to proceed as it is far better to use normal text than it is to have to use images and image replacement techniques.

Next we tackle the text under the heading which includes the page icon and then some text with a border that fades at the ends (refer to figure 12 above). Looking at the 3 items under the “Latest News” heading we could almost think of them as a list of topics and use a list structure. However, I feel that paragraphs are more appropriate as they are really just three paragraphs of content following each other.

The icons and the underline will have to be cut out as transparent GIFs because they are used on different backgrounds. Again you will run into the jagged image problem but if you choose your transparent colors carefully it should be good enough for the task in hand. I have created three images that we need for the next section and they can be found here.

Page Icon Page Icon

UnderlineUnderline

Photo of the month Photo of the month

The lines of text are spaced apart so we will use line-height to space them correctly and margins and padding to create space around them. I am going to put the underline in the background of the p element and place it central and at the bottom which means we will need some padding bottom on the p element to allow room for this image to display.

Although, it isn’t really needed I am going to wrap the 3 paragraphs of text in a containing div so that I can apply styles to the elements inside that div without the need for lots of classes (although we will need some classes).

The html for the top section is now looking like this:

[HTML]

Latest News

Page Icon Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Page Icon Nam magna lectus, dapibus ut, ultrices at, fermentum eget, ligula.

Page Icon Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Read All News »

[/HTML]

The top section is contained inside a div and the icon image is in the html. The underline is image is placed in the background of the p element as mentioned above. The » (double arrow) has been put inside a span because it needs to be styled as a white color compared to the rest of the text which is black. We can then target the span via the parents class without needing to add another class to the span. The downside of this would be if you had more span elements in that section that you didn’t want styled and then you would need to use a class for the span instead. Fortunately we don’t have need of another span so we can simply target it via the parent’s class. e.g.

[CSS].news span{color:#fff}[/CSS]

For the last line in that section I have added a class of “readmore” to apply to the last line which needs to be right-aligned and bold. I could have done this without a class by targeting the anchor directly but I though it wise to create a class in this instance as the “readmore” style is likely to be used elsewhere. If you look closely at the HTML above you will also see I have applied a class called “last” to the last paragraph in that section. The reason for this is that the last paragraph doesn’t have an underline so we need to remove the image from the last one. Unfortunately we cannot use the :last:child css3 selector as IE doesn’t support it so we need to add another class to the element concerned. Finally, to get the text to the right only needs text-align:right applied to the p element and that more or less completes the top section.

The Full CSS for that section is as follows.

CSS

[CSS]
.news{
width:207px;
color:#252e1c;
}
.news p{
font-size:85%;
background:url(images2/underline.gif) no-repeat center bottom;
padding:0 7px 8px 0;
line-height:1.4em
}
.news p.last{
background:none;
padding-bottom:1px;
margin:0 0 .4em 0;
}
.news p img{
margin-right:2px;
vertical-align:middle;
display:inline;
}
.news span{color:#fff}
p.readmore{
font-weight:bold;
text-align:right;
margin:0 0 1.4em 0;
background:none;
}
p.readmore a{
text-decoration:none;
color:#252e1c;
}
p.readmore a:hover{
text-decoration:underline;
}
[/CSS]

Notice that the “page-icon” image has been declared as inline so that it behaves like text. The vertical alignment was also set to middle so that it gets positioned correctly in respect to the text.

[CSS]
.news p img{
margin-right:2px;
vertical-align:middle;
display:inline;
}[/CSS]

Although images are “inline” by default we have set all images to be block in out global stylesheet and that is the reason we needed to set them back to “inline” here. I also put a little extra right margin on the image to give a bit of breathing space.

The next task is the “Photo of the Month” section which uses the same style of heading and text as the previous section. Therefore we can re-use our “news” class in this section but also add another (space separated) class to over-ride a few differences in this section.

If you study figure 21 above you will see that the “Photo of the Month” section is actually pulled over to the left by about 7 pixels or so compared to the news section above.To move this section into line I am going to use relative positioning rather than margins (although I could have used margins also). This is to show you how relative positioning can be used without harming the layout.

These are the photo styles:

[CSS]
.photo{
position:relative;
left:-6px;
}
[/CSS]

This will shift the element 6px to the left from where it was. It will not change the flow of the document at all and will cause no ill effects in this situation. However if we had shifted the element down the page with relative positioning you would find that it would overlap other elements and be a pain to work with. The fact of the matter is that position:relative only moves elements visually and not physically. They always occupy their original place in the page but just appear to be somewhere else. As far as other elements are concerned the element has not moved at all. This is why you must be careful if you use position:relative because it’s not really meant for structural layout but for more subtle effects or where you want elements to overlap without disrupting the flow of the document.

If you want to move an element then most times you would use margins because this would keep other elements away by the distance specified and cause other elements to re-flow accordingly.

In this “photo” section we have another heading the same as the news section so we will use the h3 again which is already styled correctly. The big image that follows is really content and should be in the HTML rather than a background image so I will wrap the image in a p element and insert it into the page as shown below.

HTML

[HTML]

Photo of the month

Photo of the month

[/HTML]

The criteria for determining whether an image should be in the background or the foreground is simply to say to yourself :

“Is the image for decoration only”?

If the answer is yes it is decoration and bears no importance to the content then it should be a background image. If on the other hand the image is important to the content (such as this photo of the month image) the it should be in the HTML and not the background. I have wrapped the image in a p element because I dislike anonymous inline boxes and always ensure that inline elements are in a suitable semantic container.

We need to cancel out a few styles that were applied via the “news” class as this bottom section doesn’t have an underline image and the spacing of the H3 is slightly different. Therefore we will use the “photo” class I mentioned earlier and over-ride a few styles as follows.

[CSS]
.photo h3{margin-bottom:8px}
.photo p {background:none}
[/CSS]

We also have the opportunity of re-using our “readmore” class and can apply it to the “Visit Gallery ” text at the bottom. Also needed is the “last” class to set the correct bottom margin.

The full html for the section is as follows:

HTML

[HTML]

Photo of the month

Photo of the month

¤ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Visit Gallery »

[/HTML]

We can now compare the PSD and the HTML versions side by side for this section.

Figure 23

left column comparison

 

There are minor pixel differences and if you wanted to spend a little more time you could make the examples even closer but I think that the above is close enough for now and looks pretty good to me. In fact its quite hard to tell which image is the original PSD……….(It’s on the left).

Now would be a good time for you to compare your code with the state of play so far and to validate your code and browser check once again.

I notice in the above image that the final paragraph of the PSD is slightly more indented than mine so we can target that paragraph as it already has a class of “last” applied to it and pad it out a bit.

[CSS].photo p.last{padding-left:5px}[/CSS]

That wraps up the left column and we can move onto the right column in the fourth and final part of our tutorial series. I hope you are following along and enjoying the tutorials, feel free to leave questions and comments below.

Blogging

{ 24 comments… add one }

25 comments on “From PSD to CSS/HTML in Easy Steps – Part 3

  1. Komissar on said:

    Thank you for such an informative tutorial, keep going, your doing well. I’ve learned alot through your examples and made plenty of my own mistakes when I try to get clever and do something you didn’t cover, but that’s how we learn. I wouldn’t have even tried without reading your tutorial, but it has helped me to better understand html and css through a work flow. Thank you again, looking forward to #4.

  2. shannon on said:

    Yes, thanks for these tutorials. I am struggling with browser compatibility and you really helped to shed light on some of the issues I’ve been having. I can’t wait for the 4th tutorial!

  3. FrozenPixels on said:

    Fantastic tutorial. I have been having difficulty getting started with CSS and PS and this best tutorial I’ve ever come across. Thank you so much, it has explained so much and most importantly it answered “where do I start”.

    Appreciate your efforts.

  4. Mohsen on said:

    Great Tutorial!
    This part has also added to acomment’s list.
    Regards

  5. nice, this 3rd part complete a lots of great stuffs, thanks

  6. Rafael on said:

    Awesome tutorial!

    Waiting for the part 4… =)

  7. Darryl on said:

    Love these tutorials, looking forward to Part 4.

  8. Darryl on said:

    Excellent tutorials, can’t wait for Part 4.

  9. Dustin on said:

    Alright so im not real new to coding at all but im new to CSS and basically im trying to only have 2 columns for content and for some reason i cant figure out how to position them? So far this is the best tut ive found for coding with CSS so if you could help me out i would love you for life =].

  10. very nice work indeed

  11. Hi, been looking forward to part 4,
    are you close to finishing it? it has been a while…

    Thanks
    Inua

  12. Great tuto,
    amazing…looking to part 4 also,
    Are you still working on it?
    looking forward on your positive news,

    Thanks
    Zomme

  13. Carlos on said:

    This is a great article. I just used negative margins recently. They are very tricky, especially with IE6. I also dealt with a designer who had some very large issues with understanding that everything could not be an image. I continually had to tell them that HTML text was best for the text use. I am a designer and a CSS coder and trying to deal with a straight up designer with no HTML experience is frustrating when they are so particular about layouts, spacing and such. Things that are 2 or 3px difference, which looked fine to me really rubbed them the wrong way. Plus they gave me a layout that was extremely difficult to put into CSS. No real columns, mostly image based text, and use of Javascript that makes the page load kind of slow.
    So this article is very helpful thanks.

  14. where can you get those various icons and the faded underlines?

  15. CSSHowTo.com on said:

    They are included in the images in the downloadable Zip file.

  16. yea i saw them there..but is there like a site you can get those and other different kinda of icons or did you just make them

  17. CSSHowTo.com on said:

    We made them, but you can get them online. Just do a search for web icons.

    This website has a few web 2.0 icons
    http://www.elementoutpost.com/

    Also check out www.istockphoto.com as there are many icons on there, im sure some people will also suggest other places. Usually our designer does them though!

  18. Very nice work indeed!

  19. This is a greeaaattttt tutorial. I have read three parts so far and it is a lot to digest. So you may have already answered this question. Apology if redundent. How much of this tutorial can I use? I’d like to use a bit of it, not so much the pics obviously but the lay out, html, and css.
    Thanks

  20. CSSHowTo.com on said:

    If you download the package, you will see there is a Creative Commons licence in the folder. That explains what you can and cant use.

  21. Thanks tutorial added

  22. katydorjee on said:

    Its true, nice one… i was following this from long back. But i saw some pple, doing all in html table based(old fashion)…
    people follow above tutorial, css rocks!

  23. mlsp reviews on said:

    I’m excited to uncover this great site. I want to to thank you for ones time due to this fantastic read!! I definitely really liked every part of it and I have you book-marked to check out new stuff on your web site.

    May I simply just say what a relief to uncover a person that actually understands what they’re talking about on the web.
    You definitely know how to bring an issue to light and make it important.
    More and more people ought to check this out and understand this side of your story.
    I can’t believe you are not more popular since you definitely have the gift.

    Excellent post. I absolutely love this website. Thanks!

    It’s nearly impossible to find knowledgeable people in this particular subject, however, you seem like you know what you’re talking about! Thanks

    You should be a part of a contest for one of the most useful blogs on the web. I’m going to highly recommend this site!

    An interesting discussion is worth comment. I do think that you need
    to write more on this issue, it may not be a taboo matter but usually people don’t talk about these topics. To the next! Many thanks!!

    Good day! I just wish to give you a big thumbs up for your excellent info you have got here on this post. I’ll be returning
    to your website for more soon.

    When I initially commented I appear to have clicked the -Notify me when new
    comments are added- checkbox and from now on whenever a comment
    is added I get four emails with the exact same comment. Is there a way you are able to remove me from that service?

    Thank you!

    The next time I read a blog, Hopefully it does not fail me as much as this particular one.
    I mean, I know it was my choice to read through, nonetheless I truly thought you would have something useful to talk about.
    All I hear is a bunch of crying about something that you could
    fix if you were not too busy searching for attention.

    Spot on with this write-up, I absolutely believe that this amazing
    site needs much more attention. I’ll probably be returning to see more, thanks for the
    information!

    You are so cool! I don’t suppose I have read through anything like that before. So good to find another person with genuine thoughts on this subject matter. Seriously.. many thanks for starting this up. This web site is one thing that is required on the internet, someone with a little originality!

    I love reading an article that can make people think. Also, thanks for permitting me to comment!

    Right here is the perfect blog for everyone who would like to understand this topic. You understand a whole lot its almost hard to argue with you (not that I really will need to…HaHa). You certainly put a fresh spin on a topic that’s been
    discussed for ages. Wonderful stuff, just great!

    Aw, this was a really nice post. Spending some time
    and actual effort to produce a top notch article… but what can I say… I hesitate a lot and
    never manage to get anything done.

    I’m impressed, I must say. Seldom do I come across a
    blog that’s equally educative and amusing, and without a doubt, you’ve hit the nail on the head. The problem is something not enough people are speaking intelligently about. Now i’m very happy I came
    across this in my hunt for something regarding
    this.

    Oh my goodness! Amazing article dude! Thank you, However I am having problems with your RSS.

    I don’t know the reason why I am unable to subscribe
    to it. Is there anybody having the same RSS issues? Anyone that
    knows the solution can you kindly respond? Thanx!!

    An impressive share! I’ve just forwarded this onto a coworker who has been conducting a little research on this. And he actually bought me dinner simply because I stumbled upon it for him… lol. So allow me to reword this…. Thank YOU for the meal!! But yeah, thanx for spending time to talk about this issue here on your website.

    After exploring a few of the blog articles on your blog, I seriously appreciate your way of blogging. I added it to my bookmark site list and will be checking back in the near future. Take a look at my website too and tell me your opinion.

    This website really has all of the information and facts I needed concerning this subject and didn’t know who to ask.

    There is certainly a great deal to find out about this issue. I love all of the points you made.

    You’ve made some decent points there. I looked on the internet to learn more about the issue and found most people will go along with your
    views on this site.

    Good post. I learn something new and challenging on blogs I stumbleupon everyday.
    It will always be useful to read articles from other authors and
    use a little something from other websites.

    I blog often and I genuinely thank you for your content.
    This great article has really peaked my interest. I’m going to take a note of your website and keep checking for new information about once a week. I subscribed to your Feed as well.

    Pretty! This was an extremely wonderful article. Thanks for supplying these details.

    Greetings! Very useful advice within this post! It is the little changes that will make the largest changes. Many thanks for sharing!

    Hello there! This post couldn’t be written much better! Looking at this post reminds me of my previous roommate! He always kept preaching about this. I will forward this post to him. Fairly certain he will have a great read. Many thanks for sharing!

    Hi there, I do think your web site could be having internet browser compatibility issues. Whenever I look at your blog in Safari, it looks fine however, when opening in IE, it’s got some overlapping issues.
    I just wanted to give you a quick heads up! Besides that, excellent site!

    Having read this I thought it was really informative.
    I appreciate you finding the time and effort to put this
    content together. I once again find myself spending way
    too much time both reading and leaving comments. But
    so what, it was still worthwhile!

    Hello! I could have sworn I’ve been to this blog before but after going through many of the articles I realized it’s new to me.

    Anyways, I’m certainly happy I came across it and I’ll be
    book-marking it and checking back often!

    I want to to thank you for this wonderful read!!
    I certainly enjoyed every little bit of it. I’ve got you saved as a favorite to look at new things you post…

    Hi, I do think this is a great blog. I stumbledupon it ;) I’m going
    to come back yet again since I book marked it. Money and freedom
    is the best way to change, may you be rich and continue
    to guide other people.

    Your style is really unique in comparison to other folks I’ve read stuff from. Thanks for posting when you’ve
    got the opportunity, Guess I will just bookmark this web site.

    I was able to find good info from your blog articles.

    Excellent article! We are linking to this particularly great content on
    our site. Keep up the great writing.

    That is a really good tip especially to those new to the blogosphere.
    Brief but very accurate info… Thanks for sharing this one.

    A must read post!

    I could not refrain from commenting. Perfectly written!

    bookmarked!!, I really like your blog!

    Excellent article. I’m experiencing a few of these issues as well..

    Way cool! Some extremely valid points! I appreciate you penning this post plus the rest of the website is also very good.

    Excellent web site you’ve got here.. It’s difficult to find high
    quality writing like yours nowadays. I seriously appreciate individuals like you!

    Take care!!

    This is a topic which is close to my heart… Cheers!
    Where are your contact details though?

    I absolutely love your site.. Excellent colors & theme. Did you make this amazing site yourself?
    Please reply back as I’m attempting to create my own blog
    and want to know where you got this from or just what the theme is called.
    Kudos!

    I really like it when people come together and share ideas.
    Great website, continue the good work!

    Great info. Lucky me I ran across your site by accident (stumbleupon).
    I’ve saved it for later!

    This website was… how do I say it? Relevant!! Finally I’ve found something which helped me.

    Cheers!

    Everything is very open with a clear description
    of the issues. It was really informative. Your website is extremely helpful.
    Thank you for sharing!

    I must thank you for the efforts you have put in penning this site.
    I’m hoping to check out the same high-grade content by you later on as well. In truth, your creative writing abilities has motivated me to get my very own website now ;)

  24. Darrick Stent on said:

    Quite educational thank you, I reckon your current followers may want even more well written articles of the nature continue the excellent perform.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.

Leave a Comment