Partage
  • Partager sur Facebook
  • Partager sur Twitter

[xHTML/CSS] Design extensible

MiniMolo
  • HTML / CSS
    5 mai 2006 à 16:38:39

    Bonjour les xHTMLeurs... ;) !!!

    Je viens pas souvent ici car je suis plus dans le Forum PHP mais bon, cette fois j'ai besoin de vous !

    J'ai un design de site, je l'ai découper sous photoshop, malheuresement, je n'arrive pas a le rendre extensible dans la hauteur...

    Ma page est composé ainsi :

    TABLEAU //qui englobe tout qui fait 100% en height

    ce tableau est constitué de 3 grands lignes !

    - le premier TR qui contient la banniere avec une taille fixe de 450 px
    - le troisieme TR qui contient je dirais mon bas de page avec une taille fixe de 50 px
    - puis mon TR du milieu qui n'a pas de taille pour qu'il soit exstensible entre le premier et le 3eme TR.

    Je ne crois pas me tromper la dessus ! en théorie ca fonctionne !

    Ce qui ne fonctionne pas c'est que dans mon TR du milieur, j'ai rajouté un TABLEAU, et la PAF !
    le design ne veut "s'exstenser" (héhé, ca c'est du mot).

    Je vous montre le code, j'ai essayer de simplifier le plus possible :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>JeuxVideoFrance : Administration</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body{
    font-family: Geneva, Arial, Helvetica, sans-serif;
    margin: 0px;
    padding: 0px;
    height:auto;
    }
    #top{
            background-color: #FFFFFF;
            background-image: url(images/admin_top.gif);
            background-repeat: no-repeat;
            margin: 0px;
            padding: 0px;
        height:245px;
    }
    #centre {
            background-color: #FFFFFF;
            background-image: url(images/admin_centre.gif);
            background-repeat: repeat-y;
            margin: 0px;
            padding: 0px;
    }

    #bottom{
            background-color: #FFFFFF;
            background-image: url(images/admin_bottom.gif);
            background-repeat: no-repeat;
        height:29px;
    }
    <!-- J'ai lancé les style importants pour la mise en forme-->
    </style>
    </head>
    <body bgcolor="#ffffff">
    <center>
    <table width="718" style="height:100%;" border=0 cellpadding=0 cellspacing=0>
            <tr>
                    <td id="top" height="245" valign="top" align="left">
                 <div style="border:0px solid black;position:relative;left:9px;">
                    <object>J'ai enleve le code de l'objet flash</object>
                 </div>
            </td>
            </tr>
            <tr>
           <td id="centre">
           <center>
              <table width="630" border="1">
              <tr>
                 <td class="Style1" valign="top" align="left">
                    ICI YA TOUT LE BLABLA DU SITE
                 </td>
              </tr>
              </table>
           </center>
           </td>
        </tr>   
            <tr>
               <td id="bottom" height="29"></td>
        </tr>
    </table>
    </center>
    </body>
    </html>


    et voici le résultat : le site

    Donc le design est en 3 images,
    - la banniere juqu'en dessous du mot Administration
    - une copie d'un trait fin avec un background-repeat: repeat-y;
    - puis le bas du cadre juqu'a la fin de la page

    J'aimerai que la copie du trait fin, soit répeté jusqu'en bas de la page... selon la résolution du client, pour ne pas faire trop moche comme ca !

    Donc si vous avez une piste, une astuce ou quelque chose qui pourrait me faire avancer !


    Merci d'avance a tous !

    Amicalement, Mini !




    • Partager sur Facebook
    • Partager sur Twitter
    jp949
      5 mai 2006 à 16:46:48

      je pense qu'il faut pour FF attribuer un min-height: 100%; et pour IE un eight:100%; en commentaires que tu places dans le head de ta page, pour FF #table1{ min-height: 100%; }
      <!--[if IE]>
      <style type="text/css">
      #table1{
      eight: 100%;;
      }
      </style>
      <![endif]-->
      • Partager sur Facebook
      • Partager sur Twitter

      [xHTML/CSS] Design extensible

      × 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