12 replies [Last post]
premier69
Offline
Regular
Last seen: 16 years 34 weeks ago
Joined: 2006-04-05
Posts: 20
Points: 0

Hi, I'm new to css and this forum thats why i'm posting my question here.

I've built and am maintaining a website http://www.motionsgarden.se/ndex.html

The site has a picture gallery located under "bilder" in the menu and that gallery has subsections
with each visiting group or school class having their own page with pictures.

Now to what i need help with.
I used this guide to add a dropshadow effect with the help of css:
http://www.alistapart.com/articles/cssdropshadows/

And i was successful in adding a shadow to one image.
Tho i would imagine to make the process as efficient as possible i would need to have
an external .css file with the code to add the shadows to every picture in the subcontent of the gallery.

How do i go about doing that?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Adding dropshadow to all pictures.

Which image have you added the shadow on?

Surely it's simple enough to add the class to each image?

Verschwindende wrote:
  • CSS doesn't make pies

premier69
Offline
Regular
Last seen: 16 years 34 weeks ago
Joined: 2006-04-05
Posts: 20
Points: 0

Adding dropshadow to all pictures.

I haven't uploaded that since it's a work in progress.

Could you please explain what the external css file should have for code and how i implement that into all the images?

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Adding dropshadow to all pictures.

Sure, you just follow the ALA article.

This goes in your CSS file:

.img-shadow {
  float:left;
  background: url(shadowAlpha.png) no-repeat bottom right !important;
  background: url(shadow.gif) no-repeat bottom right;
  margin: 10px 0 0 10px !important;
  margin: 10px 0 0 5px;
  }

.img-shadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #a9a9a9;
  margin: -6px 6px 6px -6px;
  padding: 4px;
  }

then every image that you want to have a drop shadow is written like this:

<div class="img-shadow">
  <img src="cat.jpg" alt="test"/>
</div>

So you could have:

<div class="img-shadow">
  <img src="picture30476.png" alt="picture"/>
</div>

Verschwindende wrote:
  • CSS doesn't make pies

premier69
Offline
Regular
Last seen: 16 years 34 weeks ago
Joined: 2006-04-05
Posts: 20
Points: 0

Adding dropshadow to all pictures.

Ok I think I've made some progress please have a look here:

http://www.motionsgarden.se/bilder/bilder.html

It seems to be malfunctioning in firefox 1.0.7 but seems fine in IE, what do you think? just choose a random gallery from that link and tell me what you think please.[/url]

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Adding dropshadow to all pictures.

1) Fix the doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

It's incomplete and throwing IE into Quirks Mode, which is why IE looks correct.

2. Ditch the absolute positioning, it's not helping matters. Read up on floats, and float the images Laughing out loud

Let us know how you get on.

Verschwindende wrote:
  • CSS doesn't make pies

premier69
Offline
Regular
Last seen: 16 years 34 weeks ago
Joined: 2006-04-05
Posts: 20
Points: 0

Adding dropshadow to all pictures.

Ok i changed the docutype into this:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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">

That's better right?

when you say absolute positioning i take it you mean inside the .css file right? Bellow is the current .css file which i've made minor changes to and re-uploaded the .css file and html files so please have a look now.

.img-shadow { background: url(shadowAlpha.png) no-repeat right bottom !important; background: url(shadow.gif) no-repeat bottom right; float: left; margin: 10px 0 0 10px !important; margin: 10px 0 0 5px; }

.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: solid 1px #a9a9a9;
margin: -6px 10px 7px -6px;
padding: 0;
}

stonewall
stonewall's picture
Offline
Enthusiast
between a rock and a hard place
Last seen: 16 years 34 weeks ago
between a rock and a hard place
Timezone: GMT-5
Joined: 2006-04-06
Posts: 93
Points: 0

Adding dropshadow to all pictures.

no, remove the xml prolog - anything before the doctype puts IE into quirks mode. You can safely remove the prolog for xhtml 1.0

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Adding dropshadow to all pictures.

premier69 wrote:
when you say absolute positioning i take it you mean inside the .css file right? Bellow is the current .css file which i've made minor changes to and re-uploaded the .css file and html files so please have a look now.

I was referring to this, actually:

div style="position:relative;width:538px;height:528px;-adbe-g:p;">
			<div style="position:absolute;top:16px;left:16px;width:150px;height:113px;">

Also, whats all this about?

-adbe-g:p;">

Verschwindende wrote:
  • CSS doesn't make pies

premier69
Offline
Regular
Last seen: 16 years 34 weeks ago
Joined: 2006-04-05
Posts: 20
Points: 0

Adding dropshadow to all pictures.

ok i understand i will remove that.

I have no idea about this:

-adbe-g:p;">

it's something golive did but i dont know why.

I'll get back to you on my results.

premier69
Offline
Regular
Last seen: 16 years 34 weeks ago
Joined: 2006-04-05
Posts: 20
Points: 0

Adding dropshadow to all pictures.

oh I'm having no luck here, what am i supposed to use if not absolute to align them in 4 by 3 pattern?

premier69
Offline
Regular
Last seen: 16 years 34 weeks ago
Joined: 2006-04-05
Posts: 20
Points: 0

Adding dropshadow to all pictures.

-adbe-g:p;"> has something do to with the layout grid in adobe golive after i removed it i couldn't change the image positions in the layout tab.

can you please make me an working example? I'm making no headway here, maybe if i saw a finished result i could backwards engineer it into the 4x3 (the 8 images) of the particular picture gallery I'm experimenting on.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Adding dropshadow to all pictures.

Read up on floats, that's the simplest way to do it.

Verschwindende wrote:
  • CSS doesn't make pies