[Réglé] Colonne (menu) refusant de se cadrer

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  [Réglé] Colonne (menu) refusant de se cadrer

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: [Réglé] Colonne (menu) refusant de se cadrer (Lu 791 fois)

[Réglé] Colonne (menu) refusant de se cadrer
« sur: le 12-05-2009 a 00:53:45 »

rjl
Membre récent

Hors-Ligne

Sexe: Male

Messages: 24

Bonjour,

Je sèche sur un problème que des regards compétents vont diagnostiquer de suite :
J'ai un menu qui devrait être aligné à gauche dans une colonne spécifique en marge... Il s'obstine à rester sensiblement à une quarantaine de pixels du bord !
C'est en début de page avec seulement 4 class CSS invoquées devant ce qui veut dire que c'est relativement simple à ce stade ; cette situation est d'ailleurs corroborée par Kompozer qui me confirme les class intéressées.

Pour autant, quelles que soient les valeurs (mêmes excessives) que j'ai pu mettre, rien n'y fait !!

Voici l'adresse du site : http://www.ainesruraux22.org/finistere/
Plus bas, je donne la CSS concernée.
Merci d'avance de vos indications qui devraient m'être précieuses.
@bientôt RJL9512

Code:
body
   {
   background-image:url(images29/fondcorpswww29.jpg);
   background-repeat: repeat;
   color:blue;
   font-family: verdana, helvetica, arial, sans-serif ;
   font-size: medium;
   line-height: 200%
   }
p
   {
   font-size: 12px;
   }
.colgch
   {
   position: absolute;
   left:0;
   top:0;
   width:132px;
   height: 200%;
   background-image:url(images29/fondmenu29.jpg);
   background-attachment:repeat;
   z-index: 3;
   }
.colgchbis
   {
   position: absolute;
   left:0px;
   top:0;
   width:132px;
   margin:auto;
   z-index: 4;
   }
.centrage
   {
   text-align: center ;
   }
.logo
   {
   position:top center;
   margin-left:auto;
   margin-right:auto;
   text-align: center ;
   width:96%;
   height:96%;
   }
.imghv
   {
   width:340px;
   height:255px;
   }
.imght
   {
   width:255px;
   height:340px;
   }
.imghvs
   {
   width:450px;
   height:299px;
   }
.imghts
   {
   width:299px;
   height:450px;
   }
.menu
   {
   font-size: xx-large;
   line-height:200%;
   }
.menucorps
   {
   font-size:80%;
   width:130px;
   left:0;
   line-height:80%;
   display:block;
   }
.navigation li
   {
   text-decoration: none;
   width:128px;
   border: 1px solid #600 ;
   margin-bottom: 1px ;
   margin:auto;
   list-style-type:none;
   }
.navigation li a
   {
   display: block;
   font-size: 1.1em;
   margin-bottom: 1px;
   line-height: 160%;
   }
.navigation a:link
   {
   text-decoration: none;
   color: #0099cc
   font-style: italic;
   }
.navigation a:hover
   {
   text-decoration: underline;
   color: green;
   }
.navigation a:visited
   {
   color:#b0171f;
   text-decoration: none;
   }
.navigation a:focus
   {
background-color: #FFCC66;
   }
.navigation a:active
   {
background-color: #FFCC66;
   }
.cotarm
   {
   text-align: center;
   width: 60%;
   }

.colreg29accueil
   {
   position:absolute;
   top: 0;
   left:133px;
   margin: 0;
   padding :0;
   float:right;
   width:86%;
   margin:auto;
   z-index: 7;
   }
.colreg29bis
   {
   position:absolute;
   top: 0;
   left:160px%;
   margin: 0;
   padding :0;
   float:right;
   width:84%;
   margin:auto;
   z-index: 7;
   }
.colreg0
   {
   position:absolute;
   top:0px; left:133px;
   margin: 0;
   padding:0;
   width:75%;
   background-image:url(images29/fondcorpswww29.jpg);
   background-repeat: repeat;
   height: 800px;
   background-attachment:fixed;
   z-index: 5;
   }
.colreg
   {
   position:absolute;
   top: 0;
   left:160pxpx;
   margin: 0;
   padding :0;
   float:right;
   width:75%;
   margin:auto;
   z-index: 6;
   }
.colreg29
   {
   position:absolute;
   top: 0;
   left:160px;
   margin-left:0;
   padding :0;
   float:right;
   width:80%;
   margin:auto;
   z-index: 7;
   }
.titre_fede
   {
   width:75%;
   height:75%;
   margin-left:9em;
   }
.colmil
   {
   width: 49%;
   float: left;
   font-size: 1.5em ;
   text-align: left;
   padding-top: 1.9em;
   }
.accueil
   {
   font-size: 1.6em;
   padding-left: 4%;
   }
.accueil2
   {
   font-size: 0.65em;
   width:95%;
   font-weight:bold;
   }
.bloc-adr
   {
   display: block;
   color:navy;
   font-size: 0.75em;
   padding-top: 1.3em;
   padding-left: 6%;
   text-align: left;
   font-weight:bold;
   }
.tel
   {
   font-size: 0.7em;
   color:navy;
   text-align: center;
   padding-top: 1em;
   }
.coldrtrectif
   {
   width: 49%;
   float: right;
   font-size: 1.5em ;
   text-align: left;
   padding-left: 0px;
   padding-top: 0.75em;
   }
.coldrt
   {
   width: 47%;
   float: right;
   font-size: 1.0em ;
   text-align: left;
   padding-left: 0px;
   padding-top: 0.75em;
   }
.depart
   {
   margin-top:1em;
   width:90%;
   height:90%;
   }
.symbole
   {
   width:25%;
   text-align: center;
   }
img.centrimg
   {
   display:block;
   margin-left:auto;
   margin-right:auto
   }
.colreg2 { float:right; font-size: 130%}
.colreg 3
   {
   float:left;
   width:85%;
   white-space:normal;
   text-align:justify;
   }
.centered
   {
   padding-top:1.2em;
   text-align: center;
   width:90%;
   }
.centered2
   {text-align:center;
   font-size:1.5em;
   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
   {
   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;font-weight: bold; padding-bottom: 0.4em; }
thead {font-weight: bold; font-size: 1.0em; text-align: center;
border:1px;
}
tbody
   {
   border:1px solid black;
   background-color:#ffffc0;
   font-size: 0.9em;
   font-weight: lihgter
   }
th
   {
   font-size:120%;
   text-align:center;
   }
td
   {
   border:1px solid black;
   font-weight:lighter;
   font-size:100%;
   }
table
   {
   height:200%;
   width:100%;border:1px solid black;
   }
th, td
   {
   border:1px solid black;
   }
caption
   {
   font-weight:bold;
   font-size:150%;
   line-height:200%
   }
.navigcant
   {
   text-align:center;
   width:2%;
   vertical-align:middle;
   }
.vertical
   {
   vertical-align:middle;
   }
.colsect
   {
   text-align:right;
   vertical-align:middle;
   }
.colsecta
   {
   border:1px solid black;
   font-size:1.0em;
   font-weight:bold;
   text-align:right;
   width:10%;
   }
.colsectb
   {
   border:1px solid black;
   font-size:1.0em;
   font-weight:bold;
   text-align:left;
   width:11%;
   }
.colsectc
   {
   border:1px solid black;
   font-size:1.0em;
   font-weight:bold;
   font-weight:center;
   text-align:left;
   width:9%;
   }
.colsectd
   {
   border:1px solid black;
   font-size:1.0em;
   text-align:left;
   font-style: italic;
   width:17%;
   }
.calenmicro
   {
   text-align:center;
   width:2%;
   vertical-align:middle;
   }
.soft
   {
   font-size:1.1em;
   }
.soft2
   {font-size:0.9em;
   }
.coldouble
   {
   width:30%;
   }
.colsimple
   {
   width:15%;
   }
.petcap
   {
   font-variant:small-caps;
   }
.colpetit
   {
   width:2.5%;
   }
.coldoubl4
   {
   width:44%;
   }
.colsimpl4
   {
   width:20%;
   }
.col27
   {
   width:27%;
   }
.col23
   {
   width:23%;
   }
.colcomplem
   {
   width:38%;
   }
.colprenom
   {
   font-weight:bold;
   }
.colnom
   {
   font-weight:bold;
   }
.coldate
   {
   font-size:0.7em;
   text-align:center;
   width:6%;
   }
.colcommune
   {
   font-size:1.0em;
   font-weight:bold;
   text-align:left;
   width:15%;
   }
.colbureau
   {
   text-align:right;
   font-weight: 200;
   font-size:0.7em;
   width: 8%
   }
.colfonction
   {
   font-weight:normal;
   }
.colcanton {
   font-weight:normal;
   }
.colmil60 { width: 60%; float: left; font-size: 1.0em ; text-align: left; padding-top: 0.9em; }
.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
   {
   font-size:150%;
   padding-left:5%;
   padding-top: 1.2em;
   }
.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
   {
   font-size:x-large;
   padding-left:5%;
   }
.cadre4 {font-size: large;}
.cadre5
   {
   font-size: x-large;
   }*/

« Dernière Édition: le 13-05-2009 a 09:50:32 par rjl »

Rapporter au modérateur

Re:Colonne (menu) refusant de se cadrer
« Répondre #1 sur: le 12-05-2009 a 14:57:13 »

Lilian
Administrateur

Hors-Ligne

Sexe: Male

Messages: 3209

Bonjour,

En fait vous avez un padding-left:40px qui vient poser problème.

Dans votre class navigation, il suffit de rajouter un padding-left:0; ou bien alors un padding-left:x px en fonction de la taille souhaitée.

Rapporter au modérateur

Re:Colonne (menu) refusant de se cadrer
« Répondre #2 sur: le 12-05-2009 a 21:05:35 »

rjl
Membre récent

Hors-Ligne

Sexe: Male

Messages: 24

Bravo et merci Lilian,

C'est corrigé et c'est super ! Néanmoins ça me gène de pas avoir trouvé ce qui causait le décalage !
J'ai recherché et contrôlé tous les padding dont quelques-uns à gauche (en %) mais ne correspondant en rien aux class concernées ! D'ailleurs, je suis tout en début de page avec le menu en colonne gauche et n'ai que 4 class citées à ce stade !
J'ai donc créé une class strictement navigation et lui ai imposé un padding-left: o; et tout s'est recalé cf. http://www.ainesruraux22.org/finistere/
Le pire c'est que j'avais tenté cette manip mais avec marge à zéro... ce qui n'est manifestement pas la même chose !
Alors, je reverrai ces 2 paramètres mais de manière plus cool !
Encore merci

Rapporter au modérateur

Re:[Réglé] Colonne (menu) refusant de se cadrer
« Répondre #3 sur: le 12-05-2009 a 21:14:11 »

Lilian
Administrateur

Hors-Ligne

Sexe: Male

Messages: 3209

De rien avec plaisir ! Ce n'était pas grand chose

Un petit conseil de Webmaster averti ... il faut pas hésiter à utiliser Firefox et FireBug qui vous simplifiera énormément la tache !

« Dernière Édition: le 12-05-2009 a 21:14:38 par Lilian »

Rapporter au modérateur

Re:[Réglé] Colonne (menu) refusant de se cadrer
« Répondre #4 sur: le 13-05-2009 a 09:57:44 »

rjl
Membre récent

Hors-Ligne

Sexe: Male

Messages: 24

De rien pour vous mais beaucoup pour moi
Je me suis servi de la leçon sur un second site où je suis bénévole (et qui abrite d'ailleurs celui que j'avais soumis qui lui est en fin de construction) : http://www.ainesruraux22.org/
Je note pour FireFox et FireBog ; j'avais aperçu ces 2 noms par le passé sasn m'y investir... Je constate que c'est un tort car il existe bien des outils qui permettent d'avancer plus vite et simultanément d'apprendre.
@une prochaine et encore merci.
RJL9513

Rapporter au modérateur

Re:[Réglé] Colonne (menu) refusant de se cadrer
« Répondre #5 sur: le 13-05-2009 a 13:31:20 »

Lilian
Administrateur

Hors-Ligne

Sexe: Male

Messages: 3209

De toute façon : Firebug ... je ne peux plus m'en passer et c'est comme ça que l'on progresse car il a un double effet

Celui d'aider et en plus d'apprendre

Je vais sans doute écrire un petit article sur le blog à ce propos.