Partage
  • Partager sur Facebook
  • Partager sur Twitter

problèmes d'alignement dans un design

JefGrailet
    15 août 2006 à 10:55:15

    Bonjour à tous les zéros ^^

    Je viens sur ce forum pour demander un peu d'aide pour un design, que pour une fois, je code moi même (et pour le moment on dirait que ça marche :p ). J'ai réussi à faire un header avec des menus horizontaux correctement, mais voilà que pour le corps, avec les menus et le centre ou sera placé le texte, ça s'aligne un peu n'imp nawak.

    Avant d'aller plus loin, voici une ébauche de ce quoi être le design : cliquez ici. Jetez juste un oeil, c'est juste pour que vous visualisez un peu avant de vous plonger dans le code :p

    Donc le header avec les deux menus (ici sans les liens) s'affiche impec, aussi bien sous IE que sous FF (ouf ! :lol: ). Mais c'est les deux menus et le corps qui me posent problèmes : le premier menu s'affiche correctement (c'est déjà ça). Le corps, deuxième élément, est parfaitement mis sous FF mais est placé en dessous sous IE, et ne fait pas la même taille que sous FF. Et puis, le menu de droite, le plus calamiteux, se met en dessous de tout à droite, aussi bien sous IE que sous FF. En plus, sous IE, le design n'est plus centré (aie !) et des trous apparaissent dans les images, mais fort heureusement, c'est juste un problème de transparence que je peux règler avec PhotoFiltre (encore heureux). Voilà quelques captures de la situation :

    Sous FF (ça va encore)
    Sous IE (aaaarfeu)
    Sous IE part 2 (âmes sensibles s'abstenir :p )

    Voilà donc un peu la situation, il faudrait que tout soit aligné correctement comme sur l'ébauche du design (logique). Seulement, malgré moults essais de ma part, ça foire encore et toujours. Voilà le code :

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Gameworld.fr : le site de jeux vidéos pour gamers par des gamers</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css"> // le CSS
    <!--
    body // ça ne veut pas centrer sous IE ici ...
    {
    width : 800px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background : url(design3/fond.png);
    }

    /*header */

    #header
    {
    width : 800px;
    height : 240px;
    }

    /* menu du haut */

    #menu_haut
    {
    width : 800px;
    height : 40px;
    background : url(design3/menu_haut.png) no-repeat;
    }

    /* liens du menu du haut */

    .menuhaut_a
    {
    font-weight: bold;
    color: white;
    font-family: arial,sans-serif,verdana; 
    font-size:15px;
    text-decoration: none;
    }

    .menuhaut_a:hover
    {
    font-weight: bold;
    color: rgb(0,0,250);
    font-family: arial,sans-serif,verdana; 
    font-size : 15px;
    text-decoration: none;
    }

    .menuhaut_a:active
    {
    font-weight: bold;
    color: white;
    font-family: arial,sans-serif,verdana; 
    font-size : 15px;
    text-decoration: none;
    }

    .menuhaut_a:visited
    {
    font-weight: bold;
    color: white;
    font-family: arial,sans-serif,verdana; 
    font-size : 15px;
    text-decoration: none;
    }

    /* bannière */

    #banniere
    {
    width : 800px;
    height : 160px;
    background : url(design3/banniere.jpg) no-repeat;
    }

    /* menu du bas */

    #menu_bas
    {
    width : 800px;
    height : 20px;
    background : url(design3/menu_bas.jpg) no-repeat;
    }

    /* liens du menu du bas */

    .menubas_a
    {
    font-weight: bold;
    color: white;
    font-family: arial,sans-serif,verdana; 
    font-size:12px;
    text-decoration: none;
    }

    .menubas_a:hover
    {
    font-weight: bold;
    color: rgb(0,0,250);
    font-family: arial,sans-serif,verdana; 
    font-size : 12px;
    text-decoration: none;
    }

    .menubas_a:active
    {
    font-weight: bold;
    color: white;
    font-family: arial,sans-serif,verdana; 
    font-size : 12px;
    text-decoration: none;
    }

    .menubas_a:visited
    {
    font-weight: bold;
    color: white;
    font-family: arial,sans-serif,verdana; 
    font-size : 12px;
    text-decoration: none;
    }

    /* bas du header */

    #bas_header
    {
    width : 800px;
    height : 20px;
    background : url(design3/bas_header.jpg) no-repeat;
    }

     /*fin du header */ // jusque là tout va bien
     
     /* corps et menus */
     
     #corps
     {
     width : 800px; // on définit la taille du corps en général
     }
     
     /* menu_gauche */ // le menu de gauche, le plus obéissant
     
    #menu_gauche
    {
    width : 150px;
    height : 500px;
    background : url(design3/gauche.png);
    float : left;
    }

    /* centre */ // le centre, marche sous FF mais foire sous IE

    #centre
    {
    width : 500px;
    height : 100%;
    background : url(design3/corps.jpg) repeat-y;
    margin-left : 150px;
    margin-right : 150px;
    }

    /* menu droit */

    #menu_droit // voilà le grand calamiteux, qui ne s'aligne ni sous FF ni sous IE
    {
    width : 150px;
    height : 500px;
    background : url(design3/droite.png);
    margin-left : 650px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="header">
    <div id="menu_haut">
            <table width="800" border="0" cellspacing="0" cellpadding="0" style="width: 800px; height: 40px; text-align:center; position:relative;"> // tout ça, c'est pour aligner facilement les liens
            <tr>
                            <td><a href="gameworld/index.php" class="menuhaut_a">Nomadeland</a></td>
                            <td><img src="design3/change_menu_haut.png" width="3" height="31" alt="#"/></td>
                <td><a href="gameworld/index2.php" class="menuhaut_a">Sedentaryland</a></td>
                            <td><img src="design3/change_menu_haut.png" width="3" height="31" alt="#"/></td>
                <td><a href="gameworld/em.php" class="menuhaut_a">Espace Membre</a></td>
            </tr>
            </table>
    </div>
    <div id="banniere">
    </div>
    <div id="menu_bas">
        <table width="800" border="0" cellspacing="0" cellpadding="0" style="width:800px; height:20px; text-align:center; position:relative;"> // idem que le menu du haut
            <tr>
                <td><a href="index.php" class="menubas_a">Accueil et news</a></td>
                <td><a href="presentation.php" class="menubas_a">Présentation du site</a></td>
                <td><a href="team.php" class="menubas_a">La te@m</a></td>
                <td><a href="contact.php" class="menubas_a">Contact</a></td>
                <td><a href="mini-sites.php" class="menubas_a">Mini-sites</a></td>
            </tr>
        </table>
    </div>
    <div id="bas_header">
    </div>
    </div>
    <div id="corps"> // ici, rien de spécial à signaler.
    <div id="menu_gauche">
    </div>
    <div id="centre">
    </div>
    <div id="menu_droit">
    </div>
    </div>


    Voilà donc mon code qui est plutôt foireux pour ce qui est des menus et du corps ... Y'a-t-il quelqu'un qui puisse m'aider à résoudre mes problèmes, de façon à ce que tout marche sous FF et IE ?
    • Partager sur Facebook
    • Partager sur Twitter
    strucky
      15 août 2006 à 11:54:52

      C'est quoi le margin-left de 650px ?

      En gros, et dans cet ordre dans le html :

      - menu gauche : float left;
      - menu droit : float right;
      - Le centre : margin left et right de la largeur de chaque menu.
      • Partager sur Facebook
      • Partager sur Twitter
      JefGrailet
        15 août 2006 à 12:28:29

        le margin-left c'était une tentative désespérée pour que le menu se place correctement ... Sinon l'ordre c'est vraiment ça, mais ça n'a pas l'air de marcher :(
        • Partager sur Facebook
        • Partager sur Twitter
        strucky
          15 août 2006 à 13:04:42

          Ca fonctionne très bien, et l'ordre est important dans le html.

          • Partager sur Facebook
          • Partager sur Twitter
          JefGrailet
            15 août 2006 à 13:12:51

            ah voilà ! je pige :p

            merci ça marche !

            Mais sous IE (qui est décidément un grosse m*rde), le design n'est toujours pas centré et il m'affiche ça : Cliquez ici.

            Comment faire maintenant ?
            • Partager sur Facebook
            • Partager sur Twitter
            strucky
              15 août 2006 à 13:26:07

              Réponse dans la FAQ ;)
              • Partager sur Facebook
              • Partager sur Twitter
              JefGrailet
                15 août 2006 à 13:39:41

                j'ai la réponse pour le centrage, mais pour le gros vide, je fais quoi ?
                • Partager sur Facebook
                • Partager sur Twitter
                strucky
                  15 août 2006 à 13:43:37

                  Vire le height 100% du centre.
                  • Partager sur Facebook
                  • Partager sur Twitter
                  JefGrailet
                    15 août 2006 à 13:45:44

                    sauf que ça fait pareil sous IE et sous FF y'a plus de corps ...

                    en fait IE ne tient pas compte du 100 % et en plus ne met pas le centre à sa place, là il le met en bas au lieu de le mettre juste en dessous du header o_O
                    • Partager sur Facebook
                    • Partager sur Twitter
                    strucky
                      15 août 2006 à 14:06:43

                      Oui, enfin, je t'ai dis de virer le height 100%, mais j'aurais dû dire remplacer par une hauteur fixe en px.
                      • Partager sur Facebook
                      • Partager sur Twitter
                      JefGrailet
                        15 août 2006 à 14:08:43

                        oui mais ce n'est plus extensible et en plus mon corps n'est toujours pas entre les deux menus mais en dessous sous IE.
                        • Partager sur Facebook
                        • Partager sur Twitter

                        problèmes d'alignement dans un design

                        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                        • Editeur ●
                        • Markdown