Partage
  • Partager sur Facebook
  • Partager sur Twitter

probleme mise en page

Sujet résolu
wydook66
    10 décembre 2005 à 14:00:41

    Bonjour j'ai un souci de mis en page.

    je doit inserer ca:

    http://www.meteo-world.com/11/tab.php
    (pour css voir code source)

    dans cette page
    http://www.meteo-world.com/11/

    dans le corps du milieu entre le texte L'Actualité Météo en continu sur Internet et l'encart Actualités

    j'ai tout tester, et j'arrive pas a l'inserer. :(
    • Partager sur Facebook
    • Partager sur Twitter
    zeunyton
      10 décembre 2005 à 14:09:02

      si tu affiche ton code html est css on pourra peut être t'aider
      • Partager sur Facebook
      • Partager sur Twitter
      wydook66
        10 décembre 2005 à 14:19:40

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
           
        <head>
               <title>Bienvenue sur mon site !</title>
               <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
          <link rel="stylesheet" media="screen" type="text/css" title="Essai" href="css.css" /> </head>
           <body>
        <?php
          include('entete.php');  // Nous appelons notre menu
        ?>
        <?php
          include('menu.php');  // Nous appelons notre menu
        ?>        </div></div>
        <div align="left"><div id="menu-droit">
           <!-- Ici on mettra le menu -->
            <div class="element_menu"> <!-- Cadre correspondant à un sous-menu -->
              <h3>Titre menu</h3> <!-- Titre du sous-menu -->
              <ul class="rien">
                   <li>Lien</li> <!-- Liste des liens du sous-menu -->
                   <li>Lien</li>
                   <li>Lien</li>
               </ul>

           </div>

           <div class="element_menu"> <!-- Cadre correspondant à un sous-menu -->
          <h3>Titre menu</h3> <!-- Titre du sous-menu -->
               <ul class="rien">
                   <li>Lien</li> <!-- Liste des liens du sous-menu -->
                   <li>Lien</li>
                   <li>Lien</li>
               </ul>

           </div>

        </div>


        <div align="center"><font face="Geneva, Arial, Helvetica, sans-serif"><strong>L'Actualité
          Météo en continu sur Internet</strong></font> </div>
        <div id="corps">
           <div class="element_corps"> <!-- Cadre correspondant à un sous-menu -->
          <h2>Actualités</h2>
            <!-- Titre du sous-menu -->
            <!-- Ici on mettra le contenu principal de la page (tout le texte quoi) -->
             
           
            <p> <img src="http://www.meteo-world.com/news/img/5.12.05.jpg"  width="244" height="183" class="imageflottante" /><h4>Posté le 8/12/05 à 10h21></h4>Environ 175 000 personnes ont dû être évacuées dans l'Etat indien du
              Tamil Nadu (sud), a annoncé l'agence indienne PTI. Des pluies torrentielles
              - les plus importantes depuis des décennies - y ont provoqué des inondations.
              Environ 75 000 personnes ont été évacuées à Chennai (anciennement Madras),
              capitale du Namil Nadu et 100 000 dans d'autres régions de cet Etat, a indiqué
              le chef du gouvernement local Selvi Jayalalithaa. La ville a enregistré
              23 cm de pluies en 24 heures de vendredi à samedi matin, a précisé PTI.</p>
         

         

        </div>
        </div>





        <div id="corps-actualites">
        <div class="element_corps"> <!-- Cadre correspondant à un sous-menu -->
          <h2>Les news en France et dans le Monde</h2>
         
           <p>
              etrouvez sur ce site &quot;totalement gratuit&quot;, nos
                                deux rubriques vous permettant de vous tenir inform&eacute;
                                des toutes derni&egrave;res actualit&eacute;s m&eacute;t&eacute;o <br />
               Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
           </p>
           


        </div></div>
        <div id="corps-newsfrmonde">
        <div class="element_corps"> <!-- Cadre correspondant à un sous-menu -->
          <h2>Divers</h2>
        <h4>Posté le 8/12/05 à 10h21></h4>   
           <p>
               A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
               Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
           </p>
           
         

        </div></div>
        <div id="corps-publicites">
        <div class="element_corps"> <!-- Cadre correspondant à un sous-menu -->
          <h2>Publicités</h2>
        <h4>Posté le 8/12/05 à 10h21></h4>   
           <p>
               A tout le monde ! Si je commence à privilégier certaines personnes, on va m'accuser de discrimination ;o)<br />
               Que vous soyez fans de fusils à pulsion plasma ou de Barbie et Ken, ce site est fait pour vous ! Si si !
           </p>
           
         

        </div></div>
        <div id="pied_de_page">
           <!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
            <p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p>

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



        css:
        /* CSS Document */

        body
        {
           width: 100%;
           margin: auto; /* Pour centrer notre page */
           margin-top: 0px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
           margin-bottom: 20px;    /* Idem pour le bas du navigateur */

        }
        h4
        {
           text-align: left;
           font-family: Arial;
           font-size: small;

         
        }
        h6
        {
           text-align: right;
           font-family: Arial;
           font-size: small;

         
        }
        .imageflottante
        {
        display : block;
        float: left;
         margin-right: 12px;
        }
        a:active /* Quand le visiteur clique sur le lien */
        {
           background-color: #FFCC66;
        }
        a:hover /* Quand le visiteur pointe sur le lien */
        {
           text-decoration: underline;
           color: green;
        }
        a /* Lien normal */
        {
           text-decoration: none;
           color: black;
         
        }



        /* L'en-tête */

        #en_tete
        {
         margin: center;
           width: 100%;
           height: 90px;
         background-image: url("http://www.meteo-world.com/header_noel.jpg");
           background-repeat: no-repeat;
         margin-bottom: 0px;
        }

        /* Le menu */

        #menu-gauche
        {
        margin-top: 5px;
           float: left; /* Le menu flottera à gauche */
           width: 160px; /* Très important : donner une taille au menu */
            background: #FFFFFF;
               
        }
        .element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
        {
           list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
           padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
           padding-left: 2px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
           margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
           margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
        }

        .element_menu h3
        {   
           color: #ffffff;
           font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
            font-size: 0.8em;
           text-align: center;
           background: #003366;
             padding: 0px;
        margin: 0px;
        margin-bottom: 6px;
        }
        .element_menu h2
        {   
           color: #ffffff;
           font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
            font-size: 0.8em;
           text-align: center;
           background-image: url("http://www.meteo-world.com/menu.jpg");
           background-repeat: no-repeat;
           padding: 0px;
        margin: 0px;
        margin-bottom: 6px;
        }
        .element_menu li
        {   
           color: #000000;
           font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
          font-size: 0.8em;
           font-family:  "Times New Roman", Times, serif;
           margin-bottom: 0px;
           
        }
        .rien
        {
           list-style-type: none;
        }

        #menu-droit
        {
        margin-top: 5px;
           float: right; /* Le menu flottera à droite */
           width: 120px; /* Très important : donner une taille au menu */
            background: #F5EBE0;
        }
        .element_menu li
        {   
           color: #000000;
           font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
          font-size: 0.8em;
           font-family:  "Times New Roman", Times, serif;
           margin-bottom: 0px;
           
        }
        .rien
        {
           list-style-type: none;
        }




        #corps
        {
        margin-top: 5px;
           margin-left: 165px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
            margin-right: 125px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
           margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
           padding: 2px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
           
           color: #000000;
           background-color: #ECECFF; /* Une couleur de fond pour le corps */
         
           
          border: 1px dotted #003366
        }

        .element_corps h2
        { 
        margin-top: 0px;
        color: #ffffff;
           font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
            font-size: 0.8em;
           text-align: left;
           background: #003366;
         
               
        }

         


        #corps-actualites
        {
           margin-left: 165px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
            margin-right: 125px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
           margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
           padding: 0px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
           
           color: #000000;
           background-color: #ECECFF; /* Une couleur de fond pour le corps */
         
           
          border: 1px dotted #003366
        }
        .element_corps h2
        { 
        margin-top: 0px;
        color: #ffffff;
           font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
            font-size: 0.8em;
           text-align: left;
           background: #003366;
         
               
        }
         


        #corps-newsfrmonde
        {
           margin-left: 165px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
            margin-right: 125px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
           margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
           padding: 0px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
           
           color: #000000;
           background-color: #ECECFF; /* Une couleur de fond pour le corps */
         
           
          border: 1px dotted #003366
        }
        .element_corps h2
        { 
        margin-top: 0px;
        color: #ffffff;
           font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
            font-size: 0.8em;
           text-align: left;
           background: #003366;
         
               
        }
        #corps-publicites
        {
           margin-left: 165px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
            margin-right: 125px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
           margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
           padding: 0px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
           
           color: #000000;
           background-color: #ECECFF; /* Une couleur de fond pour le corps */
         
           
          border: 1px dotted #003366
        }
        .element_corps h2
        { 
        margin-top: 0px;
        color: #ffffff;
           font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
            font-size: 0.8em;
           text-align: left;
           background: #003366;
         
               
        }



        pourla page que je veut inserer dans celle ci voir code source ici http://www.meteo-world.com/11/tab.php :)


        • Partager sur Facebook
        • Partager sur Twitter
        zeunyton
          10 décembre 2005 à 14:58:06

          il faut ton code menu.php aussi si non comment veut tu que je sache commen le faire rentrez dedans
          en même temps s'aurrais tu me dire sur ton plan la grande colone a quoi elle se rapporte dans ton html
          La grande colone de droite
          • Partager sur Facebook
          • Partager sur Twitter
          wydook66
            10 décembre 2005 à 16:13:01

            alors en fait au final il faut que ca donne comme ca http://www.meteo-world.com/

            le menu est en fait une include.

            Voir code html en code source ici http://www.meteo-world.com/11/menu.php

            code css:
            /* Le menu */

            #menu-gauche
            {
            margin-top: 5px;
               float: left; /* Le menu flottera à gauche */
               width: 160px; /* Très important : donner une taille au menu */
                background: #F5EBE0;
                   
            }
            .element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
            {
               list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
               padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
               padding-left: 2px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
               margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
               margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
            }

            .element_menu h3
            {   
               color: #ffffff;
               font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
                font-size: 0.8em;
               text-align: center;
               background: #003366;
                 padding: 0px;
            margin: 0px;
            margin-bottom: 6px;
            }
            .element_menu h2
            {   
               color: #ffffff;
               font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
                font-size: 0.8em;
               text-align: center;
               background-image: url("http://www.meteo-world.com/menu.jpg");
               background-repeat: no-repeat;
               padding: 0px;
            margin: 0px;
            margin-bottom: 6px;
            }
            .element_menu li
            {   
               color: #000000;
               font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
              font-size: 0.8em;
               font-family:  "Times New Roman", Times, serif;
               margin-bottom: 0px;
               
            }
            .rien
            {
               list-style-type: none;
            }
            • Partager sur Facebook
            • Partager sur Twitter
            zeunyton
              10 décembre 2005 à 22:30:53

              en faite tu veux incorporer se code si dans ta page html :
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
              <!-- saved from url=(0053)http://test.roane-irkana.net/2_cols_fluide_2_cols.htm -->
              <HTML><HEAD><TITLE>Untitled</TITLE>
              <META http-equiv=Content-Type content="text/html; charset=windows-1252">
              <STYLE type=text/css>
              #entete {
                      CLEAR: both;  BORDER-BOTTOM: #000000 1px solid;
              }
              #pied {
                      CLEAR: both; 
              }
              #conteneur {
                      CLEAR: both; MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px; width: 100%;
              }
              #menu {
                        FLOAT: left;   WIDTH: 49%;
              }
              .element_menu h2
              { 
              margin-top: 0px;
              color: #ffffff;
                 font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
                  font-size: 0.8em;
                 text-align: left;
                 background: #003366;
              width: 100%;
               
                     
              }
              #centre {
                      MARGIN-LEFT: 0px
              }
              #col1 {
                       FLOAT: left;  WIDTH: 31%;  BORDER-LEFT: #FFFFFF 1px solid; BORDER-RIGHT: #FFFFFF 1px solid
              }
              .element_col1 h2
              { 
              margin-top: 0px;
              color: #ffffff;
                 font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
                  font-size: 0.8em;
                 text-align: left;
                 background: #003366;
              width: 100%;
               
                     
              }

              #col2 {
                       FLOAT: left;  WIDTH: 20%;
              }

              .element_col2 h2
              { 
              margin-top: 0px;
              color: #ffffff;
                 font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
                  font-size: 0.8em;
                 text-align: left;
                 background: #003366;
              width: 100% ;
               
                     
              }
              #page {
                       BORDER-TOP: #000000 1px solid; border: 1px dotted #003366;  background: #ECECFF;
              }

              </STYLE>

              <META content="MSHTML 6.00.2745.2800" name=GENERATOR></HEAD>
              <BODY>
              <DIV id=page>

              <DIV id=conteneur>
              <DIV id=menu><div class="element_menu">
              <h2>Contenu colonne 1</h2></DIV>
                    <p>description</p>

                  </DIV>
              <DIV id=centre>
              <DIV id=col1>
              <div class="element_col1">
              <h2>Contenu colonne 1</h2>
                        <P align="center"><img src="http://www.mer-littoral.org/goodies/fond-corynactis-signe.JPG" width="216" height="217" border="0" alt="Carte météoalerte"></P>
                      </DIV></DIV>
              <DIV id=col2>
               <div class="element_col2">
              <h2>Contenu colonne 2</h2>
                        <P align="center"><img src="http://www.mer-littoral.org/goodies/fond-corynactis-signe.JPG" width="90" height="92" border="0" alt="Image satellite animée"></P>

                        <h2>colonne</h2>
                        <p align="center"><img src="http://www.mer-littoral.org/goodies/fond-corynactis-signe.JPG" width="90" height="92" border="0" alt="Carte de vigilance, météo France"></P>
                      </DIV></DIV></DIV></DIV>
              <DIV id=pied></DIV></DIV></BODY></HTML>
              • Partager sur Facebook
              • Partager sur Twitter
              wydook66
                11 décembre 2005 à 9:45:28

                Oui


                dans cette page
                http://www.meteo-world.com/11/index.php (css de index.php ici http://www.meteo-world.com/11/css.css )

                dans le corps du milieu entre le texte L'Actualité Météo en continu sur Internet et l'encart Actualités
                • Partager sur Facebook
                • Partager sur Twitter
                wydook66
                wydook66
                  13 décembre 2005 à 12:40:08

                  Petit à petit ca avance, mais j'ai toujours un souci.

                  le bas du tableau s'arrête trop bas. Je n'arrive pas 'l'arreter sous la vignette meteo france

                  http://www.meteo-world.com/11/12/index2.php


                  code css:

                  #entete {
                      CLEAR: both;  BORDER-BOTTOM: #000000 1px solid;
                  }
                  #pied {
                      CLEAR: both;
                  }
                  #conteneur {
                    margin-left: 0px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
                      margin-right: 0px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
                     margin-bottom: 0px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
                     padding: 0px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
                   
                     color: #000000;
                     background-color: #ECECFF; /* Une couleur de fond pour le corps */

                   
                    border: 1px dotted #003366
                  WIDTH: 100%;


                  }
                  #menu {
                        FLOAT: left;   
                  }
                  .element_menu h2
                  {
                  margin-top: 0px;
                  color: #ffffff;
                     font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
                      font-size: 0.8em;
                     text-align: left;
                     background: #003366;

                   

                  }
                  #centre {
                      MARGIN-LEFT: 0px;
                  }
                  #col1 {
                       FLOAT: left;  WIDTH: 216px;  BORDER-LEFT: #FFFFFF 1px solid; BORDER-RIGHT: #FFFFFF 1px solid
                  }
                  .element_col1 h2
                  {
                  margin-top: 0px;
                  color: #ffffff;
                     font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
                      font-size: 0.8em;
                     text-align: left;
                     background: #003366;
                  width: 216px;
                   

                  }

                  #col2 {
                       FLOAT: left;  WIDTH: 92px;
                  }

                  .element_col2 h2
                  {
                  margin-top: 0px;
                  color: #ffffff;
                     font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
                      font-size: 0.8em;
                     text-align: left;
                     background: #003366;
                  width: 92px ;
                   

                  }
                  #page {
                       BORDER-TOP: #000000 1px solid; border: 1px dotted #003366;  background: #ECECFF;
                        margin-left: 163px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
                      margin-right: 123px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */


                  }
                  • Partager sur Facebook
                  • Partager sur Twitter

                  probleme mise en page

                  × 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