7 Replies Latest reply on Aug 9, 2011 4:11 PM by sillymunky

    Active page style to nav bar

    sillymunky

      Hi, I started from a dreamweaver template and made changes to customize my site. I'm desperately trying to apply a css style to my active page nav bar id and I just can't get it right.  I've given my body and ID. Then I added a css style to my sheet.  It's not working.  The hover css style works fine, and the style I gave it for active works as I click but the colour doesn't stay on.  It goes back to the original.  Can anyone help me out.  Thanks

        • 1. Re: Active page style to nav bar
          Ken Binney Adobe Community Professional & MVP

          Not without seeing your files on your server.

          Please post a link.

          • 2. Re: Active page style to nav bar
            sillymunky Level 1

            Sorry my site isn't up and running yet... but here is the main part of my page if that helps.  My navigation buttons are black with light grey text, hover changes to a dark grey with white text, when clicking on the links, the red appears as per the active css but it goes back to the original black as soon as I let go of the click.  I am missing an item that will tell my browser that the page is active, I just have no clue and I have been on this all day.  I would really appreciate any help.

             

            <!DOCTYPE HTML>
            <html>
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <link href="tabs.css" rel="stylesheet" type="text/css" />
            <title>mission impossible</title>

             

            <style type="text/css">
            <!--
            body {
                margin: 0;
                padding: 0;
                color: #000;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 100%;
                line-height: 1.4;
                background-color: #000000;
                background-image: url;


            ul, ol, dl {
                padding: 0;
                margin: 0;
            }
            h1, h2, h3, h4, h5, h6 {
                margin-top: 5px;
                padding-right: 15px;
                padding-left: 15px;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 24px;
                line-height: 32px;
                margin-bottom: 10px;
            }
            p {
                margin-top: 5px;
                padding-right: 15px;
                padding-left: 15px;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 14px;
                text-align: left;
                line-height: 20px;
                vertical-align: top;
            }
            p1 {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 11px;
                color: #999999;
                font-weight: normal;
            }
            a img {
                border: none;
            }
            a:link {
                color: #42413C;
                text-decoration: underline;
            }
            a:visited {
                color: #6E6C64;
                text-decoration: underline;
            }
            a:hover, a:focus {
                text-decoration: none;
            }
            a:active {
                color: #EEE;
                background-color: #880000;
            }
            .container {
                width: 960px;
                margin: 0 auto;
                background-color: #CCC;
            }
            .header {
                background-color: #999999;
                background-image: url;
                position: relative;
                height: 170px;
                width: 960px;
                background-position: center bottom;
                margin-top: 5px;
                text-align: left;
            }
            .dbanner {
                background-color: #999999;
                background-image: url;
                position: relative;
                height: 40px;
                width: 960px;
                background-position: center;
                font-family: Arial, Helvetica, sans-serif;
                padding-top: 0px;
                padding-right: 0px;
            }
            .sidebar1 {
                float: left;
                width: 179.9px;
                background-color: #000000;
                padding-top: 25px;
                height: 400px;
            }
            .content {
                padding: 20px 0;
                width: 780px;
                float: left;
                font-family: Arial, Helvetica, sans-serif;
            }
            .content ul, .content ol {
                padding: 0 15px 15px 40px;
            }
            ul.nav {
                list-style: none;
                border-top: 1px solid #666;
                margin-bottom: 15px;
                font-family: Arial, Helvetica, sans-serif;
            }
            ul.nav li {
                border-bottom: 1px solid #666;
            }
            ul.nav a, ul.nav a:visited {
                display: block;
                width: 158px;
                text-decoration: none;
                background-color: #000000;
                color: #666;
                border-left-width: thin;
                border-top-style: none;
                border-right-style: none;
                border-bottom-style: none;
                padding-top: 5px;
                padding-right: 5px;
                padding-bottom: 5px;
                padding-left: 15px;
            }
            ul.nav a:hover {
                color: #CCC;
                background-color: #333333;
                font-size: 100%;
            }
            ul.nav a:focus {
                color: #CCC;
                background-color: #333333;
                font-size: 100%;
            }
            ul.nav a:active {
                color: #EEE;
                background-color: #880000;
                font-size: 100%;
            }
            .footer {
                padding: 10px 0;
                position: relative;
                clear: both;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 8px;
                text-align: center;
                border-top-width: thin;
                border-right-width: thin;
                border-bottom-width: thin;
                border-top-style: groove;
                border-top-color: #333;
                border-right-color: #333;
                border-bottom-color: #333;
                background-color: #C60;
                color: #EBEBEB;
                background-image: url;
                font-weight: bold;
            }
            .fltrt { 
                float: right;
                margin-left: 8px;
            }
            .fltlft {
                float: left;
                margin-right: 8px;
            }
            .clearfloat {
                clear:both;
                height:0;
                font-size: 1px;
                line-height: 0px;
            }
            .date {
                font-family: Arial, Helvetica, sans-serif;
                font-size: 90%;
                float: right;
                margin-left: 8px;
                padding-top: 8px;
                padding-right: 10px;
                font-weight: normal;
                color: #FF9900;
                text-align: right;
            }
            -->
            </style>
            </head>
            <body id="index">

             

            <div class="container">
              <div class="header">

            </div>
              <div class="dbanner">
                <div class="date">
                  <!-- #BeginDate format:fcAm1a -->Tuesday, August 9, 2011 4:37 PM<!-- #EndDate -->
                  </div>
                  </div>
              <div class="sidebar1">
                <ul class="nav">
                    <li><a href="../index.html" id="index">WHO WE ARE</a></li>
                  <li><a href="../products.html" id="products">OUR PRODUCTS</a></li>
                  <li><a href="../contact.html" id="contact">CONTACT US</a></li>
                  <li><a href="../links.html" id="links">SPECIAL LINKS</a></li>
                </ul>

            • 3. Re: Active page style to nav bar
              Nancy OShea Adobe Community Professional & MVP

              Try this tutorial:

              http://alt-web.com/Articles/Persistent-Page-Indicator.shtml

               

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists 
              http://alt-web.com/
              http://twitter.com/altweb

              • 4. Re: Active page style to nav bar
                sillymunky Level 1

                Link doesn't seem to exist anymore.

                • 5. Re: Active page style to nav bar
                  sillymunky Level 1

                  Thank you thank you thank you, the link worked perfectly and I am just so relieved.

                   

                  Works like a charm!

                  • 7. Re: Active page style to nav bar
                    sillymunky Level 1

                    Yes, sorry I actually had it opened in another broweser on my desktop before I even received your message, that was what I was looking at before having dinner, when I returned I clicked on your link and it returned a message it did not exist however, when closing my browsers I noticed I had it running already!

                    Thanks again for taking the time,

                    Sylvie