shadow around html table

[Admiral208]

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

[LosOjos]

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

[Admiral208]

Ive read this a few times and still dont see how I can implement this. CSS and web design aren't my specialty

[LosOjos]

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:

 

       
       
       [b]<br />
        <!--<br />
<br />
        #shadow         { color: [url=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=000]#000[/url] background: #ccc none; width: 50% }<br />
        #shadow table   { position: relative; left: -8px; top: -9px;<br />
                          width: 100%;<br />
                          background: [url=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=fff]#fff[/url]<br />
			  border-collapse: collapse }<br />
	#shadow th, td	{ border: 1px solid black }<br />
<br />
        --><br />
        [/b]

       
       
       
       
       
       ggggg ggggggg
       ggggg ggggggg
       gggggg gggggg
       
       ggggg ggggggg
       ggggg ggggggg
       gggggg gggggg
       
       ggggg ggggggg
       ggggggg ggggg
       gggggg gggggg
       
       
       
       

 

The important parts are that you insert everything between (and including) in your pages

section, and that you add to your table declaration () a reference to the style, so if your current table declaration is simply , it would become - 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.

[dayzd]

What browser are you targeting? Newer browsers support the CSS3 'box-shadow' declaration for doing browser-powered shadows:

#target {
-moz-box-shadow: 3px 3px 5px [url=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=CACCE3]#CACCE3[/url]
-webkit-box-shadow: 3px 3px 5px [url=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=CACCE3]#CACCE3[/url]
box-shadow: 3px 3px 5px [url=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=CACCE3]#CACCE3[/url]
}

Gives you the shadow around the table on this page:

Parents - Carlton le Willows Academy

[Admiral208]

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?

[Admiral208]

Just tried it in IE9 and it doesn't work? Should it?

[Cue]

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?

[Arthur]

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

 

http://i.imgur.com/GJhVk.jpg

 

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

[dayzd]

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?

#target {
box-shadow: 3px 3px 5px [url=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=CACCE3]#CACCE3[/url]
}

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:

#target {
box-shadow: 0px 0px 5px [url=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=CACCE3]#CACCE3[/url]
}

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.