Partage
  • Partager sur Facebook
  • Partager sur Twitter

Un texte dans un image

?

Sujet résolu
    1 avril 2006 à 6:08:08

    Nous sachons tous que nous sommes sur le site du zéro. Je me réserve donc le droit de poser une question de zéro :p


    Bon voilà, je voudrais bien mettre des Liens dans ma banniere, mais comment? Voici quelques petits trucs qui pourrait vous aidez a ME comprendre :
    Image utilisateur
    <!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>Blambinou</title>
           <meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
       </head>
    <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="le_CSS.css" />
       <body>

           <!–– L'en–tête ––>

           <div id="en_tete">
               
           </div>

           <!–– Les menus ––>

           <div id="menu">       
               <div class="element_menu">
                   <ul>
                       <li><a href="page1.html">Lien</a></li>
                       <li><a href="page2.html">Lien</a></li>
                       <li><a href="page3.html">Lien</a></li>           
                       <li><a href="page4.html">Lien</a></li>
                       <li><a href="page5.html">Lien</a></li>
                       <li><a href="page6.html">Lien</a></li>
                   </ul>
                  </div>   
           </div>

           <!–– Le corps ––>

           <div id="corps">
               <h1>Le site du blalbaq(Test)</h1>
           
               <p>
                   BlablaBlablaBlablaBlablaBlablaBlabla<br />
                   BlablaBlablaBlablaBlablaBlabla...Blabla
               </p>
           
               <h2>Blabla</h2>   
               <p>
                  Blabla<br />
                   Blabla
               </p>
               
               <h2>L'auteur</h2>   
               <p>
                   BlablaBlablaBlablaBlablaBlabla<br />
                BlablaBlablaBlablaBlabla<br />
    BlablaBlablaBlablaBlabla
               </p>
           </div>

           <!–– Le pied de page ––>

           <div id="pied_de_page">
               <p>Copyright by BlablaBlabla</p>
           </div>

       </body>
    </html> 



    body
    {
       width: 760px;
       margin: auto;
       margin-top: 20px;
       margin-bottom: 20px;   
       background-image: url("images/fond.png");
    background-color: 000000;
       }



    #en_tete
    {

       width: 760px;
       height: 150px;
       background-image: url("images-sata/banniere.jpg");
       background-repeat: no-repeat;
    }




    #menu
    {

       float: top;
       width: 760px;
       }

    .element_menu
    {
       background-color: 000000;
       background-repeat: repeat-x;
       
       border: 0px solid black;
       text-align: center;
       margin-bottom: 90px;
    }
    .element_menu h3
    {   
       color: #B3B3B3;
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
       text-align: center;
    }

    .element_menu ul
    {
       padding: 0px;
       padding-left: 20px;
       margin: 0px;
       margin-bottom: 5px;
    text-align: center;
       }

    .element_menu a
    {
      color: #B3B3B3;
    }

    .element_menu a:hover
    {
       background-color: 000000;
      text-align: center;
      color: black;
    }
    .element_menu li
    {
    display:inline;
    padding : 0 1.0em;
    }


    #corps
    {

       margin-left: 0px;
       margin-bottom: 20px;
       padding: 5px;
       margin-right: 0px;
       color: #B3B3B3;
       background-color: 000000;
       background-repeat: repeat-x;
       
       border: 2px solid black;
    }

    #corps h1
    {
       color: #B3B3B3;
       text-align: center;
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
    }

    #corps h2
    {
       height: 30px;
       background-repeat: no-repeat;
       padding-left: 30px;
       color: #B3B3B3;
       text-align: left;
    }




    #pied_de_page
    {

       padding: 5px;
       text-align: center;
       color: #B3B3B3;
       background-color: 000000
       background-repeat: repeat-x;
       
       border: 2px solid black;
    }


    Merci a SdZ pour la <base> du site.(Si on peux appeler cela un site)
    Si il y a des erreus ou meme des ligne innutile, merci de me le dire :p
    • Partager sur Facebook
    • Partager sur Twitter
      1 avril 2006 à 8:54:21

      Bonjoir!

      Alors, mettre du texte dans une image, c'est tout simplement impossible! :)

      Pour ça, tu dois faire un back avec la CSS, et c'est tout joué!

      Alors, pour l'inutile!

      • Tu n'as pas besoin d faire une sous-<div> pour mettre une <ul>. <ul> étant de type block, tu peux la matérialiser avec de la CSS, comme une <div>! ;)
      • Ton en-tête DOIT être placé entre <h1></h1>! La sémantique veut que le titre de ton site soit placé dans une ancre de type <h1>, et non la section, qui doit être au moins en <h2> ;)
      • Perso, je préfère mettre un pied de page en <ul><li>, mais ça n'engage que moi! :p


      Bonne continuation! :)
      • Partager sur Facebook
      • Partager sur Twitter
        1 avril 2006 à 10:37:29

        Comme ta dit Ejis c'est impossible... mais impossible avec du Xhtml ! ;)
        Si tu veut faire ça tu peut le faire avec du php, et tu sais quoi ? Il y a un court écrit par M@teo sur le php !!!
        • Partager sur Facebook
        • Partager sur Twitter
          1 avril 2006 à 11:15:32

          bonjour,

          pur que ton menu se trouve au dessus de l'image de ta banniere (qui est en fond), il te faut d'abord mettre ton menu dans ce conteneur:

          <!–– L'en–tête ––>

                 <div id="en_tete">
                 <!–– Les menus  que l'on garde dans l'entete––>
                 <div id="menu">       
                     <div class="element_menu">
                         <ul>
                             <li><a href="page1.html">Lien</a></li>
                             <li><a href="page2.html">Lien</a></li>
                             <li><a href="page3.html">Lien</a></li>           
                             <li><a href="page4.html">Lien</a></li>
                             <li><a href="page5.html">Lien</a></li>
                             <li><a href="page6.html">Lien</a></li>
                         </ul>
                        </div>
                 </div>

          ensuite tu modifie legerement le css pour positionner ton menu au bas du div "entete.

          Pour ce faire tu indique au conteneur (entete) tout f'abord un : position:relative;
          Ce qui va permettre de positionner par rapport a celui-ci tout les elemnts qu'il contient de façon precise avec un position:absolute.

          #en_tete
          {

             width: 760px;
             height: 150px;
             background-image: url("images-sata/banniere.jpg");
             background-repeat: no-repeat;
             position:relative/* modification */
          }

          et pour le menu :
          #menu
          {

            /*  float: top; ça n'existe pas ! , la valeur "top" */
             position:absolute;
             bottom:0;/* a toi de regler si trop bas */
             left:200px; /* a toi de regler la valeur qui te convient */
             width: 760px;
             }

          En faisant comme ceci on place ton menu au bas du conteneur d'entete, left, bottom,top, right, te permettent de le positionner, avec 1 ou 2 valeurs au plus right ou left associé a top ou bottom.

          ++
          • Partager sur Facebook
          • Partager sur Twitter
            1 avril 2006 à 15:33:00

            Avant tout, merci pour toutes les belles réponses, je vais me coucher moin "nianseux" ^^


            Mais me re-voilà avec un problem: il y a deux en-tete. J'avais pourtant bien indiqué background-repeat: no-repeat;
            Image utilisateur

            Je vous re-lance les superbe code 8-)


            <!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>Blambinou</title>
                   <meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
               </head>
            <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="le_CSS.css" />
               <body>
                   <div id="en_tete">
                    <h1></h1>   
                   </div>

                   <div id="en_tete">
                   <div id="menu">       
                       <div class="element_menu">
                           <ul>
                               <li><a href="page1.html">Lien</a></li>
                               <li><a href="page2.html">Lien</a></li>
                               <li><a href="page3.html">Lien</a></li>           
                               <li><a href="page4.html">Lien</a></li>
                               <li><a href="page5.html">Lien</a></li>
                               <li><a href="page6.html">Lien</a></li>
                           </ul>
                                       </div>
                       </div>



                   <div id="corps">
                       <h1>Le site du blabla(Test)</h1>
                   
                       <p>
                           BlablaBlablaBlablaBlablaBlablaBlabla<br />
                           BlablaBlablaBlablaBlablaBlabla...Blabla
                       </p>
                   
                       <h2>Blabla</h2>   
                       <p>
                          Blabla<br />
                           Blabla
                       </p>
                       
                       <h2>L'auteur</h2>   
                       <p>
                           BlablaBlablaBlablaBlablaBlabla<br />
                        BlablaBlablaBlablaBlabla<br />
            BlablaBlablaBlablaBlabla
                       </p>
                   </div>


                   <div id="pied_de_page">
                       <ul>
                               <li>
                               Copyright by BlablaBlabla
                               </li>
                               </ul>
                   </div>

               </body>
            </html>





            body
            {
               width: 760px;
               margin: auto;
               margin-top: 20px;
               margin-bottom: 20px;   
            background-color: 000000;
               }



            #en_tete
            {

               width: 760px;
               height: 150px;
               background-image: url("images-sata/banniere.jpg");
               background-repeat: no-repeat;
               position:relative;
            }




            #menu
            {

               position:absolute;
               bottom:370px;
               left:0px;
               width: 760px;
               margin-bottom: 20px;
               }
            .element_menu
            {
               background-color: 000000;
               background-repeat: no-repeat;
               
               border: 0px solid black;
               text-align: center;
               margin-bottom: 90px;
            }
            .element_menu h3
            {   
               color: #B3B3B3;
               font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
               text-align: center;
            }

            .element_menu ul
            {
               padding: 0px;
               padding-left: 20px;
               margin: 0px;
               margin-bottom: 5px;
            text-align: center;
               }

            .element_menu a
            {
              color: #B3B3B3;
            }

            .element_menu a:hover
            {
               background-color: 000000;
              text-align: center;
              color: black;
            }
            .element_menu li
            {
            display:inline;
            padding : 0 1.0em;
            }


            #corps
            {

               margin-left: 0px;
               margin-bottom: 20px;
               padding: 5px;
               margin-right: 0px;
               color: #B3B3B3;
               background-color: 000000;
               background-repeat: no-repeat;
               
               border: 2px solid black;
            }

            #corps h1
            {
               color: #B3B3B3;
               text-align: center;
               font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
            }

            #corps h2
            {
               height: 30px;
               background-repeat: no-repeat;
               padding-left: 30px;
               color: #B3B3B3;
               text-align: left;
            }




            #pied_de_page
            {

               padding: 5px;
               text-align: center;
               color: #B3B3B3;
               background-color: 000000
               background-repeat: no-repeat;
               
               border: 2px solid black;
            }


            Merci d'avance, et désolé du dérangement :p
            • Partager sur Facebook
            • Partager sur Twitter
              1 avril 2006 à 18:33:09

              tu peux le faire (enfin pas directement) avec le php (voir le cour de m@teo, un background (c le mieu !!) ou faire en css

              .image; .texte
              {
              position:absolute;
              top:50px;/*L'écartement en partant du haut*/
              left:50px;/*L'écartement en partant de la gauche*/
              }
              • Partager sur Facebook
              • Partager sur Twitter
              Créateur de www.shotguncovoit.com !
                1 avril 2006 à 18:45:45

                Oui mais de ca j'en ai pas besoin, jai réussit. Mon dernier message étais le probleme.

                Merci quand meme ;)
                • Partager sur Facebook
                • Partager sur Twitter
                  1 avril 2006 à 23:24:59

                  Salut, tu as deux entêtes sur ta page car tu as mis deux div entete dans ton code.


                  <div id="en_tete"> <!--*****************************-->
                          <h1></h1>  <!--*****Une première div********-->
                         </div>      <!--*****************************-->

                         <div id="en_tete"><!--*****Et une deuxieme***-->
                           <div id="menu">       
                             <div class="element_menu">
                                 <ul>
                                     <li><a href="page1.html">Lien</a></li>
                                     <li><a href="page2.html">Lien</a></li>
                                     <li><a href="page3.html">Lien</a></li>           
                                     <li><a href="page4.html">Lien</a></li>
                                     <li><a href="page5.html">Lien</a></li>
                                     <li><a href="page6.html">Lien</a></li>
                                 </ul>
                              </div>
                           </div>
                        </div> <!--**** ici il faut ajouter cette ligne ******-->



                  Supprimes celle qui ne te sert à rien (je pense que c'est la premiere)

                  De plus il me semble que tu n'as pas fermée le bloc div (celui ou est inseré le menu)
                  • Partager sur Facebook
                  • Partager sur Twitter
                    2 avril 2006 à 1:54:53

                    Voila ca ne marche pas plus, avec ce que tu viens de me faire écrire, je voit 2 bannieres et aucun text. J'ai donc essayer de modifier des choses. Si j'aute le </div> de la premiere en-tete, j'ai une banniere et mes lien qui s'affiche bien. Mais les Lien son plus haut que la banniere, et je n'ai pas réussit à les faire descendre via css.


                    Voila, je vous en ai dit le plus possible et je ne suis guère capable d'arranger ce probleme. Merci d'avance aux personnes quelque soit le temps qu'il prendrons pour le résoudre. Donc la question:Comment puis-je mettre mes Liens par-dessus ma banniere, et a un endroit précis.


                    <!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>Blambinou</title>
                           <meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
                       </head>
                    <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="le_CSS.css" />
                       <body>
                    <div id="en_tete">
                            <h1></h1> 
                           </div>     
                           <div id="en_tete"><!--*****Et une deuxieme***-->
                             <div id="menu">       
                               <div class="element_menu">
                                   <ul>
                                       <li><a href="page1.html">Lien</a></li>
                                       <li><a href="page2.html">Lien</a></li>
                                       <li><a href="page3.html">Lien</a></li>           
                                       <li><a href="page4.html">Lien</a></li>
                                       <li><a href="page5.html">Lien</a></li>
                                       <li><a href="page6.html">Lien</a></li>
                                   </ul>
                                </div>
                             </div>
                          </div>

                           <div id="corps">
                               <h1>Le site du blabla(Test)</h1>
                           
                               <p>
                                   BlablaBlablaBlablaBlablaBlablaBlabla<br />
                                   BlablaBlablaBlablaBlablaBlabla...Blabla
                               </p>
                           
                               <h2>Blabla</h2>   
                               <p>
                                  Blabla<br />
                                   Blabla
                               </p>
                               
                               <h2>L'auteur</h2>   
                               <p>
                                   BlablaBlablaBlablaBlablaBlabla<br />
                                BlablaBlablaBlablaBlabla<br />
                    BlablaBlablaBlablaBlabla
                               </p>
                           </div>


                           <div id="pied_de_page">
                               <ul>
                                       <li>
                                       Copyright by BlablaBlabla
                                       </li>
                                       </ul>
                           </div>

                       </body>
                    </html>

                    body
                    {
                       width: 760px;
                       margin: auto;
                       margin-top: 20px;
                       margin-bottom: 20px;   
                    background-color: 000000;
                       }



                    #en_tete
                    {

                       width: 760px;
                       height: 150px;
                       background-image: url("images-sata/banniere.jpg");
                       background-repeat: no-repeat;
                       position:relative;
                       top: 0px;
                       }




                    #menu
                    {

                       position:absolute;
                       bottom:300px;
                       left:0px;
                       width: 760px;
                       margin-bottom: 20px;
                       }
                    .element_menu
                    {
                       background-color: 000000;
                       background-repeat: no-repeat;
                       
                       border: 0px solid black;
                       text-align: center;
                       margin-bottom: 90px;
                    }
                    .element_menu h3
                    {   
                       color: #B3B3B3;
                       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
                       text-align: center;
                    }

                    .element_menu ul
                    {
                       padding: 0px;
                       padding-left: 20px;
                       margin: 0px;
                       margin-bottom: 5px;
                    text-align: center;
                       }

                    .element_menu a
                    {
                      color: #B3B3B3;
                    }

                    .element_menu a:hover
                    {
                       background-color: 000000;
                      text-align: center;
                      color: black;
                    }
                    .element_menu li
                    {
                    display:inline;
                    padding : 0 1.0em;
                    }


                    #corps
                    {

                       margin-left: 0px;
                       margin-bottom: 20px;
                       padding: 5px;
                       margin-right: 0px;
                       color: #B3B3B3;
                       background-color: 000000;
                       background-repeat: no-repeat;
                       
                       border: 2px solid black;
                    }

                    #corps h1
                    {
                       color: #B3B3B3;
                       text-align: center;
                       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
                    }

                    #corps h2
                    {
                       height: 30px;
                       background-repeat: no-repeat;
                       padding-left: 30px;
                       color: #B3B3B3;
                       text-align: left;
                    }




                    #pied_de_page
                    {

                       padding: 5px;
                       text-align: center;
                       color: #B3B3B3;
                       background-color: 000000
                       background-repeat: no-repeat;
                       
                       border: 2px solid black;
                    }
                    • Partager sur Facebook
                    • Partager sur Twitter
                      2 avril 2006 à 19:03:24

                      Bonjour, tu n'as pas dû comprendre (ou certainement me suis-je mal exprimé).

                      Ce code fonctionne chez moi (le menu se trouve en bas de la banniere)

                      <!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>Blambinou</title>
                             <meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
                             
                      </head>
                      <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="css.css" />
                      <body>
                           
                             <div id="en_tete">
                                    <div id="menu">
                                         <div class="element_menu">
                                      <ul>
                                         <li><a href="page1.html">Lien</a></li>
                                         <li><a href="page2.html">Lien</a></li>
                                         <li><a href="page3.html">Lien</a></li>           
                                         <li><a href="page4.html">Lien</a></li>
                                         <li><a href="page5.html">Lien</a></li>
                                         <li><a href="page6.html">Lien</a></li>
                                     </ul>
                                 </div>
                               </div>
                            </div>

                             <div id="corps">
                                 <h1>Le site du blabla(Test)</h1>
                             
                                 <p>
                                     BlablaBlablaBlablaBlablaBlablaBlabla<br />
                                     BlablaBlablaBlablaBlablaBlabla...Blabla
                                 </p>
                             
                                 <h2>Blabla</h2>   
                                 <p>
                                    Blabla<br />
                                     Blabla
                                 </p>
                                 
                                 <h2>L'auteur</h2>   
                                 <p>
                                     BlablaBlablaBlablaBlablaBlabla<br />
                                  BlablaBlablaBlablaBlabla<br />
                      BlablaBlablaBlablaBlabla
                                 </p>
                             </div>


                             <div id="pied_de_page">
                                 <ul>
                                         <li>
                                         Copyright by BlablaBlabla
                                         </li>
                               </ul>
                             </div>

                      </body>
                      </html>



                      j'ai repris le dernier css que tu as posté et j'ai modifié #menu et # entete

                      #en_tete
                      {

                         width: 760px;
                         height: 150px;
                         background-image: url("images-sata/banniere.jpg");
                         background-repeat: no-repeat;
                         }




                      #menu
                      {

                              position:absolute;
                              width: 760px;
                              margin-bottom: 20px;
                              top: 150px;/*joues sur cette valeur pour positionner ton menu*/
                         }

                      • Partager sur Facebook
                      • Partager sur Twitter

                      Un texte dans un image

                      × 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