6 Replies Latest reply on Apr 21, 2014 10:35 PM by kingpat27

    Navigation Bar

    kingpat27 Level 1

      I thought I followed the instructions to the letter but I can not turn the home button teal. Any suggestions?

        • 1. Re: Navigation Bar
          David_Powers Adobe Community Professional (Moderator)

          Without seeing both your HTML and CSS code, it's impossible to say. At a guess, though, it's likely to be a spelling mistake. CSS selectors are case-sensitive. Moreover, class names and IDs can't have spaces in them.

           

          The class used to style the Home button is thispage (all one word, and all lower case). If your HTML looks like this: class="this page", it means that two separate classes (one called "this", the other called "page") are being applied. Equally, if your HTML uses class="thisPage", but your CSS uses .thispage, the style won't be applied because the classes aren't spelled the same.

           

          Another possibility is that you have omitted the leading dot (period) before the class name in the CSS. In a style sheet, the leading dot indicates a class. But the leading dot is not used in the HTML.

          • 2. Re: Navigation Bar
            kingpat27 Level 1

            Should the group selector look like this:

            #mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnava .thispage

            • 3. Re: Navigation Bar
              David_Powers Adobe Community Professional (Moderator)

              It's almost right. There should be a space between #mainnav and a in the final selector:

               

              #mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a .thispage

              • 4. Re: Navigation Bar
                kingpat27 Level 1
                Is this how the code should look for the homepage?

                 

                 
                  • [Home | index.html]

                  • [Sightseeing | sightseeing.html]

                  • [Eating Out | #]

                  • [What's On | #]

                  • [Where to Stay | #]
                      </ul
                • 5. Re: Navigation Bar
                  David_Powers Adobe Community Professional (Moderator)

                  It's impossible to tell from your post whether the code is correct because of the way it has been rendered in the forum. However, you can check what the code should look like by examining the version in the completed folder of the download files.

                   

                  It should be like this:

                   

                      <nav id="mainnav">

                        <ul>

                          <li><a href="index.html" class="thispage">Home</a></li>

                          <li><a href="sightseeing.html">Sightseeing</a></li>

                          <li><a href="#">Eating Out</a></li>

                          <li><a href="#">What's On</a></li>

                          <li><a href="#">Where to Stay</a></li>

                        </ul>

                      </nav>

                  • 6. Re: Navigation Bar
                    kingpat27 Level 1

                    I still have troubles but thank you so much for your help.