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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Sprites Navigation Menu Horizontal Alignment Problem

    I'm re-designing my website, 960px wide, with a more interactive and user friendly navigation bar. I'm using 5 separate png images as each button (home, about, services, portfolio, contact us) designed on photoshop. These buttons are [150px by 135px] in size each, with the three different states (inactive, hover, click) being displayed [150px by 45px] in each state. I can't figure out the CSS coding to orient this list horizontally instead of vertically. How do I make each button butt up side by side horizontally instead of top to bottom vertically??

    ---------------------------------------html -----------------------------------------
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Jester Graphics - Creative Design Studios</title>

    <link rel="stylesheet" type="text/css" href="style.css" />

    <style type="text/css">
    body
    {
    background-image:url('images/bgnd.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    }
    </style>
    </head>

    <body><div id=container>
    <a href="index.html" title="home"><img src="/Users/chadhunkele/Desktop/jester-graphics/img/head.png" width="960px" />
    <header role="banner"><nav id="navmenu">
    <ul><li><a href="index.html" title="home" class="button1">
    <img src="/Users/chadhunkele/Desktop/jester-graphics/img/home.png" width="150" height="37" border="0" style="border:none;"
    alt="Home Button" /></a></li>
    <li><a href="about.html" title="About" class="button2">
    <img src="/Users/chadhunkele/Desktop/jestergraphics/images/about.png" width="150" height="135" border="0" style="border:none;"
    alt="About Button" /></a></li>
    <li><a href="services.html" title="Services" class="button3">
    <img src="/Users/chadhunkele/Desktop/jester-graphics/img/services.png" width="150" height="37" border="0" style="border:none;"
    alt="Services Button" /></a></li>
    <li><a href="portfolio.html" title="Portfolio" class="button4">
    <img src="/Users/chadhunkele/Desktop/jester-graphics/img/portfolio.png" width="150" height="37" border="0" style="border:none;"
    alt="Portfolio Button" /></a></li>
    <li><a href="contact.html" title="Contact Us" class="button5">
    <img src="/Users/chadhunkele/Desktop/jester-graphics/img/contact.png" width="150" height="37" border="0" style="border:none;"
    alt="Contact Us Button" /></a></li></ul>

    <div id="icons"><a href="https://twitter.com/#!/JesterGraphics" target="_blank" title="Jester Graphics Twitter">
    <img src="/Users/chadhunkele/Desktop/jester-graphics/img/ticon.png" width="37" height="37" border="0" style="border:none;"
    alt="Twitter Icon" /></a>
    <a href="http://jestergraphics.wordpress.com/" target="_blank" rel="external"
    title="Jester Graphics Blog">
    <img src="/Users/chadhunkele/Desktop/jester-graphics/img/wicon.png" width="40" height="40" border="0" style="border:none;"
    alt="Wordpress Icon" /></a>
    <a href="http://www.flickr.com/photos/jestergraphics/" rel="external" target="_blank">
    <img src="/Users/chadhunkele/Desktop/jester-graphics/img/ficon.png" width="37" height="37" border="0" style="border:none;"
    alt="Flickr Icon" /></a>
    <a href="http://www.linkedin.com/profile/view?id=163716148&amp;trk=tab_pro" rel="external" target="_blank">
    <img src="/Users/chadhunkele/Desktop/jester-graphics/img/licon.png" width="37" height="37" border="0" style="border:none;"
    alt="LinkedIn Icon" /></a></div></nav></header>

    <footer role="contentinfo"><p><small>&copy; Copyright Jester Graphics L.L.C. 2012 Design by: Craig Hunkele</small></p></footer>


    </div></body></html>




    -------------------------------------------CSS----------------------------------------

    #container {
    position: relative;
    margin: auto;
    width: 960px;
    height: auto;

    }

    .content-nav {
    list-style: none;
    padding: 0;
    }
    .button1 {
    background: url(/Users/chadhunkele/Desktop/jestergraphics/images/home.png) no-repeat 0 0;
    width: 150px;
    height: 45px;
    display: block;
    text-indent: -9999px;
    }

    .button1:hover {

    background-position: 0 -45px;

    }

    .button1:active { background-position: 0 -90px; }

    .button2 {
    background: url(/Users/chadhunkele/Desktop/jestergraphics/images/about.png) no-repeat 0 0;
    width: 150px;
    height: 45px;
    display: block;
    text-indent: -9999px;
    }

    .button2:hover {

    background-position: 0 -45px;

    }

    .button2:active { background-position: 0 -90px; }

    .button3 {
    background: url(/Users/chadhunkele/Desktop/jestergraphics/images/services.png) no-repeat 0 0;
    width: 150px;
    height: 45px;
    display: block;
    text-indent: -9999px;
    }

    .button3:hover {

    background-position: 0 -45px;

    }

    .button3:active { background-position: 0 -90px; }

    .button4 {
    background: url(/Users/chadhunkele/Desktop/jestergraphics/images/portfolio.png) no-repeat 0 0;
    width: 150px;
    height: 45px;
    display: block;
    text-indent: -9999px;
    }

    .button4:hover {

    background-position: 0 -45px;

    }

    .button4:active { background-position: 0 -90px; }

    .button5 {
    background: url(/Users/chadhunkele/Desktop/jestergraphics/images/contact.png) no-repeat 0 0;
    width: 150px;
    height: 45px;
    display: block;
    text-indent: -9999px;
    }

    .button5:hover {

    background-position: 0 -45px;

    }

    .button5:active { background-position: 0 -90px; }

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    try

    #navmenu ul li { float:left; }

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I figured it out, I was calling up the link images in both, my html and my css so the images were duplicated and overflowing with each other. I deleted the html call up for each image and used absolute positioning to line them up overtop my main header image. Thanks


  •  

    Tags for this Thread

    Posting Permissions

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