Partage
  • Partager sur Facebook
  • Partager sur Twitter

Design quelque peu...

...foireux ?

    4 novembre 2006 à 10:29:49

    Bonjour à tous et aux autres !

    Voilà, j'ai un site web, et avec ça un fichier css. Normal. Mais ça ne marche pas comme je voudrais. Voici mon fichier css :
    /*__________________________________________________________________________________________________________________________________________*/
    /*///////////////////////////////////////////////////////////        TOUT        \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

    body
    {/*
       width: 1000px; /* */
    /*
       margin: right; /* Pour centrer notre page */

       
       background-color: #fcfcef; /* Couleur de fond. #fcfcef*//*
       background-attachment: fixed;             /* L'image de fond est fixe  */

       
       margin-top: 0px;       /* Pour éviter de coller avec le haut. */
       margin-bottom: 20px;    /* Idem pour le bas du navigateur */
    }

    p
    {
       margin : 0;
    }

    a
    {
       color: #cbab70;
       text-decoration: none; /* Les liens ne seront plus soulignés *//*
       font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */

    }

    a:hover /* Quand on passe la souris */
    {
       background-color: #cbab70;
       color: #795137;
    }

    a:active /* Quand le visiteur clique sur le lien */
    {
       background-color: #795137;
       color: #cbab70;
    }

    a:focus /* Quand le visiteur sélectionne le lien */
    {
       background-color: #795137;
       color: #cbab70;
    }





    input, textarea
    {
       font-family: "Times New Roman", Times, serif; /* On modifie la police du texte tapé l'intérieur des champs */
       color: #b48d64;
    }

    input
    {
       background-color: #ffffe6;
    }

    input:focus, textarea:focus /* Quand le curseur est sur un champ (ne marche pas sur IE) */
    {
       background-color: #f7eac8;
       color: #987753;
    }

    label
    {
       color: #987753; /* Colorer tous les labels  */
    }

    legend /* On met un peu plus en valeur les titres des fieldset */
    {
       font-family: Arial, "Arial Black", Georgia, "Times New Roman", Times, serif;
       color: #b48d64;
       font-weight: bold;
    }

    fieldset
    {
       margin-bottom: 15px; /* Une marge pour séparer les fieldset */
       background-color: #f7eac8;
    }

    /*__________________________________________________________________________________________________________________________________________*/
    /*///////////////////////////////////////////////////////////        HAUT        \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

    #haut
    {

       min-width: 600px;
       height: 100px;
       float: right;
       background-image: url("images/fonds/banniere.png");
       background-repeat: no-repeat;
       margin-left: 20px;
       margin-right: 0px;
       margin-bottom: 0px;
       
       padding-left: 320px; /* Marge à l'intérieur, gauche. */
       padding-top: 20px; /* Marge à l'intérieur, haut. */
       padding-right: 10px; /* Marge à l'intérieur, droite. */
       padding-bottom: 20px; /* Marge à l'intérieur, bas. */
    }

    /*__________________________________________________________________________________________________________________________________________*/
    /*///////////////////////////////////////////////////////////        CORPS        \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

    #corps
    {

       min-width: 620px; /* Largeur. */
       min-height: 410px;
       float: right;
       
       
       margin-left: 0px; /* Marge à l'extérieur, gauche. */
       margin-right: 0px; /* Marge à l'extérieur, droite. */
       
       background-image: url("images/fonds/corps_a.png"); /*  L'image d'en haut. */
       background-repeat: no-repeat; /* Ne pas répéter. */
       background-color: #ffffe6; /* Couleur de fond. */
       
       border-top: 1px solid black; /* Bordure noire de 1px. */
       border-left: 1px solid black; /* Bordure noire de 1px. */
       border-right: 0px solid black; /* Bordure noire de 1px. */
       
       padding-left: 10px; /* Marge à l'intérieur, gauche. */
       padding-top: 40px; /* Marge à l'intérieur, haut. */
       padding-right: 10px; /* Marge à l'intérieur, droite. */
    }

    /* ********************************************************** */

    #corps p
    {
       color: #7c5836;
    }
    #corps h1
    {
       color: #7c5836; /* Couleur */
       text-align: center; /* Alignement */
       font-family: "Arial Black", Arial, "Times New Roman", Times, serif; /* Police */
       /*
       background-image: url("images/titreh1.png");
       background-repeat: no-repeat;*/

    }

    #corps h2
    {
       height: 30px; /* Hauteur */
       /*
       background-image: url("images/titreh2.png"); /* Une image à gauche du titre */
    /*
       background-repeat: no-repeat; /* Pour pas qu'elle's'répète */

       
       padding-left: 30px; /* Marge pour laisser la place à l'image */
       color: #b8933b; /* Couleur */
       font-family: "Arial Black", Arial, "Times New Roman", Times, serif; /* Police */
       text-align: left; /* Alignement */
    }

    /*__________________________________________________________________________________________________________________________________________*/
    /*////////////////////////////////////////////////////////////        MENU        \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

    #menu_gauche
    {

       width: 160px; /* Largeur. */
       min-height: 200px;
       float: left; /* Le menu flottera à gauche. */
       
       margin-top: 0px; /* Marge à l'extérieur, gauche. */
       margin-left: 0px; /* Marge à l'extérieur, gauche. */
       margin-right: 20px; /* Marge à l'extérieur, droite. */
       
       padding-left: 10px; /* Marge à l'intérieur, gauche. */
       padding-top: 0px; /* Marge à l'intérieur, haut. */
       padding-right: 10px; /* Marge à l'intérieur, droite. */
    }

    /* ********************************************************** */
    /* ----------------Titre-------------------  */

    .menu_a
    {
       height: 44px; /* Hauteur . */
       
       padding-left: 10px; /* Marge à l'intérieur, gauche. */
       padding-top: 10px; /* Marge à l'intérieur, haut. */
       padding-right: 10px; /* Marge à l'intérieur, droite. */
       
       background: url("images/fonds/menu_a.png") no-repeat; /* Fond, non répété.. */
       
       font-size: 100%; /* Taille du texte */
       font-family: "Times New Roman", Arial, Verdana, serif; /* Police */
       text-align: center; /* Alignement */
       overflow: hidden; /* Coupé si ça dépasse. */
    }

    /* ----------------Menu-------------------  */

    .menu_b
    {
       min-height: 118px; /* Hauteur. */
       
       padding-left: 10px; /* Marge à l'intérieur, gauche. */
       padding-right: 10px; /* Marge à l'intérieur, droite. */
       
       background: url("images/fonds/menu_b.png") repeat-y; /* Fond, se répète verticalement. */
       
       font-size: 100%; /* Taille du texte */
       font-family: "Times New Roman", Arial, Verdana, serif; /* Police */
       text-align: left; /* Alignement */
    }

    /* ----------------Bas-------------------  */

    .menu_c
    {
       min-height: 26px; /* Hauteur. */
       
       padding-left: 10px; /* Marge à l'intérieur, gauche. */
       padding-right: 10px; /* Marge à l'intérieur, droite. */
       
       background: url("images/fonds/menu_c.png") no-repeat; /* Fond, non répété. */
       
       margin-bottom: 20px;
    }

    /*__________________________________________________________________________________________________________________________________________*/
    /*//////////////////////////////////////////////////////////////        BAS        \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/

    #bas
    {

       width: 640px; /* Largeur. */
       height: 99px; /* Hauteur. */
       float: right; /* Le menu flottera. */
       
       margin-top: 0px; /* Marge à l'extérieur, haut. */
       margin-left: 20px; /* Marge à l'extérieur, gauche. */
       margin-right: 0px; /* Marge à l'extérieur, droite. */
       
       padding-left: 0px; /* Marge à l'intérieur, gauche. */
       padding-right: 0px; /* Marge à l'intérieur, droite. */
       padding-top: 110px; /* Marge à l'intérieur, droite. */
       
       background-image: url("images/fonds/corps_c.png"); /*  L'image. */
       background-repeat: no-repeat; /* Ne pas répéter. */
       
       border-left: 1px solid black; /* Bordure noire de 1px. */
       border-right: 0px solid black; /* Bordure noire de 1px. */
       border-bottom: 1px solid black; /* Bordure noire de 1px. */
       
       font-size: 100%; /* Taille du texte */
       font-family: "Times New Roman", Arial, Verdana, serif; /* Police */
       text-align: center; /* Alignement */
       overflow: hidden; /* Coupé si ça dépasse. */
    }


    Un bon morceau ^^

    Et le fichier que j'utilise avec :


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
        <head>
            <title>O:O - Remerciements</title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <link rel="stylesheet" media="screen" type="text/css" title="Design" href="test.css" />
                    <link rel="SHORTCUT ICON" href="http://yannis1000.free.fr/Oblivion/images/favicon.ico">
        </head>

           
             
      <body>
    <!-- //////////////////////////////////////////////////////////////        INCLUDES       \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-->

    <div id="haut">
    <p>
    V 0.8.2
    </p>
    </div>
    <div id="menu_gauche">


    <!-- /////////////////////////////////////////////////////////////////////   MENU   /////////////////////////////////////////////////////////////////////////////-->

       <div class="menu_a">

               <p>Menu</p>
       </div>

    <!-- ---------------------------------------------------------------------------- -->
       
       <div class="menu_b">
               
                   <a href="index.php">Accueil</a><br/>
                       <a href="liste_cc_part.php">Liste des participants</a><br/>
                       <a href="concours.php">Concours</a><br/>

                       <a href="concours_post.php">Participer</a><br/>
                       <a href='prop_news.php'>Proposer une new</a>
                       <a href='forum.php'>Forum</a>
                       <a href='admin/post_forum.php'>Proposer un forum</a>
           
       </div>

    <!-- ---------------------------------------------------------------------------- -->

       <div class="menu_c">
       </div>
       
    </div>

    <!--
    [[[[[[[  RAPPELS  ]]]]]]]

    ~~~~ BALISES ~~~~

    <img src="images/hawai.jpg" alt="Photo de Hawaii" />


    <span TITLE="Texte de l'infobulle">Texte affiché sur la page</span>

       <ul>
           <li><p></p></li>



    -->
    <!-- ////////////////////////////////////////////////////////////////        CORPS       \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-->
    <div id="corps">

    <h1>Remerciements</h1>

    </div>
    <!-- //////////////////////////////////////////////////////////////        INCLUDES       \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-->


    <div id="bas">


    <!-- /////////////////////////////////////////////////////////////////////   MENU   /////////////////////////////////////////////////////////////////////////////-->

    <p>Objectif : Oblivion ©, tous droits réservés.<br/>

    <!-- ---------------------------------------------------------------------------- -->
       
    <a href='http://yannis1000.free.fr/Oblivion/remerciements.php'>Remerciements</a>, <a href='http://yannis1000.free.fr/Oblivion/charte.php'>Charte</a>.


    <!-- ---------------------------------------------------------------------------- -->

    </p>

    </div>
      </body>
    </html>


    Ne faites pas attention aux <!-- INCLUDES -->, c'est parce que j'ai pris le code source de la page.

    Et voici le résultat :
    http://www.kokoom.com/yloy/images/design.png

    EDIT : Lien mort ! Nouveau lien :
    http://www.yloy.kokoom.com/images/design.png

    Le problème, c'est que je voudrais que :
    • la bannière et le menu soient collés à droite
    • que le corps ne soit qu'à 20px du menu toutes configs confondues
    • que le menu et le corps soit à 20px de la bannière toutes configs confondues


    Mais je ne vois pas comment faire, et vous ? Merci d'avance. :(
    • Partager sur Facebook
    • Partager sur Twitter
      4 novembre 2006 à 10:38:17

      <!-- //////////////////////////////////////////////////////////////// CORPS \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-->
      <div id="corps">

      <h1>Remerciements</h1>


      <!-- ////////////////////////////////////////////////////////////// INCLUDES \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-->


      <div id="bas">


      il est ou le </div> pour le corps ?
      je pense que c'est le probleme
      • Partager sur Facebook
      • Partager sur Twitter
        4 novembre 2006 à 11:21:43

        Oups ! Non, ce n'est pas le problème, c'est juste que j'ai supprimé le txte qu'il y avait dans la page et j'ai dû le supprimer avec par mégarde... Je le rajoute ! Sinon, vous n'avez pas d'autre idée ?
        • Partager sur Facebook
        • Partager sur Twitter

        Design quelque peu...

        × 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