Largeur des tableaux flottantes ...

Des outils pour vous aider à créer votre site

Modérateurs: Guardian, AgnesD

Largeur des tableaux flottantes ...

Messagede rspir le Dim 26 Juin 2005 - 15:23

Bonjour

J'ai développé pour ma boite un intranet. Celui ci est optimisé pour des écrans en 1280*1024. Tous les utilisateurs utilisent IE.

Apparemment tout se passe bien ...

Cependant pour développer je bosse sur un portable dont la définition est 1024*768. Cela ne passe pas trop mal : le site se "reformate" en largeur et prend bien l'écran .... avec IE !

J'ai eu le malheur de l'ouvrir avec Firefox. Et la c'était beaucoup moins joli ... je me suis donc dit que je n'avais (encore) pas respecté certains standards et qu'IE, sympa, masquait mes erreurs.

Bref sous Firefox il se passe ceci : au départ la page est trop large. Cependant en raffraischissant la page, hop ca devient bon. Je raffraischis de nouveau et la largeur est de nouveau incohérente.

Il faut savoir que mon intranet est une succession de tableaux imbriqués et d'include de fichiers ...

Bon je sais que sans exemple ni source, cela ne va pas être simple pour vous de m'aider. Mais si l'un d'entre vous se rappelle être passé par la et surtout se rappelle comment il en est sorti cela m'interesse.

De mémoire, je n'ai pas défini de largeur à tous mes tableaux. Cela vient il de la ? Je mélange également des largeurs exprimé en % et en valeur fixe. Est ce la source de mes soucis ?

En tout cas les utilisateurs ne se rendent comptent de rien (merci IE) mais cela m'embete de savoir qu'il y'a ce bug. J'aimerais prendre le temps cet été pour corriger cela.

Merci de vos conseils et lumières
RSPIR

Tant qu'à faire le mal, faites le bien ! Parce que bien faire le mal, c'est tout comme mal faire le bien. Mais bien faire le bien, c'est mieux que de mal faire le mal, non ?
Avatar de l’utilisateur
rspir
Modérateur
 
Messages: 321
Inscription: Dim 8 Aoû 2004 - 11:45
Localisation: Bordeaux (33)

Messagede rspir le Dim 26 Juin 2005 - 17:27

Bon j'ai fait une version "aveugle" en supprimant les textes et les images faisant allusion à ma boite.
C'est forcément moins beau ...

Il faut utiliser les liens Vue 1 - Vue 2 - Vue 3.

C'est plutot aléatoire, mais vous allez voir au bout de quelques passages sur les 3 écrans que tout à coup la largeur délire complètement. En rafrraichissant c'est ok.

Cela n'arrive pas très souvent ... il faut des fois tourner un petit moment. mais sous IE cela ne se produit pas une seule fois.

Pour info les écrans sont plutot pleins en règle général et j'ai l'impression que la déformation survient plus souvent quand il y'a plus de textes
Dernière édition par rspir le Dim 26 Juin 2005 - 19:54, édité 1 fois.
RSPIR

Tant qu'à faire le mal, faites le bien ! Parce que bien faire le mal, c'est tout comme mal faire le bien. Mais bien faire le bien, c'est mieux que de mal faire le mal, non ?
Avatar de l’utilisateur
rspir
Modérateur
 
Messages: 321
Inscription: Dim 8 Aoû 2004 - 11:45
Localisation: Bordeaux (33)

Messagede belver le Dim 26 Juin 2005 - 17:32

question idiote rspir,
t'as développé cet intranet en quoi ?
as-tu fait ta mise en page par tableaux ?
J'ai encore perdu une occasion de me taire
Assistance Informatique en live
Image Image
Avatar de l’utilisateur
belver
Administrateur
 
Messages: 5132
Inscription: Mar 3 Aoû 2004 - 10:40
Localisation: Nantes

Messagede rspir le Dim 26 Juin 2005 - 17:36

belver a écrit:question idiote rspir,

jamais !
belver a écrit:t'as développé cet intranet en quoi ?

html + asp avec notepad
belver a écrit:as-tu fait ta mise en page par tableaux ?

ouiiiiii que ca !!!!!
RSPIR

Tant qu'à faire le mal, faites le bien ! Parce que bien faire le mal, c'est tout comme mal faire le bien. Mais bien faire le bien, c'est mieux que de mal faire le mal, non ?
Avatar de l’utilisateur
rspir
Modérateur
 
Messages: 321
Inscription: Dim 8 Aoû 2004 - 11:45
Localisation: Bordeaux (33)

Messagede belver le Dim 26 Juin 2005 - 17:45

En asp, as-tu l'équivalent php de ceci pour vider le cache :

<?php
header("pragma:no-cache");
header("cache-control:no-cache");
?>

en fonction des browsers
J'ai encore perdu une occasion de me taire
Assistance Informatique en live
Image Image
Avatar de l’utilisateur
belver
Administrateur
 
Messages: 5132
Inscription: Mar 3 Aoû 2004 - 10:40
Localisation: Nantes

Messagede rspir le Dim 26 Juin 2005 - 17:52

Je ne sais pas ...je ne connaissais pas la commande en php !
je vais chercher

je viens de remettre du texte dans la vue 3 ... tu devrais voir assez vite que cela bug si tu raffraichis plusieurs fois la page ou si tu navigues entre les vues.

apparament sur un autre forum, on me dit que j'abuse un peu trop des tableaux ... !
RSPIR

Tant qu'à faire le mal, faites le bien ! Parce que bien faire le mal, c'est tout comme mal faire le bien. Mais bien faire le bien, c'est mieux que de mal faire le mal, non ?
Avatar de l’utilisateur
rspir
Modérateur
 
Messages: 321
Inscription: Dim 8 Aoû 2004 - 11:45
Localisation: Bordeaux (33)

Messagede belver le Dim 26 Juin 2005 - 18:04

Eh bien, j'ai beau rafraichir sur les 3 vues, je n'ai aucun pb de déformation
tout va bien
aurais-tu un pb avec F.F ?
J'ai encore perdu une occasion de me taire
Assistance Informatique en live
Image Image
Avatar de l’utilisateur
belver
Administrateur
 
Messages: 5132
Inscription: Mar 3 Aoû 2004 - 10:40
Localisation: Nantes

Messagede rspir le Dim 26 Juin 2005 - 18:08

tiens jettes un oeil au fichier joint

et en raffraichissant ... c'est ok
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.
Dernière édition par rspir le Dim 26 Juin 2005 - 18:30, édité 1 fois.
RSPIR

Tant qu'à faire le mal, faites le bien ! Parce que bien faire le mal, c'est tout comme mal faire le bien. Mais bien faire le bien, c'est mieux que de mal faire le mal, non ?
Avatar de l’utilisateur
rspir
Modérateur
 
Messages: 321
Inscription: Dim 8 Aoû 2004 - 11:45
Localisation: Bordeaux (33)

Messagede belver le Dim 26 Juin 2005 - 18:14

c'est trop large mais je n'ai pas de déformation, ça reste constant :wink:
J'ai encore perdu une occasion de me taire
Assistance Informatique en live
Image Image
Avatar de l’utilisateur
belver
Administrateur
 
Messages: 5132
Inscription: Mar 3 Aoû 2004 - 10:40
Localisation: Nantes

Messagede rspir le Dim 26 Juin 2005 - 18:28

bah oui c'est trop large.
c'est ca que je veux corriger.
pourquoi la page a t'elle été mal interprétée ? pourquoi tout ne rentre pas dans l'ecran ?
9 fois sur 10 c'est ok et la ... ca sort de l'écran
RSPIR

Tant qu'à faire le mal, faites le bien ! Parce que bien faire le mal, c'est tout comme mal faire le bien. Mais bien faire le bien, c'est mieux que de mal faire le mal, non ?
Avatar de l’utilisateur
rspir
Modérateur
 
Messages: 321
Inscription: Dim 8 Aoû 2004 - 11:45
Localisation: Bordeaux (33)

Messagede rspir le Dim 26 Juin 2005 - 19:56

bon ...
je viens de prendre un cours rapide ... de css !!!!
en gros on m'a gentiment expliqué que mon code était bien compliqué pour ce que je voulais faire.
un type m'a montré comment construire ma page sans tableau ...

Code: Tout sélectionner
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ie="" xml:lang="fr" lang="fr"><head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
   <style type="text/css">
      body {
         font-family: sans-serif;
      }
      ul {
         list-style-type: none;
         margin-left: 0;
         padding-left: 0;
      }
      #contenu {
         width: 800px;
         margin: 120px 0 0 220px;
         padding: 0;
      }
      #contenu .cadre {
         float: left;
         width: 400px;
         height: 300px;
         overflow: auto;
         margin: 0;
      }
      #contenu .cadre h2 {
         font-size: .8em;
         color: Orange;
         border-bottom: 1px solid DarkBlue;
      }
      #contenu .cadre ul li {
         font-size: .7em;
      }
      #menu-top {
         position: absolute;
         top: 0;
         left: 220px;
         height: 120px;
      }
      #menu-top ul li { display: inline; padding: 2em; }
      #menu-left {
         position: absolute;
         top: 120px;
         left: 20px;
         width: 200px;
      }
      #informations {
         position: absolute;
         top: 10px;
         right: 10px;
         text-align: right;
         font-size: .6em;
      }
   </style><title>Intranet</title></head>

<body>
   <div id="contenu">
      <div class="cadre">
         <h2>Cadre n°1</h2>
            <div class="cadre-contenu">
               <img src="Intranet_fichiers/image014.gif" alt="image014">
            </div>
      </div>
      <div class="cadre">
         <h2>Cadre n°2</h2>
            <div class="cadre-contenu">
               <img src="Intranet_fichiers/image015.gif" alt="image015">
            </div>
      </div>
      <div class="cadre">
         <h2>Cadre n°3</h2>
            <div class="cadre-contenu">
               <img src="Intranet_fichiers/image016.gif" alt="image016">
            </div>
      </div>
      <div class="cadre">
         <h2>Cadre n°4</h2>
            <div class="cadre-contenu">
               <ul>
                  <li><span class="date-heure">[23/06 - 09h15]</span> Report d'erreur</li>
                  <li><span class="date-heure">[23/06 - 09h11]</span> Report d'erreur</li>
                  <li><span class="date-heure">[23/06 - 09h01]</span> Lancement programme</li>
               </ul>
            </div>
      </div>
      <div class="cadre">
         <h2>Cadre n°5</h2>
            <div class="cadre-contenu">
               <ul>
                  <li><span class="date-heure">[23/06 - 10h20]</span> Utilisateur déconnecté</li>
                  <li><span class="date-heure">[23/06 - 09h15]</span> Utilisateur connecté</li>
                  <li><span class="date-heure">[23/06 - 09h11]</span> Utilisateur déconnecté</li>
                  <li><span class="date-heure">[23/06 - 09h01]</span> Lancement programme</li>
               </ul>
            </div>
      </div>
      <div class="cadre">
         <h2>Cadre n°6</h2>
            <div class="cadre-contenu">
               <ul>
                  <li><span class="date-heure">[13/02 - 19h11]</span> Création base utilisateurs</li>
                  <li><span class="date-heure">[12/02 - 17h22]</span> Mise-en-place de l'intranet</li>
               </ul>
            </div>
      </div>
   </div>
   <div id="menu-top">
      <ul>
         <li><a href="#">Vue 1</a></li>
         <li><a href="#">Vue 2</a></li>
         <li><a href="#">Vue 3</a></li>
      </ul>
   </div>
   <div id="menu-left">
      <h3>Vue 1</h3>
      <ul>
         <li><a href="#">Lien 1</a></li>
         <li><a href="#">Lien 2</a></li>
         <li><a href="#">Lien 3</a></li>
      </ul>
   </div>
   <div id="informations">
      Date actuelle : 26/06/2005 (26<sup>ème</sup> semaine)<br>
      Conception et développement : mère-grand.<br>
      Dernière maj. le 26/06/2005
   </div>
</body></html>


y'a du boulot !!!!
et en même temps c'est tellement clair
RSPIR

Tant qu'à faire le mal, faites le bien ! Parce que bien faire le mal, c'est tout comme mal faire le bien. Mais bien faire le bien, c'est mieux que de mal faire le mal, non ?
Avatar de l’utilisateur
rspir
Modérateur
 
Messages: 321
Inscription: Dim 8 Aoû 2004 - 11:45
Localisation: Bordeaux (33)

Messagede AgnesD le Dim 26 Juin 2005 - 21:14

Bonsoir a tous

Si tu définis tes largeurs en pourcentages tu auras l'élasticité qui te permettra de passer en toutes résolutions (je sais c'est pas utile mais pour le fun :wink:) le seul obstacle c'est la taille des images qui elle reste fixe ; donc si elles sont trop grandes les problémes arrivent dans les basses résolutions...
Si cela t'interresse, je me suis permis de trafiquer ton morceau de css :oops:
A+

Code: Tout sélectionner
body {width: 96%;
         font-family: sans-serif;
      }
      ul {
         list-style-type: none;
         margin-left: 0;
         padding-left: 0;
      }
      #contenu {
         width: 84%;
         margin: 120px 0 0 140px;
         padding: 0;
      }
      #contenu .cadre {
         float: left;
         width: 49%;
         height: 300px;
         overflow: auto;
         margin: 0;
      }
      #contenu .cadre h2 {
         font-size: .8em;
         color: Orange;
         border-bottom: 1px solid DarkBlue;
      }
      #contenu .cadre ul li {
         font-size: .7em;
      }
      #menu-top {
         position: absolute;
         top: 0;
         left: 20%;
         height: 120px;
      }
      #menu-top ul li { display: inline; padding: 2em; }
      #menu-left {
         position: absolute;
         top: 120px;
         left: 20px;
         width: 8%;
      }
      #informations {
         position: absolute;
         top: 10px;
         right: 10px;
         text-align: right;
         font-size: .6em;
      }
Avatar de l’utilisateur
AgnesD
Co-Admin
 
Messages: 3737
Inscription: Mar 15 Mar 2005 - 21:17

Messagede rspir le Lun 27 Juin 2005 - 17:28

AgnesD a écrit:Bonsoir a tous
je sais c'est pas utile mais pour le fun :wink:


Bonjour Agnes

Merci de ton retour
Et si, je te confirme que pour moi l'elasticité est importante. A 2 titres :

- il y'a 2 résolutions différentes chez moi (entre ceux qui ont une station et ceux qui ont les portables)
- certains utilisateurs ont besoin d'utiliser mon intranet en mode fenétré. Du coup le fait que le contenu se recalibre en fonction de la taille m'interesse.

Simplement, je voudrais en plus pouvoir définir un seuil en deca duquel, l'élasticité ne joue plus : en clair que le contenu se recalibre si tu réduit la largeur de la fenetre de 75 ou 50% ok mais en deca ce n'est plus vraiment pertinent.
RSPIR

Tant qu'à faire le mal, faites le bien ! Parce que bien faire le mal, c'est tout comme mal faire le bien. Mais bien faire le bien, c'est mieux que de mal faire le mal, non ?
Avatar de l’utilisateur
rspir
Modérateur
 
Messages: 321
Inscription: Dim 8 Aoû 2004 - 11:45
Localisation: Bordeaux (33)

Messagede rspir le Lun 27 Juin 2005 - 17:36

Tiens Agnès, regardes ce site : http://openweb.eu.org/debutant/

tout en css

ca a l'air plutot bien fait.

quand tu réduit la fenetre tout se réajuste, jusqu'au moment ou tout se superpose et tout part a volo.

je voudrais pouvoir controler ce seuil et faire en sorte que la fenetre ne se réajuste plus

EDIT : ton site pose le même souci : partir d'un certain moment le texte de ton menu gauche déborde du cadre. En revanche le site de ton hébergeur (http://www.freezee.org/?page=4) semble également fait en css et répond exactement à ce que je veux : au bout d'un moment le reajustement s'arrete. Je n'ai pas compris comment ils font ca mais cela me plait !
RSPIR

Tant qu'à faire le mal, faites le bien ! Parce que bien faire le mal, c'est tout comme mal faire le bien. Mais bien faire le bien, c'est mieux que de mal faire le mal, non ?
Avatar de l’utilisateur
rspir
Modérateur
 
Messages: 321
Inscription: Dim 8 Aoû 2004 - 11:45
Localisation: Bordeaux (33)

Messagede AgnesD le Lun 27 Juin 2005 - 19:22

Bonsoir

Tu dois pouvoir le faire en rajoutant dans les boites où c'est nécéssaire min-height et min-width avec une taille en pixel .
Ainsi elles devraient avoir une taille minimum....a toi de bien calculer et d'essayer quelle est la taille apropriée...(je devrais voir cela chez moi aussi ...bonne idée... :wink: )
A+
Avatar de l’utilisateur
AgnesD
Co-Admin
 
Messages: 3737
Inscription: Mar 15 Mar 2005 - 21:17

Suivante

Retourner vers Création de site

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

cron