Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts

    RESOLVED CSS Hover w/ Displace Not Working

    I'm using a CSS hover method that displaces part of an image to create a hover effect (once the mouse is placed over the image, the other half of the image is "uncovered" or "slides over", making it appear as a mouse over effect).

    The navigation bar on this page uses that CSS hover effect. But the menu buttons are falling under one another instead of appearing inline, one after the other. How do I fix that?

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I dont see anything special on the example page you gave, but could you post your code or a link to your site in question?

  • #3
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Oh - on the page, it's that top fat black bar which should appear as the navigation bar. I'm using the button "Home" as sample nav bar buttons but they should all be appearing in a row rather than vertically stacked...

    Should I still post the code?

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I still dont see anything other than a color change for the "Home" links. Yes post your code and try to maybe explain what you're wanting and why your not getting the desired outcome.

  • #5
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You need to float those list items inside the navbar.

    li.navbarhome {
    display: inline;
    margin: 0px;
    padding: 0px;
    float:left;
    clear:none;
    }



    To keep your HTML CSS style clean, use an ID for that top navbar. Therefore your HTML markuup for the top nav would be:

    <ul id="navbar">
    <li><a href="http://www.americanchic.net">Home</a></li><li><a href="http://www.americanchic.net">Home</a></li><li><a href="http://www.americanchic.net">Home</a></li><li><a href="http://www.americanchic.net">Home</a></li><li><a href="http://www.americanchic.net">Home</a></li>
    </ul>


    and the CSS styles:

    #navbar {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }

    #navbar li{
    display: inline;
    margin: 0px;
    padding: 0px;
    float:left;
    clear:none;
    }


    #navbar li a{
    background: url(http://www.americanchic.net/website_...nav_home.png);
    display: block;
    height: 16px;
    text-decoration: none;
    width: 114px;
    }

    If you later need to target just a single link in your navigation bar, then you can set a unique id attribute for each li item in your navbar.
    Last edited by holyhttp; 11-03-2010 at 08:33 PM.

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Ahhh lol I thought you were asking something else..lol Sorry yes as the last poster said to get the links to align vertically, add the rules he suggested to your style sheet.

  • #7
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Got it. Thanks guys!!!


  •  

    Posting Permissions

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