Saturday, October 27, 2012

How to Use Sprites with HTML

The homework for my web graphics class this week was to use sprites with a nav bar and HTML. 


Fireworks

First I created the sprites in Fireworks.   The image looks like this:




The article that I was going by did not say anything about creating states.  It just said export it as a nav.png  I did export the image but only in a .gif file.  Firefox (version 5) would not give an option to export in .png I used paint to convert it.

HTML

Next I wrote the HTML passed W3C with 2 warnings.

Use the W3C Validator at 
http://validator.w3.org to check for XHTML syntax errors.


I was not able to get the sprite to work at first. When I removed the css style sheet I could see the next from the nav bar.
so it must have been something to do with the css.



CSS file is called mod9css.css

Last I wrote the CSS.  It just tells which part of the png file to show but the part I don't get is how does the mouse know where you are.
I am not sure what all the # symbols are for.  Active focused selected and hover seem like they are states that you should set up in Fireworks.

The page looks like this right now.   The nav.png file is being called because you can see the graphics, but the css is not rendering correctly.  When I replace the nav.png with the one in Blackboard things look worse.  Nothing shows up.


No errors found on w3c validator.

Use the W3C Validator at http://jigsaw.w3.org/css-validator to check for CSS syntax errors. 

One problem I had was that I did not slice my file up in to pieces.  It was one big piece.  At first I though I was supposed to use states, but it was the slice that I wanted.  This is why I could not save the file as a .png.  It only gave me at. gif as an option.





The image is aligned property but sprites do not work.






CSS Sprites only work when the CSS is in the HTML file and not a separate file.

2 comments:

dysfunction said...

I'm extremely impressed with your writing skills and also with the layout on your weblog. Is this a paid theme or did you customize it yourself? Anyway keep up the nice quality writing, it is rare to see a nice blog like this one these days.

erectile dysfunction said...

Today, I went to the beach front with my kids. I found a sea shell and gave it to my 4 year old daughter and said "You can hear the ocean if you put this to your ear." She placed the shell to her ear and screamed. There was a hermit crab inside and it pinched her ear. She never wants to go back! LoL I know this is completely off topic but I had to tell someone!