...

View Full Version : Fuzzy shadow with table



Ulitasch
02-01-2007, 10:06 AM
I am looking how to do the CSS for a "fuzzy shadow" for a table with more rows/colomns.. I know how to do the fuzzy shadow with an image, but just cannot let it work with a table.. :confused:

butlins
02-01-2007, 11:35 AM
Any chance of a jpeg of the sort of thing you're trying to achieve? Bit difficult without any visual reference...

Ulitasch
02-01-2007, 11:51 AM
Hi, sorry: here is the dropshadow-script I used for the images
http://webdesign.about.com/gi/dynamic/offsite.htm?zi=1/XJ&sdn=webdesign&zu=http%3A%2F%2Falistapart.com%2Farticles%2Fcssdrop2%2F.

And it looks like that: http://www.dedaadcom.nl/fuzzy_shadow/dropshadow.html But how can I do a dropshadow for a whole table (and not the images in the table..)
http://www.dedaadcom.nl/fuzzy_shadow/dropshadow_table.html

I am just learning CSS..:o

butlins
02-01-2007, 01:47 PM
It's not ideal, but using your bits of code this works... up to a point


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.img-shadow {
float:left;
background: url(img/shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.img-shadow table {
background: url(img/shadowAlpha.png) no-repeat left top !important;
background: url(img/shadow.gif) no-repeat left top;
padding: 0px 5px 5px 0px;
}

table {
margin:0;
padding:0;
border:0;
}

td {
background-color:#30C;
}

</style></head>

<body>
<div class="img-shadow">
<table>
<tr>
<td>&nbsp;</td>
<td><img src="bridge.jpg" alt="test" width="311" height="311"/></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
</body>
</html>


Adding in border-collapse:collapse; to the table makes the shadow disappear.

If you're just starting CSS design, you might want to rethink using tables. CSS design is a different approach from a table based layout. The idea with CSS is that you start with text and images that flow in a logical order; use HTML to give it structure using headings, lists, paragraphs etc (and start to address issues of accessibility through alt tags for images, abbr and acronym tags for abbreviations etc); group sections together using divs; and then use CSS to pull it into the design you want to achieve.

I always recommend Sitepoint books, as I think they provide a really good introduction to design using CSS. There's Build Your Own Web Site The Right Way Using HTML & CSS (http://www.sitepoint.com/books/html1/) and HTML Utopia: Designing Without Tables Using CSS (http://www.sitepoint.com/books/css2/) which would make very good starting points.

Ulitasch
02-01-2007, 02:14 PM
Thanks! It worked. I will buy the books..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum