SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Cool Here's a quickie! How do I simulate a (size=5) basic grey TABLE BORDER around an IMG

    I had this somewhere in my notes but I can't find it.

    I have a basic table with a <table border="5"> property -- you know, the basic beveled one circa Mosaic -- and I want this identical border around an image. I want to do it inline if at all possible, since it is one of the rare times I am foreclosed from using stylesheets . . . and have to work with tables.

    Stripped down, quick 'n dirty, how do I get the image to duplicate the basic grey beveled border without placing the IMG in another table? Thanks guys.

    s
    Last edited by semicolon; Dec 31, 2012 at 15:01. Reason: without creating another table

  2. #2
    SitePoint Enthusiast scout1idf's Avatar
    Join Date
    Nov 2009
    Location
    Ohio
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try....


    HTML Code:
    <img src="boat.jpg" alt="Boat" style="width:304px; height:228px; border:5px ridge grey;" />

    ....... hope it helps.

  3. #3
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hey Scout, thanks. It doesn't perfectly mirror the table border's size + bevel angles . . . but I think I can mess around with it and get it close. I'll hunt down "RIDGE" on W3 schools and see what other beveling techniques are available to me.

    s

  4. #4
    SitePoint Enthusiast scout1idf's Avatar
    Join Date
    Nov 2009
    Location
    Ohio
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://w3schools.com/cssref/pr_border-style.asp

    • none
    • hidden
    • dotted
    • dashed
    • solid
    • double
    • groove
    • ridge
    • inset
    • outset
    • inherit

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,357
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    You might find the SitePoint reference more helpful:
    http://reference.sitepoint.com/css/border-style

  6. #6
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    88
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hey TechnoBear, thanks for that link. Yes, I was able to get it as close as possible using
    HTML Code:
    outline-style: outset;

    which had the added advantage that it reconciled the border size to that appearing in the table. It isn't perfect (I only realized later) because I have padding in that table, creating additional beveling illusions. The one thing I haven't been able to figure out, however, is the blasted color of the table border.

    I don't suppose there is a reference somewhere as to exactly what color is being used? Because GREY is too dark, and LIGHTGREY is too light. (?)

    EDIT:
    Another optical illusion! I just fattened both borders and they are the same color. The problem (remains) the "pattern" of the bevel, apparent when you explode the size of the border. Back to the drawing board . . .

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    You can also do two colours for the true 1990's 3D look :)

    left and top being one colour, right and bottom being the other. Right out of Windows95


Tags for this Thread

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
  •