Titre: [Réglé] Décalage image d'une page à l'autre
Posté par: rjl le le 02-08-2008 a 19:38:39
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/ (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 |
Titre: Re:Décalage image d'une page à l'autre
Posté par: rjl le le 03-08-2008 a 20:53:22
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 |
Titre: Re:Décalage image d'une page à l'autre
Posté par: rjl le le 04-08-2008 a 00:09:59
Pour certaines pages,html, j'ai une légère contraction d'un logo (en haut à gauche).
Après bien des essais, [B]j'ai diagnostiqué précisément l'origine du problème... sans savoir le résoudre[/B] !
En fait, c'est la présence d'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 |
Titre: Re: Pas de problème en IE
Posté par: rjl le le 04-08-2008 a 10:29:47
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 !
@+ [SIZE="1"] RJL20080804[/SIZE] |
Titre: Re:[Réglé] Décalage image d'une page à l'autre
Posté par: rjl le le 04-08-2008 a 15:55:59
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 ![SIZE="1"]
RJL20080804[/SIZE] |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|