Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    how to get same effect as table border using CSS

    I wish to get the same effect as a table border is but using CSS instead.

    What CSS code would do this?

    Code:
    	<table border="1">
    	  <tr>
    		<td style="background-image:url('Image.gif'); width: 200px; height: 200px;"><img src="images/space.gif" width="200" height="200" alt="">
    		</td>
    	  </tr>
    	</table>
    I have used this code but it does not show a border at all.

    Code:
    <div style="border: 1px; background-image:url('Image.gif'); width: 200px; height: 200px;"><img src="images/space.gif" width="200" height="200" alt="">
    </div>
    Attached Images Attached Images  

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    border: 4px solid #0A3080;
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    i have been playing around the code a bit and also tried your method, what i really wanted is the same colours as in my original table. a sort of blue gray/silver effect


    Code:
    <div style="border: 4px; solid #FF0066; margin: 4px; background-image:url('Image.gif'); width: 200px; height: 200px;"><img src="images/space.gif" width="200" height="200" alt="">
    </div>

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Could you upload your Image.gif file?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    The border is not part of the image.

    But having said that here is the image.

    looking at my posts i think what i am wanting to say is i wish for the div to have the same style as the table has, a raised up style border.
    Attached Thumbnails Attached Thumbnails how to get same effect as table border using CSS-image.gif  
    Last edited by jasonpc1; 10-28-2010 at 01:13 PM.

  • #6
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    Here is a better example.

    below is a large border version to show what i mean.

    the border seems to be 3d like, jumping up from the page.

    how do i get this using CSS

    Code:
    <table width="100%" height="100" border="30">
      <tr>
      	<td>
    	</td>
    </tr>
    </table>
    Last edited by jasonpc1; 10-28-2010 at 01:37 PM.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    table{
    border:30px outset #0A3080;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    sorry forgot to reinterate that the border was for a DIV, i am converting all table to divs.

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by jasonpc1 View Post
    sorry forgot to reinterate that the border was for a DIV, i am converting all table to divs.
    So what? Can't you do and test the rest at your end?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post
    Code:
    <div style="border: 4px; outset #0A3080; background-image:url('Image.gif'); width: 200px; height: 200px;">
    <img src="images/space.gif" width="200" height="200" alt="">
    </div>
    does not give the same border results as

    Code:
    <table border="1" bordercolor="#000000">
      <tr> 
        <td background="Image.gif" width="200" height="200"><img src="images/space.gif" width="200" height="200"></td>
      </tr>
    </table>
    I am wanting the same look that the tables give but using DIV's and CSS
    Last edited by jasonpc1; 10-28-2010 at 01:56 PM.

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    There's an error(extra character) in your style. Make use of CSS validator to detect it.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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