Week 5 CSS Exercise

Well…finally got the blog/CSS exercise under control and (mostly) validated. Just a couple of things:

In the blog page, The DTD is for transitional, so I changed it to strict.

The links for the CSS needed to be between the <head> tags, not in the body.

So having changed those, the blog_final.html document was ‘tentatively’ validated. I need to make changes re the encoding to  make it ok. I need to declare the encoding somewhere. More research…

In terms of the CSS, changing some of the attributes was successful and easy enough, so I jumped to the ‘challenge’ part of the exercise. I couldn’t figure out where the pseudo class code for the hover functionality had to go–embarrassingly, it took ages (I refuse to say how long!) and although I looked online for it and found heaps of other stuff, nothing actually said where to put it. D’oh! It wasn’t until I checked Alastair’s video lecture notes again and  saw that it went outside of the styles that it worked. To make sure I would well and truly remember,  I added as many things as I could possibly think of,  including making the image go semi-transparent on hover. For the transparency, I used two commands  thinking that would make it work in most instances; however, the validator didn’t like it. Apparently one is recognised in 3.0 and not in 2.1. Here is what I based that decision on:

‘IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 – 1.0. A lower value makes the element more transparent.

IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 – 100. A lower value makes the element more transparent.’ (w3Schools.com, 2012)

I still have a bit more work to do on that and a few of the other issues the validator brought up–parse errors and such. Luckily, there are only a few! By the way, the validator validates according to CSS 2.1.

Here is the CSS code I used for making the image 50% transparent on hover:

img:hover
{
opacity:0.5;
filter:alpha(opacity=50);
}

My exercise is here

Julie

References:
CSS Image Opacity / Transparency. 2012. CSS Image Opacity / Transparency. viewed 31 March, 2012, <http://www.w3schools.com/css/css_image_transparency.asp/

The W3C CSS Validation Service. 2012. The W3C CSS Validation Service, viewed 31 March 2012, <http://jigsaw.w3.org/css-validator/>

The W3C Markup Validation Service. 2012. The W3C Markup Validation Service, viewed 31 March 2012, <http://validator.w3.org/>

Advertisements
Post a comment or leave a trackback: Trackback URL.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: