Partage
  • Partager sur Facebook
  • Partager sur Twitter

Besoin d'un ptit coup de main

Transformer mon code en design extensible?

axl
    10 décembre 2005 à 12:44:51

    Hello!!

    J'aurai besoin d'un ptit coup de main: j'aimerai que mon code sois extensible.
    Voici le code:

    Partie HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
       <head>
           <title>Bienvenue sur Axelle's Gate...</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
               <link rel="stylesheet" media="screen" type="text/css" title="Accueil Axelle's Gate" href="design_indexaxellegate.css" />
       </head>

       <body>

       <div id="banniere">
            <!-- Banniere -> Source dans le fichier .css -->
       </div>
       
       
       <div id="menugauche">   <!-- Bloc de l'ensemble des menus de gauche -->
       
        <div id="menu">                <!-- Bloc du premier menu de gauche -->
             <div class="titremenu"> <h3>Accueil </h3></div>      <!-- Titre du premeir menu de gauche -->
                     <div class="element_menu">                                         <!-- Bloc de l'ensemble des liens du premier menu de gauche -->
                             <a href="">Besoin d'aide?</a></br>    <!-- 1er Lien -->
                                     <a href="">Forum</a></br>                 <!-- 2ème lien -->
                                     <a href="">Livre d'or</a></br>            <!-- 3ème lien-->
                                     <a href="">Inscritpion</a></br>          <!-- 4ème lien -->
                                     <a href="">News</a></br>                   <!-- 5ème lien-->
                                     <a href="">Liens</a></br>                   <!-- 6ème lien -->
                                     <a href="">Te@m</a>                           <!-- 7ème lien-->
                     </div>                                                                                 <!-- Fin du bloc contenant les liens du prmeier menu de gauche -->
                     <div class="basmenu1"></div>                                         <!-- Bloc insérant l'image de bas de menu -->
        </div>  <!-- Fin du bloc du premier menu de gauche -->                                                   





    <div id="menuconnexion">               <!-- Bloc du deuxieme menu de gauche -->
             <div class="titremenu2"><h3>Connexion</h3>     <!-- Titre de ce deuxieme menu -->
                     <div class="element_menu_connexion">                 <!-- Bloc de l'ensemble des elements de  ce deuxieme menu de gauche-->
             <form method="post" action="connexion.php">        <!--Code pour commencer un forumulaire -->
                 <p>
                     <label>                    <!--1ère entrée du formulaire -->
                                     Votre Pseudo: <input type="text" name="pseudo" size="14" maxlength="10"/>  <!-- Barre de saisie -->
                                 </label> </br>        <!-- Fin de la première entrée du formulaire-->
                           
                                 <label>                   <!-- 2ème entrée du formulaire-->
                                     Mot de passe: <input type="password" name="motdepasse" size="15" maxlength="10" />     <!-- Barre de siasie -->
                             </label>                 <!-- Fin de la deuxieme entrée du formulaire -->
                 </p>
             </form>        <!-- Fin du formulaire -->
                     </div>           <!-- Fin du bloc contenant les elements de ce deuxieme menu de gauche -->
    </div>           <!-- Fin du bloc du deuxieme menu de gauche -->
       
    </div>     <!--Fin du bloc de l'ensemble des menus de gauche -->
       
       
       
    <div id="partiecentrale">               <!-- bloc central -->
             <div class="titrecentre"> <h3>Ouverture du site</h3></div>   <!-- Titre de ce bloc central -->
                    
                     <div class="elementnews">       <!-- Bloc a l'intérieur -->
                     <div class="news1">
                     <p>
                     00/00/00 à 00h00 : une date à graver dans vos mémoires!! Car aujourd'hui, ça y'est, Axelle's Gate ouvre enfin ses portes, après     plusieurs mois d'essai, d'attente, d'énervement^^...              <!-- paragraphe 1-->
                     </p>
                    
                     <p>
                     Axelle's Gate?? C'est quoi??<br>
                     Axelle's Gate, c'est un portail regroupant plusieurs sites de ma création, sur divers sujets. Ils évoulueront, et au fur et à mesure, de nouveaux se créeront, en fonction de mes envies, mais aussi des votres!</br>
                     Donc n'hésitez pas!! Si vous avez une suggestion, envoyez la moi par <a href="mailto:l.axou@wanadoo.fr"> mail</a> !! </br>
                     Bonne visite sur Axelle's Gate!!  <!-- paragraphe 2-->
                     </p>
                    
                     <p>
                     <div class="signature">Axelle, Webm@ster</div>  <!-- Signature -->
                     </p>
                    </div>
                    <div class="basnews"></div>  <!-- Insertion de la bande du bas -->
                      </div>  <!-- fin du bloc intérieur-->
     </div>        <!-- Fin du bloc central -->
       
       
     <div id="menudroite">
     
    <div id="menustats">
             <div class="titremenustats"><h3>Statistiques</h3>
                     <div class="element_statistique">
                     <div class="stats">
                     <p> Le site compte actuellement ?? membres inscrit, dont ?? connectés. </br>
                     Le nombre de visite depuis l'ouverture est de ??? . </br>
                     <div class="lienconnecte"><em>Voir la liste des connectés </em></div></p>
                     </div>
                     </div>
    </div>
       
       </body>
       </html>





    Partie Css:

    body
    {
     width: auto;
     margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */
     margin-bottom: 20px;    /* Idem pour le bas du navigateur */

     background-image: url("images/fond.jpg"); /* Une petite image de fond */
     background-attachment: fixed; /* Le fond restera fixe */ }

    #banniere
    {
     width:724px; /* Largeur */
     height:179px; /* Hauteur */
     margin: auto;

     background-image: url("images/banniere2.gif"); /* La banniere */
     background-repeat: no-repeat; /* au cas ou, l'image ne se répètra pas */ }
       
    #menugauche
    {
    width:25%         /* Pour faire un design extensible, avec la proportion des menus de gauche */
    }
       
       
    #menu
    {
    width:160px;   /* Largeur */
    margin-top:39.2px;   /*Ecart avec la banniere*/
    margin-bottom:2.1%;    /* Ecart avec le menu d'en dessous  EDIT: Je te l'ai mis en % histoire de preserver la meme unité*/
    margin-left:15%;         /* Ecart du menu a gauche*/
    }

    .titremenu
    {
    width:160px;  /* Largeur */
    height:40px;   /* Hauteur */
    background-image:url("menuhaut1.GIF");   /* Image de fond, du haut du menu */
    background-repeat:no-repeat;     /*L'image de fond ne se répétera pas */
    text-align:center;     /*Texte centré */

    }

    h3
    {
    margin-top:6px;          /* Ecart de 6 pixels avec le haut du menu */
    color:white;                   /*Texte blanc */
    font-family:comic sans ms, manga temple, arial, sans-serif;   /*Différentes polices dispos */
    }

    .element_menu
    {
    width:160px;     /*Largeur */
    height:140px;     /* Hauteur */
    background-image:url("menucentrebas.GIF");         /* Image de fond*/
    background-repeat:no-repeat;      /* Le fond ne se répétera pas */
    padding-left:35px;         /* Marge intéreieur  */
    margin-top:-20px;          /* Ecart avec le haut du menu */
    padding-top:6px;            /*Ecart intérieur en haut */
    font-family:comic sans ms, manga temple, arial, sans-serif;     /* Différentes polices dispos */
    font-size:16px;     /* Taille du texte */
    }

    .basmenu1
    {
    background-image:url("basmenu1.gif");     /* Image de fond*/
    width:160px;   /* Largeur */
    height:20px;     /*Hauteur */
    background-repeat:no-repeat;      /* Le fond ne se répète pas */
    text-align:center;     /* Texte centré */
    }

    .titremenu2
    {
    width:256px;        /* Largeur */
    height:40px;           /* Hauteur */
    background-image:url("hautmenu2.GIF");     /* Image de fond */
    background-repeat:no-repeat;         /* Fond ne se répète pas */
    text-align:center;      /* Texte centré */
    }

    .element_menu_connexion
    {
    width:256px;         /* Largeur */
    height:100px;          /* Hauteur */
    background-image:url("menu2centre.GIF");      /* Image de fond */
    background-repeat:no-repeat;              /* Fond ne se répète pas */
    font-family:comic sans ms, manga temple, arial, sans-serif;         /*différentes polices dispos */
    font-size:16px;      /* Taille du texte */
    margin-top:-20px;          /* Pour l'alignement avec le reste */
    padding-top:20px;          /* Marge intérieur en haut du menu, ce qui permet de centrer les élements */
    }


    #partiecentrale
    {
    width:500px;         /* Largeur de la partie centrale */
    margin-left:280px;  /* Ecartement de gauche */
    margin-top:-400px;    /* Ecartement du haut */
    }

    p
    {
    font-family:comic sans ms, manga temple, arial, sans-serif;   /* Polices utilisées */
    font-size:16px;  /* Taille des caractères */
    }

    .signature
    {
    text-align:right;   /* alignement de la signature */
    font-family:comic sans ms, manga temple, arial, sans-serif;   /* Polices utilisées */
    font-size:18px;   /* Taille utilisée */
    text-decoration: underline;    /* Sous-lignage */
    }

    .titrecentre
    {
    height:40px; /* Hauteur de la ligne de titre */
    background-image:url("centrehaut.GIF");   /* Image de fond */
    background-repeat:no-repeat;   /* Ppur ne aps répéter cette image de fond */
    text-align:center;   /* aligner le texte */
    }


    .elementnews
    {
    width:500px;   /* Largeur du bloc */
    background-image:url("news1centre.GIF");  /* Image de fond */
    background-repeat:no-repeat;   /* Pour en pas la répéter */
    margin-top:-20px;   /* marge à gauche */
    }

    .news1
    {
    width:470px;   /* Largeur */
    text-align:justify;  /* almignement du texte */
    font-family:comic sans ms, manga temple, arial, sans-serif;  /* Polices utiliséess */
    font-size:16px;  /* Taille des caractères */
    margin:15px;   /* Marges */
    }
     
    #menudroite
    {
    width:160px;
    height:210px;
    margin-left:805px;
    margin-top:-380px;
    }

    h3
    {
    margin-top:6px;
    color:white;
    font-family:comic sans ms, manga temple, arial, sans-serif;
    }

    .titremenustats
    {
    width:256px;
    height:40px;
    background-image:url("hautmenu2.GIF");
    background-repeat:no-repeat;
    text-align:center;
    }

    .element_statistique
    {
    width:256px;
    height:100px;
    background-image:url("menustats.GIF");
    background-repeat:no-repeat;
    margin-top:-20px;
    }

    .stats
    {
    width:246;
    font-family:comic sans ms, manga temple, arial, sans-serif;
    text-align:justify;
    font-size:16px;
    margin-top:5px;
    margin-right:15px;
    margin-left:15px;
    }

    .lienconnecte
    {
    text-align:center;
    font-size:16px;
    font-family:arial, sans-serif;
    text-decoration:underline;
    }

    • Partager sur Facebook
    • Partager sur Twitter
    mebon
      10 décembre 2005 à 12:51:01

      Tu veux dire design extensible ? tu peux donner l'adresse de la page parce que là y'a même pas les images qui vont avec alors c'est galère...
      • Partager sur Facebook
      • Partager sur Twitter
      axl
        10 décembre 2005 à 13:10:52

        bin il est pas encore en ligne...
        si tu te sens capable de m'aider à résoudre sa, je t'enoies les images par msn ou par mail! ^^
        • Partager sur Facebook
        • Partager sur Twitter
        Sniper
          10 décembre 2005 à 13:14:32

          salut,

          Pour faire un design extensible tu dois remplacer toutes les tailles de tes blocs en % pour commencer, ainsi que la taille de ton body, il faut eviter de mettre des px...voila j'éspère t'avior aider
          • Partager sur Facebook
          • Partager sur Twitter
          Pliskin
            10 décembre 2005 à 13:17:29

            J'ai rien compris à ton code :o A force de commenter, commenter et encore commenter, on ne pige plus rien..... :(
            Essaie aussi d'indenter ton code ;) , je trouve que ça aide beaucoup plus que le commentaire (je dis bien je)
            Pour ce qui est de ta question, je crois que pour arriver à faire un design extensible, il faut laisser tomber les pixels et utiliser les pourcents ;) (j'en suis pas sur.....)
            Voila

            [EDIT : AIE raté ! Trop rapide ce sniper :p ! J'ai pas eu le tempsde m'enfuir, il me tenait deja dans son viseur :lol: ]
            • Partager sur Facebook
            • Partager sur Twitter
            axl
              10 décembre 2005 à 13:58:27

              ok jvais tenter avec les %

              Sa marche comment les identations au fait?


              Si quelqu'un pouvait me faire la transformation en design extensible sa serait cool... parce que j'y arrive pas... Voici un apercu du design donné avec le code ci-dessus:
              file:///C:/PROGRA~1/Wanadoo/Utilisateur1/screen.jpg

              Quand j'essaie de changer les valuers générales des menus, en mettant par exemple 25% pour le menu de droite, 50% pour celui du centre, et bin sa me fait pas du tout un design extensible, mais un truc tout bizarre...
              • Partager sur Facebook
              • Partager sur Twitter

              Besoin d'un ptit coup de main

              × 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