Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Prob] Mise en page

Css et Php

X-r@|der
    5 mars 2006 à 11:21:56

    Lu all,
    D'habitude j'arrive a bidouiller le code pour retomber sur ce que je veut... mais la imposible. Je cherche peut-être pas au bonne endroit.. je ne sais pas.

    Bon passons au problème.
    J'ai créer une page "carnet.php"

    <html>
    <head>
    </head>
    <body>
    <?php
    include('header.html');
    ?>
    <div id="menu">
    <?php
    include('menu.html');
    ?>
    </div>
    <?php
    include('calendrier.php');
    include('carnetsql.php');
    ?>
    <div id="footer">
    <?php
    include('footer.html');

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


    Dans mes pages menu.html, header.html, et footer.htmlnormalement, y'a aucun problème.
    J'ai tout d'abord créer un page carnet sans "calendrier"... disons que j'aimerai inclure un calendrier dans la page. (d'ou le include)

    Malheureusement le calendrier, il ne veut pas se placer la ou je veut...
    Petit aperçu :
    Image utilisateur

    Comment replacer le calendrier entre le header et le contenu ?

    Le code de la page :
    <!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">
    <head>
    <link rel="stylesheet" type="text/css" href="style_noir.css"media="screen" title="Fond noir" />
    <title>
    .::Trip Bloc En Afrique Du Sud ::.
    </title>
    </head>
    <body>

    <!––Header––>
    <div id="hmenu">
          <ul>
                <li>
                    <a href="descript_projet.php" title="Découvrez le projet.">Notre projet </a>
                </li>
                <li>
                    <a href="http://www.mozilla–europe.org/fr/products/" title="Decouvrez et télechargez Firefox">Il est conseiller d'utiliser Firefox pour visionner ce site</a>
                </li>

          </ul>
    </div>
    <div id="header">
           <h1><img src="img/header.png"width="450px" height="100px" title="Trip en Afrique du Sud"alt="Trip en afrique du Sud"/>
           </h1>
           </div><div id="menu">
    <!––Menu gauche––>
    <!–– Tous les liens concernant le projet––>
    <div id="projet">
    <h2>Projet</h2>
        <ul>

                <li>
                <a href="descript_projet.php" title="Description du projet.">Description</a>
                </li>
                <li>
                <a href="qui_perso.php" title="Qui participe au projet ? "> Qui nous sommes ? </a>
                </li>
                <li>
                <a href="carnet.php" title="Carnet de voyage.">Carnet de voyage</a>

                </li>
                <li>
                <a href="#" title=" Partenaires du projet">Partenaires</a>
                </li>
         </ul>
    </div>
    <!––Le spot de Rockland :
    Le situé‚ présentation‚ faune ? ancienne photo du site––>
    <div id="spot">
    <h2>Le spot : Rockland</h2>   
        <ul>

                <li>
                <a href="#" title="Situation geographique">Géographie</a>
                </li>
                <li>
                <a href="#" title="Faune / Flore ">Faune et flore</a>
                </li>
                <li>
                <a href="photo_general.php" title="Photo du site"> Photo</a>

                </li>
                            <li>
                <a href="carnet.php" title="Carnet de voyage.">Carnet de voyage</a>
                </li>
        </ul>
    </div>
    <!–– Navigation sur le site‚ lien utiles‚ nous contacter––>
    <div id="navigation">
    <h2>Navigation</h2>
            <ul>

                    <li>
                    <a href="index.php" title="Retourner à l'acceuil">Acceuil</a>
                   </li>     
                    <li>
                    <a href="#" title="Allez au forum pour partager avec nous ces moments forts.">Forum</a>
                    </li>
                    <li>
                    <a href="#" title="Tous les liens à connaitre.">Liens</a>

                    </li>
                    <li>
                    <a href="#" title=" Pour toute vos questions.">Contactez–nous</a>
                    </li>
              </ul>
     </div>         

     </div>

    <table>
        <tr>

                    <td>L</td>
                    <td>M</td>
                    <td>M</td>
                    <td>J</td>
                    <td>V</td>
                    <td>S</td>

                    <td>D</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>L</td>
                    <td>M</td>

                    <td>M</td>
                    <td>J</td>
                    <td>V</td>
                    <td>S</td>
                    <td>D</td>
        </tr>

        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td class="gris">1</td>
                            <td class="gris">2</td>
                            <td class="gris">3</td>

                            <td class="gris">4</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>     
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>

                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td><a href="#">1</a></td>
        </tr>

        <tr>
                            <td class="gris">5</td>

                            <td class="gris">6</td>
                            <td class="gris">7</td>
                            <td class="gris">8</td>
                            <td class="gris">9</td>
                            <td class="gris">10</td>
                            <td><a href="#">11</a></td>

                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>                   
                            <td><a href="#">2</a></td>
                            <td><a href="#">3</a></td>
                            <td><a href="#">4</a></td>

                            <td><a href="#">5</a></td>
                            <td><a href="#">6</a></td>
                            <td><a href="#">7</a></td>
                            <td><a href="#">8</a></td>

        </tr>
        <tr>               
                            <td><a href="#">12</a></td>

                            <td><a href="#">13</a></td>
                            <td><a href="#">14</a></td>
                            <td><a href="#">15</a></td>
                            <td><a href="#">16</a></td>
                            <td><a href="#">17</a></td>
                            <td><a href="#">18</a></td>

                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>                   
                            <td><a href="#">9</a></td>
                            <td class="gris">10</td>
                            <td class="gris">11</td>

                            <td class="gris">12</td>
                            <td class="gris">13</td>
                            <td class="gris">14</td>
                            <td class="gris">15</td>               
        </tr>
        <tr>
                            <td><a href="#">19</a></td>

                            <td><a href="#">20</a></td>
                            <td><a href="#">21</a></td>
                            <td><a href="#">22</a></td>
                            <td><a href="#">23</a></td>
                            <td><a href="#">24</a></td>
                            <td><a href="#">25</a></td>

                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                            <td class="gris">16</td>
                            <td class="gris">17</td>
                            <td class="gris">18</td>

                            <td class="gris">19</td>
                            <td class="gris">20</td>
                            <td class="gris">21</td>
                            <td class="gris">22</td>               
        </tr>
        <tr>
                            <td><a href="#">26</a></td>

                            <td><a href="#">27</a></td>
                            <td><a href="#">28</a></td>
                            <td><a href="#">29</a></td>
                            <td><a href="#">30</a></td>
                            <td><a href="#">31</a></td>
                    <td>&nbsp;</td>     
                    <td>&nbsp;</td>

                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>     
                            <td class="gris">23</td>
                            <td class="gris">24</td>
                            <td class="gris">25</td>
                            <td class="gris">26</td>

                            <td class="gris">27</td>
                            <td class="gris">28</td>
                            <td class="gris">29</td>
        </tr>
            <tr>   
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>

                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>

                            <td class="gris">30</td>
                            <td class="gris">31</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
        </tr>       

    <div class="carnet">
    <h2>On test</h2>
    <h3>The first day</h3>
    <h4>2006–02–23</h4>
        <p>
                            Un premier jour‚ le trip commence bien !    mm     nAuthUserFile /home/www/chemin/.htpasswd<br />
    AuthGroupFile /dev/null<br />
    AuthName "Acces Restreint"<br />
    AuthType Basic<br />

    <br />
    <<Files admin.php><<br />
    require valid–user<br />
    </Files><<br />
    <Files effacer.php><br />
    require valid–user<br />
    </Files>                </p>
            </div>

    <div id="footer">

    <p>
    <a href="#" title="Navigation">Plan du site</a> | <a href="#" title="Contactez–nous">Contactez–nous</a> | <a href="#" title="Partenaires">Partenaires</a> | <a href="admin/index.php" title="Administration"> Administration </a>
    </p>
    <p> Créer par X–r@|der‚ le 08.02.06. </p>

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

    Et le code Css qui va avec :

    body {
    background–color: #000;
    font–family: Tahoma‚"Times new roman"‚ Verdana‚ Sans;
    color:#fff;
    }
                                            /*Menu de gauche*/
    #menu {
    left :2%;
    top:20%;
    position : absolute;
    width : 20%;
    }
    #menu h2 {
    font–size : small;
    text–transform : uppercase;
    }
    #menu li {
    list–style : none;
    }
    #projet h2‚ #spot h2 {
    color: #c0c1c0;
    border–color : #f90;
    border–style : solid;
    border–width : 0 0 3px;
    }
    #navigation h2 {
    color: #c0c1c0;
    border–color : #5bbf60;
    border–style : solid;
    border–width : 0 0 3px;
    }
    #projet a‚ #spot a {
    font–family: "Times New Roman"‚ sans;
    font–size:90%;
    font–weight : 700;
    color:#f90;
    }
    #projet a:hover‚ #spot a:hover {
    background–color : #ffecce;
    color: #f60;
    }
    #navigation a {
    font–family: "Times New Roman"‚ sans;
    font–size:90%;
    font–weight:700;
    color: #5bbf60;
    }
    #navigation a:hover {
    background–color: #eaf2db;
    color: #690;
    }
                                    /*Header‚ images paramètres et onglets*/
    #hmenu {
    margin–top: 1%;
    }
    #hmenu li {
    display : inline;
    list–style: none;
    margin–right:1%;
    padding:0.2%;
    border: 1px solid #7e7e7e;
    }
    #hmenu a {
    color: #c9c9c9;
    font–family: "Times new roman"‚ sans;
    font–size: 80%;
    }
    #header img {
    margin–left: 23%;
    }
                                    /*Footer‚ plan du site‚ contact*/
    #footer {
    margin–left: 35%;
    margin–top: 8%;
    }
    #footer a {
    font–size: 90%;
    color: #e0c062;
    }
    #footer p {
    font–size: 80%;
    color: #95958c;
    }

                                            /*Style du carnet de voyage.
                                                    Specifique :
                                                            Pas d'emboitement des cadres.
                                                            Séparation entre les cardres.
                                                            Un coté a droite pour la chronologie.
                                            */
    div.carnet {
    margin–left:25%;
    width:70%;
    border: 1px solid #9a9a9a;
    background–color: #333;
    padding:0.5%;
    padding–left: 1.5%;
    margin–bottom: 2%;

    }
    div.carnet h2 {
    font–size:large;
    color: #9cf;
    font–weight : 700;
    }
    div.carnet h3 {
    font–family: "Times New Roman"‚ Verdana‚ Geneva‚ Sans;
    font–size: 95%;
    margin–top: –1%;
    margin–left: 1%;
    }
    div.carnet h4{
    font–family: Verdana‚Geneva‚Arial‚Helvetica‚sans–serif;
    font–size:80%;
    font–weight:500;
    margin–top: –1%;
    padding–left: 3%;
    }
    div.carnet p {
    font–size: 90%;
    }
                            /* Calendrier‚ page carnet
                                    Alignement : milieu.
                                    */





    • Partager sur Facebook
    • Partager sur Twitter
    scaler
      5 mars 2006 à 11:48:04

      Salut,

      Tout d'abord, il faudrait faire un peu de ménage dans ton code car c'est un peu bordélique.
      Ensuite, je te déconseille d'utiliser les positions absolues car niveau compatibilité pour les différentes navigateurs, tu vas galérer.

      Alors, la structure, je te conseillerais :
      <!-- menu supérieur -->
      <!-- partie gauche : le menu -->
      <!-- partie droite : la bannière et le contenu -->
      <!-- le footer -->

      Pour finir :
      --> sur la partie gauche, tu appliques un float: left;
      --> sur la partie droite, tu appliques un margin-left de la taille du menu.
      **-->Tu règles les margins sur la bannière et le contenu de manière à obtenir le résultat visuel attendu.
      --> Sur le footer, tu appliques un clear: left;

      voilà la démarche de manière très générale... Bon courage.
      • Partager sur Facebook
      • Partager sur Twitter
      Hawks
        5 mars 2006 à 11:48:19

        Salut

        Deux petites choses: - utilise les balises <th>, ça t'aidera (et évitera les <td class="gris">)
        - pense à fermé le tableau
        • Partager sur Facebook
        • Partager sur Twitter
        X-r@|der
          5 mars 2006 à 12:27:16

          Pourtant actuellement, le site passe en 800*600 jusqu'a 2084*1024.
          Je pensait que justement, utiliser les float était mauvais.
          Lorsque l'écran "se réduit" les floats diverses se survole... Non ?

          Bon le tableau pas de prob a fermé. ;-)

          ++
          • Partager sur Facebook
          • Partager sur Twitter

          [Prob] 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