Une colonne (UL) refuse de se caler à gauche...

rjl · Message par **rjl** » 11 mai 2009, 12:12

Bonjour,

Il y a bien longtemps que je ne vous avais pas ennuyé avec mes problèmes, mais, là, je sèche !
J'ai en colonne gauche de mon site un menu avec dessous les éléments d'appel aux diverses pages (ou sous-menus).
Cette colonne mord sur la colonne qui est à sa droite et refuse tant de se caler à gauche que de s'élargir.
Evidemment, la CSS ne simplifie pas la lecture d'autant que j'ai ajouté plusieurs notions (div, par exemple) pour tenter d'obtenir le résultat voulu.
Adresse du site : http://www.ainesruraux22.org/
Je joins ici le code de la CSS :

Code : Tout sélectionner

body
	{
	background-color:#ffffc0;
	fixed;
	color:blue;
	font-family: verdana, helvetica, arial, sans-serif ; 
	font-size: medium; 
	line-height: 200%
	}
p
	{
	font-size: 12px;
	}
.colgch 
	{
	float:left; 
	width:14%; 
	margin-left:0;
	margin-right:auto;
	}
.centrage
	{
	text-align: center ;
	}
.logo
	{
	width:84%;
	height:84%;
	}
.imghv
	{
	width:340px;
	height:255px;
	}	
.imght
	{
	width:255px;
	height:340px;
	}	
.menu
	{
	font-size: xx-large;
	line-height:200%;
	}
.menucorps
	{
	font-size:80%;
	width:84%;
	line-height:80%;
	margin:left="0px";
	display:block;
	}
.navigation
	{
	text-decoration: none;
	margin:left="0px";
	padding:left="0px"
	align=left; 
	margin:right="0px";
	list-style-type:none;
	}
.navigation li
	{
	text-decoration: none;
	border: 1px solid #600 ;
	margin-bottom: 1px ;
	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%;
	}
.colreg 
	{
	float:right;
	width:85%;
	}
.titre_fede
	{
	width:75%;
	height:40px;
	margin-left:9em;
	}
.colmil
	{
	width: 50%;
	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:0px solid #6495ed;
}
tbody
	{
	border:1px solid #6495ed;
	background-color:#ffffc0;
	font-size: 0.9em;
	font-weight: lihgter
	}
th 
	{
	font-size:120%;
	text-align:center;
	}
td 
	{
	font-weight:lighter;
	font-size:100%;
	}
table 
	{
	height:200%;
	width:100%
	border-collapse:collapse;
	}
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;
	}
.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%;
	}
.col10
	{
	width:10%;
	font-size:0.7em;
	text-align:center;
	}	
.colcomplem
	{
	width:38%;
	}
.colprenom
	{
	font-weight:bold;
	}
.colnoirgras
	{
	font-weight:bold;
	color: black;
	}
.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;
	}

Merci d'avance de vos indications tant sur le problème, lui-même, que sur l'écritude du code.
@bientôt RJL9511

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10

Message par **chinon37** » 11 mai 2009, 14:44

Bonjour,

Il me semble nécessaire de revoir tous les % de la feuille de style.
Outre le fait que mettre des pourcentages en largeur de menu implique que cette largeur change en fonction de l'écran de visualisation, il me semble que des contradictions existent entre les pourcentages des différents éléments.

Ainsi avec Firefox et un écran de 19":
si je n'ai pas de colonne de gauche firefox apparente (historique ou marque-pages), le menu s'affiche correctement (affichage de la fenêtre de visualisation de la page: 1275 x 855)
Si par contre la colonne marque pages (ctrl+B) est ouverte, la fen^tre de visualisation de la page n'est plus que de 1078 x 855 et les textes du menu dépassent des cadres à eux réservés...
Je serais d'avis de mettre le menu en largeur fixe, donc indépendante de la taille de l'écran.

Oui, il y a des div qui n'ont aucune utilité, comme celui destiné à centrer le texte du menu. Une classe appliquée aux éléments idoines doit être suffisante.

rjl · Message par **rjl** » 11 mai 2009, 17:04

Bonjour chinon37 et merci de ta réponse.

J'ai essayé de l'exploiter au mieux en faisant différents essais.
J'ai constaté que le menu en largeur fixe (j'ai opté pour 132 px) avait certes un avantage sur la stabilité apparente mais, le problème majeur subsiste ce qui signifie que mes rubriques de menu sont toujours décalées vers la droite !
Bien sûr, j'ai essayé de les stabiliser comme le menu... Ce serait bon en largeur... mais, décalées à droite, elles débordent d'autant de leur colonne !!!
J'ai même essayé de supprimer le marquee mais c'est sans effet et je l'ai réinjecté !
Pour ne pas mettre trop de bazar dans mes pages (le site 22 Côtes d'Armor" est actif depuis 10 mois, j'ai fait ces essais sur le Finistère qui est en instance de publication (je l'héberge très temporairement sur le même site sachant qu'ils ont aussi leur propre hébergeur) !
Pour l'instant, même si ça change peu sur mon problème, je me suis arrêté sur le choix suivant : Partie gauche en largeur fixe 132px au lieu de 84%,
"Marquee" démarrant à 133px avec largeur 86%.
Certes le centrage serait discutable pour le menu mais il s'applique à l'ensemble de la colonne gauche.
Pour mon décalage du menu, je ne trouve rien : ni cadrage gauche, ni padding, ni marge !!!
Le site est pour cet essai http://www.ainesruraux22.org/finistere/
Quand à la CSS, elle a évolué en parallèle :

Code : Tout sélectionner

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:0; 
	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;
	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%;
	}
.colreg0
	{
	position:absolute;
	top:0px; left:133px;
	margin: 0;
	padding:0;
	width:86%;
	background-image:url(images29/fondcorpswww29.jpg);
	background-repeat: repeat;
	height: 800px;
	background-attachment:fixed;	
	z-index: 5;
	}
.colreg 
	{
	position:absolute;
	top: 0;
	left:133pxpx;
	margin: 0;
	padding :0;
	float:right;
	width:86%;
	margin:auto;
	z-index: 6;
	}
.colreg29 
	{
	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:133px%;
	margin: 0;
	padding :0;
	float:right;
	width:86%;
	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;
	}*/

Merci de l'appui
@bientôt RJL9511

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10

Geckozone

Une colonne (UL) refuse de se caler à gauche...

Une colonne (UL) refuse de se caler à gauche...

Qui est en ligne ?