SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Floats Driving Me Nuts, Please Help

    I've got a simple older/newer stuff navigation thing going here. My floats lay the two buttons out properly but it's as if the right float is on top of the left because I can't click the left float.

    Here is the HTML:
    Code:
    		<div id="page-nav">
                <div class="older"><a href="#>Older Stuff</a></div>
                <div class="newer"><a href="#">Newer Stuff</a></div>
    		</div>
    and the CSS:
    Code:
    /* Page Navigation */
    #page-nav { width: 500px; height: 80px; margin: 25px 5px 20px 50px; padding: 0; display: block; }
    .older a { margin: 0; padding: 0; background: url(images/layout/older.png) top no-repeat; width: 141px; height: 77px; text-indent: -9999px; }
    .older a:hover { background: url(images/layout/older.png) bottom no-repeat; width: 141px; height: 77px; }
    .older { float: left; }
    .newer a { margin: 0; padding: 0 15px 0 0; float: right; background: url(images/layout/newer.png) top no-repeat; width: 140px; height: 79px; text-indent: -9999px; }
    .newer a:hover { background: url(images/layout/newer.png) bottom no-repeat; width: 140px; height: 79px; }
    .newer { float: right; }
    I've been looking at this all day and can't figure it out. Thanks.

  2. #2
    SitePoint Addict
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some questions:

    Why not just use an inline list for navigation instead of floating the images?

    Are you saying that you cannot click on the left graphic, or that when you click the left graphic you go to the link for the right graphic?

    What is the reason for the "text-indent"?

    Thanks
    Joe

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by young72 View Post
    Some questions:

    Why not just use an inline list for navigation instead of floating the images?

    Are you saying that you cannot click on the left graphic, or that when you click the left graphic you go to the link for the right graphic?

    What is the reason for the "text-indent"?

    Thanks
    I guess I could use a list... I hadn't thought about that. Perhaps I'll play with it a bit.

    You can't click the left graphic at all when the right one is visible (in Firefox, Safari has no problems, untested in IE).

    The text-indent is so that if for some reason the site shows up without CSS there is still text for the link.

  4. #4
    SitePoint Addict
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just found something to explain why the left side is not clickable. There is a quotation mark missing from the following html stmt: <div class="older"><a href="#>Older Stuff</a></div>. See the pound sign after href=.
    Joe

  5. #5
    CTO htmlguy's Avatar
    Join Date
    Feb 2005
    Location
    North Carolina
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And in your html, you should have the "newer" div before the "older" div.
    Zack

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. The missing " in my herf was just transcribing. I took the actual links out to clean up the code a bit. I moved newer in front of older, but now they don't align. When I switched older before newer, they still don't align. I've been playing with the CSS but I still can't seem to figure this out.

    Updated CSS:
    Code:
    #page-nav { width: 500px; height: 80px; margin: 25px 5px 20px 50px; padding: 0; }
    .older a { margin: 0; padding: 0; background: url(images/layout/older.png) top no-repeat; width: 141px; height: 77px; text-indent: -9999px; display: block; }
    .older a:hover { background: url(images/layout/older.png) bottom no-repeat; width: 141px; height: 77px; display: block; }
    .older { float: left; }
    .newer a { margin: 0; padding: 0 15px 0 0; float: right; background: url(images/layout/newer.png) top no-repeat; width: 140px; height: 79px; text-indent: -9999px; display: block; }
    .newer a:hover { background: url(images/layout/newer.png) bottom no-repeat; width: 140px; height: 79px; display: block; }
    .newer { float: right; }

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You haven't given your floats a width so when you float .newer to the right it expands to 100&#37; width and therefore will not fit on the same line as the other float. Just give .older a background color and it will be obvious.

    Adding widths should cure the problem.

    Code:
    .newer { float: right;width:50% }
    .older { float: left;width:50% }

  8. #8
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well there we go, I learned something. I had assumed that the width was taken from the a class. Cool, thanks Paul.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Well in essence floats will shrink wrap to their content but you have an inner float as well which stretches the parent in Firefox.

    If you remove the float from your right anchor then your original code would also work.

    Code:
    .newer a{float:none;}
    .newer { float: right; }


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
  •