Hey everyone,

I am quite new to web programming. I have a little knowledge of html and css. I want to design a 'fluid' website i.e. is scales according to the view port.

I particularly want to put graphic borders around the diffent sections. I have created the images for the corners and a 1px width pattern to repeat on the horizontal sections but don't know how to lay them all out in css.

I have tried defining a div and then applying a background to it but didn't work. I want to put the corners in the background and then repeat the horizontal graphic across the page also in the background.



This is an example of what I'm looking for. The corners are rounded. The horizontal sections are 25px in height and the vertical sections 1px in width.

Can anyone either help me out with the code or point me in the direction of a good tutorial to achieve this?

I have googled this but can't quite find what I want.

Thanks

Enticy

The unit of layout you need to look at is em, much better than using %.

For a content box with rounded corners, css possitioning and em scaling: http://www.w3.org/Style/Examples/007/roundshadow

NB the above does not display properly in IE6 or less due to it not being able to handle alpha channel or transparencies. If you suspect your visitors might be using IE5.5 or IE6 you can make it work by using the method laid out here: http://homepage.ntlworld.com/bobosola/index.htm

Anyone using less than IE5.5 is strongly encouraged to update to at least IE6, not least because of security holes in IE5 and less.

Here are some tutorials on css round corners

h*tp://www.smileycat.com/miaow/archives/000044.php

hope this helps