PDA

View Full Version : Converting this design to xhtml/css...



YoshiGoneMad
Feb 11th, 2010, 06:00 AM
I've been learning to code for about 2 months now and know how to convert basic designs into valid xhtml/css. Now, I'm trying to work on more complicated designs.

Can some give me a hint on how to convert this to xhtml/css: http://postimg.com/image/12000/11243.jpg

I don't need any code from you guys, just an explaination on what needs to be sliced and used a background etc.

I notice that with these type of designs, I need to make one large image and used it as a background, than use relative position to align the text?

YoshiGoneMad
Feb 11th, 2010, 11:19 AM
Any one?

VIPStephan
Feb 11th, 2010, 11:58 AM
Basically this is a standard two column layout with a header. The navigation on the left is one column and the main content on the right is the other one, so http://bonrouge.com/2c-hf-fixed.php could give you some inspiration.

I see a repeating pattern in the green background image so cut out one section of this image that can repeat horizontally and vertically and place it in the background (apply to body element). The header/cloud kind of image would be another one, possible without the green background (i. e. transparent bg) that would become the background image of the header, and thus, be layered over the body background.

Then we have that eye catcher text in the middle. If we keep it simple then you’d just cut the entire box with photo (but without the text), apply it as background to a division with the respective text in it. Apply some padding to that div (like 20px on either side except the right where you apply as much padding as needed to keep the image clear). Also the headline is probably becoming a headline (who would have thought?) where you’d need to remove the default top margin.

YoshiGoneMad
Feb 17th, 2010, 10:50 PM
Basically this is a standard two column layout with a header. The navigation on the left is one column and the main content on the right is the other one, so http://bonrouge.com/2c-hf-fixed.php could give you some inspiration.

I see a repeating pattern in the green background image so cut out one section of this image that can repeat horizontally and vertically and place it in the background (apply to body element). The header/cloud kind of image would be another one, possible without the green background (i. e. transparent bg) that would become the background image of the header, and thus, be layered over the body background.

Then we have that eye catcher text in the middle. If we keep it simple then you’d just cut the entire box with photo (but without the text), apply it as background to a division with the respective text in it. Apply some padding to that div (like 20px on either side except the right where you apply as much padding as needed to keep the image clear). Also the headline is probably becoming a headline (who would have thought?) where you’d need to remove the default top margin.

Thanks for the reply, what didyou mean "apply it as a background to a division"?

Also how do I make the header compatible with higher resolution?

VIPStephan
Feb 17th, 2010, 11:19 PM
Thanks for the reply, what didyou mean "apply it as a background to a division"?


#top_article {
background: url(images/bg_top_article.png) left top no-repeat;
height: …;
width: …;
padding: …;
}




<div id="top_article">
<h2>Who is more British than Blur?</h2>
<p>…</p>
</div>



Also how do I make the header compatible with higher resolution?

You don’t. Just cut out the header image (title with clouds and sun rays) and position it in the center. The green background will repeat itself to eternity behind.