www.webdeveloper.com
Results 1 to 7 of 7

Thread: Vertical navigation background color

  1. #1
    Join Date
    Oct 2012
    Posts
    5

    Question Vertical navigation background color

    I have two navigation menus...vertical and horizontal. I need different background colors for them. I can't seem to get the background color for the vertical navigation menu. Any help would be appreciated. Thank you.

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,119
    Can you post a link or code?
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Oct 2012
    Posts
    5
    Quote Originally Posted by cbVision View Post
    Can you post a link or code?
    <body>

    <header>
    <h1><img src="mwulogo.png" alt="Midwest University" /></h1>
    </header>


    <nav class="horizontal">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Courses</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Terms of Use</a></li>
    <li><a href="#">Feedback</a></li>
    <li><a href="#">Help</a></li>
    </ul>
    </nav>


    <nav class="vertical">
    <h4>Course Outline</h4>
    <ol>
    <li><a href="#">The Road to War</a>
    <ol>
    <li><a href="#">Planting the Seeds</a></li>
    <li><a href="#">The First Crisis</a></li>
    <li><a href="#">Compromise &amp; Failure</a></li>
    <li><a href="#">Fault Lines</a></li>
    </ol>
    </li>
    <li><a href="#">Politicians &amp; Generals</a>
    <ol>
    <li><a href="#">Politicians</a></li>
    <li><a href="#">Generals</a></li>
    </ol>
    </li>
    <li><a href="#">The Course of War</a>
    <ol>
    <li><a href="#">1861-1862</a></li>
    <li><a href="#">1863</a></li>
    <li><a href="#">1864-1865</a></li>
    </ol>
    </li>
    <li><a href="#">Aftermath</a>
    <ol>
    <li><a href="#">Lincoln Assassination</a></li>
    <li><a href="#">Reconstruction</a></li>
    <li><a href="#">A New Constitution</a></li>
    <li><a href="#">The United States Is ...</a></li>
    </ol>
    </li>
    </ol>
    </nav>



    /* Navigation list styles */


    nav ul {
    font-famiy: Century Gothic MS, sans-serif;
    font-size: 14 px;
    font-weight: bold;
    letter-spacing: 3 px;
    line-height: 20 px;
    }


    nav ul li a {
    text-decoration: none;
    }

    li a:hover {
    color: hsl(212, 100%, 29%);
    }

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,119
    They both look vertical using that code:
    http://jsfiddle.net/DECWs/

    Also, you don't have background defined at all.

    I added two lines for backgound color seen here:
    http://jsfiddle.net/DECWs/1/
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  5. #5
    Join Date
    Oct 2012
    Posts
    5
    I need to set the background color to the vertical navigation section to hsl(32, 100%, 95%)

    This is the CSS from the cw_layout

  6. #6
    Join Date
    Oct 2012
    Posts
    5
    nav.horizontal ul {
    display: block;
    width: 950px;
    height: 20px;
    }

    nav.horizontal ul li {
    display: block;
    float: left;
    text-align: center;
    width: 150px;
    }

    nav.vertical {
    clear: left;
    float: left;
    margin-right: 0px;
    width: 300px;

    }

  7. #7
    Join Date
    Oct 2012
    Posts
    5
    I have fixed it, but the color doesn't match up with my assignment...it looks white on the computer, but the book color looks tan.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles