SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Melbourne, Australia
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    images showing in incorrect order

    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. #2
    SitePoint Member Noctuary's Avatar
    Join Date
    Jul 2012
    Posts
    10
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Melbourne, Australia
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for that. I didn't even think about it that way.

    Vicki

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •