Images showing in incorrect order

HTML & CSS
1

[INDENT][/INDENT]I am currently doing a site with 3 images at the bottom of the page for links. For some reason they are showing in the wrong order and cannot understand why. The contact image is coming up first, about second and home is third. Can someone let me know what I have done wrong? Site isn’t up yet.

Vicki

HTML
<footer>
<a href=“http://www.ptnfilms.com/index.html” style class=“star”><img src=“images/star.png” alt=“PTN Films Home”></a><a href=“http://www.ptnfilms.com/about.html” style class=“star”><img src=“images/star.png” alt=“PTN Films About Page”></a>
<a href=“http://www.ptnfilms.com/contact.php” style class=“star”><img src=“images/star.png” alt=“PTN Films Contact Page”></a>
</footer>

CSS
.star {
float: right;
margin: 0 80px 10px 10px;
}

2

This is the way floating works, you floated Home first in the html so it is the closest to the right, you floated About second in the html so it is the second closest to the right and so on.

All you have to do is reverse the order of your stars in your html.

3

Thank you for that. I didn’t even think about it that way.

Vicki

4

You could float the footer right and then the anchors left and then you don’t need to change the html.

However those links really should be in a list structure as bare anchors next to each other is bad for accessibility as some screen readers will not pause between words but read it as a sentence. I would use a ul inside the footer floated right and then contain the anchors in list elements floated left.