+ Post New Thread
Results 1 to 10 of 10
How do you do....it? Thread, shadow around html table in Technical; Hi everyone. I need a bit of help with our website. www.rbsc.somerset.sch.uk Its based around sharepoint so uses html and ...
  1. #1
    Admiral208's Avatar
    Join Date
    Mar 2008
    Location
    Bridgwater
    Posts
    723
    Thank Post
    176
    Thanked 63 Times in 55 Posts
    Rep Power
    40

    Question shadow around html table

    Hi everyone.

    I need a bit of help with our website. www.rbsc.somerset.sch.uk Its based around sharepoint so uses html and css.

    the main body of the site is basically a html table with a width of 1004px aligned in the centre of the page.

    I have been trying to create a small shadow effect to go around the edge of the table but I cant seem to get it quite right. My question is, what is the best way to achieve what I want to do?

    Its currently set up with a row at the top and bottom with an image of a shadow thats 1004px wide and a couple of cells to the left and right with images of shadows in. I dont like it, its messy and doesn't view the same in different browsers, especially if the contents of the site stretches more than 1004px and the top shadow doesn't fit.

    Im sure one of you clever web designers can help me, it stretches just beyond my capabilities.

    Thanks
    James

  2. #2

    LosOjos's Avatar
    Join Date
    Dec 2009
    Location
    West Midlands
    Posts
    5,674
    Thank Post
    1,484
    Thanked 1,268 Times in 861 Posts
    Rep Power
    804
    This should help: A List Apart: Articles: CSS Drop Shadows

    Basically you'll want to be using a CSS class and tile-able image for the shadow so that it resizes automatically with the table

  3. Thanks to LosOjos from:

    Admiral208 (9th December 2011)

  4. #3
    Admiral208's Avatar
    Join Date
    Mar 2008
    Location
    Bridgwater
    Posts
    723
    Thank Post
    176
    Thanked 63 Times in 55 Posts
    Rep Power
    40
    Ive read this a few times and still dont see how I can implement this. CSS and web design aren't my specialty

  5. #4

    LosOjos's Avatar
    Join Date
    Dec 2009
    Location
    West Midlands
    Posts
    5,674
    Thank Post
    1,484
    Thanked 1,268 Times in 861 Posts
    Rep Power
    804
    Quote Originally Posted by Admiral208 View Post
    Ive read this a few times and still dont see how I can implement this. CSS and web design aren't my specialty
    OK well here's some actual code you can use, no images required and it should be easy enough to tweak to your needs:

    Code:
    <html>
            <head>
            <title></title>
            <style type="text/css">
            <!--
    
            #shadow         { color: #000 background: #ccc none; width: 50% }
            #shadow table   { position: relative; left: -8px; top: -9px;
                              width: 100%;
                              background: #fff
    			  border-collapse: collapse }
    	#shadow th, td	{ border: 1px solid black }
    
            -->
            </style>
    
            </head>
            <body>
            <div id="shadow">
            <table>
            <tr>
            <td>ggggg ggggggg</td>
            <td>ggggg ggggggg</td>
            <td>gggggg gggggg</td>
            </tr><tr>
            <td>ggggg ggggggg</td>
            <td>ggggg ggggggg</td>
            <td>gggggg gggggg</td>
            </tr><tr>
            <td>ggggg ggggggg</td>
            <td>ggggggg ggggg</td>
            <td>gggggg gggggg</td>
            </tr></table>
            </div>
            </body>
            </html>
    The important parts are that you insert everything between (and including) <style type="text/css">...</style> in your pages <head> section, and that you add to your table declaration (<table>) a reference to the style, so if your current table declaration is simply <table>, it would become <table id="shadow"> - the important part is you add id="shadow" to the tag.

    The rest is just there so you can see where it all fits, there'll obviously be a lot more to your page.

  6. #5
    dayzd's Avatar
    Join Date
    Nov 2009
    Location
    In front of computer
    Posts
    408
    Thank Post
    79
    Thanked 61 Times in 49 Posts
    Rep Power
    26
    What browser are you targeting? Newer browsers support the CSS3 'box-shadow' declaration for doing browser-powered shadows:
    Code:
    #target {
    	-moz-box-shadow: 3px 3px 5px #CACCE3
    	-webkit-box-shadow: 3px 3px 5px #CACCE3
    	box-shadow: 3px 3px 5px #CACCE3
    }
    Gives you the shadow around the table on this page:
    Parents - Carlton le Willows Academy

  7. #6
    Admiral208's Avatar
    Join Date
    Mar 2008
    Location
    Bridgwater
    Posts
    723
    Thank Post
    176
    Thanked 63 Times in 55 Posts
    Rep Power
    40
    Quote Originally Posted by dayzd View Post
    What browser are you targeting? Newer browsers support the CSS3 'box-shadow' declaration for doing browser-powered shadows:
    The standard ones. - IE, Firefox, Safari, Opera. I like the look of the shadow but I would like it it go around the whole table, not just the bottom and the right. Is that possible?

    Where would I put the code you supplied?

  8. #7
    Admiral208's Avatar
    Join Date
    Mar 2008
    Location
    Bridgwater
    Posts
    723
    Thank Post
    176
    Thanked 63 Times in 55 Posts
    Rep Power
    40
    Just tried it in IE9 and it doesn't work? Should it?

  9. #8
    Cue
    Cue is offline
    Cue's Avatar
    Join Date
    Mar 2009
    Location
    Hampshire
    Posts
    118
    Thank Post
    5
    Thanked 13 Times in 12 Posts
    Rep Power
    14
    Quote Originally Posted by Admiral208 View Post
    Just tried it in IE9 and it doesn't work? Should it?
    Yes, it should. While IE9 doesn't support (as per usual) the full CSS3 standard, it does support box shadows. Can we see the HTML snippet/CSS?

  10. #9


    Join Date
    Feb 2007
    Location
    51.403651, -0.515458
    Posts
    9,654
    Thank Post
    253
    Thanked 2,918 Times in 2,149 Posts
    Rep Power
    831
    Quote Originally Posted by Admiral208 View Post
    Just tried it in IE9 and it doesn't work? Should it?
    As Cue mentioned, IE9 does support the "box-shadow" property. To get the shadows in Internet Explorer 6, 7 & 8, you will need to use CSS3 Pie (assuming you want to support these browsers?).

    Using the Control Freak extension for Google Chrome, this is how your website looks with CSS shadows instead of JPGs (click to enlarge). I doubt anyone would be able to tell the difference, but it should make the site load a bit faster initially since the CSS is around 20 times smaller than the images (270 bytes vs 5.4 KBs).



    If you post the code you are using we should be able to help.

  11. #10
    dayzd's Avatar
    Join Date
    Nov 2009
    Location
    In front of computer
    Posts
    408
    Thank Post
    79
    Thanked 61 Times in 49 Posts
    Rep Power
    26
    Quote Originally Posted by Admiral208 View Post
    I like the look of the shadow but I would like it it go around the whole table, not just the bottom and the right. Is that possible?

    Where would I put the code you supplied?
    Code:
    #target {
    	box-shadow: 3px 3px 5px #CACCE3
    }
    The first two values above (3px 3px) specify the offset from the element -in this case, 3 pixels right, 3 pixels down. The 5px is the size of the shadow.
    To have the shadow all the way around, simply specify the values like this:
    Code:
    #target {
    	box-shadow: 0px 0px 5px #CACCE3
    }
    The snippet above should go in your CSS, where '#target' is the id or '.target' is the class of the element you want to style.

    I mention what browsers you're targeting, as this is still a fairly new declaration, and I'm not up to speed with which versions of which browsers support it yet.
    CanIUse.com suggests support for 'box-shadow' is pretty available, if you can ignore IE.



SHARE:
+ Post New Thread

Similar Threads

  1. Memory speed coversion table?
    By ChrisH in forum Hardware
    Replies: 9
    Last Post: 3rd February 2012, 12:01 AM
  2. [HTML] hidden HTML code
    By pap in forum Web Development
    Replies: 14
    Last Post: 22nd February 2010, 12:33 PM
  3. Replies: 2
    Last Post: 15th December 2009, 04:36 PM
  4. wanted round table people !!!
    By russdev in forum General EduGeek News/Announcements
    Replies: 4
    Last Post: 24th January 2006, 01:11 AM
  5. Shadow Copies
    By ajbritton in forum Windows
    Replies: 10
    Last Post: 10th December 2005, 12:13 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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