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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Fuzzy shadow with table

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

  • #2
    Regular Coder
    Join Date
    Aug 2006
    Location
    Cardiff, UK
    Posts
    141
    Thanks
    15
    Thanked 2 Times in 2 Posts
    Any chance of a jpeg of the sort of thing you're trying to achieve? Bit difficult without any visual reference...
    If anyone asks my boss, this counts as work, okay?

  • #3
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    dropshadow

    Hi, sorry: here is the dropshadow-script I used for the images
    http://webdesign.about.com/gi/dynami...%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...dow_table.html

    I am just learning CSS..

  • #4
    Regular Coder
    Join Date
    Aug 2006
    Location
    Cardiff, UK
    Posts
    141
    Thanks
    15
    Thanked 2 Times in 2 Posts
    It's not ideal, but using your bits of code this works... up to a point

    Code:
    <!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 and HTML Utopia: Designing Without Tables Using CSS which would make very good starting points.
    If anyone asks my boss, this counts as work, okay?

  • #5
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! It worked. I will buy the books..


  •  

    Posting Permissions

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