[résolu]Comment dimensionner des boites !

Bonjour à toutes et à tous,

j'ai un gros soucis et ne connaissant pas assez la DOM, je n'arrive pas à faire ce calcul en javascript :

J'ai un DIV conteneur faisant exactement trois boites de larges et trois boites de hauts. Les boites doivent se positionner normalement dans le flux (comme si nous faisions un inline-bloc mais cela ne fonctionne pas sous MSIE) afin de remplir la totalité du conteneur. J'ai choisi ce mode de remplissage par commodité, mais rien ne nous empêche de faire un autre remplissage, comme par exemple, une disposition tout en ligne ou tout en colonne. Ce mode de remplissage est conditionnée par la forme du conteneur.

Chaque boite est déclarée d'une manière spécifique en CSS (avec/sans des marges, des padding, des borders, ... enfin tout ce qui peut occuper de la place dans la boite) mais sans WIDTH & HEIGHT. C'est ce que je dois justement gérer en javascript.

Je dois calculer exactement la dimension de la boite (WIDTH & HEIGHT) de façon à ce qu'elle ne soit pas plus grande que les dimensions de la fenêtre intérieur de l'écran mais en tenant compte aussi de la déclaration des marges et des paddings et des borders afin de ne pas avoir un débordement de la boite hors de l'écran.

Et de plus, il faut que ces boites puissent se ranger dans le conteneur de façon à les disposer trois en ligne et trois en colonne.

Et bien entendu, il faut que cela fonctionne sur les navigateurs comme MSIE 8.0, Mozilla Firefox, Google Chrome, Apple Safari, Opera.

J'ai compris que le positionnement se fait par les variables : window.offsetTop & window.offsetLeft.

Mais je n'arrive pas à dimensionner correctement les boites. J'ai trouvé window.screen.availWidth & window.screen.availHeight mais mes boites débordent de l'écran, surtout lorsque je mets un padding ou une marge.

Quelqu'un a-t-il déjà procédé à ce genre d'opération ?

Merci !
Modifié par Artemus24 (26 Jun 2011 - 20:53)

Et l'eau,

Certes, le positionnement en inline-block te permet de garder le flux, mais tu vas perdre des pixels de chaque coté de tes boites enfants. Alors il y a de la bidouille dans l'aire pour supprimer ces pixels en trop. Mais c'est de la bidouille... Donc les boites flotantes est la solution efficace. Pour récupérer ton flux, tu utiliseras un overflow sur le conteneur.

    
   <p>un paragraphe</p>
   <p>un autre paragraphe</p>
   <p>encore un paragraphe</p>
   
   <div class="conteneur">
    <p>un paragraphe</p>
    <p>un autre paragraphe</p>
    <p>encore un paragraphe</p>
   </div>

p{display:inline-block;vertical-align:top;border:1px solid red;padding:5px;}
    .conteneur{overflow:hidden;background-color:yellow;}
    .conteneur p{display:block;float:left;}

Modifié par niuxe (23 Jun 2011 - 22:05)

Bonsoir à toutes et à tous,

merci pour les renseignements que te m'as communiqué NIUXE. J'ai fait le test et cela marche parfaitement dans mon traitement au positionnement des boites dans un conteneur.

Mais ma principale question est de dimensionner une boite à la taille de la fenêtre intérieur. Vu que je ne maitrise pas bien le DOM, je fouille ici et là, en utilisant un petit programme qui affiche le contenu des objets de la DOM (Show_Props). Mais ne connaissant pas l'usage de certaines variables, je passe mon temps à faire des essais qui pour l'instant sont infructueux.

Je recherche "la bidouille" que tu m'as signalé ci-dessus, afin de maintenir la taille de la boite à celle de la fenêtre intérieur dans le cas où l'on utilise justement les margin, padding et border dans le CSS. Ceux-ci augmentent le WIDTH et le HEIGHT de la boite et même si, en javascrit, je viens écraser ces valeurs, rien ne fait, car elles sont plus grandes que la largeur de la fenêtre intérieur.

Donc comment puis-je faire ?

Soit il existe des variables qui donnent la largeur et la hauteur des magin, padding et border sans aller fouiller dans le CSS.

Soit une astuce pour maintenir la largeur et la hauteur de la boite à celle de la fenêtre intérieur, quelque soit l'usage des margin, padding et border que l'on fait

Si quelqu'un peut me renseigner ?

Merci.
Modifié par Artemus24 (24 Jun 2011 - 00:28)

ça lu,

La bidouille est relativement simple, soit utiliser des marges droites négatives exprimée aux dimensions relatives soit paramétrer en négatif la chasse (interlettrage) du conteneur père en dimensions relatives. Ce n'est pas la valeur relative (em, %) qui est génante dans ce cas, mais plutôt qu'elle ne sera pas précise. exemple :

<div class="a">
   <p>un paragraphe</p>
   <p>un autre paragraphe</p>
   <p>encore un paragraphe</p>
</div>

html,body{width:100%;height:100%;background-color:teal;}
.a{[b]letter-spacing:-.3em;[/b]} /*cela va dépendre du corp du texte */
.a p{display:inline-block;vertical-align:top;background-color:red;color:white;margin:0;padding:1%;[b]letter-spacing:0[/b];width:31.33%;height:31.33%;} /*letter-spacing : 0*/

D'une manière générale, gérer la largeur des blocs en js sans l'avoir fait en css au préalable, ce sera casse-gueule puisque si l'utilisateur coupe le js, ta MEP sera cassée.

Hier soir j'ai dit une petite bêtise dans le sens qu'en position float on récupérer le flux. Ce n'est pas tout à fait vrai. On récupère le flux mais les blocs flotants ne sont plus dans le flux. Pour ton cas et suite à ta problématique, ce n'est pas bien grave. Ca peut être fait avec ou sans flux.

Si j'ai un peu de temps (ce qui ne va pas être évident), j'essaierai ce WE ou ce soir de te donner un coup de main.
Modifié par niuxe (24 Jun 2011 - 09:30)

Bonsoir Niuxe,

encore merci de t'intéresser à mon sujet. J'ai repris tes idées qui m'ont été profitable. Je constate que je n'ai pas encore acquis les automatisme de la pratique du WEB !

Dans la journée, j'ai fait quelques progrès, entre autre je n'ai plus besoin de "bidouiller" mes boites. En fait, maintenant j'utilise le body comme conteneur et j'y place chacune de mes boites, plus un menu en fixe. Chaque boite est gérée en Javascript d'une manière indépendante. En fait, mon principal problème du redimensionnement de mes boites vient d'un mauvais usage que j'en faisais. Je dois considérer que chaque boite est un conteneur et puis c'est tout. Si à l'intérieur de ma boite, je désire mettre des margin, des padding ou des border, et bien je crée une autre boite contenant des titres, des paragraphes ou des images. Ça marche car j'ai fait le test.

Même si ce que j'ai fait fonctionne, j'ai toujours un problème avec le redimensionnement des boites. Mon problème vient de deux points :

1) je dimensionne mes boites au chargement du HTML et j'ai constaté que je n'ai pas à ma disposition toutes les informations de la DOM. Cela vient du fait qu'ils sont calculés au moment de l'exécution du HTML mais pas au chargement.

2) je n'arrive pas à trouver l'équivalent sous MSIE 8.0 des variables sous Firefox se nommant window.innerWidth et window.innerHeight. En fait en cherchant sur le net, j'ai trouvé soit document.documentElement.clientWidth et document.documentElement.clientHeight ou bien document.body.offsetWidth et document.body.offsetHeight.

Mais à cause du §1, ces quatre variables sont à zéro !

Du coup, je passe par window.screen.availWidth et window.screen.availHeight et je suis obligé de corriger Height par une constante afin de faire coïncider la bonne hauteur de la fenêtre intérieur.

Mais en faisant d'autres tests, je me suis aperçu que je ne savais pas faire en javascript, un rafraichissement. Imaginons que le navigateur ne soit pas dans sa plus grande dimension. Les informations que je récupère sont à la bonne taille du navigateur et tout ce passe correctement. Mais si je passe dans une dimension plus grande, c'est à dire en mode pleine page, je conserve les anciens paramètres. Et du coup, j'ai un mauvais affichage de mes boites.

Je voudrais savoir comment peut-on récupérer des informations lorsque le navigateur change de taille ? En Win32, je sais faire car il suffit de tester la zone MESSAGE avec la constante WM_SIZE. Mais en WEB, je n'ai aucune idée de comment il fait faire ?

Merci encore de m'avoir lu et à bientôt !

Artémus24.
Modifié par Artemus24 (24 Jun 2011 - 22:12)

Et l'eau Artemus24,

pour te mettre sur la piste, j'ai fait vite fait ce petit script (attention, html4 strict) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
    <title><!-- Insert your title here --></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    html,body{width:100%;height:100%;margin:0;padding:0;}
    #conteneur{background-color:blue;width:100%;height:100%;}
    #conteneur .bloc{float:left;border:1px solid red;padding:5px;}
</style>
</head>
<body>
    <div id="conteneur">
        <div class="bloc"></div>
        <div class="bloc"></div>
        <div class="bloc"></div>
        <div class="bloc"></div>
        <div class="bloc"></div>
        <div class="bloc"></div>
        <div class="bloc"></div>
        <div class="bloc"></div>
        <div class="bloc"></div>
    </div>
   
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
   <script type="text/javascript">
   $(function(){
        var largeurConteneur = $('#conteneur').outerWidth();
        var hauteurConteneur = $('#conteneur').outerHeight();
        var tierLargeurConteneur = largeurConteneur / 3;
        var tierHauteurConteneur = hauteurConteneur / 3;
        var largeurMinBloc = $('.bloc').outerWidth();
        var hauteurMinBloc = $('.bloc').outerHeight();
        
        $('.bloc').width(tierLargeurConteneur - largeurMinBloc).height(tierHauteurConteneur - hauteurMinBloc);
   });
   </script>
</body>
</html>

Je l'ai fait en jQuery bicoz : write less, do more....

Bonsoir Niuxe,

encore 2 messages et tu auras atteint les milles.

Merci pour ton intervention. Grâce à tes conseils, j'ai pu résoudre mes problèmes, enfin presque.

Je considère que cette discussion est close.

Encore merci !

@+
Modifié par Artemus24 (26 Jun 2011 - 20:53)

De rien