[Réglé] Décalage image d'une page à l'autre

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  [Réglé] Décalage image d'une page à l'autre

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: [Réglé] Décalage image d'une page à l'autre (Lu 1026 fois)

[Réglé] Décalage image d'une page à l'autre
« sur: le 02-08-2008 a 19:38:39 »

rjl
Membre récent

Hors-Ligne

Sexe: Male

Messages: 24

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:

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 verrait l'erreur (les erreurs...) de me réprimender sévèrement, je le mérite mais je le remercie d'avance de tout coeur !
A bientôt RJL20080802

« Dernière Édition: le 04-08-2008 a 15:55:06 par rjl »

Rapporter au modérateur

Re:Décalage image d'une page à l'autre
« Répondre #1 sur: le 03-08-2008 a 20:53:22 »

rjl
Membre récent

Hors-Ligne

Sexe: Male

Messages: 24

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> </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

Rapporter au modérateur

Re:Décalage image d'une page à l'autre
« Répondre #2 sur: le 04-08-2008 a 00:09:59 »

rjl
Membre récent

Hors-Ligne

Sexe: Male

Messages: 24

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

Rapporter au modérateur

Re: Pas de problème en IE
« Répondre #3 sur: le 04-08-2008 a 10:29:47 »

rjl
Membre récent

Hors-Ligne

Sexe: Male

Messages: 24

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

Rapporter au modérateur

Re:[Réglé] Décalage image d'une page à l'autre
« Répondre #4 sur: le 04-08-2008 a 15:55:59 »

rjl
Membre récent

Hors-Ligne

Sexe: Male

Messages: 24

Bonjour,
Le problème 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

Rapporter au modérateur