Skip navigation
Récupération de données
Currently Being Moderated

Dreamweaver layout issue

May 24, 2013 2:44 AM

Tags: #dreamweaver #css #layout

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 !

 
Replies
  • Currently Being Moderated
    May 24, 2013 3:48 AM   in reply to Récupération de données

    Did you plan to tell us what your issue is?

     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2013 6:25 AM   in reply to Ken Binney

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 24, 2013 2:08 PM   in reply to Récupération de données

    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.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points