Hi i have a list of cocktails- and each cocktail has a different image assigned to it at the right of its container - what would be the most standards freindly and least footprint way to orgainise the following code please

     .rightimg-icedtea { float: right;
background:url(images/iced-teas.png);
     height: 65px; width: 50px;
     background-repeat:no-repeat;
     margin-top: 10px; }

so i could have say classic, mojitos, fizz, specials ect - without repeating the whole block for every one ?

Essentially they are all the same - but the image changes for each one.
i sort of thought of defining .rightimg then say .icedtea, .classic etc - but am a little unsure the best way to go about this.
TIA.

define a global class rule for the containers then set the background image using the ID.

what code would you use for that chris? i have to be a bit careful here you see as its a Joomla template im using on this particular project and they have a tendancy to conflict on the cascade in some cases.

.rightimg {
     float: right;
     height: 65px;
     width: 50px;
     background-repeat:no-repeat;
     margin-top: 10px;
}
#icedtea {
    background-image:url(images/iced-teas.png);
}

<div id="icedtea" class="rightimg"></div>

ah ok chris - thanks for that - i sort of thought of doing it similar that way but thought it may be a case of divitis - but it would certainly work - ill give it a try thanks

LOL that's for sure not a case of DIVitis

It makes sense... but I would go another way (think of SEO, too).

Instead of using

.rightimg {
     float: right;
     height: 65px;
     width: 50px;
     background-repeat:no-repeat;
     margin-top: 10px;
}
#icedtea {
    background-image:url(images/iced-teas.png);
}

I would only use

.rightimg {
     float: right;
     height: 65px;
     width: 50px;
     background-repeat:no-repeat;
     margin-top: 10px;
}

and would use this markup:

<div class="rightimg"><img src="path/to/image.jpg" width="50" height="65" alt="image alt" title="The Image Cocktail" /></div>

offtopic:
50x65 ? that doesn't look like an image, but rather like an icon / bullet. Do not use image for it, stick to Chris' solution.

Hi,
Can i have some screen shot or site link to see what is the problem ??

im joining maheshadodis' request.

Originally Posted by c69

offtopic:
50x65 ? that doesn't look like an image, but rather like an icon / bullet. Do not use image for it, stick to Chris' solution.

"images" can range from a single pixel upwards, So no matter what size it is it will still be an image.

A 16x16 "favicon" is still an image.

Originally Posted by maheshadodis

Hi,
Can i have some screen shot or site link to see what is the problem ??

Originally Posted by Ornani

im joining maheshadodis' request.

Why??

If you look at the nature of the question and the OP can provide a link that shows what is required the issue would be solved!