Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : PSD to HTML and CSS query!

[willmorgan0711]

Hi Everyone,
I am having some trouble working out how to convert my site that I am currently designing into html and css. I know my way around the 2 languages fairly well but I am stuck as to how to get the result that I want!

you can view the picture of the psd doc here - http://i.imgur.com/u3AYZ.png

As you can see, i have a header and a footer - I will add the various main content at a later stage - twitter feed, about me and portfolio.

Ideally I would want the blue bars for the header and the footer to be full width and having the blue circle (which i could out a white rim on to make a cut-out effect hovering somehow in the middle).

As I am not a css expert, code snippets are extremely helpful.

Thanks,
Will

[the_pm]

There are probably a dozen different ways to do what you're asking, and each way has its merits, depending on how the rest of your design is going to shake out.

If we *only* look at what you have now, and not put any thought into any other elements that may end up being placed in the header area, the path of least resistance is to create a a div with a set height and a blue background (making it the height that it is within your layout, export your logo with the white area as part of the image and transparency around it (trans PNG is probably best - no need to deal with artifacts from GIF matte). Then simply drop the image into the div in your HTML, center it with CSS and add top margin to push it out of the container in which it is sitting.

The upside is that you'll end up writing two lines of code total. The downside is this method will pretty much prevent ANYTHING else from being placed inside that header area or the white space to either side of the bottom half of the logo. Not full prevention, but annoying enough that you'll wonder why you ever coded it that way.

The moral of the story is that you're going to end up hurting yourself by coding a partially formed layout, only to find the technique you used doesn't match with the future development of the layout. Finish your canvas, then look for how to code it best!

Some designers like to design using a browser as they go. In my experience, this is a good way to waste a whole lot of time undoing damage done through ill-executed coding techniques. Why limit your creativity by coding a half-finished layout?

[willmorgan0711]

That is a fair point, maybe I should design the rest of it before marking it up. And i'm afraid I think I do have that progressive code then check in browser trait.

Thanks for your help,
Will

[Hutchbat]

to keep the white rim ! i'll suggest to add a white border to the circle ! cut the image and save it as transparent PNG !

[willmorgan0711]

Yeah, I thought of that, i sliced the top banner and made a small 3px slice and used the x-repeat and then centred an image in html for the circle!

Thanks,
Will

[designerweb]

I think you can use 960 grid system which is a good grid system for CSS and it will help to convert PSD to HTML.

All the best.