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,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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 02: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 02:37 PM.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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 02:56 PM.

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    •