[Résolu] Mes divs, les marges, qui ecrasera l'autre la prochaine fois

Bonjour,

Je vient de m'inscrire sur le forum car la lecture de plusieurs posts ainsi que la FAQ n'a pas résolu mon probleme.
Je prepare en effet une interface utilisateur que je considère plus simple étant "modulaire" et utilisant la balise <div> et non <table>, comme le recommende le W3C (chaque type d'information est présenté dans un module différent - enfin ne nous entendons pas sur ce choix).
Mon probleme est que j'exploite encore des éléments assés ancien (qui utilisent donc <table>) qui encadrent les parties nouvelles et malgré la définition d'une marge interieure, les <div> dont le float est right n'en tiennent pas compte.
Aussi ai-je fait cette capture afin d'illustrer la chose :



La zone encerclée de rouge devrait etre la meme qu'a gauche : avec une marge de 10 ou 6px.

Ensuite, voici un extrait du code HTML (code HTML complet de la capture) :

<table width="98%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="15"><img src="http://www.infos-reseaux.com/themes/defaultTheme/img/ContentBox_topLeftCorner.png" alt=""/></td>
    <td width="100%" class="box_header">
      <table width="100%" height="100%" align="left">
        <tr>
          <td rowspan="2" width="50"><img src="http://www.infos-reseaux.com/themes/generic/img/icons/big/icon_dashBoard.png" alt=""/></td>
	  <td class="box_title"></td>
	</tr>
	<tr>
	  <td class="box_subtitle"></td>
	</tr>
      </table>
    </td>
    <td width="15"><img src="http://www.infos-reseaux.com/themes/defaultTheme/img/ContentBox_topRightCorner.png" alt=""/></td>
  </tr>
  <tr>
    <td width="100%" colspan="3" class="box_contentCell" id="contentCell_2"><br />            <!-- Dessin d'un groupe de module - STC Interface Modulaire // STCmoduledUI.Class.php -->
       <div style="width:100%;" id="UIADSL_DSLAM_0_groupContainer" class="STCmodules_group">
          <div id="_subsections" class="subsections">
            <div class="subsection_div" style="width:49%; float:left;" id="UIADSL_DSLAM_0_subsection_1">
<ul class="STCmodules_modulesList">
				  
									<li style="display: block;">
          			  <div id="actualStatus_DSLAM_0_module">
      					<div class="STCmodules_module"><!--Div conteneur (limite visuelle d'un module) -->
                          <div class="label"><span id="actualStatus_DSLAM_0_module"></span></div>
                    
                          <div id="actualStatus_DSLAM_0_content" class="content"> <!-- Div de contenu -->
                            <div class="content_wrapper">
                            <span style="color:#DD0000;">Module Vide</span>                            </div>

                            <div id="actualStatus_DSLAM_0_footer" class="footer">
                               Pied de module
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>
          							  </ul>
				</div>

        						<div class="subsection_div" style="width:49%; float:right;" id="UIADSL_DSLAM_0_subsection_2">
            	  <ul class="STCmodules_modulesList">
				  
									<li style="display: block;">
          			  <div id="incidents_DSLAM_0_module">
      					<div class="STCmodules_module"><!--Div conteneur (limite visuelle d'un module) -->
                          <div class="label"><span id="incidents_DSLAM_0_module"></span></div>
                    
                          <div id="incidents_DSLAM_0_content" class="content"> <!-- Div de contenu -->
                            <div class="content_wrapper">

                            <span style="color:#DD0000;">Module Vide</span>                            </div>
                            <div id="incidents_DSLAM_0_footer" class="footer">
                               Pied de module
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>

          							  </ul>
				</div>
        						<div class="subsection_div" style="width:100%; float:right;" id="UIADSL_DSLAM_0_subsection_3">
            	  <ul class="STCmodules_modulesList">
				  
									<li style="display: block;">
          			  <div id="chmgts_DSLAM_0_module">
      					<div class="STCmodules_module"><!--Div conteneur (limite visuelle d'un module) -->
                          <div class="label"><span id="chmgts_DSLAM_0_module"></span></div>

                    
                          <div id="chmgts_DSLAM_0_content" class="content"> <!-- Div de contenu -->
                            <div class="content_wrapper">
                            <span style="color:#DD0000;">Module Vide</span>                            </div>
                            <div id="chmgts_DSLAM_0_footer" class="footer">
                               Pied de module
                            </div>
                          </div>
                        </div>

                      </div>
                    </li>
          							  </ul>
				</div>
        		          	  </div>
        	</div>
            <br/>				</td>
			  </tr>

			  <tr onclick="toogleContentCell ('contentCell_2');">
				<td align="center" colspan="3"><img src="http://www.infos-reseaux.com/themes/defaultTheme/img/ContentBox_Footer.png" alt=""/></td>
			  </tr>
			</table>

Le code CSS qui correpsond aux modules :

/* Partie generique : generic.css */
/* Styles groupes 
------------------------------------------------*/
.STCmodules_group {
    margin:0;
	height:100%;
	padding:4px;
}
.STCmodules_group .title{
	text-align:center;
    margin:0 0 2em;
	position:relative;
	bottom:20px;
	width:98%;
}
.STCmodules_group .subsections{
    margin:0;
    width:100%;
}
.STCmodules_group .subsections .subsection_div{
    float:left;
}
.STCmodules_modulesList{
    margin: 0;
  	padding: 0;
  	list-style:none;
}



/* Styles modules
------------------------------------------------*/
.STCmodules_module{
  position: relative;
  margin: 0 0 2em 0;
  width:100%;
}
.STCmodules_module .content{
   	width:100%;
}
.STCmodules_module .label{
	margin: 0;
   	width:100%;
	text-align:left;
}
.STCmodules_module .label span{
	display: block;
  	width: 90%;
  	margin: 0;
  	padding: .3em 0 .2em 17px;
  	background: url(../img/) no-repeat center left;
    text-align:left;
    font-weight:bolder;
}
.STCmodules_module .footer{
    width:100%;
}
.STCmodules_module .content .content_wrapper {
	padding:10px 0;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
}

/* Partie thematique : modules.css.php*/
/* Styles groupes 
------------------------------------------------*/
.STCmodules_group .title{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:13px;
	color:#FFFFFF;
	background-image:url('../img/ContentBox_topHeader.png');
	background-repeat:repeat-x;
}
.STCmodules_group .subsections{
   /* background-color:#EFEFEF;*/
}


/* Styles modules
------------------------------------------------*/
.STCmodules_module{
  font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
}
.STCmodules_module .content{
    color:#000000;
   	background:#DDD;
    border-left:1px solid #CCCCCC;
    border-right:1px solid #CCCCCC;
    border-bottom:1px solid #CCCCCC;
}
.STCmodules_module .label{
    border: 1px solid #666;
    font-size:13px;
    color:#FFFFFF;
   	background: #666;
}
.STCmodules_module .label span{
  	background: url(../img/) no-repeat center left;
    text-align:left;
}
.STCmodules_module .footer{
    color:#000000;
}
.STCmodules_module .content .content_wrapper {
    background:#fff;
	border-bottom:1px solid #CCCCCC;
}

Voila, j'espere que quelqu'un aura la solution.

Merci à vous, vous faites un super travail.
Modifié par fanfouer (03 Jul 2007 - 22:03)

Bonjour et bienvenue sur Alsacréations ,

Peut-être serait-il utile de nous présenter une page en ligne afin d'avoir une vision d'ensemble de la page et des contraintes qui sont les tienne .

édit: du coup ton post n'aurait-il pas plus sa place dans le salon HTML, XHTML, sémantique web
Modifié par Igor (02 Jul 2007 - 00:45)

Bonsoir, et merci de ta reponse rapide

Malheureusement, je ne peut pour l'instant présenter une page en ligne sachant que la capture qui est présentée est issue d'une partie privée... c'est pourquoi je mettais la capture ainsi que le code.
Pour ce qui est des contraintes : partons du principe qu'il n'y a rien autour de cette boite qui est affichée (en clair, zéro contraintes, sauf le depassent de quoi que ce soit des limites de la <table> et le centrage de mon ensemble de modules).

Voila ce que je peut en dire.

Edit: Peut-être... je pensais plus que c'était un problème de CSS, mais si tu trouves qu'il a plus sa place dans ce salon, déplace-le.
Modifié par fanfouer (02 Jul 2007 - 00:48)

fanfouer a écrit :
Je prepare en effet une interface utilisateur que je considère plus simple étant "modulaire" et utilisant la balise <div> et non <table>, comme le recommende le W3C (chaque type d'information est présenté dans un module différent - enfin ne nous entendons pas sur ce choix).

C'est là que j'ai des doutes sur la structure html utilisée . Mais comme tu le dis: enfin ne nous entendons pas sur ce choix me pose des questions. Une page globale nous aiderait à isoler le souci plus rapidement, en tout cas à avoir des informations sur la pertinence de ton utilisation d'éléments plus anciens et ce que tu estime comme tel.

Il faudrait en particulier développer les contraintes qui te font utiliser les tables (qui sont acceptables dans un contexte de production) comme c'est le cas dans ta capture. Une petite explication sur le contexte et interface utilisateur serait bienvenue

Igor a écrit :

Il faudrait en particulier développer les contraintes qui te font utiliser les tables (qui sont acceptables dans un contexte de production) comme c'est le cas dans ta capture.

Et bien j'utilise les tables car au moment ou j'ai conçu le gros ensemble surmonté de la barre noire dans la capture (ce que je désigne ici comme element ancien), je n'utilisais pas encore courrament les <div>. Je n'ai maintenent pas envie de tout remettre en <div> sachant que la mise au point de mes "modules" (les petites case avec la barre grise au dessus) à été assée difficile au niveau de l'intégration et du rendu final (plein de probleme de positions, etc...). Je n'avais tout simplement pas envie donc de retrouver tout ces incidents de suite . Mais si il faut mettre des <div> partout pour uniformiser, je peut tenter oui.

a écrit :

Une petite explication sur le contexte et interface utilisateur serait bienvenue

Le contexte? Tu peut le retrouver sur une page comme celle-ci :
http://www.infos-reseaux.com/tools/FT/ADSLStats/index.php?page=statsFAI&FAI=0
Il est simplement question de mettre en place des choses regroupées comme c'est deja un peu le cas maintenent : 3 boites separent le contenu. Je voulais ensuite pousser la chose un peu plus loin en mettant des "modules" à l'interieur de ces boites.
Je pense que cela remplace aussi l'explication sur l'UI, qui devrait rester globalement le meme.

Bonjour,

J'ai passé la nuit (et une partie de la journée) a reflechir et j'ai pensé que mettre une bordure autour des 3 modules serait mieu pour bien voir les groupes (car il peut y avoir plusieurs groupes dans chaque boite). Le probleme c'est que vu que tout à flottant, sous IE la hauteur fait la moitiée de ce qu'elle devrait faire pour tout encrader et sous FF, n'en parlons meme pas, cela doit faire en tout 2px.
J'ai lu dans un article du site que les flottants n'afectaient pas les dimentions des conteneurs... et pour cause sur ma page .
Je pense donc supprimer tous mes elements flottant en essayant de faire autre chose.
Par exemple, mettre la div principale avec align="left" puis mettre des margin en conséquence pour que chaque colonne de module soit à la bonne place.
Pour l'instant c'est sans succès (ca me met meme un méchent bazar).

D'autres idées sont les bienvenues, la mise en place de la capture reste exactement la meme.

Bon et bien j'ai reussi a regler ca en conservant les flottant (qui après avoir essayer plusieurs choses, sont bien pratiques).
Il s'agissait des différents paddings que j'avais defini qui s'appliquaient sur la gauche, poussant ansi mon contenu vers la droite (puisque celui-ci ne s'adaptant pas au conteneur, restait à 100% et sortait ainsi des limites que j'avais établi).

Merci à Igor, probleme résolu.