Design

Réduire
X
Réduire
 
  • Page sur 1
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages
Précédent template Suivant
  • #1

    [Problème] Design

    Bonjour,

    J'ai réalisé un template pour Joomla 2.5. Tout fonctionne bien ;-)
    Mais, il y a un mais! Je débute dans le développement en div (avant je développer en tableau! je sais... je sais...).

    En effet le corps de page suit le texte mais quand celui-ci est trop cours j'ai la couleur grise qui apparaît, qui correspond à ma div "middle". Si j’attribue une hauteur à mon corps de page, le corps de page s'arrête à cette hauteur, le texte continu de descendre mais du coup plus de fond blanc!
    Si j'attribue une couleur blanche à ma div middle, j'ai bien mon corps de page blanc mais j'ai en bas à gauche un petit rectangle qui devient lui aussi blanc, or je le veux gris!

    Je ne sais pas si j'ai été clair pas facile à expliquer!
    Voici le site en question : www.juliette-camatta.com
     si vous cliquez sur contact menu bas de page vous allez surement comprendre.

    Voici le fichier index.php :

    </head>
    <body>
    <div id="top"></div>
    <div id="user1">
    <jdoc:include type="modules" name="user1" />
    </div>
    <div id="logo">
    <jdoc:include type="modules" name="logo" />
    </div>
    <div id="middle">
    <div id="mainmenu">
    <jdoc:include type="modules" name="mainmenu" />
    </div>
    <div id="content">
    <jdoc:include type="component" />
    </div>
    <div id="menubas">
    <jdoc:include type="modules" name="menubas" />
    </div>
    <div style="clear: both"></div>
    </div>
    </body>
    </html>

    Et le css du template :

    #user1 {
    background:url(../images/user1.jpg) no-repeat scroll 0 0 ;
    background-color: #444444;
    float:right;
    text-align:right;
    padding-right:2px;
    padding-top:2px;
    height: 29px;
    width: 958px;
    }

    #logo {
    background:url(../images/logo.jpg) no-repeat scroll 0 0 ;
    background-color: #FFF;
    float:right;
    height: 219px;
    width: 960px;
    }

    #middle {
    background-color: #444444;
    margin-top:auto;

    }

    #top {
    background-color: #FFF;
    }

    #mainmenu {
    background: url(../images/mainmenu.jpg) #444444 repeat;
    float:left;
    margin-top:auto;
    padding-top:5px;
    width: 155px;
    padding-right:10px;
    }

    #content {
    background-color: #FFF;
    padding-left:15px;
    padding-right:15px;
    float: right;
    width: 765px;
    }

    #menubas {
    background: url(../images/menubas.jpg);
    text-align:center;
    background-color: #FFF;
    clear: both;
    float:right;
    height: 30px;
    width:795px;
    }


    /* Joomla! */

    #menubas a:link, a:visited, a:active {
    color: rgb(244, 56, 145);
    font-weight: normal;
    text-decoration: none;
    }


    #mainmenu {
    background:#444444 url(../images/mainmenu.jpg) repeat ;
    text-align:right;
    font-weight:bold;
    padding-top:5px;
    }

    #mainmenu a:link, a:visited, a:active {
    color: #CCCCCC;
    font-weight:bold;
    text-decoration: none;
    }

    #mainmenu a:hover {
    color: rgb(229, 60, 160);
    font-weight:bold;
    text-decoration: none;
    }

    #mainmenu p {
    background:#444444 url(../images/mainmenu.jpg) repeat ;
    text-align:right;
    padding-top:5px;

    }

    #mainmenu li {
    background:#444444 url(../images/mainmenu.jpg) repeat ;
    list-style: none outside none;
    margin: 0;

    }

    #logo {
    background-color: #FFF;
    float:right;
    margin-top:auto;
    height: 219px;
    width: 960px;
    }


    body {
    background: none repeat scroll 0 0 #565656;
    color: rgb(102, 102, 102);
    font-family: "Helvetica",Arial,Helvetica,sans-serif;
    font-size:0.8em;
    text-align:left;
    padding-top:0px;
    margin-left: auto;
    margin-right: auto;
    margin-top:auto;
    height:auto;
    width:960px;
    }



    Si quelqu'un peut me dire ce qu'il faut que je change ça serait vraiment super.

    Merci d'avance,
    Cordialement,
    Edith Bonamy
    Tags: Aucun
  • #2
    Re : Design

    Bonjour,

    En changeant la couleur de #middle, on récupère un fond blanc jusqu'en bas.
    Il faut ensuite ajouter une div de 958px autour de menubas avec la même couleur que la colonne menu
    UP, le plugin universel à découvrir sur https//up.lomart.fr
    bgMax    , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

    Commentaire

    • #3
      Re : Design

      Bonjour,

      Merci beaucoup pour votre réponse.
      J'ai essayé mais je n'y arrive pas. Je dois louper quelque chose!

      Voici le code que j'ai mis pour la div :

      </head>
      <body>
      <div id="top"></div>
      <div id="user1">
      <jdoc:include type="modules" name="user1" />
      </div>
      <div id="logo">
      <jdoc:include type="modules" name="logo" />
      </div>
      <div id="middle">
      <div id="mainmenu">
      <jdoc:include type="modules" name="mainmenu" />
      </div>
      <div id="content">
      <jdoc:include type="component" />
      </div>
      </div>
      <div id="footer"></div>
      <div id="menubas">
      <jdoc:include type="modules" name="menubas" />
      </div>
      <div style="clear: both"></div>
      </div>
      </body>
      </html>

      Je ne sais pas ou je dois mettre la div!
      Merci d'avance,

      Cordialement,
      Edith Bonamy

      Commentaire

      • #4
        Re : Design

        Il faut ensuite ajouter une div de 958px autour de menubas avec la même couleur que la colonne menu
        donc, cela donne ça
        Code HTML:
        <div id="footer">
     <div id="menubas">
         <jdoc:include type="modules" name="menubas" />
     </div>
</div>
        UP, le plugin universel à découvrir sur https//up.lomart.fr
        bgMax        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

        Commentaire

        • #5
          Re : Design

          Merci beaucoup pour votre réponse rapide.
          J'ai rajouté le code donné mais cela me donne se résultat!
          http://test2.juliette-camatta.com/partenaires.html

          </head>
          <body>
          <div id="top"></div>
          <div id="user1">
          <jdoc:include type="modules" name="user1" />
          </div>
          <div id="logo">
          <jdoc:include type="modules" name="logo" />
          </div>
          <div id="middle">
          <div id="mainmenu">
          <jdoc:include type="modules" name="mainmenu" />
          </div>
          <div id="content">
          <jdoc:include type="component" />
          </div>
          </div>
          <div id="footer">
          <div id="menubas">
          <jdoc:include type="modules" name="menubas" />
          </div>
          </div>
          <div style="clear: both"></div>
          </div>
          </body>
          </html>

          Je comprends vraiment pas.
          En footer je suis bien à 958 et couleur #444444
          En middle en #FFF

          Commentaire

          • #6
            Re : Design

            Il y a un div en trop à la fin, avant body
            UP, le plugin universel à découvrir sur https//up.lomart.fr
            bgMax            , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

            Commentaire

            • #7
              Re : Design

              Merci vraiment pour ton aide.
              Ca me donne ça du coup :

              http://test2.juliette-camatta.com/a-propos.html

              Je commence un petit peu a comprendre même si c'est pas encore ça!
              Par contre j'ai l'impression que la contruction en div donne vraiment mieux.

              #mainmenu {
              background: url(../images/mainmenu.jpg) #444444 repeat;
              float:left;
              margin-top:auto;
              padding-top:5px;
              width: 155px;
              padding-right:10px;
              }

              #content {
              background-color: #FFFFFF;
              padding-left:15px;
              padding-right:15px;
              float: right;
              width: 765px;
              }

              #menubas {
              background: url(../images/menubas.jpg);
              background-color:#444444;
              text-align:center;
              clear:both;
              float:right;
              height:30px;
              width:795px;
              }

              #footer {
              background:#444444;
              clear: both;
              }


              <div id="middle">
              <div id="mainmenu">
              <jdoc:include type="modules" name="mainmenu" />
              </div>
              <div id="content">
              <jdoc:include type="component" />
              </div>
              <div style="clear: both"></div>
              </div>
              <div id="footer">
              <div id="menubas">
              <jdoc:include type="modules" name="menubas" />
              </div>
              </div>
              </body>
              </html>

              Merci encore

              Commentaire

              • #8
                Re : Design

                Il est superbe ton design

                il reste juste à ajouter ceci au css pour eviter l'espace avant le footer
                #menubas ul { margin-top: 0; }
                UP, le plugin universel à découvrir sur https//up.lomart.fr
                bgMax                , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                Commentaire

                • #9
                  Re : Design

                  Super merci beaucoup!
                  Il me reste plus qu'un truc à changer pour que le content soit blanc.
                  C'est surement dans l'index.php en div!

                  Commentaire

                  • #10
                    Re : Design

                    Je voulais savoir si tu avais dejà eu une erreur comme la mienne :

                    Message d'erreur :

                    curvyObject Warning :
                    Converting inline element to inline-block
                    tag: A
                    class active curvyIgnore
                    Parent tag : DIV
                    Parent class : aging_none
                    C'est que sur IE en page d'accueil. si j'enlève le slide ou le module menu l'erreur disparait.

                    Merci infiniment pour ton aide.

                    Edith

                    Commentaire

                    Précédent template Suivant

                    Annonce

                    Réduire
                    Aucune annonce pour le moment.

                    Partenaire de l'association

                    Réduire
                    Hébergeur Web PlanetHoster
                    Travaille ...
                    X