[pasc06]

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...



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