2 img style?

[andy_b]

Hi,

so i have a blog.
i have a class called storycontent which styles each post. All img tags within this class are styled a certain way.

I now want to be able to choose if i want img tags to be styled this way. The alternative being styled a different way.

What i do right now is include the new style inline, as i know this takes precedence. But i'd like to define a class to do this

How would i achieve that?

thansk

[Fang]

Give those images a class and style as required.

[andy_b]

how?

right now the html looks something like this?

<div class="storycontent">
<img src="http://domainname.com/1.jpg" />
</div>

When i create a blog post the storycontent class is always part of the html as it resides "in the loop", so i can not remove it.

the css is

.storycontent img {
all styling
}

now if i want to include an image, that will reside inside the storycontent class but that i dont want to pick up the styling of this class, how do i achieve that?

Will i use multiple classes? How is it done?

Thanks

[Fang]

You can use multiple classes, the 2nd class will override the 1st:<div class="storycontent storycontent2">

[andy_b]

but like i said i can not change the html code

<div class="storycontent"> to <div class="storycontent storycontent2"> like you suggest.

Well, i can but if i did, then all of my previous posts that contain images will end up with the style storycontent2

i am looking to do something like this:
<div class="storycontent">
<div class="storycontent2">
<img src="http://domainname.com/1.jpg" />
</div>
</div>

where in cases where i add

<div class="storycontent2">
<img src="http://domainname.com/1.jpg" />
</div>

into the blog entry then storycontent2 will be the style of choice not storycontent

Is that clearer?

[Centauri]

<div class="storycontent">
<img src="http://domainname.com/1.jpg" />
<img src="http://domainname.com/2.jpg" class="alternate" />
</div>
The "alternate" class can then have settings to over-ride the "storycontent" class.

[andy_b]

Thanks but I can not seem to get it to work
Here are my class declarations in an external css file.

.storycontent img {
margin: 0px;
padding-left: 50px;
padding-right: 50px;
padding-top: 45px;
padding-bottom: 100px;
border: solid gray 1px;
background: #ffffff url(images/imageBottomBorder.gif);
background-repeat:no-repeat;
background-position: 52% 96%;
}

.alternateStorycontent {
margin: 0px;
padding-left: 50px;
padding-right: 50px;
padding-top: 45px;
padding-bottom: 50px;
border: solid gray 1px;
background-repeat:no-repeat;
background-position: 52% 96%;
}

and this is what i include in the post

<img src="http://domainname.com/2.jpg" alt="some description" class="alternateStorycontent" />

and this is surrounded by
<div class ="storycontent">
</div>

Now the alternateStorycontent still contains the image imageBottomBorder.gif in the background.

But if i copy all of the attributes of the class and add them as properties of style all works fine. For example

<img src="http://domainname.com/2.jpg" alt="some description" style =" margin: 0px; padding-left: 50px; padding-right: 50px; padding-top: 50px; padding-bottom: 50px; border: solid gray 1px; background-repeat:no-repeat; background-position: 52% 96%;" />

Any ideas why?
cheers

[Centauri]

Not sure exactly what you are trying to do there - the only difference in the styles is the value of bottom padding, so that should be all you need to specify in .alternateStorycontent. If you are trying to remove the background in the alternate style, I'm not sure how that is supposed to achieve that. Does the bottom padding change when using the class ?

[andy_b]

The main difference between the two classes is that in storycontent a gif is uses (a business logo) underneath each image, inside the keyline border.

where as in alternateStorycontent i do not want the logo to appear - for example if i am posting someone elses image.

You will see in the inline style tag this gif is not included

[Centauri]

The background image (and all other declarations) from .storycontent img will still apply to .alternateStorycontent as it is an image inside an element with class of "storycontent". Just not including the gif will not make it dissappear. The alternate style should include only any changes you need :.alternateStorycontent {
padding-bottom: 50px;
background: none;
}

[andy_b]

I appreciate all your advice. I finally got this to work. However not exactly as proposed.

In the style sheet i had to declare (note the img)

.alternateStorycontent img {
padding-bottom: 50px;
background: none;
}

then in the blog post i had to include
<div class = "alternateStorycontent ">
<img src="http://domainname.com/2.jpg" alt="some description" />
</div>

cheers