3 Replies Latest reply: May 24, 2013 2:08 PM by Nancy O. RSS

    Dreamweaver layout issue

    Récupération de données

      Hello, I have an issue on the layout of my website ( récupération de données ). As I work on Dreamweaver, I think the problem comes from there. Need help !

        • 1. Re: Dreamweaver layout issue
          Ken Binney CommunityMVP

          Did you plan to tell us what your issue is?

          • 2. Re: Dreamweaver layout issue
            Jon Fritz II CommunityMVP

            Without knowing what problem you actually want to fix, I can still say it's likely caused by an html error.

             

            You have over 230 html errors on that page. You may want to run your site through the validator at: http://validator.w3.org/ and clean your code up.

            • 3. Re: Dreamweaver layout issue
              Nancy O. CommunityMVP

              That absolutely positioned menu is never going to work.   Absolute positioning removes content from the normal document flow.  So your menu is out in right field and disconnected from the rest of your layout.  A better approach would be to put the menu in an unordered list like this:

               

              <!doctype html>
              <html>
              <head>
              <meta charset="utf-8">
              <title>List Menu</title>
              <style>
              body { background: aqua }
              
              #header {
              border: 1px solid silver;
              width: 1000px;
              margin: 0 auto;
              overflow: hidden; /**float containment**/
              }
              
              .logo img {
              float: left;
              width: 225px;
              }
              
              .menu {
              float: right;
              width: 775px;
              }
              
              .menu ul { list-style: none; }
              
              .menu li a {
              float: left;
              width: 8em; /*adjust width or use auto*/
              text-align: center;
              margin: 0;
              padding-right: 20px;
              font-size: 0.818em;
              color: #FFF;
              text-decoration: none;
              text-transform: uppercase;
              font-weight: bold;
              }
              
              .menu a:visited { color: #999 }
              
              .menu a:hover, .menu a:active, .menu a:focus {
              color: #669966;
              text-decoration: underline
              }
              </style>
              </head>
              
              <body>
              <div id="header">
              <a href="http://www.recuperation-dedonnees.com">
              <img class="logo" src="images/recuperationdedonneesdafotec.gif" alt="Récupération de données" />
              </a>
              
              <div class="menu">
              <ul>
              <li><a href="http://www.recuperation-dedonnees.com" title="Récupération de données">ACCUEIL</a> </li>
              <li> <a href="http://www.recuperation-dedonnees.com/recuperationdedonneespertededonnees.html" title="Récupération de données : perte de données">1 PERTE DE DONNEES ?</a> </li>
              <li><a href="http://www.recuperation-dedonnees.com/recuperationdedonneesaide.html" title="Récupération de données : Aide">2 NOTRE SOLUTION !</a> </li>
              <li><a href="http://www.recuperation-dedonnees.com/recuperationdedonneesconfiance.html" title="Récupération de données : pourquoi Dafotec ?">3 POURQUOI DAFOTEC ?</a> </li>
              <li><a href="http://www.recuperation-dedonnees.com/recuperationdedonneesprocedure.html" title="Récupération de données : comment procéder ?">4 COMMENT PROCEDER ?</a> </li>
              </ul>
              <!--end menu-->
              </div>
              <!--end header-->
              </div>
              </body>
              </html>
              

               

               

              Nancy O.