background top and bottom

hi :]

i need suggests about how to do something

what i need to do:
http://www.sware.co.il/exp/likethat.png

what i have now:
http://www.sware.co.il/exp/index-new.html

the "problem" is with the white parts in the top and bottom of the content block

i looking for suggests what is the best way/'s to do it

(the less images, the less http requests, the less html and css lines)


Thanks, noy

 

i just create a exmaple of this in my viewpoint,
here: http://www.sware.co.il/exp/likethat2.png

but i dont sure if its the best way to do it, and how to do it

 

Since you did not specify whether or not any of the parts require a fluid width and/or will contract/expand. I am making the assumption that everything will be a fixed height and width, regardless of the content. In which case, take a look at the following:

http://i.imgur.com/iKER3.jpg

You don't need to make separate div's for all the corners if the width never changes, since it won't matter. You can just put it all inside 1 div and be done with it. The backgrounds can use a repeating image. Just take a horizontal slice of 1px of the gradient and set it to the background of the parent div.

 

thanks for your comment
but if the content div will be contain alot of text its will work out everything
and also i want option to put content between div.sep and content div

 

I am not quite sure what you mean, but my suggestion would be to either create an image mockup with content, or just start placing content inside your existing HTML and fix the issues as they arise. If you get stuck on how to do something, reply back and I will try to help.

There is no 'perfect' way to code any given page, there are many ways to achieve what you are seeking. So just start doing it the way you think it will work, and improve it from there.

 

hi look what i got

http://sware.co.il/exp/index-new.html

the problem is to getting up the content text (like 100px up)

any suggests?


thanks

 

You can simply combine #content-top and #content-center together. You don't need #content-top. Everything inside #content-top can be placed within #content-center.

Remove #content-top and use this only:

Try this code, it should work.

#content-center {
background:url("../images/top-background3.png") repeat-x top #F1F1F1;
padding:40px; /* you can adjust this to your needs */
position:relative;
width:932px;
}

HTML:

 

hi thanks for your answer

(updated) look now.. what i can do with the sides?


and what about the bottom part?

thanks !

 

What exactly is left to fix?