4 Replies Latest reply: Feb 14, 2013 2:03 PM by Newsgroup_User RSS

    CSS Navigation Bar

    pbsum83 Community Member
      I am trying to make a navigation bar w/ rollovers using one background image w/ an external CSS file. I cannot figure out why this will not work. Any ideas?
        • 1. Re: CSS Navigation Bar
          pbsum83 Community Member
          Anyone?
          • 2. Re: CSS Navigation Bar
            nowherecreative Community Member
            I'm no expert at CSS, but I'll share with you a method that saved me.
            http://www.search-this.com/website-design/css-rollover-buttons/
            • 3. Re: CSS Navigation Bar
              Newsgroup_User Community Member

              Your code is awfully bloated and without live page with images, it's hard to
              guess what's going on there. Have a look at this page to see if it helps
              you.

              CSS Sprite Demo
              http://alt-web.com/CSS-Sprite-Demo.html

              --Nancy O.
              Alt-Web Design & Publishing
              www.alt-web.com


              "name removed by host" <webforumsuser@macromedia.com> wrote in message
              news:g5o7iv$cvn$1@forums.macromedia.com...
              > Anyone?


              • 4. Re: CSS Navigation Bar
                Newsgroup_User Community Member

                Hi.

                Why are you using the ? symbol in your IDs and in yours <a href=?#?> you 
                most use quotes:
                <ul id="nav-example"> <a href="#">

                Also, in your css try to change the background position to left top:
                #nav-example {
                background:url(images/navbar.jpg) left top no-repeat;

                And add the relative position to:

                #nav-example li {
                float:left;
                list-style:none;
                display:inline;
                position:relative;
                }

                Make this changes to see if work.

                Miguel



                "name removed by host" <webforumsuser@macromedia.com> escribió en el mensaje de 
                noticias news:g5o0ld$5lq$1@forums.macromedia.com...
                >I am trying to make a navigation bar w/ rollovers using one background 
                >image w/
                > an external CSS file. I cannot figure out why this will not work. Any 
                > ideas?
                >
                > HTML FILE:
                >
                > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                > " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                > <html xmlns=" http://www.w3.org/1999/xhtml">
                > <head>
                > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                > <title>Untitled Document</title>
                > <link href="newstyle.css" rel="stylesheet" type="text/css" />
                > </head>
                >
                > <body>
                > <ul id=?nav-example?>
                > <li id=?nav-example-01?><a href=?#?><span>Home</span></a></li>
                > <li id=?nav-example-02?><a href=?#?><span>About</span></a></li>
                > <li id=?nav-example-03?><a href=?#?><span>News</span></a></li>
                > <li id=?nav-example-04?><a href=?#?><span>Resources</span></a></li>
                > <li id=?nav-example-05?><a href=?#?><span>Ideas</span></a></li>
                > <li id=?nav-example-06?><a href=?#?><span>Events</span></a></li>
                > <li id=?nav-example-07?><a href=?#?><span>Partners</span></a></li>
                > <li id=?nav-example-08?><a href=?#?><span>Global</span></a></li>
                > </ul>
                > </body>
                > </html>
                >
                >
                > CSS FILE:
                >
                > #nav-example {
                > background:url(images/navbar.jpg) no-repeat;
                > width:777px;
                > height:45px;
                > margin:0;
                > padding:0;
                > }
                >
                > #nav-example span {
                > display: none;
                > }
                >
                > #nav-example li, #nav-example a {
                > height:45px;
                > display:block;
                > }
                >
                > #nav-example li {
                > float:left;
                > list-style:none;
                > display:inline;
                > }
                >
                > #nav-example-01 {width: 87px;}
                > #nav-example-02 {width: 88px;}
                > #nav-example-03 {width: 74px;}
                > #nav-example-04 {width: 137px;}
                > #nav-example-05 {width: 81px;}
                > #nav-example-06 {width: 86px;}
                > #nav-example-07 {width: 117px;}
                > #nav-example-08 {width: 107px;}
                >
                > #nav-example-01 a:hover {background:url(/images/navbar.jpg) 0px -40px
                > no-repeat; }
                > #nav-example-02 a:hover 
                > {background:url(/images/navbar.jpg) -87px -40px
                > no-repeat; }
                > #nav-example-03 a:hover 
                > {background:url(/images/navbar.jpg) -175px -40px
                > no-repeat; }
                > #nav-example-04 a:hover 
                > {background:url(/images/navbar.jpg) -249px -40px
                > no-repeat; }
                > #nav-example-05 a:hover {background:url(/images/navbar.jpg) -386px -40px
                > no-repeat; }
                > #nav-example-06 a:hover 
                > {background:url(/images/navbar.jpg) -467px -40px
                > no-repeat; }
                > #nav-example-07 a:hover 
                > {background:url(/images/navbar.jpg) -553px -40px
                > no-repeat; }
                > #nav-example-08 a:hover 
                > {background:url(/images/navbar.jpg) -670px -40px
                > no-repeat; }