Partage
  • Partager sur Facebook
  • Partager sur Twitter

l'héritage !!

Sujet résolu
Anonyme
    26 décembre 2005 à 19:46:51

    Bonsoir ,

    J'ai un probleme avec l'héritage...
    Donc tout d'abord je vous montre le design
    ==> http://s140718937.onlinehome.fr/d%e9coupes/tadeus/

    Et je voudrais que le fond (extérieur de la bordure noir) soir blanche mais que à l'intérieur sa reste bleu!
    Je vous donne mes codes :



    <!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>Tad'blogfolio</title>
           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
               <link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />
       </head>
       <body>
       <div id="header"></div>
       
       <div id="barre_menu"></div>
       <div class="boutons_menu"><span class="texte_menu">
       <a href="#">Home -</a>
       <a href="#">Portfolio -</a>
       <a href="#">Blog -</a>
       <a href="#">Liens -</a>
       <a href="#">Contact</a>
       </div>
       
       <div id="menu_gauche">bla bla bla</div>
       
       <div id="contenu">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
       </div>
       
       <div id="footer">
       </div>
       </body>
       </html>



    et mon css :


    body
    {
    width : 650px;
    margin: auto;
    background: #FFFFFF;
    color: #FFFFFF;
    border: 1px solid black;
    }

    #header
    {
    width: 650px;
    height: 123px;
    background-image: url("images/header.gif");
    background-repeat: no-repeat;

    }

    #menu_gauche
    {
    width: 88px;
    height: 367px;
    margin-bottom: 20px;
    background: #805487;
    left: 200px;
    float: left;
    margin-left: 5px;

    }

    #contenu
    {
    width: 483px;
    height: 366px;
    background: #805487;
    margin-left: 140px;
    top: 150px;
    text-align: center;
    margin-right: 10px;

    }

    #footer
    {
    width : 650px;
    height: 25px;
    background-image: url("images/footer.gif");
    background-repeat: no-repeat;
    clear:both;
    }

    a img
    {
    border:0;
    vertical-align:top;
    }

    .boutons_menu
    {
    width: 650px;
    height: 22px;
    background-image: url("images/menu/fond_barremenu.gif") ;
    background-repeat: repeat-y;
    text-align: center;
    margin-bottom: 20px;
    }
    .texte_menu
    {
    font-family: "verdana";
    font-size: x-small;
    }

    a
    {
    text-decoration: none;
    color: white;
    margin-left: 6px;
    }



    Comment faire sa ?

    Merci d'avance !

    • Partager sur Facebook
    • Partager sur Twitter
    Hooli
      26 décembre 2005 à 19:49:03

      Si j'ai bien compris ce que tu voulais, remplacer background: #FFFFFF; du body par la couleur que tu veux devrait régler ton problème.
      ;)

      Edit : tu as fait une faute je pense : remplace background: #FFFFFF; par background-color: #FFFFFF; dans ton body.
      • Partager sur Facebook
      • Partager sur Twitter
      Anonyme
        26 décembre 2005 à 19:51:06

        Non ! car si je fait sa j'aurais tout en blanc c'est à dire même ce qu'il y a a l'intérieur
        Et moi je voudrais que juste le cadre en dehors du design reste blanc alors que l'intérieur (ou il y a le header , le menu ...) reste bleu !
        voila :)
        • Partager sur Facebook
        • Partager sur Twitter
        Hooli
          26 décembre 2005 à 19:53:51

          J'ai édité mon post, je pense que ca devrait fonctionner comme ca.
          • Partager sur Facebook
          • Partager sur Twitter
          Anonyme
            26 décembre 2005 à 19:55:36

            Non , c'est pareil :(
            • Partager sur Facebook
            • Partager sur Twitter
            Aurélien Massé
            • HTML / CSS
              26 décembre 2005 à 20:00:54

              si tu met body { background-color:white;} ca devrai marcher sans probleme
              • Partager sur Facebook
              • Partager sur Twitter
              Anonyme
                26 décembre 2005 à 20:03:37

                Donc en clair sa fait sa :

                body
                {
                width : 650px;
                margin: auto;
                background-color: white;
                color: #FFFFFF;
                border: 1px solid black;
                }

                Mais comment il va savoir que l'intérieur est bleu ?
                • Partager sur Facebook
                • Partager sur Twitter
                Hooli
                  26 décembre 2005 à 20:05:54

                  Dans chacun des div id ou tu veux que ca soit bleu tu mets #nom_du_div_id {background-color: #ta_couleur; }
                  • Partager sur Facebook
                  • Partager sur Twitter
                  Chiv
                    26 décembre 2005 à 20:09:16

                    tu mets background-color:#ffffff; à ton body, ça c'est évident.
                    Mais ensuite tu mets tout ton code html dans un bloc global. Et tu donnes la couleur que tu veux (bleu en l'occurence) à ce div global.

                    <!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>Tad'blogfolio</title>
                           <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                               <link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />
                       </head>
                       <body>
                    <div id="global">
                       <div id="header"></div>
                       
                       <div id="barre_menu"></div>
                       <div class="boutons_menu"><span class="texte_menu">
                       <a href="#">Home -</a>
                       <a href="#">Portfolio -</a>
                       <a href="#">Blog -</a>
                       <a href="#">Liens -</a>
                       <a href="#">Contact</a>
                       </div>
                       
                       <div id="menu_gauche">bla bla bla</div>
                       
                       <div id="contenu">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
                       </div>
                       
                       <div id="footer">
                       </div>
                    </div><!--fin global-->
                       </body>
                       </html>

                    • Partager sur Facebook
                    • Partager sur Twitter
                    Anonyme
                      26 décembre 2005 à 20:10:32

                      Par exemple j'ai testé pour le contenu donc j'ai fais sa :

                      #contenu
                      {
                      width: 483px;
                      height: 366px;
                      background: #805487;
                      margin-left: 140px;
                      top: 150px;
                      text-align: center;
                      margin-right: 10px;
                      background-color: #000000;

                      Mais sa rend le bloc contenu noir mais pas le fond !

                      EDIT = je n'avais pas vu ton message Chiv je teste sa ! merci !

                      EDIT 2= C'est super ! sa marche à la perfection ! ^^

                      MERCI a tous !
                      Bonne soirée
                      • Partager sur Facebook
                      • Partager sur Twitter

                      l'héritage !!

                      × 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