Disposition des colonnes

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [Problème] Disposition des colonnes

    Bonsoir,

    Je suis occuper à créer mon propre template, après avoir suivi le super tuto de joomack, mais je rencontre quelques difficultés.

    Mon template est composé d'un header, top menu, un bloc contenu, un module droit et le footer.
    Mon problème se pose au niveau du bloc contenu et du module de droite, je n'arrive pas à les disposer correctement l'un à côté de l'autre. Quoique je fasse le module droit se place en bas à droite du bloc contenu. J'aimerai qu'il soit au même niveau que ce dernier.

    voici mon code html:
    <body>

    <div id="wrapper">
    <div id="conteneur">

    <div id="header">

    <div id="logo"><a href="index.php"></a></div>
    </div>
    <div class="clr"></div>

    <div id="topmenu" >
    <jdoc:include type="modules" name="position-1" style="xhtml" />
    </div>
    <div class="clr"></div>


    <div id="content">
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    </div>
    <div class="clr"></div>

    <div id="moduledroit" >
    <jdoc:include type="modules" name="position-6" style="xhtml" />
    </div>
    <div class="clr"></div>
    </div>

    <div id="footer">
    <jdoc:include type="modules" name="position-14" style="xhtml" />
    <p>Site réalisé par kreall - <a href="http://www.kreall.be">http://www.kreall.be</a></p>
    </div>

    </div>
    <jdoc:include type="modules" name="debug" />
    </body>

    Et voici une petite partie de mon code css:

    #content{
    width: 600px;
    height:400px;
    float: left;
    backgroundink;

    }

    #milieu{
    /*text-align:top;*/

    }
    /******************C O L O N N E DROITE*********/
    #moduledroit{/*colonne du contenue drt*/
    width: 100px;

    float: right;
    background: pink;
    }
    ul.menu li {
    font-family:calibri;
    font-size:14px;
    text-align:right;
    font-weight: bold;
    line-height: 32px;
    }

    ul.menu li ul li{
    /*margin-left: 10px;*/
    }

    ul.menu li a {
    color: #211F1F;
    text-decoration: none;
    line-height: 25px;
    }

    ul.menu li a:hover {
    color: #F361A8;
    }

    J’espère que quelqu'un pourra m'aider.

    Merci d'avance!

  • #2
    Re : Disposition des colonnes

    Bonjour,
    il ne faut pas mélanger les float:right et les float:left.
    Comme tu poses #content avant #moduledroit, passe tout le monde en float:left.
    Restera à vérifier que #wrapper et #conteneur sont assez larges.
    Schtroumpfe toi le Schtroumpf t'aidera.
    Je ne schtroumpfe pas aux demandes de schtroumpf par MP.

    Commentaire


    • #3
      Re : Disposition des colonnes

      Bonjour,

      Merci pour ta réponse, je ne maîtrise pas encore les css mais j'y arriverai.

      J'ai tous mis en float left et mon wrapper est suffisamment large mais ça ne fonctionne pas mes deux bloc sont l'un en dessous de l'autre.

      Aurai-tu une autre idée à tester?

      Merci d'avance

      Commentaire


      • #4
        Re : Disposition des colonnes

        Re,
        essaye sans <div class="clr"></div> entre les deux.
        Schtroumpfe toi le Schtroumpf t'aidera.
        Je ne schtroumpfe pas aux demandes de schtroumpf par MP.

        Commentaire


        • #5
          Re : Disposition des colonnes

          Ok merci beaucoup

          Commentaire

          Annonce

          Réduire
          Aucune annonce pour le moment.

          Partenaire de l'association

          Réduire

          Hébergeur Web PlanetHoster
          Travaille ...
          X