CSS code set up,can it be modified if so how ?

[theremotedr]

Here is a page in question,
http://www.ebay.co.uk/itm/MITSUBISHI-2-BUTTON-SMART-REMOTE-433-9-Mhz-G8D-644-M-/161467008398?

I pretty much use the same template all the time and just edit the links for the photos as and when i need to.
At the top of the listing "between Paypal verified logos" there are two photos of a key remote.
Towards the bottom of the listing "above & below important information about chips" there are also two photos.

I am using Dreamweaver and to change the bottom two photos i simply click the photo i wish to replace,then delete the old link & paste the new link in the src box at the bottom of the Dreamweaver screen,This is quick & easy.

This is not the same for when i wish to replace the top two photos,mainly because they have a hover over action on the ebay site & the setup code is different etc.

When i edit in Dreamweaver i need to first find the code,delete it using backspace etc for a while & then paste the new code.
This is now "after a year or two" a timely exercise.

So to cap it all,can the code be changed so editing the top photos are the same as how i edit the bottom photos with regards to the src box.
If so please can you advise so i can make the changes & make things a little quicker to edit the photos in the future.

Many thanks.

[theremotedr]

66 views and no reply.

I think cotehead did the original ?

[theremotedr]

I have now changed the code but could you check something for me please.

Here is the page in question.
http://www.ebay.co.uk/itm/TOYOTA-SMART-REMOTE-2-BUTTON-NEW-UNCUT-KEY-BLADE-B51EA-/161467043236?

When i update the two images at the top which show B51EA on them they are shown at 640 x 480.
I need to then edit the width & height in the code to 40% each time.
This happens every time i replace the image.
Could you advise please why this happens & advice how i can just update the image & the code stays at 40% as opposed to changing each time.

[Beverleyh]

The easiest way would be to edit the code in a plain text editor - the basic Notepad on a Windows computer would be fine for that.

Unfortunately it sounds like Dreamweaver is modifying other elements of the code when you use the visual drag and drop interface, so there's not much can be done about that except trying to not use it. But Im no Dreamweaver expert so for advice about Dreamweaver behaviour, maybe you could ask for help in a Dreamweaver focussed help forum?

I suspect that no one has replied because the active members do not use website builders. We're more the "code it yourself" types, who use text editors.

[theremotedr]

ok
Thanks for the reply.
I think i will get deeper in trouble if i go that way.

[theremotedr]

This simple code sorted it

.imagesize img{
width:40%; !important

[Beverleyh]

The semi-colon should be after !important
.imagesize img {
width:40% !important;
}

[theremotedr]

For my learning curver why would that make a difference ?3

[Beverleyh]

Because css declarations are separated with a semi-colon, so the correct syntax is
selector { property:value; property:value }!important gives greater emphasis to the declaration it is part of, so you need to enclose it inside the actual declaration (before the semi-colon that indicates the next property:value; pairing).
p { color:red !important; line-height:1.75 }

[theremotedr]

.imagesize img {
width:40% !important;
}

So i will now change it with what you have suggested.