-
-
2. Re: CSS Navigation Bar
nowherecreative Jul 17, 2008 12:54 PM (in response to pbsum83)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 Feb 14, 2013 2:04 PM (in response to pbsum83)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 Feb 14, 2013 2:03 PM (in response to pbsum83)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; }
>

