Using CSS to include some image styling

  • 1
  • Question
  • Updated 7 years ago
  • Answered
I have set up styling for a list containing various parameters and a couple of images for each record. Most of the styling has been straight forward but this part I don't know how to do. I have included the snippet of the image style from the code and also a snippet of HTML from the CSS aspect. I would like to know how I can include the img style within the coding.

(Part of the style sheet)
.Plant_Image {
float: left;
width: 204px;
margin: 2px;
border: 2px solid #ffffff;
height: 133px;
width: 200px;
}

(Part of the HTML)

<img style="background-color:none; width: 200px; height: 133px;" src="http://mysite/resources/image">
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes

Posted 7 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Gop,

I believe you need to add a class to your HTML.

<img src="http://mysite/resources/image" class="Plant_Image">

I hope that does the trick!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Thank you Sanja. I abbreviated the snippet too much originally.

What I have already is:
(Part of the style sheet)

.Plant_Image {
float: left;
width: 204px;
margin: 2px;
border: 2px solid #ffffff;
height: 133px;
width: 200px;
}

(Part of the HTML)

<div class="Plant_Image"><img style="background-color:none; width: 200px; height: 133px;" src="http://mysite/resources/image"></div>.

What I want to do is to add the background color and dimensions within the style rather than a statement within every record.
I want to make this an easily modified code for a very long list. The purpose being to be able to use it online as a product summary and to create a hard-copy version in a pdf file. The text and border colours, and image dimensions ideally would be easily modified from within the style sheet rather than having to add these aspects to every product occurrence. The other aspect is that I would like to speed up the rendering on a page and I think that the CSS would be the most effective way of doing this.

Thank you again.
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Gop,
I'm sending this back over to Sanja for review. She'll be able to answer when she arrives online next. We appreciate your patience in the meantime.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Thank you Brianna and Sanja.
@Sanja: I think this is quite difficult from what I have read and the fixes to similar issues require a very sophisticated knowledge of CSS. There may be a very simple and obvious solution but if it isn't obvious then please don't spend your time working on this. Thank you for your efforts Sanja.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Gop,

I did a bit of researching and came across this link: http://www.sohtanaka.com/web-design/s...

I'm not sure if that will be of help or not!