Turn This Into CSS!

[MasumX]

can anyone please turn this into css so, it would be easy for me to "Random" the skin...by switching the css... so help me to turn it in css thanks

<img src="images/line.gif" alt="" width="119" vspace="2" />

make sure there is vspace="2" i need that

[wishiwasageek]

I guess you could put the following in your CSS:

.skin { width:119px; padding-bottom:2px;}

and then this in your HTML:
<img scr="images/line.gif" alt="a horizontal line" class="skin">

But in your questions you haven't specified what units you want (pt, px, % etc)
You should probably specify a height too?

WIWAG

[mwinter]

can anyone please turn this into css [...]

<img src="images/line.gif" alt="" width="119" vspace="2" />

The only thing that needs to be removed is the vspace attribute, though you can remove the width attribute as well. The former would be replaced by either a margin or padding. Padding would expand the region inside a border (if the element had one). A margin would expand the region outside the border. The CSS specification contains a helpful diagram which illustrates the difference. Padding would be ignored by earlier IE versions, so a margin might be better. A width declaration is included below, which you can either delete or uncomment if you want to use it.

selector {
  /* 2 pixel margin above and below the element.
   * No margin to the left and right.
   */
  margin: 2px 0;

  /* width: 119px */
}

What you replace selector with will depend on whether this line is used more than once with the same style. If it occurs several times, replace it with a class. For example:

<img class="separator" alt="" src="images/line.gif" />

.separator {
  margin: 2px 0;
  width: 119px;
}

The leading dot is important.

If there is only one such line, use an id instead:

<img id="separator" alt="" src="images/line.gif" />

#separator {
  margin: 2px 0;
  width: 119px;
}

By the way, the slash at the end of the tag should only be included if you're writing XHTML. There is an increase in the use of XHTML-like markup though authors are still writing HTML.

<img scr="images/line.gif" alt="a horizontal line" class="skin">

If an image is purely decorative, it should not have substantial alternative text. Consider how a document would be rendered in a text-only user agent, or by an aural browser or screen reader. Is rendering "a horizontal line" actually useful? If not, the value should be empty as the OP originally had it (and as I left it), or perhaps a space if text before and after the image would be concatenated.


A final thought for the OP: rather than an actual image, could you achieve the same thing with a border along the edge of an element, or perhaps a background image repeated horizontally along an element?

Hope that helps,
Mike

[sunny]

<img class="separator" alt="" src="images/line.gif" />

.separator {
  margin: 2px 0;
  width: 119px;
}

The leading dot is important.

If there is only one such line, use an id instead:

<img id="separator" alt="" src="images/line.gif" />

#separator {
  margin: 2px 0;
  width: 119px;
}

MY QUESTION:
Is it possible to define id or class after using them as mike has done in the case of 'separator'

[MasumX]

mwinter, i wanted something on bg i'll explain u what i mean...n ur method wont work the way i want ( or maybe i didnt explain correctly) i want it like "ON CHANGE CSS" change all images automaticly from css something like this..

#line
{
vspsace: 2px; ( i no its not a css syntax but just an example)
height: 2px;
background: url(images/line.gif) no-repeat;

}

so in xhtml i would put it like..

<div id="line"></div>

now it will show the line with NO REPEAT having vspace:2px; !! hope u get it now?

[MasumX]

ok nvm but i got it !