4 Replies Latest reply on Apr 14, 2010 11:25 AM by Luban22

    div tag problem

    Luban22

      Hi there,

      i am creating a website.i seem to be having a bit of trouble with div tag...i think.the navigation bar and the main content seem to be overlapping each other.any ideas?id appreciated any help.

      thanks.

       

      <body>
      <div id="header">Heading</div>
      <div id = "nav">

      <ul id="Fyp">
        <li><a href="html/Index.html">Home</a>  </li>
        <li><a href="html/Conventional.html">Conventional Encryption</a></li>
        <li><a href="#">Public Key Encryption</a>
          <ul>
        <li><a href="html/PublicKey-Confidentiality.html">PublicKey-Confidentiality</a></li>
        <li><a href="html/PublicKey-Authentication.html">PublicKey-Authentication</a></li>
        <li><a href="html/Public Key-Confidentiality and Authentication.html">Public Key-Confidentiality and Authentication</a></li>
          </ul>
        </li>
        <li><a href="#">MAC Encryption</a>
          <ul>
        <li><a href="#">MAC - Message Authentication</a></li>
           <li><a href="#">Message Authentication and Confidentiality (Plaintext)</a></li>
           <li><a href="#">Message Authentication and Confidentiality(Ciphertext)</a></li>
      </ul>
        </li>
         <li><a href="#">HASH Encryption</a>
             <ul>
                  <li><a href="#">Encryption after Concatenation</a></li>
                  <li><a href="#">Encryption before Concatenation</a></li>
                    <li><a href="#">Authentication</a></li>
                  <li><a href="#">Authentication and Confidentiality</a></li>
                 <li><a href="#">Secret Value</a></li>
                <li><a href="#">Secret Value and Encryption</a></li>
           </ul>
          </li>
         <li><a href="#">Self Test</a></li>
      </ul>

      </div>

      <div id="main_content">
      <p> </p>
      <p>This is the home page for Message Authentication and Digital Signatures.This page will explain the funamental basis of these elements.</p>
      <p> </p>

      <p><strong>Authentication</strong>:</p>
      <p><a name="#Authtentication"></a> 
      The Authentication service is concerned with assuring that a communication is authentic. Authentication acts as an warning or a alarm signal. The function of the authentication service is to assure the recipient that he message is from the source that it calms to be from.</p>
      <p> </p>
      <p><strong>Confidentiality</strong>:</p>
      <p><a name = "Confidenitiality"></a>
        Confidentiality is the protection of transmitted data from passive attacks. This makes sure that the message sent can not be read by anyboby except for the intended recipient  .
      </p>
      <p> </p>
      <p><strong>Public Key:</strong></p>
      <p><a name = "Public Key"></a>
      </p>
      <p><strong>Digital Signature:</strong>
      <p><a name = "Digital Signature"></a></p>
      </p>
      <p><strong>Integrity:</strong>
      <p><a name = "Integrity"></a> </p>

      <p><strong>MAC Function:</strong></p>
        <p><a name = "MAC"></a> </p>
      <p>A MAC (Message Authentication Code) is a small fixed size block of data that is appended to the message. The technique assumes hat two communicating parties say (Source A and B) share a common secret key(k). When A sends a message to B, it calculates the MAC as a function of the message and the key. The recipient performs the same calculation on the received message using the same key, to generate a new MAC. The received MAC and the calculated MAC are then compared. If the received MAC matches the calculated MAC, then the message is said to be authentic.</p>
      </p>
      </div>
      <div id="footer">
      <p>
      Footer - all about the designer and contact links go here
      </p>
      </div>
      </body>
      </html>

        • 1. Re: div tag problem
          osgood_ Level 8

          Can you give us the css that styles the page as well please?

          • 2. Re: div tag problem
            Luban22 Level 1

            Here ya go.

            body {
              margin:0px;
              padding:0px;
              text-align:center;
              font-size:1.0em;
              font-family:trebuchet ms, tahoma, arial, sans-serif;
            }

            #container {
            text-align:left;
            margin:0px;
            width:1270px;
            border:1px black solid;
            padding: 0px;
            }

            #header  {
            text-align:center;
            width:1270px;
            #width:1022px;
            height:100px;
            font-size:2.0em;
            background-color:white;
            color:white;
            padding-top:0px;
            padding-right:0px;
            border-bottom:1px black solid;
            }
            }

            #nav {
              width:1270px;
              #width:1270px;
              height:24px;
              font-size:0.8em;
              background-color:#20548E;
              color:black;
              border-bottom:1px black solid;
            }

            #main_content {
              width:1270px;
              #width:1022px;
              font-size:0.9em;
              background-color:white;
              color:black;
              border-bottom:1px black solid;
            }

            #footer {
              text-align:center;
              width:1270px;
              #width:1022px;
              height:100px;
              font-size:1.0em;
              background-color:#20548E;
              color:white;
              border-bottom:1px black solid;
            }

            #Fyp
            { margin: 0;
                 padding: 0;
            }

            #Fyp li
            { float: left;
              list-style: none;
              font: 12px Tahoma, Arial;
            }

            #Fyp li a
            { display: block;
              background: #20548E;
              padding: 5px 12px;
              text-decoration: none;
              border-right: 1px solid white;
              width: 140px;
              color: #EAFFED;
              white-space: nowrap;
            }

            #Fyp li a:hover
            { background: #1A4473;
            }
             
              #Fyp li ul
              { margin: 0;
               padding: 0;
               position: absolute;
               visibility: hidden;
               border-top: 1px solid white;
              }
             
              #Fyp li ul li
              { float: none;
               display: inline;
              }
             
              #Fyp li ul li a
              { width: auto;
               background: #9F1B1B;
              }
             
              #Fyp li ul li a:hover
              { background: #7F1616;
              }

            • 3. Re: div tag problem
              osgood_ Level 8

              You have an extra } (bracket) after your 'header' css selector which is stopping the css cascade (see below). Remove it and see if the problem goes away.

               

              #header  {
              text-align:center;
              width:1270px;
              #width:1022px;
              height:100px;
              font-size:2.0em;
              background-color:white;
              color:white;
              padding-top:0px;
              padding-right:0px;
              border-bottom:1px black solid;
              }
              }

              • 4. Re: div tag problem
                Luban22 Level 1

                Ya that solved it thanks.