www.webdeveloper.com
Results 1 to 7 of 7

Thread: Vertical navigation background color

Hybrid View

  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,111
    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,111
    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
    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;

    }

  6. #6
    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.

  7. #7
    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

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