18041 sujets

Questions générales et questions de débutants

[Résolu] Question de dimension de bloc

Bonjour,

Je vous expose mon problème :
j'ai un cadre avec des onglets, au clic sur un lien c'est un bloc ou un autre bloc qui apparaît ou disparaît. Dans le graphisme, ce bloc doit être entouré d'une bordure grise. Or quand je clique, on voit bien que la taille de mes blocs qui s'affichent n'est jamais la même. Je cherche donc une solution CSS ou JS pour résoudre mon problème.
Le code ci -dessous :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>  
  <head>  
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">  
    <meta name="generator" content="PSPad editor,  www.pspad.com">   
    <title>test</title>  
    <style></style>
    <script>
            function showHide(show, hide1)
           {
            document.getElementById(show).style.display = "block";
            document.getElementById(hide1).style.display = "none";
           } 
    </script>
  </head>  
  <body>      
    <div class="dossier_g">
      <div class="l_f_dg">&nbsp;
      </div>
      <table width="auto" cellspacing="0" cellpadding="0" border="0" class="menu_dossier">
        <tbody>
          <tr>
            <td class="first" style="padding:5px;">
              <a onclick="showHide('bloc0', 'bloc1');return false;" id="tabStat_0" href="#" class="actif">
                Tableau
                </a>
              </td>
            <td class="last"style="padding:5px;">
              <a onclick="showHide('bloc1', 'bloc0');return false;" id="tabStat_1" class="" href="#">
               Graphique
              </a>
            </td>
          </tr>
        </tbody>
      </table>
      <table cellspacing="0" cellpadding="0" border="0" class="content_dossier" style="border:1px solid red;">
        <tbody>
          <tr>
            <td valign="top" class="t_dossier">
              <div style="display: block;" class="body_dossier" id="bloc0">			
                <p style="text-align: center;">Mon graph - resultat du graphique - Génération le 14/10/2010 09:25:12</p>			
                <input type="hidden" value="" maxlength="12" name="rptStat" id="rptStat">
                <div class="barre_infos_gene">	
                  <div class="i_n_r">58 Eléments</div>	
                </div>      
                <table width="1024" cellspacing="0" cellpadding="0" align="left" class="table_liste">      
                  <thead>      
                    <th style="width: 10px;" class="colorcode"></th>
                    <th>Colonne1treslongue_colonne</th>
                    <th>Colonne 2</th>
                    <th>Colonne 3</th>
                    <th>Colonne 4</th>
                    <th>Colonne 5</th>
                    <th>Colonne 6</th>
                    <th>Colonne 7</th>
                    <th>Colonne 8</th>
                  </thead>      
                  <tbody>      
                    <tr valign="top" class="lignesep">      
                      <td height="2" class="blanc" colspan="9">&nbsp;</td>      
                    </tr>        
                    <tr>        
                      <td style="background-color: rgb(255, 255, 255);" class="colorcode"></td>
                      <td class="b_g">Test du nom de la personne</td>        
                      <td class="b_g">Test, test ,test</td>        
                      <td class="b_g">29/10/2008</td>        
                      <td class="b_g">31/10/2008</td>        
                      <td class="b_g">2.00</td>        
                      <td class="b_g">21/10/2009</td>        
                      <td class="b_g">355.00</td>        
                      <td class="b_g">357.00</td>      
                    </tr>        
                    <tr valign="top" class="lignesep">      
                      <td height="2" class="blanc" colspan="9">&nbsp;</td>      
                    </tr>        
                    <tr class="#css#">
                      <td style="background-color: rgb(255, 255, 255);" class="colorcode"></td>
                      <td class="b_g">Dupont Georges</td>      
                      <td class="b_g">Test,test,test</td>      
                      <td class="b_g">30/10/2008</td>      
                      <td class="b_g">31/10/2008</td>      
                      <td class="b_g">1.00</td>      
                      <td class="b_g">31/10/2008</td>      
                      <td class="b_g">0.00</td>      
                      <td class="b_g">1.00</td>      
                    </tr>               
                  </tbody>          
                </table>            				
              </div>      
              <div style="display: none;" class="body_dossier" id="bloc1">      			
                <p>Mon texte - mon deuxième texte - Génération le 14/10/2010 09:25:12</p>      				    
                <p>Le graphique demandé renvoie 58 lignes. La limite d'affichage des lignes est de : 40 </p>      		
              </div>      
              </td>      
          </tr>      
        </tbody>      
      </table>  
    </div>  
  </body>
</html>

Modifié par Ocane (19 Oct 2010 - 21:21)
De ce que j'ai compris de ta question; par défaut, les <div> prennent une largeur et hauteur automatique. Tu n'as qu'à forcer une largeur une hauteur comme ceci.


.body_dossier { width:1200px; height:300px; }


J'espère que ça répond à ta question.
Bonjour,

Malheureusement le contenu de mes blocs n'est jamais fixe, donc ça peut très bien être très grand comme çà peut faire 2 lignes.

De ce fait j'ai du mettre un min width et un min height en attendant pour éviter de "choquer" lors des changements mais cela fait étrange.

Merci de votre aide en tout cas

Jennifer
Salut,

Je sais pas si tes connaissances sont élevés en JS mais voici un petit exemple de ce que je ferais à ta place.


<!DOCTYPE html> 
<html>   
  <head>   
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <title>test</title>   
	<script>
		$(document).ready(function() {
			var hauteur = 0;
			var largeur = 0;
			$('div.bloc').each(function(index) {
				console.log($(this).height());
				
				if($(this).height()>hauteur){
					hauteur = $(this).height();
				}
				if($(this).width()>hauteur){
					largeur = $(this).width();
				}
				
			});
			$('#container').css({width:largeur, height:hauteur });

		});

	</script>
    <style>
		#container { background:red;  }
		.bloc1 { }
		.bloc2 { }
	</style> 
  </head>   
  <body> 
	<div id="container">
		<div class="bloc">
			asdadadasd 
		</div>
		<div class="bloc">
			<p>asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd </p>
			<p>asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd </p>
			<p>asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd </p>
			<p>asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd asdadadasd </p>

		</div>
	</div>
  </body> 
</html>


Bon, c'est pas parfait mais c'est surtout pour la logique. Tu prends le plus grand et le plus large possible parmi tous les blocs et tu assignes ces dimensions là au conteneur parent. Tu assignes tes CSS au conteneur parent et comme ça peu importe le contenu qui change dedans, ta bordure grise par exemple, elle, ne bougerait pas et s'ajusterait aux différentes dimensions de ton bloc.

Je sais pas si tu comprends ce que je veux dire et si tu peux poursuivre avec l'exemple Smiley smile

Je rafinerai au besoin.
J'ai bien compris, je te remercie.

J'avoue que je n'avais pas pensé à quelque chose d'aussi simple. J'ai les connaissance javascript (par contre j'utilise mootools donc j'adapterais ton code) mais je n'ai pas la logique.

Bonne soirée et merci
Sujet clos
Aller à