CMS Made Simple Forums

Bonjour
je rencontre un problème de positionnement de contenu qui reste un mystère pour moi malgré mes recherches.

Je m'explique...
J'ai une page qui comporte:
un header
une colonne située à gauche qui fait toute la hauteur du pagewrapper
un menu sous le header
une colonne située à droite
un footer sous la pagewrapper

le header, le menu, le footer et la colonne gauche sont correctement positionnées
mais la colonne de droite se retrouve sous le footer ?!?

ci-dessous le gabarit  et la feuille de style corresppondants

Le gabarit




  {current_date format="%A %d-%B-%Y"}
 
 

  {* Start Breadcrumbs *}
 
        {breadcrumbs starttext='Vous êtes ici' root='Home' delimiter='»'}
 
 
  {* End Breadcrumbs *}




    {* start accessibility skip links *}
   
      {anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}
      {anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}
   
    {* end accessibility skip links *}


   
    {* Horizontal ruler that is hidden for visual browsers by CSS *}

  {* Start Header *}
 
    {global_content name='header'}
 
  {* End Header *}

      {* Start Navigation *}
     
        Navigation
        {menu template='cssmenu.tpl' collapse="1" }
     
     
      {* End Navigation *}



  {* Start Content (Navigation and Content columns) *}
 
      {* Start Content Area *}

     
        {global_content name='gauche'}

     



     
        {print showbutton=true script=true}

        {content}



        {* Start relational links *}


{anchor anchor='main' text='^ Haut'}


        {* 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" *}
{* End relational links *}

     
     
  {* End Content Area *}


 
  {* End Content *}

{* end pagewrapper *}


  {* Start Footer. Edit the footer in the Global Content Block called "footer" *}
 
      {global_content name='footer'}
   
  {* End Footer  *}






La feuille de style

body {
  background: #785c1b;
  color: #fff;
  margin-left:10px; /* gives some air for the pagewrapper haut, droite, bas, gauche*/
  margin-top: 4px;
  margin-bottom: 0;
}

div#header {
  height: 110px; /* adjust according your image size */
  background: #ffd421 url(uploads/images/fond/fond2.jpg); 
  border: 1px solid black;
  float: left;
  max-width:735px;
  margin-left: 240;       
}





/* center wrapper, min max width */
div#pagewrapper {

  border: 10px solid;
  border-color: #ffffff;
  margin: auto;    /* this centers wrapper */
  max-width: 970px; /* IE wont understand these, so we will use javascript magick */
  max-height: 590px;
  min-width: 970px;
  min-height: 590px;
  background: #ffd421 url(uploads/images/fond/fond2.jpg) no-repeat 0 0px;
  color: #ffffff;        /*couleur texte*/

}

div#current_date {
  float: right;
  text-align: left;
  font-size: 90%;
  padding: 0 0 0.2em 0;
}


div.breadcrumbs {
  padding: 0 0 0.2em 0; /* CSS short hand rule first value is top then right, bottom and left */
  font-size: 90%;            /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
  margin: 0 1em;              /* css shorthand rule will be opened to be "0 1em 0 1em" */
  border-bottom: 1px dotted #000;
}

div.breadcrumbs span.lastitem {
  font-weight:bold;
}


ndiv#content {

  /*margin: 0.5em auto 2em 0; /* some air above and under menu and content */


}


div#main {
  margin:130px 0 0 240px ;
  border: 0;
  width : 440px;
  height: 375px;
  overflow: auto;
  background: transparent;

}
div#colgauche {

  margin: 0;
  border: 0;
  width : 210px;
  height: 590px;
  background: transparent;
}


/* if sidebar doesnt include menu but content add class="hascontent" */
div#sidebar.hascontent {
  padding: 0 1%;
  width: 0;  /* make width smaller if there's padding, or it will get too wide for the floated divs in IE */
}

div#footer {
  clear:both;      /* keep footer below content and menu */
  color: #fff;
  background-color: #transparent; /* same bg color as in header */
}

div#footer p {
  font-size: 0.8em;
  padding: 1.5em;      /* some air for footer */
  text-align: center; /* centered text */
  margin:0;
}

div#footer p a {
  color: #fff; /* needed because footer link would be same color as background otherwise */
}

/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
  height: 1px;
  margin: 1em;
  border-bottom: 1px dotted black;
}

/* relational links under content */
div.left49 {
  float: left;
  width: 49%;  /* 50% for both left and right might lead to rounding error on some browser */
}

div.right49 {
  float: bottom;
  width: 51%;
  text-align: right;
}


Merci d'avance de votre aide car je m'arrache les cheveux et si ça continu, il ne va plus m'en rester...

Finalement je suis reparti à zéro avec le gabarit menu top + 2 colonnes et tout va bien...

C'est vrai qu'il est déjà pas mal, le contenu de démonstration. En plus, il prend en considération des choses telles l'accessibilité, les racourcis clavier, les dfférences entre navigateurs, etc.

Au passage, je signale pour ceux qui ne connaissent pas encore : http://themes.cmsmadesimple.org/
Bon design à tous

Pierre M.