But the problem is the css. I get how the css assigns a name to the picture in that code, but it doesn't look like css I've ever seen before, and as far as I know doesn't use div's so I couldn't assign it to a stylesheet.
The code there is this:
![]()
style=" left: 0px; position: absolute; top: 50px"
height=auto;
width=auto;
align=baseline;
src="ani_cat.gif">
I tried to change it to something more like this:
This worked to display the image, but it broke the animation.
I don't get why.
Stylesheets/CSS can only assign values to the style of an element. You can't set things like ID or CLASS attributes using CSS. Where it gets confusing is that, for mostly historical reasons, some elements have attributes that are pretty much equivalent to styles (IMG has width and height attributes, for example, but with and height are also style attributes).
Some other observations:
You don't need a DIV to style any element, CSS can style pretty much anything (the exception being form widgets which are usually restricted from styling in some ways). If you have an IMG or DIV or P or H3 or whatever with an ID attribute, you can style it using the CSS:
TEXT
#id-of-element {
style-attribute: value;
another-style-attribute: value2;
}
If you want to style a group of elements, you generally want to target the CLASS attribute (IDs must be unique, classes are designed to be used on multiple elements):
TEXT
![]()
TEXT
.class-of-element {
border: 1px solid black; /* for example */
}
The idea behind IDs and CLASSes is to let scripts and style sheets target the HTML elements. There would be no point to setting IDs and CLASSes using CSS even if you could.
If you want to style all elements of some type (IMG, H3, whatever) you can do that too:
h3 {
border: 2px solid red;
background-color: blue;
}
Note the # and . preceding ids and classes in the CSS.
Last note: in CSS you NEVER use an = sign. Style attributes are assigned using name: value (not name= value). You should also pay close attention to the exact position of quote marks and other delimiters, or it'll just not work.
I recommend you use firefox with the firebug extension installed and enabled. Also, switching on Firefox's error console should give you decent feedback about any javascript, css and html errors you might be making.
PS: if you want to animate anything, the "position: absolute" style attribute is essential, so leave it in the stylesheet or the HTML. Throw out the "float: $whatever". Position and Float are conflicting attributes. Read up on those attributes if you're interested later.
