Image doesn't flip?

I thought I coded this page right.
http://www.nikelantiquedolls.com/newindex.php
but the image doesn’t seem to be a link (pointer doesn’t change and the image doesn’t flip)
Also, I really dont understand wshat display:block does, can someone explain it to me like im stupid, please?

Hi Luke,

text-indent: -9999px; is hiding the text, and because it’s an inline element there’s nothing further to click on.
display: block on h1 doesn’t do anything as h1 is already a block level element.

You need to make inline elements like <a> tags display: block; when you want to give them a height or width.


h1 a {
    display: block;
    height: 100px;
    width: 329px;
}

Inline elements flow around other inline elements and block level elements occupy the given space.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<style>
span { background: pink; height: 300px; width: 300px }
a { background: lightgreen; height: 300px; width: 300px }
div { background: lightblue; height: 300px; width: 300px }
</style>
</head>
<body>

<span>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<a href="#">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</a>
<div>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<span>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
<a href="#">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</a> 

</body>
</html>

ok, got rid of the display:block on the <h1>and applied it on the <a> (and gave it a width and height)
So now the link works /(the pointer changes) but why doesn’t the image flip?

Thanks…

Because you’re changing the background-position on the link, but the background image is on the h1.


header[B] h1:hover[/B] {
    background-position: 0 -100px;
}

It would probably be better to move the bg image to the link itself, or better still, use a better image replacement technique, like this:

http://www.pmob.co.uk/temp/headerreplacement3.htm

Now, I cant figure out why when I try to clearfix (http://www.webtoolkit.info/css-clearfix.html) both of my floated objects, both of them seem to ignore the centered #wrapper and snap to the left, should I ditch this method and just go <br style:clear:both /> at the end of #wrapper? http://www.nikelantiquedolls.com/newindex.php

Caused by this.


.clearfix {
    display: inline-block;
}

You’ve also got spelling mistakes </hheder>, cearfix