Partage
  • Partager sur Facebook
  • Partager sur Twitter

Hauteurs correspondantes

Une question ardue...

    10 octobre 2006 à 19:10:45

    J'aimerai créer sur mon site un design ressemblant à un design en tableau, mais sans tableau.
    C'est-à-dire ?
    Que les menus latéraux soient d'une hauteur variable, un peu comme les colonnes d'un tableau (c'est ici que s'arrête toute resemblance avec un design en tableau.)
    Plus précisement, je souhaiterai que le menu se prolonge jusqu'en bas de page, même s'il est vide...
    Pour illustrer mes propos, qui ne me semblent pas très clairs, je vous propose une image.
    L'image est ici

    body
    {
       width: 984px;
       margin: auto;
       margin-top: 20px;
       margin-bottom: 20px;   
       background-image: url("kaktus.gif");
       background-attachment: fixed;
       padding: 10px;
    /*Scrollbarre*/   
       scrollbar-face-color: #00ffff ;

       scrollbar-track-color: #509C40 ;

       scrollbar-arrow-color: #ffff00 ;

       scrollbar-shadow-color: " ;

       scrollbar-highlight-color: "
    ;

       scrollbar-3dlight-color: " ;

       scrollbar-darkshadow-color: "
    ;

    }
    /* Fin de la scrollbarre */

    /* L'en-tête */
    img
    {
    border: none;
    }
    #en_tete
    {

       width: 760px;
       height: 100px;
       background-image: url("Kiljaeden.gif");
       background-repeat: no-repeat;
       margin-bottom: 10px;
    }


    /* Le menu */

    #menu
    {

       float: right;
       width: 150px;
       margin-left: 5px;
    }

    #menu_different
    {

       float: left;
       width: 150px;
       margin-right: 5px;
    }
    .element_menu
    {
       color : #FFF29E;
       background-color: #626262;
       background-image: url("images/motif.png");
       background-repeat: repeat-x;
       margin-right: 5px;
       margin-left: 5px;
       margin-bottom: 5px;
       margin-top: 5px;
       border: 2px solid #99CC55;
       margin-bottom: 20px;
    }


    /* Quelques effets sur les menus */


    .element_menu h3
    {   
       color: #9dff58;
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
       text-align: center;
    }

    .element_menu ul
    {
            list-style-type: circle;
       padding: 0px;
       padding-left: 20px;
       margin: 0px;
       margin-bottom: 5px;
    }

    .element_menu li:hover
    {
       list-style-type: disc;
    }

    .element_menu a
    {
       /*color: #F9109F;*/
       color: #9DFF58;
       text-decoration: none;
    }

    .element_menu a:hover
    {
       /*background-color: #509C40;*/
       color: #FFF29E;
       text-decoration: underline;
    }

    /* Le corps de la page */

    #corps
    {

       margin-right: 155px;
       margin-left: 155px;
       margin-bottom: 20px;
       padding: 5px;
       color: #FFF29E;
       background-color: #626262;
       background-repeat: repeat-x;
       min-height: 500px;
       border: 2px solid;
       border-color: #99CC55;
    }   
    img
    .imageflottante
    {
    float: left;
    }
    #corps a
    {
    color: #9DFF58;
    text-decoration: none;
    }
    #corps a:hover
    {
    color: #FFF29E;
    text-decoration: underline;
    }
    #corps h1
    {
       color: #509C40;
       text-align: center;
       font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
    }

    #corps h2
    {
       height: 30px;
       background-image: url("images/titre.png");
       background-repeat: no-repeat;
       padding-left: 30px;
       color: #9dff58;
       text-align: left;
    }
    #corps h3
    {
    color: #99CC55;
    padding-left: 50px;
    font-weight: bold;
    text-decoration: underline;
    }
    #corps p
    {
    text-indent: 20px;
    }
    #corps p:first-letter
    {
    font-size: 1.5em;
    font-weight: bold;
    }
    /*
    #corps .news
    {
    width: 500px !important;
    }*/

    #corps .news .new
    {
    margin-top: 5px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    padding: 5px;
    border: outset 1px #FFF29E;
    width: 450px;
    background-color: #525252;
    }
    #corps .news .pourmembres
    {
    margin-top: 5px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    padding: 5px;
    border: outset 1px #FFF29E;
    width: 450px;
    background-color: #525252;
    }
    #corps .news .pourmembres h3, #corps .news .new h3
    {
    color: #9dff58;
    padding-left: 5px;
    text-decoration: none;
    }
    #corps .membre
    {
    float: right;
    border: 1px inset #FFF29E;
    background-color: #525252;
    padding-bottom: 3px;
    padding-right: 3px;
    padding-top: 3px;
    padding-left: 3px;
    width: 155px;
    }
    input
    {
    color: #000000;
    }
    input:focus
    {
    color: #509C40;
    background-color: #FFF29E;
    }
    #corps .membre a
    {
    font-size: 0.8em;
    }

    #corps hr
    {
       border: 1px #FFF29E;
       border-style: inset;
       margin-left: 8px;
       margin-right: 8px;
    }

    /* Le pied de page */

    #pied_de_page
    {

       padding: 5px;

       text-align: center;

       color: #FFF29E;
       background-color: #626262;
       background-image: url("images/motif.png");
       background-repeat: repeat-x;
       
       border: 2px solid #99CC55;
    }


    .pied_de_page ul
    {
       list-style-image: url("Puce.gif");
       padding: 0px;
       padding-left: 20px;
       margin: 0px;
       margin-bottom: 5px;
    }

    .pied_de_page a
    {
       color: #9DFF58;
    }

    .pied_de_page a:hover
    {
       background-color: #FF0000;
       color: white;
    }
    • Partager sur Facebook
    • Partager sur Twitter
      10 octobre 2006 à 19:49:05

      Salut

      Y en a qui pourraient chercher un peu. C'est le 2e poste que je lis et ou je ne vois aucun effort de recherche.
      Tutos par les zéros
      • Partager sur Facebook
      • Partager sur Twitter
      Only limits are ours...
        11 octobre 2006 à 13:21:59

        Merci, mais j'avais déjà cherché, et ce tuto ne fonctionne que si les colonnes sont l'une à côté de l'autre...
        Or, mon problème réside précisement dans le fait que les colonnes en question sont séparé par le #corps (cf. le code CSS).
        Mais, n'y a t il pas un attribut qui correspond à la hauteur du HTML, ou autre chose du même genre ??

        Merci d'avance...
        • Partager sur Facebook
        • Partager sur Twitter
          11 octobre 2006 à 17:08:46

          Non, aucun attribut de ce type.

          C'est quoi qui défini la hauteur de ta page ?
          C'est le coprs non ?
          • Partager sur Facebook
          • Partager sur Twitter

          Hauteurs correspondantes

          × 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