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:
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.
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.
“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>
[B] <div class="inner">[/B]
<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>
[B] </div>[/B]
<div id="content-bottom">
<div id="content-bottom-right"> </div>
<div id="content-bottom-left"> </div>
</div>
</div>
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
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.
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.