Discussion :

[rjl]

Bonjour,
Ce problème n'est pas récent chez moi et j'avais essayé de le solutionner en recopiant tout mon début de colonne gauche (dont l'image) sur les autres pages... Peine perdue, le décalage existe d'emblée entre la page index et les suivantes (Objectifs ou Organisation) !
J'avais alors abandonné le sujet pour d'autres points plus importants à l'époque.
Aujourd'hui je suis en production et on me signale ce décalage (persistant).
Je vous communique l'adresse du site pour vous permettre d'atteindre le source http://www.ainesruraux22.org/
et vous communique, ci dessous la page css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
.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%; padding-left: 4%;}
.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:1px 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: 8%; 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; }

J'avoue que je sèche complétement puisque (à mes yeux), le code est le même entre chaque début de page !!!

Merci à qui verrai l'erreur de me réprimender sévèrement, je le mérite mais le remercierai de tout coeur !
A bientôt RJL20080802

[rjl]

Rebonjour,

Ce n'est résolu qu'en partie, mais j'ai progressé ; j'avais un décalage vertical entre le logo en haut à gauche entre la page index et les suivantes !
Par des approches successives, des recherches et bien des essais, je me suis rendu compte que la dernière ligne de la page index était la cause du désordre.
J'essaie d'expliquer si ça peut servir à d'autres : le décalage se produisait dès la premiere ligne de la page tout en haut ; la ligne ajoutée venait sur la largeur totale d'une page divisée en plusieurs colonnes ; après fermeture des 3 colonnes, cette ligne ( <p>&nbsp;</p> ) était sensée ajouter une ligne en couleur de base en pleine largeur (dégageant un peu la dernière ligne utile).
Une fois otée, plus de décalage !

Un problème subsiste entre, par exemple, 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 !

Merci si vous avez une idée... mais, je sèche plus encore car avec Kompozer, ce désordre n'existe pas et n'existe qu'en réel sur le net !

Dans tous les cas, je vous tiendrai informé.
RJL20080803

[rjl]

Pour certaines pages,html, j'ai une légère contraction d'un logo (en haut à gauche).
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 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 ceux-ci.

Merci d'avance, encore, de votre appui.
@bientôt RJL20080804

[rjl]

Oui, bonjour,
Comme je l'indique en titre, mon problème existe en Firefox mais pas sur IE !
De plus ce doit être une combinaison spécifique entre CSS et Table !
@+ RJL20080804

[rjl]

Bonjour,
Le pb venait, non du nombre de tr de la table mais de la taille de la page impliquant alors un ascenseur ; comme je travaille en float et en %, l'ascenseur réduisait alors la largeur des autres grandes colonnes de la page !
Comme expédient, j'ai opté pour des lignes blanches en fin des pages sans ascenseur : elles ont maintenant toutes leur cabine et ça fonctionne impec !
RJL20080804