5 Replies Latest reply on Dec 23, 2010 12:07 AM by james2483

    Trying to build a navigation system in css. Can someone help me out?

    Saedalama

      I am trying to build a navigation system in here. What is the best way to code it. I most of the page coded, but having problems insert the buttons and text in. Here is the code I have for the top part of the page

      <body>
      <div id="container">
        <div id="header"></div>
        <div id="navigation">
        <img alt="active home" src="images/active home.png"/></br>
        <!-- end .navigation --></div>
      <div id="sidebar"> <!-- end .sidebar1 --></div>

       

      body {
          margin: 0;
          background: #000;
      }
      ol, ul {
          list-style: none;
      }

       

      table {
          border-collapse: separate;
          border-spacing: 0;
      }
      caption, th, td {
          text-align: left;
          font-weight: normal;
      }
      blockquote:before, blockquote:after,
      q:before, q:after {
          content: "";
      }
      blockquote, q {
          quotes: "" "";
      }

       

      body {
          font: Normal 100%/1.5em Arial, Sans Serif;
          background: #000000;
          margin: 0;
          padding: 0;
          color: #5e5e5e;
      }
      ul, ol, dl {
          padding: 0;
          margin: 0;
      }
      h1, h2, h3, h4, h5, h6, p {
          margin-top: o;
          padding-right: 15px;
          padding-left: 15px;
      }
      a img {
          border: none;
      }
      a:link {
          color: #535353;
          text-decoration: underline;
      }
      a:visited {
          color: #6E6C64;
          text-decoration: underline;
      }
      a:hover, a:active, a:focus {
          text-decoration: none;
      }
      #container {
          width: 990px;
          background: #FFF;
          margin: 0 auto;
      }
      #header {
          background: #ADB96E;
          width: 990px;
          height: 193px;
          background-image: url(../images/header.jpg);
          background-repeat: no-repeat;
      }
      h1 {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 100%;
          margin-bottom: 10px;
          font-variant: small-caps;
          font-style: inherit;
      }
      #header .active home{
          background-repeat: no-repeat;
         
      }
      ul.dropdown li{
          float:left;
           font-family:Arial,Helvetica,sans-serif;
          height:30px;
          list-style:none outside none;
          padding:5px;
          width:100px;
      }

       

      p { font: Arial, Helvetica, sans-serif; font-size:12px; text-align: left; width:400px; letter-spacing:1px; }

       

      #sidebar {
          float: left;
          width: 250px;
          height: 1000px;
          background: #ffffff;
          margin: auto;
          padding-bottom: 10px;
          padding-top: 45px;
      }
      #navigation {
          width: 990px;
          height: 48px;
          background-image: url(../images/blue-bar_03.jpg);
          background-repeat:no-repeat;

       

      }

       

      and I want it to look like this:Screen shot 2010-11-24 at 10.57.35 PM.png