#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Vancouver
    Posts
    100
    Rep Power
    12

    Cool CSS Challange: custom framing of a plain DIV


    I am wondering weather it is possible to put a "custom" frame (i.e. made from images) on a plain div (i.e., there should be no special provisions within the div's html if possible)

    To give you a rough idea what I mean, check this out:

    http://projects.bigvertigo.com/empire/test.htm

    The custom frame in this instance is an extruded box with rounded corners.

    The first box is how the html i want to work with should look like. Just a div with an id or a class assigned and nothing else inside it that is special.

    The second box is what I would like to achive (albeit done with a table, and a rushed one to that, I doube it will work in anything but IE).


    Is what I'm trying to do possible within CSS?

    At the very least possible with vertical stretching only?

    At the very very least possible with MINIMAL special provisions inside the html?

    Thanks in advance.
    If this can in fact be done, I am *deffinately* going to migrate away from tables.
    Last edited by Ruy; July 27th, 2003 at 03:39 AM.
    the DOM hates me
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Vancouver
    Posts
    100
    Rep Power
    12
    bump?
  4. #3
  5. 11
    Devshed Demi-God (4500 - 4999 posts)

    Join Date
    Jul 2001
    Location
    Lynn, MA
    Posts
    4,635
    Rep Power
    83
    Please don't bump posts. It's selfish and pointless. Folks will get around to answering your question if/when they have thoughts about it.

    Have you looked at background-image and related properties?

    http://www.w3.org/TR/CSS2/colors.html
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Vancouver
    Posts
    100
    Rep Power
    12
    Yes, yes I have and unfortunately, it is not (by a long shot) sufficient for what I'm trying to do.

    What I need it to do (and normal CSS2 properties cannot) is:
    - specify a fixed image at the top
    - specify an x-repeating image in the middle
    - specify a fixed image at the bottom.

    optimally, i'd like to define fixed images in the 4 corners and repeating images for the sides (x repeating for left and right sides, y repeating for top and bottom).

    In fact, i've been reading a significant portion of the W3C document on CSS2. Nothing there seems to do the trick.
    (Although the :before and :after pseudo-elements looked promising. Unfortunately, neither are supported by IE or NN)

    So at this point I'm starting to look for some trick external to CSS.

    Also, if anyone could tell me that yes, this is impossible and I'm wasting my time it would be about as apretiated as a solution.
    the DOM hates me
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2000
    Posts
    763
    Rep Power
    0
    I have mostly seen tables used for custom frames.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    Vancouver
    Posts
    100
    Rep Power
    12
    thats right - but can divs do it :P
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2000
    Posts
    763
    Rep Power
    0
    Try http://www.w3.org/TR/css3-border/#the-border-image
    Although it is css3 and might not work in any browsers yet.

IMN logo majestic logo threadwatch logo seochat tools logo