Hi people

There is a major problem that I am facing with a website I am making for a web design competition. The site is to be designed for an environment related organisation.


The current page that I have made is at http://www.alchemy-education.com/Sparsh

The style sheet can be found at http://www.ntudebsoc.org/Sparsh/files/style.css

I want to create something like what is shown in the jpg image here.... http://www.ntudebsoc.org/Sparsh/target.jpg

I have the image files to create the silhouette tree background present at http://www.ntudebsoc.org/Sparsh/images/bgright.gif
and
http://www.alchemy-education.com/Spa...ges/bgleft.gif

I am really having problems arranging the divs to create the final website. I am new to CSS so could someone suggest improvements to the original code and also help me perform changing the background in the way as is shown in the image.
Moreover , the site has to be designed for a 1024x768 resolution however I would really want to make it look the same in all kinds of resolutions.

Regards and thanks a lot in advance....

Cheers
Sparsh

Not sure I understand what you're asking -- are you wanting a shadow affect?

Ok, the tree background isn't all that hard to do, actually, but your design is going to have to be a fixed width to pull it off.

Use the trees on either side of a BLANK white space (where your page content will go) as a background on a container #div, the ENTIRE graphic, trees on both sides with a white gap in the middle. set to repeat:none or to repeat only vertically. Make the body background color that same light green.

Use your #wrapper just as you have, fixed width and centered, it will be 'on top' of the #container div holding your tree background.

In your CSS you would need the following:

body {
font-family: Arial, Helvetica, sans-serif;
line-height: 12pt;
font-size:14px;
color: #000000;
margin: 0px;
text-align: justify;
background: #DAFAD1;

}
#container{
background: url(trees.jpg) center top no-repeat;
}

In your HTML, add <div id="container"> above <div id="wrapper"> and add the extra closing div at the bottom.

A couple of other things:
Set your #wrapper to position: relative
- background-repeat: repeat - is not necessary as repeating in both directions is the default.
- Do not use PX for font sizing, use % or em.

Why are you using a TABLE for the top section ?? Not necessary, can be done with CSS.
- for your top links, use an unordered list.

First of all thanks a lot for the suggestion ... i wonder why i dint think of this before....

Only one thing i want to confirm is how do i set the width of the container tag.. should it be something like width:100% ..... moreover if that is correct then my trees have to be of some fixed width.. will overflow:none make sure that i do not get a horizontal scroll bar in smaller resolutions ????

thank you once again.. I have always loved WT for all its help...

I am making this site for a competition. Could suggest ways I could make the site look more appealing. It seems a bit too dull for an environment website..

cheers
sparsh

I wouldn't do that..Why don't you use Background-Image: image.png; and then you should have somewhere to type..

eXistenZ - I don't think you understand. If he uses the trees image as I suggested, the background is set in the CSS, it takes up NO space in the html whatsoever, leaving plenty of 'space' to type.

Sparshpolly - you do not have to set a width on #container, it will be 100% by default.
I played around using your example jpg, which had a width of 1000px. that will work just fine as long as it's centered and that is in the CSS I gave you. I also set it to no-repeat, so it will NOT repeat vertically or horizontally, no overflow setting necessary. Since the image is background in the CSS, it will not cause any problems with smaller resolutions and you should not get any horizontal scrollbars. Your #wrapper is set to 710px wide, that will accomodate an 800x600 resolution w/o any problems.