(Résolu) Résoudre par CSS un bug de module

Bonsoir,

J'essaie de résoudre par CSS un bug du module que j'utilise dans mon CMS (CMS Made Simple). Voici l'adresse de la page sur laquelle je teste la mise en page : http://cspsejudojujitsu.free.fr/index.php?page=test .

Un petit tour est nécessaire pour comprendre mon soucis. Sur cette page, le module Imagerotator est en mode "new" qui permet le défilement doux des images. Le problème, c'est qu'en mode "new", les images s'affichent sur le texte et non pas à droite : la commande align: "right" ne fonctionne pas.

J'ai donc mis le texte et le module dans des blocs avec les styles suivants :

.bloc1 {
background-color: #ffffff;
height: 225px;
width: 300px;
margin-left: 300px;
}

.bloc2 {
background-color: #ffffff;
height: 225px;
width: 300px;
float: left;
}

bloc1 est pour Imagerotator et bloc2 pour le texte. margin-left: 300px permet de décaler suffisamment les images pour les afficher à droite du texte. Jusque là, tout va bien.
Le problème, c'est que, quand je passe en 800x600, le bloc de texte reste bien évidemment fixe et les images sortent du cadre.
Je voudrais que le bloc de texte se contracte comme en page d'accueil où j'ai installé Imagerotator en mode par défaut mais je ne sais pas si cela est même possible.
Quelqu'un a une idée ?
Modifié par plume13 (06 Apr 2008 - 11:41)

Salut, Ben je me serais bien tenté l'inverse à savoir, le bloc1 en premier dans le code et en float: right; puis:

.bloc1 {
background-color: #fff;
height: 225px;
width: 300px;
float: right;
}

.bloc2 {
margin-right: 300px;
}

Juste une idée...

Salut,
Merci pour ta réponse. J'ai testé, ça ne marche pas : mettre bloc1 en premier me décale le texte en bas de page quel que soit le CSS. J'ai aussi testé la modif du CSS avec l'ordre 2 - 1. Marche pas non plus.
Discussion toujours ouverte !

Salut,

Et pourtant

* {
margin:0;
padding:0;
}

/*
Set initial font styles
*/
body {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-align: left;
   font-size: 75.01%;
   line-height: 1em;
}

div {
   font-size: 1em;
}

img {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #cccccc;
border-right-color: #cccccc;
border-bottom-color: #cccccc;
border-left-color: #cccccc;
background-color: #ffffff;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
margin-bottom : 10px;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}

img.imgsansrien {
border: none;
margin: none;
padding: none;

}

img.imgdte {
border: none;
margin-left: 20px;
margin-right: 0px;
margin-bottom: 10px;
margin-top: 10px;
padding: none;

}

img.imgdtecadre {

padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-top: 5px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #cccccc;
border-right-color: #cccccc;
border-bottom-color: #cccccc;
border-left-color: #cccccc;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 20px;
background-color: #ffffff;
}

img.imggche {
border: none;
padding: none;
margin-right: 20px;
margin-left: 0px;
margin-bottom: 10px;
margin-top: 10px;
}

img.imggchecadre {
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-top: 5px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #cccccc;
border-right-color: #cccccc;
border-bottom-color: #cccccc;
border-left-color: #cccccc;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 0px;
background-color: #ffffff;
}

.bloc1 {
background-color: lime;
height: 225px;
width: 300px;
float: right;
}

.bloc2 {
background-color: yellow;
margin-right: 300px;
}

body {
   background: #191919;
   color: #fff;
   margin: 1em 4em 3em 4em; /* gives some air for the pagewrapper */
}

/* center wrapper, min max width */
div#pagewrapper {
   border: 1px solid #333;
   margin: 0 auto;     /* this centers wrapper */
   max-width: 80em; /* IE wont understand these, so we will use javascript magick */
   min-width: 60em;
   background-color: #fff;
   color: black;
}

div#header {
   height: 150px; /* adjust according your image size */
   background: #171717;           
}

div#header h1 a {
/* you can set your own image here */
   background: #171717 url(uploads/design/cspse.gif) center no-repeat; 
   display: block;
   height: 150px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

div#search {
   float: right;
   width: 23em;     /* enough width for the search input box */
   text-align: right;
   padding: 0.6em 0 0.2em 0;
   margin: 0 1em;
}

div.breadcrumbs {
   padding: 1em 0 1.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: 1.5em auto 2em 0; /* some air above and under menu and content */
}

div#main {
 margin-top: 2%;  
 margin-left: 26%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 4%; /* and some air on the right */
}


div#sidebar {
   float: left;  /* set sidebar on the left side. Change to right to float it right instead. */
   margin-top: 2%;
   width: 22%;    /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX ie doublemargin bug */
   margin-left: 2%;
}

/* if sidebar doesnt include menu but content add class="hascontent" */
div#sidebar.hascontent {
   padding: 0 1%;
   width: 20%;  /* 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: #000000;
   background-color: #fff; /* 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: #000000; /* needed becouse 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: right;
  width: 49%;
  text-align: right;
}

/********************
CONTENT STYLING
*********************/
div#content {

}

/* HEADINGS */
div#content h1 {
   font-size: 2em;  /* font size for h1 */
   line-height: 1em;
   margin: 0;
}
div#content h2 {
color: #FF6600; 
   font-size: 1.5em; 
   text-align: left; 
/* some air around the text */
   padding-left: 0.5em;
   padding-bottom: 1px;
/* set borders around header */
   border-bottom: 1px solid #C0C0C0; 
   line-height: 1.5em;
/* and some air under the border */
   margin: 0 0 0.5em 0;
}
div#content h3 {
color: #FF6600; 
   font-size: 1.3em;
   line-height: 1.3em;
   margin: 0 0 0.5em 0;
}
div#content h4 {
   color: #333; 
   font-size: 1.3em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
div#content h5 {
font-style: italic;
font-weight: bold;   
font-size: 1.1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
h6 {
   font-size: 1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
/* END HEADINGS */

/* TEXT */
p {
   font-size: 1em;
   margin: 0 0 1.5em 0;  /* some air around p elements */
   line-height:1.4em;
   padding: 0;
}
blockquote {
   border-left: 10px solid #ddd;
   margin-left: 10px;
}
pre {
   font-family: monospace;
   font-size: 1.0em;
}
strong, b {
/* explicit setting for these */
   font-weight: bold;
}
em, i {
/* explicit setting for these */
   font-style:italic;
}

/* Wrapping text in <code> tags. Makes CSS not validate */

pre {
   border: 1px solid #000;  /* black border for pre blocks */
   background-color: #ddd;
   margin: 0 1em 1em 1em;
   padding: 0.5em;
   line-height: 1.5em;
   font-size: 90%;   /* smaller font size, as these are usually not so important data */
}

<div id="pagewrapper">
        <ul class="accessibility">
      <li><a href="/index.php?page=test#menu_vert" title="Skip to navigation" accesskey="n">Skip to navigation</a></li>
      <li><a href="/index.php?page=test#main" title="Skip to content" accesskey="s">Skip to content</a></li>
    </ul>  
    <hr class="accessibility" />
      <div id="header">
           <h1><a href="http://cspsejudojujitsu.free.fr/" title="Accueil">CSPSE Judo Jujitsu</a></h1>
   <hr class="accessibility" />
   </div>
            <div id="menu_vert">
         <h2 class="accessibility">Navigation</h2>
         <div id="menuwrapper">
      <hr class="accessibility" />
      </div>
      <div id="search">
   </div>
      <div class="breadcrumbs">
        Vous êtes ici : <a href="http://cspsejudojujitsu.free.fr/index.php?page=contact">Contact</a> » <span class="lastitem">Test</span>
   <hr class="accessibility" />
   </div>
      <div id="content">
          <div id="sidebar" class="hascontent">
      </div>
            <div id="main">
         <div style="float: right;">
</div>
         <h2>Test</h2>
		 
		 <div class="bloc1">
         </div>		 
		 
         <div class="bloc2">
		 <p>Cheminots sportifs de Paris Sud-Est <br />Section Judo Jujitsu</p>
		 <p>Dojo Porte de Charenton <br />320 bis rue de Charenton<br />75012 Paris</p>
		 <p>Contact : 01 46 28 10 41 et 06 70 40 29 58</p>
		 <p> <br /> Besoin d'explications pour venir au dojo, cliquez sur</p>
		 <p align="center"> 
		 <button style="font-size: 12px" onclick="javascript:plan_dojo()">Plan d'accès</button>
		 </p>
		 </div> 
 <br />
         	 <div class="hr"></div>
	 <div class="right49">
	 </div>
         <div class="left49">

         </div>
         	 
      <hr class="accessibility" />
      </div>
   </div>
      <div id="footer">
   </div>   
</div>

Ouah ça marche ! Merci beaucoup Ghost ! Maintenant il ne me reste plus qu'à résoudre les quelques erreurs qui invalident le html.