...

View Full Version : how to get same effect as table border using CSS



jasonpc1
10-28-2010, 11:56 AM
I wish to get the same effect as a table border is but using CSS instead.

What CSS code would do this?



<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.



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

abduraooft
10-28-2010, 12:05 PM
border: 4px solid #0A3080;

jasonpc1
10-28-2010, 12:35 PM
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




<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>

abduraooft
10-28-2010, 12:36 PM
Could you upload your Image.gif file?

jasonpc1
10-28-2010, 01:06 PM
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.

jasonpc1
10-28-2010, 01:30 PM
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



<table width="100%" height="100" border="30">
<tr>
<td>
</td>
</tr>
</table>

abduraooft
10-28-2010, 01:37 PM
table{
border:30px outset #0A3080;
}

jasonpc1
10-28-2010, 01:44 PM
sorry forgot to reinterate that the border was for a DIV, i am converting all table to divs.

abduraooft
10-28-2010, 01:47 PM
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?

jasonpc1
10-28-2010, 01:51 PM
<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



<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

abduraooft
10-28-2010, 01:58 PM
There's an error(extra character) in your style. Make use of CSS validator (http://jigsaw.w3.org/css-validator/#validate_by_input) to detect it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum