[Réglé] Table à + de 11 lignes ==> impact sur image !

[rjl]

Bonjour,

Ce problème n'est pas nouveau mais, je l'avais abandonné pour d'autres points plus importants à l'époque.
Aujourd'hui je suis en production et on me signale ce décalage (persistant).

Le problème subsiste entre, par exemple, les pages "Organisation" et "Conseil d'administration" ! Le Logo varie de taille alors que là encore, il est décrit de manière identique par les mêmes lignes de CSS !

Je viens surtout de m'apercevoir que ce problème n'existe pas en IE mais seulement en Firefox.

Après bien des essais, j'ai diagnostiqué précisément l'origine du problème... sans savoir le résoudre !
En fait, c'est la présence d'une table avec plus de 12 lignes qui me provoque ce désagrément ! J'ai pour la table de la page précitée "Conseil d'Administration" (par rapport à la page "Organisation"), combiné de multiples fois les éléments lignes (tr à /tr) et ce n'est pas leur contenu qui est en cause (je l'avais cru initialement) mais leur nombre !
Les autres pages frappées du même mal ont également une table avec + de 12 lignes mais je n'ai pas approfondi pour celles-ci.

Je vous communique l'adresse du site pour vous permettre d'atteindre le source http://www.ainesruraux22.org/

Code : Tout sélectionner

.divstyl { background-color: #ffffc0 ;color: blue; font-family: verdana, helvetica, arial, sans-serif ; font-size: small; line-height: 200%}
.colgch { width: 16%; color: blue; float: left; background-color:#ffffc0;margin-left:auto;margin-right:auto; }
.logo {width:95%;height:95%;}
.symbole {width: 25%; text-align: center;}
.centrage { text-align: center ;}
img.centrimg {display: block;
   margin-left: auto;
   margin-right: auto }
.menu {font-size: xx-large;}
.menucorps { font-size:90%; width:84%;display: block;}
.navigation li{ border: 1px solid #600 ; margin-bottom: 1px ;margin:auto;  text-decoration: none ; list-style-type:none;}
.navigation li a { display: block; font-size: 1.2em; margin-bottom: 1px; text-align: center; line-height: 180%; }
.navigation a:link { color:#00f; }
.navigation a:visited { color:#c0c; }
.navigation a:hover { color:#0f0; }
.navigation a:active { color:#f00 ; }
.cotarm { text-align: center; width: 60%;padding-left: 21%;}
.colreg { float:right; width:84%;background-color:#ffffc0;}
.colreg2 { float:right; font-size: 130%}
.centered {padding-top: 1.2em; text-align: center; width:90%;}
.centered2 {text-align: center;color: blue;font-size:2em; font-weight: bold;}
.titrepag { color: blue; text-align:center; font-size:3em; font-weight: bold; padding-top:1.5em; }
.titrepagsect { color: blue; text-align:center; font-size:3em; font-weight: bold; }
.titrepagobj { color: blue; text-align:center; font-size:2.25em; font-weight: bold; }
.bordersans {border-style: none }
.centered0 {text-align:left; font-size:0.75em;}
.center3 {text-align: center; color:#000;}
.stylcaption { font-size:60%em; color:blue; font-weight: bold; padding-bottom: 0.4em; }
thead {font-weight: bold; font-size: 1.0em; text-align: center;
border:0px solid #6495ed; background-color:#ffffc0;
}
tbody {
border:1px solid #6495ed; background-color:#ffffc0;font-size: 0.9em;font-weight: lihgter
}
th {color:blue; font-size:120%; text-align:center;
}
td { font-weight: lighter; font-size:100%; }
table {height:200%;  width:100%; background-color:#ffffc0; color:#00F;
border-collapse:collapse;}
th, td {border:1px solid black;}
caption {font-weight: bold; font-size:150%;line-height: 200%}
.navigcant a { display: block; font-size: 1.0em;margin-bottom: 1px; text-align: center; line-height: 150%; }
.navigcant a:link {font-weight: bold; color:#00f; }
.navigcant a:visited {font-weight: bold; color:#c0c; }
.navigcant a:hover { color:#0f0; }
.navigcant a:active { color:#f00 ; }
.vertical { vertical-align:middle;}
.soft {font-size:1.1em;font-weight: normal;} 
.soft2 {font-size:0.9em;font-weight: normal;}
.coldouble { width: 30%;}
.colsimple { width: 15%;}
.colpetit { width: 2.5%;}
.coldoubl4 { width: 44%;}
.colsimpl4 { width: 20%;}
.colcomplem { width: 38%;}
.colprenom { font-weight: bold;}
.colnom { font-weight: bold;}
.colbureau { text-align: right; font-weight: 200;font-size:0.7em;width: 8%}
.colfonction { font-weight: normal;}
.colcanton { font-weight: normal;}
.colmil { width: 50%; float: left; font-size: 1.5em ;  text-align: left; padding-top: 1.9em; }
.colmil60 { width: 60%; float: left; font-size: 1.0em ;  text-align: left; padding-top: 0.9em; }
#accueil { font-size: 1.6em; padding-left: 4%;  color:blue; }
#accueil2 { display: block; font-size: 1.1em; color:blue; text-align: left; padding-top: 0%;}
.acc-leger { color: black; font-size: 100%;  padding-left: 5%; padding-right: 5%;text-align: left; padding-top: 1.2em;font-weight:normal;}
.acc-simple { color: blue; font-size: 150%;  padding-left: 5%; text-align: left; padding-top: 1.2em;font-weight:lighter;} 
.bloc-adr { display: block; color: black ; font-size: 0.9em; padding-top: 1.3em; padding-left: 6%; text-align: left; }
#tel { font-size: 0.85em; text-align: center; padding-top: 1em; }
.rouge {color: red;}
.frmliste li {padding-top: 0.3em;  padding-left: 2.5%; font-size: x-large; color: blue; font-weight: normal; }
.coldrt { width: 47%; float: right; font-size: 1.5em ; text-align: left; padding-left: 5px; padding-top: 1.75em;}
.coldrt60 { width: 37%; float: right; font-size: 1.0em ; text-align: left; padding-left: 5px; padding-top: 0.75em;}
.coldrt cadredrt p { text-align: left; font-size: 0.8em; color:#000080;font-weight: bold; }
.centre { text-align: center; }
.cadre3 { text-align: left; font-size: x-large; color: blue; padding-left: 5%}
.cadre4 { text-align: left; font-size: large; color: blue; }
.cadre5 { text-align: left; font-size: x-large; color: blue; }

Merci à nos spécialistes de Firefox de m'indiquer quelle solution je puis apporter à ce problème d'autant que je me serai plus facilement consolé s'il n'avait touché que IE plutôt que Firefox !
@bientôt RJL20080804

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16

[calimo]

Alors, admettons, je suis sur la page http://www.ainesruraux22.org/Page22/AR2 ... ation.html ... qu'est-ce qui varie de taille ? Je ne vois même pas de tableau. Tu porurais être plus précis ?

Sinon, il y a des erreurs tant dans le html que la css
http://validator.w3.org/check?verbose=1 ... ation.html
http://jigsaw.w3.org/css-validator/vali ... ation.html
Ce n'est peut-être pas étranger au problème...

PS : il y a une rubrique spécialement pour les webmasters en difficulté : http://www.geckozone.org/forum/viewforum.php?f=8 (car le problème n'est certainement pas limité strictement à Firefox)

[rjl]

Bonjour calimo, ... et mes excuses pour ces lacunes.
La table est dans "Conseil d'Administration" auquel on accède par "Organisation" :

Le problème subsiste entre, par exemple, les pages "Organisation" et "Conseil d'administration" ! Le Logo varie de taille

OK pour le HTML et la CSS : ils ont été conforme (et passés à la moulinette) en leur temps mais il est vrai que j'ai bien modifié la CSS suite à mes recherches pour régler ce désordres ; j'ai ainsi noté le titre de la page "Organisation" qui a fondu ou un autre qui a perdu son padding-top !
Merci aussi pour l'adresse des webmaster en difficulté.
Je repasse tout à la moulinette, je corrige les détails que je perçois et je vais sur l'autre forum si nécessaire.
@+ RJL20080804

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16

[Fabrice.Tres.Net]

La page est dite "liquide", c'est à dire que la dimension et/ou la disposition des éléments change pour occuper toute la fenêtre.
En faisant varier la dimension de la fenêtre la taille des 2 logos changent.

D'ailleurs, les css des 2 logos sont bien des proportions "indirectes" de la taille des contenants qui sont eux proportionnels à la taille de la fenêtre

.logo {width:95%;height:95%;}
.cotarm { text-align: center; width: 60%;padding-left: 21%;}

.colgch { width: 16%;... /*colonne de gauche!!!

D'une manière générale, le code peut être très largement simplifié!

[Fabrice.Tres.Net]

En jetant un oeil rapide avec Kompozer, j'ai vu qu'il y avait un peu de divïte..., que les niveaux de titres ne sont pas respectés (h1 pour le titre principal,...)
Rapidos, un bout de code un peu + propre qui nécessite quelques faiblea arrangement du css

Code : Tout sélectionner

  <body class="divstyl">
    <div class="colgch">
      <img class="logo" src="../Images22/Logo%20AR.gif" alt="Logo Aînés Ruraux" />
      <ul class="navigation">
        <li>
          <a href="../index.html">Retour Accueil</a>
        </li>
        <li>
          <a href="#"> </a>
        </li>
        <li>
          <a href="AR22-ConseilAdministration.html">Conseil d'Administration</a>
        </li>
        <li>
          <a href="AR22-Commissions.html">Commissions</a>
        </li>
        <li>
          <a href="AR22-SecteursCantons.html">Secteurs : Cantons</a>
        </li>
        <li>
          <a href="AR22-PlanSite.html">Plan du Site</a>
        </li>
        <li>
          <a href="mailto: quelquepart_org">Nous contacter</a>
        </li>
      </ul><!-- Fin class MenuCorps -->
      <!-- Fin class centrage --><img class="cotarm" src="../Images22/Cartes/100px-CA_22.gif" alt="Logo Côtes d'Armor" /> <!-- Fin colgch -->
    </div>
    <div class="colreg">
      <!-- Ajouter ici les donnée recouvrant l'espace (hors menu) -->
        <h1>
          Organisation de la Fédération
        </h1>
      <div class="acc-simple">
        <p>
          <strong>Notre Fédération Départementale est gérée par un Conseil d'administration de 21 membres  dont 19 élus, un président honoraire et une personne qualifiée.</strong> 
        </p>
        <p>
          Le Conseil d'Administration est dirigé par Jean D<span style="font-variant: small-caps; font-weight: bold;">aniel</span>, son président. Les clubs sont regroupés en secteurs géographiques (comprenant usuellement de 2 à 5 cantons).
        </p>

[/code]

[Asumbaa]

Salut,

C'est l'apparition du scroll vertical qui te décale tout ça, puisque tu as en effet indiqué des largeurs en % pour ta colonne gauche comme pour ton logo.

Le plus robuste serait de ne pas faire varier la taille du logo en CSS (pourquoi avais-tu fait ça ?)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[calimo]

C'est l'apparition du scroll vertical qui te décale tout ça

Je comprend donc pourquoi je n'ai vu aucune différence !
C'est tout bête effectivement...il fallait "juste" y penser

[rjl]

Merci à tous de vos réponses,

=> Asumbaa & calimo
J'ai essayé d'utiliser au mieux les indications données sur le forum et divers conseils ; le but du flottant était de m'adapter simplement aux diverses définitions et largeurs de fenêtres, ce qui fonctionne en grande partie.
pour autant, je n'ai pas pensé dans ma largeur à l'ascenseur vertical et à son impact sur la largeur alors que sur certaines fenêtres j'utilisai de fait 100% de la largeur !
Je pense que la modification à minima serait de revenir à 98% quelle que soit la colonne que je sacrifie.
En tout cas, merci de cette piste que je vais essayer ; je vous tiendrai informé du résultat

==> Fabrice.Tres.Net
Effectivement, pour la raison que j'indique ci-dessus, la page est "liquide".
J'ai de mon côté essayé tes modifs avec Kompozer : le résultat est sensiblement le même donc rien n'est perdu sauf le centrage (.centrage non repris) et la taille du titre.
Effectivement, je n'utilise pas de manière automatique H1 à H6 mais en fonction de la taille dont j'ai besoin d'autant qu'en plus ces tailles réagissent en relatif !
Simplifier, je ne demande pas mieux mais l'interaction HTML CSS me pose bien des difficultés !

Merci de vos interventions Je poursuis mes investigations dans le sens que vous m'indiquez.
rjl20080804

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16

[rjl]

Re,
J'ai essayé de faire varier le % de chaque colonne ; peine perdue et, c'est normal, l'ascenseur est nécessaire donc il le garde !
Inversement, je peux ruser (est-ce plus dans la logique Fox ?) et forcer l'ascenseur sur toutes les pages (le cas échéant par des lignes blanches) et alors, la réduction sera la même partout ?
Est-ce une solution, peut-être pas la meilleure mais une solution.
Merci de votre appui RJL20080804

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16

[rjl]

Eh bien oui, je suis d'accord pour dire que ce n'est pas génial (ce n'est qu'un artifice) mais ça fonctionne : l'ascenseur était bien le problème alors que je me focalisai sur un nombre de tr dans ma table (nombre de tr impliquant alors, il est vrai l'ascenseur).
Je n'ai encore modifié que les 3 pages majeures de la structure mais l'enchaînement (Organisation ==>Conseil d'Admin") donné en exemple est solutionné ; pour les autres, quelques lignes blanches en plus et ça roulera.

Merci à tous et des félicitations pour le forum et ses membres pour leur réactivité... surtout en août !
rjl20080804

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16

[Fabrice.Tres.Net]

Effectivement, pour la raison que j'indique ci-dessus, la page est "liquide".
J'ai de mon côté essayé tes modifs avec Kompozer : le résultat est sensiblement le même donc rien n'est perdu sauf le centrage (.centrage non repris) et la taille du titre.
Effectivement, je n'utilise pas de manière automatique H1 à H6 mais en fonction de la taille dont j'ai besoin d'autant qu'en plus ces tailles réagissent en relatif !
Simplifier, je ne demande pas mieux mais l'interaction HTML CSS me pose bien des difficultés !

Un passage par ici s'impose...
http://info.sio2.be/kpz/2/2.php

D'ordre général, et une très bonne base : http://www.siteduzero.com/tuto-3-6-0-ap ... e-web.html , un survol des parties HTML et CSS démystifiera pas mal de points. Un temps consacré très rapidement amorti.

Je pense que les pages liquides ne sont pas des solutions idéales sans une taille du texte "liquide" aussi. Il est très difficile de lire du texte écrits sur de grande largeur. Il suffit de jeter un oeil à la construction de nos journaux papier pour s'en rendre compte: large feuille découpée en plusieurs colonnes pour faciliter notre lecture.

[Invité]

Effectivement, je suis d'accord sur le principe mais, malgré une très longue expérience en informatique (très traditionnelle depuis les langages machines et l'assembleur début 1963 ce qui n'est guère un avantage), je viens de débuter réellement en blog et site Web pour des associations ; pour le blog, j'ai opté pour 2 colonnes latérales réduisant la largeur centrale.
Sur ce site, je travaille en 2 ou 3 colonnes de large selon les cas.
Je vais, maintenant que je suis dégagé des soucis principaux lire avec intérêt les infos que tu me cites.
Merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16

[rjl]

Effectivement, je suis d'accord sur le principe mais, malgré une très longue expérience en informatique (très traditionnelle depuis les langages machines et l'assembleur début 1963 ce qui n'est guère un avantage), je viens de débuter réellement en blog et site Web pour des associations ; pour le blog, j'ai opté pour 2 colonnes latérales réduisant la largeur centrale.
Sur ce site, je travaille en 2 ou 3 colonnes de large selon les cas.
Je vais, maintenant que je suis dégagé des soucis principaux lire avec intérêt les infos que tu me cites.
Merci RJL20080804

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16