please look at this link
sudhakargolakaram.co.in/files/layout.html

i have also included a link to download the photoshop file in this page. can anyone download the file and help me with this layout i would really appreciate any help.

the wrapper is 903px from the design there is a greu background at the top and background for the center where the content appears and background for footer

i have tried using 3 separate background images for top, content and footer i have also tried png, jpg

however the problem i am facing is

1.
to display the outer glow and the stroke color as created in the photoshop file in Layer 3

2.
also for the center div where the content will appear i have given min-height as 936px as i measured in the psd file if the content increases beyond this

3.
not sure how to create the vertical gap so that the white color and dark grey will have a gap as per the design i have tried using margin-bottom for the center div

please advice

thanks for your help

1 - create a horizontal 'slice' that includes the shadow and stroke, put it in as the background to your middle section and add repeat-y. You'll have to make it a PNG to get good transparency.

2 - I don't see the problem?

3 - put some padding-bottom on #wrapper

You could simplify this some if you didn't have that whole background as a single repeating image. The top gradient could be 1 graphic that ends at the pale gray, so you specify that pale gray as the body background color, gradient ends at the light gray and you see no difference.

I would make that bottom bar a separate div and fill it with that color, but it'll have to be outside the #wrapper so that it will be the full width of the viewport.

thanks for letting me know

please see this link

http://sudhakargolakaram.co.in/files/layout.html

i browsed this website http://www.venluree.co.nz and found the layout very different in terms of how the 4 background images are placed and i am trying create that kind of layout for practicing purpose of css layouts the file that i have created is at
http://sudhakargolakaram.co.in/files/layout.html


i have got it working however i am not very sure if the procedure i have done with my css code using z-index is the right way to go about


also my question is about the height of the layout, if the layout of the page increases or decreases the brown and green images on the left and right should grow or reduce in height according to the content in the center which has a white background

as of know i have set min-height: 990px; for div1

can someone look at my code and suggest what is the best and the right way to go about writting the css code for this kind of layout

thanks

using z-index like that is all wrong
just because there is a green square in the background of your site, does not mean you should create a div called green for it. Use a background image cleverly instead.

most of your divs should be position: static (that is, dont position them at all).
then use float, instead of positioning them with absolute values.

Hope this helps

most of your divs should be position: static (that is, dont position them at all).

No need to use even that in most cases. Beginners always over-use positioning - to their own frustration and detriment.

You can't use floats and absolute positioning at the same time - it's one or the other. Floats do one thing, positioning does another.

You really don't need all those divs either, there are other ways to achieve that layout with various colors.

please look at this link

http://sudhakargolakaram.co.in/files/layout1.html

my question is about the background image for the entire page, for this i have used bodybg.jpg for body tag and used repeat-x with a background color this is working fine


please click on the link i have provided to see the actual design image


what i need is the flowers that appear in the image should be the entire background for the body tag and the height of the image is 830px so that the entire image with the flowers appear along with the brown horizontal line which is almost at the bottom of the image


i have tried
<body>
<img src="design.jpg" class="img1" />

<div id="container">
<div id="wrapper">
content
</div>
</div>
</body>

img.img1{
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#container{
width: 100%;
height: 100%;
position: relative;
top: 0;
left: 0;
z-index: 10;
}


in this case i am not able to see the brown horizontal line which is at the bottom of the design image


please provide the code to fix this.



also another question is about placing the sheep image in the layout as of now i have used an img tag to display the image and in css
img.sheep{
position: absolute;
top: 10px;
left: 200px;
z-index: -1;
}

this is working but just wanted to check if this is the right way to place the sheep image

thanks

You seem to have figured it out.

Three threads on same topic merged