Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Mar 2013
    Posts
    2
    Member #
    35520
    I am new to css and still learning. please how do i get the image below ( navigation image attached) to work with the code below... is there something missing. i cant get the background color to show black when viewing an active page. i am using a xampp server on my pc..

    <!doctype html>
    <html lang="en" xml:lang="en">
    <head>
    <meta name="keywords" content="positioning,css,floats,visibility" />
    <meta name="description" content="positiong elements and making layouts" />
    <meta name="author" content="oghenekaro" />
    <meta charset="UTF-8" />
    <title>Rolof computers</title>
    <style>
    *
    {
    margin:0;
    padding:0;
    background-color:black;
    }

    #container
    {
    position:relative;
    margin:auto;
    top:0;
    left:0;
    }

    .ok
    {
    position:absolute;
    top:70px;
    left:180px;
    }
    .ok ul
    {
    list-style-type:none;
    }

    .ok ul li
    {
    float:left;

    }

    .ok ul li a
    {
    color:white;
    display:block;
    padding:10px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:bold;
    background-color: #DC291E;
    }

    .ok ul li a:hover,.ok ul li a:active
    {
    background-color:black;
    }

    .ok ul li a.first
    {border-radius:8px 0 0 8px;
    }

    .ok ul li a.second
    {border-radius:0 8px 8px 0;
    }

    </style>
    </head>
    <body>
    <div id="container">
    <div class="ok">
    <ul>
    <li><a class="first" href="/KARO/ro.htm">Home</a></li>
    <li><a href="">about us</a></li>
    <li><a href="/KARO/service.htm">our Services</a></li>
    <li><a href="">contact us</a></li>
    <li><a href="">our mission</a></li>
    <li><a href="">goals & objectives</a></li>
    <li><a class="second" href="#">request a quote</a></li>
    </ul>
    </div>

    </div>
    </body>
    </html>
    Attached Images Attached Images

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    All browsers behaving this way or just IE ?

  4. #3
    Junior Member
    Join Date
    Mar 2013
    Posts
    2
    Member #
    35520
    yes all browsers. (am currently using IE9,firefox 20 and google chrome 25.0.1364.152).. is there something wrong with my code..

  5. #4
    Member
    Join Date
    Aug 2011
    Posts
    64
    Member #
    28942
    Liked
    8 times
    just a guess from a newb, but if you want the current page your viewing to have the coordinating nav tab to be black, give your li an id of current on each page and decorate the id with a black background.
    ?

  6. #5
    Member
    Join Date
    Aug 2011
    Posts
    64
    Member #
    28942
    Liked
    8 times
    I just tried it out. Giving the link on the current page the id "current" and then decorating "current" with a background in your css with highlight it.

  7. #6
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    I think your making it too complicated...
    Here is what my nav code that is almost identical in style looks like

    CSS
    Code:
    #main-nav {
    width: 500px;
    background: #ccc;
    margin: 0;
    padding: 0;
    position: absolute;
    /* gradient */
    background: #6a6a6a url(images/nav-bar-bg.png) repeat-x;
    background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));
    background: -moz-linear-gradient(top,  #b9b9b9,  #6a6a6a);
    background-image: -o-linear-gradient(#b9b9b9, #6a6a6a);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#b9b9b9, endColorstr=#6a6a6a);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#b9b9b9, endColorstr=#6a6a6a )";
    /* rounded corner */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    /* box shadow */
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
    }
    
    #main-nav li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: relative;
    }
    
    .left{
    /* rounded corner */
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    }
    
    .right{
    /* rounded corner */
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    }
    
    #main-nav a {
    line-height: 100%;
    color: #fff;
    display: block;
    padding: 14px 15px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    font: 15px arial;
    }
    
    #main-nav a:hover {
    color: #fff;
    background: #474747;
    /* gradient */
    background: #6a6a6a url(images/nav-bar-bg.png) repeat-x;
    background: -webkit-gradient(linear, left top, left bottom, from(#6a6a6a), to(#b9b9b9));
    background: -moz-linear-gradient(top,  #6a6a6a,  #b9b9b9);
    background-image: -o-linear-gradient(#6a6a6a, #b9b9b9);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#6a6a6a, endColorstr=#b9b9b9);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#6a6a6a, endColorstr=#b9b9b9 )";
    }
    HTML
    Code:
    <nav>
    <ul id="main-nav">
    <li><a href="index.php" class="left">Something</a></li>
    <li><a href="about.php">Something</a></li>
    <li><a href="members.php">Something</a> </li>
    <li><a href="build.php">Something</a></li>
    <li><a href="contact.php" class="right">Something</a></li>
    </ul>
    </nav>
    Here is how it looks live on a website
    http://webmedia.vacau.com/test/
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs




Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:42 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com