SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot beyre's Avatar
    Join Date
    Dec 2008
    Location
    North Carolina
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 piece image not seemless

    I read elsewhere on this forum today about making an image in pieces so that the middle piece expands/contracts based on the content.

    Here's my attempt - the Gold border News section: www.littlemissnc.com/testing.php

    But for some reason, the top image and the middle image won't meet, but the middle and bottom does.

    I have no padding, other than within the middle piece because of text needing to 'clear' the image.

    There is no "white space" on the edges of the images themselves to account for it.
    Barbara E.

    Will add my site links when I'm more established here.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You really should have used a background image on the div rather than a real image as you don't want messy html

    The gap is because the image is stacked on the baseline and causes a small gap. Set the image to vertical-align:top or set it to display:block.

    However you would be better to use an empty div and just give it a height and width and use a background image.

    As a rule of thumb you should ask yourself "Is this image content or decoration"? If its decoration then it belongs in the background in the css. If the image is important to the content then it goes in the html.

  3. #3
    SitePoint Zealot beyre's Avatar
    Join Date
    Dec 2008
    Location
    North Carolina
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thanks for replying.

    So, all three splices of the image should be background for their respective div and not just the middle one? I thought since the middle one was going to be repeat-y as the content expands/contracts (content will be changed out often), that would be the only one as background.

    Ok, let me give your suggestion a whirl.
    Barbara E.

    Will add my site links when I'm more established here.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    No, all decoration images should be in the background. It keeps the page leaner and cleaner and easier to manage even if you need the odd empty div to hold an image. If you are creative you can often use existing elements without adding empty divs but does depend on the structure.

  5. #5
    SitePoint Zealot beyre's Avatar
    Join Date
    Dec 2008
    Location
    North Carolina
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I put the bottom piece of the border in an empty div as the div's background and the darn thing just disappeared. ppfffttt!

    At least I have the top and middle pieces as backgrounds.
    The top piece div has the title "News and Information", hence why it didn't disappear.
    Barbara E.

    Will add my site links when I'm more established here.

  6. #6
    SitePoint Zealot beyre's Avatar
    Join Date
    Dec 2008
    Location
    North Carolina
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See, my brain just needed a tiny rest.

    I re-read what you said about adding height and width to empty div.

    Now I know why my top and bottom disappeared earlier when I tried it - I didn't put in those dimensions.

    Now, it is seamless!

    Thanks so much! Love learning new little tidbits ... now if only I can remember them for next time.

    Oh! I also learned a bit about how to do RSS feeds. I copied another site on how they did it.
    Barbara E.

    Will add my site links when I'm more established here.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Glad you are making progress. Sometimes it helps to make mistakes because you remember them better next time


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
  •