Forum CMS Made Simple FR
Inverser bloc News et bloc main - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Général (https://forum.cmsmadesimple.fr/forum-10.html)
+--- Sujet : Inverser bloc News et bloc main (/thread-178.html)


Inverser bloc News et bloc main - pasc06 - 19/02/2010

Bonjour

Comment inverser le bloc News et le bloc Main ? Passer le bloc News à droite et le bloc Main à gauche !

Je débute en css... Ca fait des heures que j'essaie, sans succès... Sad

[Image: essai3.jpg]

Voici mon gabarit :
Code :
{* Start Content *}
      <div id="content">

{* Start Sidebar *}
        <div id="sidebar">
          <div id="sidebarb">
          {content block='Sidebar'}

{* Start News, stylesheet  "Module: News" *}
            <div id="news">
              <h2>News</h2>
              {news number='3' detailpage='news'}
            </div>
{* End News *}

          </div>
        </div>
{* End Sidebar *}

{* Start Content Area, the back1, back2, back3, hold the 3 outside images, main holds the 4th one, to make the box complete, if the template were fixed width not fluid we could use just 2 divs and 2 images, 1 top 1 bottom *}
        <div class="back1">
          <div class="back2">
            <div class="back3">
                <div id="main">
                <div style="float: right;">{print showbutton=true script=true}</div>
                <h2>{title}</h2>
                {content}
                <br />{* to insure space below content *}
{* Start relational links *}
{* note this is the right side, when you float: divs you need to have float: right; divs first *}
           <div class="right49">
              <p>{anchor anchor='main' text='^ Top'}</p>
            </div>
            <div class="left49">
              <p> {cms_selflink dir="previous" label="Previous page: "}
{* The label parameter doesn't need to be there if you're using English, but is here to show how it's used if you don't want the English text "Previous page" *}
              <br />
              {cms_selflink dir="next"}
              </p>
            </div>
{* End relational links *}
                <hr class="accessibility" />
                <div class="clear"></div>
              </div>
            </div>
          </div>
        </div>
{* End Content Area *}

      </div>
{* End Content *}
Et voici la partie css :
Code :
div#content {
/* some air above and under menu and content */
    margin: 1.5em auto 2em 0;
    padding: 0px;
}
/* this gets all the outside calls that were used on the div#main before  */
div.back1 {
/* this will give room for sidebar to be on the left side, make sure this number is bigger than sidebar width */
    margin-left: 29%;
/* and some air on the right */
    margin-right: 2%;
/* you can set your own image here */
    background: url(uploads/ngrey/mainrt1.gif) no-repeat right top;
}
/* this is an IE6 hack, you may see these through out the CSS */
* html div.back1 {
/* unlike other browser IE6 needs float:right and a width */
    float: right;
    width: 69%;
/* and we take this out or it will stop at the bottom  */
    margin-left: 0%;
/* and some air on the right */
    margin-right: 10px;
/* you can set your own image here */
    background: url(uploads/ngrey/mainrt1.gif) no-repeat right top;
}
div.back2 {
/* you can set your own image here */
    background: url(uploads/ngrey/mainleft1.gif) no-repeat left top;
}
div.back3 {
/* you can set your own image here */
    background: url(uploads/ngrey/wbtmleft.gif) no-repeat left bottom;
}
div#main {
/* this is the last inside div so we set the space inside it to keep all content away from the edges of images/box */
    padding: 10px 15px;
/* you can set your own image here */
    background: url(uploads/ngrey/rtup.gif) no-repeat right bottom;
}
div#sidebar {
/* set sidebar left. Change to right, float: right; instead, but you will need to change the margins. */
    float: left;
/* sidebar width, if you change this change div.back and/or div.back1 margins */
    width: 26%;
/* FIX IE double margin bug */
    display: inline;
/* the 20px is on the bottom, insures space above footer if longer than content */
    margin: 0px 0px 20px;
    padding: 0px;
/* you can set your own image here */
    background: url(uploads/ngrey/mainrt.gif) no-repeat right top;
}
div#sidebarb {
    padding: 0px 15px 10px 20px;
/* this one is for sidebar with content and no menu */
    background: url(uploads/ngrey/mainrtup.gif) no-repeat right bottom;
}
div#sidebarb div#news {
/* less margin surrounding the news, sidebarb has enough */
    margin: 10px 0 1em 0em;
}
div#sidebara {
    padding: 10px 15px 15px 0px;
/* this one is for sidebar with menu and no content */
    background: url(uploads/ngrey/mainrtup.gif) no-repeat right bottom;
}
Merci de votre aide Smile

Inverser bloc News et bloc main - bess - 22/02/2010

en haut et en rouge : doc

lis TOUT et ensuite réponds toi même à ta question. Inutile de me dire que tu l'as lu car la réponse est dedans donc prend le temps de relire Wink

et la prochaine fois pense aussi à remplir le formulaire, je me suis pas cassé le citron à le mettre en place pour que les gens s'en passe.

Inverser bloc News et bloc main - jce76350 - 27/02/2010

Résolu ?

Inverser bloc News et bloc main - pasc06 - 27/02/2010

Merci pour ton aide

Bin non... J'ai essayé l'autre jour, mais le résultat n'était pas très convaincant. Pas eu le temps de rééssayer, ni de jeter un oeil sur la doc.

Dommage que ce ne soit pas gérable dans l'administration, comme dans Prestashop par exemple (CMS de boutique en ligne), où l'on peut déplacer les blocs à sa guise.

Inverser bloc News et bloc main - pascalm - 01/03/2010

inverse juste float:right et float:left dans le css
sidebar -> float:right
back1 -> float:left

apres change les margin-right et/ou margin-left

ca devrait te donner ce que tu souhaites
si je me suis pas trompé

Inverser bloc News et bloc main - pasc06 - 01/03/2010

Merci pour ton aide Smile

Je dois mettre en pratique cette semaine je te tiendrai au courant...! Wink