SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    May 2001
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool Wondering if something is possible using CSS....

    Hi all,

    I've used CSS somewhat, and have some experience designing websites and whatnot, but I am taking over a site that was only half completed, and so I am trying to figure out whether something is possible using CSS or not. I was wondering whether it is possible to have an image repeat along the left-hand side of the page, but to have it do so in between two images. Picture having a page framed in sort of a rectangular image with rounded edges, but wanting to have the page/image stretch when there is more content added. So what I was wondering, is whether I could snip out a little part in the middle of the rectangle (it's more like [__ ) and have it repeat in between the top and bottom image for as long as it needs to, depending on how much content a page has. I hope that makes sense. If not, I could perhaps post a link to let you see what I mean.

    Cheers,

    XGuy.

  2. #2
    PHP Developer W1LL's Avatar
    Join Date
    Apr 2001
    Location
    Leicester, UK
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean as a page or table background?

    Check www.cbuk.org (the repeated fade image on the right). Is that what you mean?

    - Will

  3. #3
    SitePoint Zealot
    Join Date
    May 2001
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Will,

    Yep, that's what I mean. Here is the link to check out, but keep in mind I didn't make this site at all, and it is not supposed to be open to the public or anything since it's nowhere near finished. It's only the first page that I concerned with, since I am going to make that into a template for the rest of the site, if i can get this to work.
    (please check it in IE 5.5+)
    http://www.bioethics.dal.ca/NewSite/...even/index.htm
    it is the part of the image in between the bottom of the menu and start of the lighthouse that I wanted to make repeat for pages with more content than the index page.

    Cheers,

    XGuy.

  4. #4
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Xguy...

    If you make that part of the image repeat it will look pretty bad. The color at the top and bottom are different which means that when it tiles, there will be a visible seam.

    However, the way to solve this would be to slice up that image. Put the top section of the U in a TABLE at the top of the page. Put the bottom image in a TABLE at the bottom of the page. Then simply tile the stuff in between. Your page would look something like this:

    Code:
    _________________________________________
    |                                       |
    |      header image                     |
    |                                       |
    -----------------------------------------
    |              |                        |
    |  sidebar     |                        |
    |  image       |                        |
    |              |                        |
    |              |                        |
    _________________________________________
    |                                       |
    |       footer image                    |
    |                                       |
    -----------------------------------------
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  5. #5
    SitePoint Zealot
    Join Date
    May 2001
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks creole,

    but something like: ...what?

    Cheers,

    -XGuy.

  6. #6
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this:
    http://gravitydigital.com/misc_uploa...ct7/index.html

    It's really rough and doesn't work exactly like it should be I think that you'll be able to see what I mean.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  7. #7
    SitePoint Zealot
    Join Date
    May 2001
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much creole,

    So I just put the image in a table, and then set the tiling image to vertical repeat in the CSS file?

    Cheers,

    XGuy.

    P.S. - if I take a smaller slice and tile it, do you think it will look better or worse?

  8. #8
    PHP Developer W1LL's Avatar
    Join Date
    Apr 2001
    Location
    Leicester, UK
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    body
      {
        background: url('imageLink.jpg') repeat-y left #FFFFFF;
      }
    I think thats what you're looking for buddy

    - Will

  9. #9
    SitePoint Zealot
    Join Date
    May 2001
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Will,

    Can't read your last post...nothing shows up. What did you say?

    Cheers,

    -XGuy.

  10. #10
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    He posted this:
    body
    {
    background: url('imageLink.jpg') repeat-y left #FFFFFF;
    }


    It's the CSS code you would use to tile an image. A smaller slice might help, but the best thing to do would be to clean up that image in Photoshop first. In the top image, use a gradient to fade from top to bottom JUST ABOVE the bottom of the image. Then do the same thing in reverse for the bottom image.

    The middle section would then be a smooth color instead of the grainy texture that it is now. That would give the appearance of seamlessness.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  11. #11
    SitePoint Zealot
    Join Date
    May 2001
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot creole! I'll give it a try.
    Would I be able to do the same thing in Fireworks? I have Photoshop, just not installed at the moment.

    Cheers,

    -XGuy.


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
  •