background top and bottom

[noy1213]

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

[Paul O'B]

Hi,

You may need to explain the dynamics of this box a bit more before we can give specific advice.

e.g.
Is the element a fixed height and fixed width?
Is is fixed width but fluid height?
Is it fluid width and fluid height?
Is it to expand downwards forever or likely to remain relatively small?

If its a fixed width I would basically use a sprite image that is full width of the layout so you can paste both corners in one go and save on html. However I would need to know if that is the approach you want before I give an example.


Depending on which of those it is then the method will vary. However, they will all be subject to similarities and you are basically asking for a rounded corner box of which there are millions of examples:

http://www.pmob.co.uk/temp/round-tra...inner-fade.htm
http://www.smileycat.com/miaow/archives/000044.php
http://www.search-this.com/2007/02/1...round-corners/
http://www.search-this.com/2008/01/2...css-revisited/

[noy1213]

hi,
for give your more clear viewpoint, i just create a exmpale of what it think to do..

the exmaple:
http://sware.co.il/exp/likethat2.png


the problem is:
1. i dont know clearly if its the best way to do it (like my exmaple)
2. i dont know clearly how to do it and in need some advices.

thanks, noy

[Paul O'B]

Hi,

If it's a fixed with then I would simplify it a bit and lose some of those awkward subtle gradients (that I can't see anyway unless I magnify the image millions of times) and do something like this.

http://www.pmob.co.uk/temp/noy.htm

(just view source as the code is in the head)

It uses one wide sprite to make all the images and even at this size is only 4k which is half the size of your original small images. Boty sections can grow vertically as required and you can have as many sections as you want.

If you wanted a fluid width layout then you'd have to use some of the other methods mentioned in the links above.

[noy1213]

hi thanks for your comment
but the background color isnt white

look what i have now so you will understand the problem clearly

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

"My Content TEXT IS HERE" need to be under the menu div (like 100px up)

[Paul O'B]

Hi,

I didn't understand what you meant by this:

"My Content TEXT IS HERE" need to be under the menu div (like 100px up

If it was 100px up then that would place it in your header div which I'm sure is not what you want. If you wanted it moved 100px down the page then place it in a div with a 100px top margin or add 100px top padding to the existing container. I don't think that's what you mean either.

I do notice that your absolute elements are obscuring the text and you need to set the appropriate z-index as follows.

<div id="content">
    <div id="content-top-right"> </div>
    <div id="content-top-left"> </div>
    <div class="inner">
        <p>My Content TEXT IS HERE </p>
        <p>My Content TEXT IS HERE </p>
        <p>My Content TEXT IS HERE </p>
        <p>My Content TEXT IS HERE </p>
        <p>My Content TEXT IS HERE </p>
        <p>My Content TEXT IS HERE </p>
        <p>My Content TEXT IS HERE </p>
        <p>My Content TEXT IS HERE </p>
    </div>
    <div id="content-bottom">
        <div id="content-bottom-right"> </div>
        <div id="content-bottom-left"> </div>
    </div>
</div>

.inner {
    position:relative;
    z-index:99;
    padding:1px 10px;
    width:992px;
}

[noy1213]

hi thanks. the last issue is the content-bottom
when you write text in the inner the text does go over the content-bottom
i want that my text will be start under the menu div and over upper then downlinks

any idea?

thanks

[Rayzur]

hi thanks. the last issue is the content-bottom
when you write text in the inner the text does go over the content-bottom

Hi noy,

Your page does not show the inner text extending into the #content-bottom div. If you disable the BG image on #content-bottom and set a BG color to test with you will see.

I do notice that the text needs some side padding to keep it out of your round corners. You can fix that by adjusting the width on inner and adding side paddings.

#inner {
    position: relative;
    z-index: 99;
    width: 948px;
    padding:1px 32px; /*1px top/bot padding to un-collapse margins*/
}

i want that my text will be start under the menu div and over upper then downlinks

You will have to explain what you want better than that, I'm not sure what "over upper" means.