SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast noy1213's Avatar
    Join Date
    Aug 2010
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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/

  3. #3
    SitePoint Enthusiast noy1213's Avatar
    Join Date
    Aug 2010
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    CHROME, FF

    IE6?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  5. #5
    SitePoint Enthusiast noy1213's Avatar
    Join Date
    Aug 2010
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)
    CHROME, FF

    IE6?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    <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>
    Code:
    .inner {
        position:relative;
        z-index:99;
        padding:1px 10px;
        width:992px;
    }

  7. #7
    SitePoint Enthusiast noy1213's Avatar
    Join Date
    Aug 2010
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    CHROME, FF

    IE6?

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noy1213 View Post
    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.

    Code:
    #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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •