Contenu | Rechercher | Menus

Annonce

Si vous avez des soucis pour rester connecté, déconnectez-vous puis reconnectez-vous depuis ce lien en cochant la case
Me connecter automatiquement lors de mes prochaines visites.

À propos de l'équipe du forum.

Pages : 1

#1 Le 05/01/2015, à 16:54

dauphin

Firefox est devenu fou

Bonjour à tous
Firefox vient de se mettre à jour et m'a fichu le bazar: suivant les sites l'affichage est trop grand ou trop petit, et certaines images sont décalées! Est-il possible de revenir à une version plus respectueuse de la mise en page des sites?
Merci d'avance

20.04 sur carte Asus M5 et proc AMD64 2000 8GO de Ram
Video et son intégrés

Hors ligne

#2 Le 05/01/2015, à 17:05

ssdg

Re : Firefox est devenu fou

Est-ce que par hasard le problème n'est pas réglé (par site) en allant dans le menu "affichage"> "Zoom" > "Normal"?

s'il n'y a pas de solution, c'est qu'il n'y a pas de problème... ou pas.

Hors ligne

#3 Le 05/01/2015, à 17:31

dauphin

Re : Firefox est devenu fou

Pas vraiment: le texte est minuscule et les photos d'entête de notre site :
ecmlyon.free.fr
sont décalées sur la gauche au lieu d'être centrées par rapport au texte.

20.04 sur carte Asus M5 et proc AMD64 2000 8GO de Ram
Video et son intégrés

Hors ligne

#4 Le 05/01/2015, à 17:46

tiramiseb

Re : Firefox est devenu fou

Salut,

le texte est minuscule

Qu'appelles-tu "minuscule" ?

les photos d'entête de notre site :
ecmlyon.free.fr
sont décalées sur la gauche au lieu d'être centrées par rapport au texte.

Ce site ne centre pas les images par rapport au texte : le code du site fait que celles-ci sont alignées à gauche avec une marge gauche de 220px.

Sébastien Maccagnoni - https://www.maccagnoni.eu - https://www.domotego.com

Hors ligne

#5 Le 05/01/2015, à 18:01

tiramiseb

Re : Firefox est devenu fou

Sinon, pour essayer de résoudre le comportement que tu décris, tu peux essayer de réinitialiser ton profil, en supprimant le répertoire qui le contient :

rm -fr .mozilla/firefox

(attention, ça supprimera tous tes paramètres liés à Firefox)

Sébastien Maccagnoni - https://www.maccagnoni.eu - https://www.domotego.com

Hors ligne

#6 Le 05/01/2015, à 18:13

dauphin

Re : Firefox est devenu fou

Merci tiramiseb,
Hier soir l'image était centrée. Est-ce la résolution de l'écran qui a changé ((je ne me souviens pas si je l'avais modifié avant)? Si c'était le cas, ça expliquerais aussi la taille du texte (environ 2mm de hauteur, difficile à lire, même avec des lunettes!). Je vais chercher dans cette direction.

edit: Je viens de vérifier: c'est bien le code de notre site qui pose problème. Je vais me plonger dans les "media querries" pour essayer de résoudre le problème. Ca ne va pas être simple: je ne connais rien à cette partie du Html5. Enfin on apprend à tout âge!
Par contre je ne vois pas ce qui a pu faire changer la taille des caractères.

Dernière modification par dauphin (Le 05/01/2015, à 18:28)

20.04 sur carte Asus M5 et proc AMD64 2000 8GO de Ram
Video et son intégrés

Hors ligne

#7 Le 05/01/2015, à 18:50

tiramiseb

Re : Firefox est devenu fou

Hier soir l'image était centrée.

Elle était centrée ou alors elle te semblait centrée ? smile

Je vais me plonger dans les "media querries"

Les media queries ne sont pas nécessaires pour centrer des images...

la taille du texte (environ 2mm de hauteur, difficile à lire, même avec des lunettes!)

Je doute qu'un changement de définition d'écran mène à ça, ou alors il faut que tu aies un écran ultra giga HD 4K machin truc...
Tu peux tenter l'histoire du profil si ça ne te dérange pas de perdre les infos stockées par firefox... Mais d'abord, es-tu certain que ton niveau de zoom est bien à 100% ?

Dernière modification par tiramiseb (Le 05/01/2015, à 18:50)

Sébastien Maccagnoni - https://www.maccagnoni.eu - https://www.domotego.com

Hors ligne

#8 Le 06/01/2015, à 08:57

dauphin

Re : Firefox est devenu fou

Bonjour tiramiseb,
Ce matin l'affichage est redevenu normal. Pour le centrage, comment faire plus simplement qu'avec les media queries?

20.04 sur carte Asus M5 et proc AMD64 2000 8GO de Ram
Video et son intégrés

Hors ligne

#9 Le 06/01/2015, à 09:14

papillon41

Re : Firefox est devenu fou

Bonjour dauphin,

La validation de ton site au w3c fait ressortir 52 erreurs.

W3C : Markup Validation Service -> Validation Output: 52 Errors

()Ï() Xubuntu 22.04.2 64bits - AMD A4-3400 sur carte mère MSI A55M-P33 - 4 Go de RAM - ATI HD6410D - 2 SSD 120Go + DD SATA 500Go
Balade à Saint Étienne de Lugdarès
Classification des vins de france
Déclaration, Conventions et Chartes

Hors ligne

#10 Le 06/01/2015, à 09:16

J5012

Re : Firefox est devenu fou

ton css : ecml.css

h1
{
	font-family: Arial;
	font-size: 16pt;
	font-weight:bold;
	/*color: green; */
	text-align: center;
	word-spacing:5px; 
	
}

h1_b
{
	font-family: Arial;
	font-size: 16pt;
	font-weight:bold;
	color: green; 
	text-align: center;
	word-spacing:5px; 
	
}
h2
{
    	font-family: "Times New Roman", Arial;
    	font-weight:bold;
	font-size:18pt;
    	color: black; 
    	text-align:center;
    	/*word-spacing:5px; */
}

h2b
{
    	font-family: "Times New Roman", Arial;
    	font-weight:bold;
    	color: black; 
    	text-align:justify;
    	word-spacing:5px; font-size:18pt;
}
h2_c
{
    	font-family: "Times New Roman", Arial;
    	font-weight:bold;
	color: blue; 
    	text-align:center;
    	word-spacing:5px; font-size:24pt;
}
h2d
{
    	font-family: "Times New Roman", Arial;
	font-size: 18pt;    	
	color: red; 
    	text-align:center;
    	/*word-spacing:5px;*/
}

h3
{
    	font-family: "Times New Roman", Arial;
    	font-weight:bold;
    	color: black; 
    	text-align:center;
    	word-spacing:5px; font-size:16pt;
}

h5
{
    	font-family: "Times New Roman", Arial;
    	font-weight:bold;
    	color: black; 
    	text-align:center;
    	word-spacing:5px; font-size:16pt;
}

h4
{
    	font-family: ""Times New Roman"", Arial;
    	font-weight:bold;
    	color: black; 
    	text-align:justify;
    	word-spacing:5px; font-size:16pt;
}

a
{
    	font-size: 1em;
    	color: #760001; 
    	padding-bottom: 3px;
    	text-decoration: none;
}


a:hover
{
    	color:blue; 
    	border-bottom: 3px solid #760001;
}

aside
{

    	float:left; 
    	width: 200px;
    	background-color: RGBa(248, 248, 200, 0.5); 
    	padding: 10px 1px 1px; /* haut, droite, bas, gauche, */ 
	margin-right: 10px;    	
	border: 9px solid #ffeee2;
        font-size: 0.9em;
    	vertical-align: top;
}

body
{
    	background-color: #ffeee2;
    	font-family: "Trebuchet MS", Arial sans-serif;
    	color: #181818;
}

caption
{
	font-weight:bold;
    	margin-right: 0px;
    	margin-left: 0px;
	padding: 10px; 
    	text-align: center;
	}

figure
{
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}

footer
{
    	background:   url('images/separateur.png') repeat-x top; url('images/ombre.png') repeat-x top;
    	background-color: rgba(240, 255, 255, 0.2);
    	padding-top: 15px;
}

footer p
{
    	font-family: "Times New Roman", Arial;
	font-size: 0.9em;
	/*font-weight:bold;
    	color: black; 
    	text-align:center*/
}

footer h1
{
	font-size: 1.5em;
	text-align:center;
}
	
header
{
   	text-align: center;
}

li
{
	margin-right: 15px;
    	margin-left: 30px; /*10px;*/
    	text-align: left;
}

li2
{
	font-family: "Times New Roman", Arial;
    	color: black; 
    	font-size: 1.3em;   
	margin-right: 15px;
    	margin-left: 10px;
    	text-align:justify; /* left;*/
	list-style-image: none;
}

nav
{
   	float:left;
	display: inline-block;
    	width: 155px;
    	height: 150%;
	background-color: RGBa(248, 248, 200, 0.5);
	padding: 10px 20px 0 0; /*20px 1px 1px; /* haut, 10 droite, bas, gauche, */ 
	margin:0 20 0 0 ;
	border: 9px solid #ffeee2;
	font-size: 0.9em;
    	text-align: left;
    	vertical-align: middle; /*top;*/
}


nav a
{
    	font-size: 1em;
    	color: #760001; 
    	padding-bottom: 3px;
    	text-decoration: none;
}

nav li
{
    	margin-right: 10px;
    	margin-left: 0px;
    	text-align: left;
}

p
{
    	width: 98%;
    	/*height: 150px;*/
   	margin: 1px 1px 5px 30px; /* haut, droite, bas, gauche, */ 
 	font-family: "Times New Roman", Arial;    	
	font-size: 1.3em;
    	text-align: justify;    	/*overflow:auto;center; */
}

p2
{
	font-family: "Times New Roman", Arial;
    	color: black; 
    	font-size: 1.3em;  
	font-weight:bold; 
	text-align: justify; /*center;*/
    }

p3
{
	font-family: "Times New Roman", Arial;
    	color: black; 
    	font-size: 1.3em;  
	font-weight:bold; 
	text-align: center;
    }

p4
{
	font-family: "Times New Roman", Arial;
    	color: black; 
	font-style: italic;
    	font-size: 1.1em;  
	/*font-weight:bold;*/ 
	text-align: center;
    }

section
{
    	display: inline-block;
    	width: 95%;
    	/*border: 1px solid blue;*/
    	vertical-align: top;
    	margin: 1px 10px 10px 220px;  /* haut, droite, bas, gauche, */ 
    	text-align: justify;
}

table
{
	border-collapse: collapse;
	width: 50%; 
	height: 348px;  /*448px; */
	text-align: left; 
	margin-left: auto; 
	margin-right: auto;
	border: none;
}

td, th 
{
	border: 1px solid black;
}

.centre
{
	/*font-size: 20px;*/
	text-align:center;
}

.dessous
{
	clear: both;
}

.em
{
	font-style:italic;
	font-weight:bold;
	/*text-align:center;*/
}
.em1
{
	/*font-style:italic;*/
	font-weight:bold;
	/*text-align:center;*/
}

.em2
{
	font-style:italic;
	font-weight:normal;
	/*text-align:center;*/
}
.em3
{
	font-style:italic;
	font-weight:bold;
	text-align:center;
}
.em4
{
	font-style:normal;
	font-weight:normal;
	text-align:center;
}
.imgflotgauche
{
	padding: 3px;	
	margin: 1px 1px 1px 50px;/*10px;*/
	float: left;
}

.imgflotdroit
{
	padding: 3px;	
	margin: 1px 1px 1px 1px;
	float: right;
}

.italic
{
	font-style:italic;
	/*font-weight:bold;*/
	text-align:center;
}

.justifie
{
	text-align: justify;
}

.moyen-grand
{
	text-align: center;	
	font-size: 14px;
	font-weight:bold;
}

.moyen
{
	font-size: 16px;
	font-weight:bold;
}

.petit
{
	font-size: 16px;
	/*text-align:center;*/
}

.petitdroit
{
	font-size: 16px;
	text-align:right;
}

.rouge
{
	color: red;

}
.salutation
{
	font-weight:bold;
	font-size: 24px;
	/*color: green; */
	text-align:center;
}

.salutationpm
{
	font-weight:bold;
	font-size: 18px;
	/color: black;
	text-align:center;
}

/* Quelques ajustements pour les vieilles versions d'IE */

.old_ie section h1, .ie8 section h1
{
    font-size: 1.1em;
}

.old_ie footer div, .ie8 footer div
{
    margin-top: 30px;
    background: url('images/separateur.png') repeat-x top;
}

on voit que tous les h sauf h4 sont en alignement centrée mais que le texte
pareil pour la balise figure qui centre les element textuels mais pas l'image

mais peut-etre le bug est simplement la faute de syntaxe : dans le code , on voit que la balise fermante figure et section :

</ figure></ section>

au lieu de

</figure></section>

ton code css est aussi rempli de code doublon voire triple ...

Hors ligne

#11 Le 06/01/2015, à 09:46

tiramiseb

Re : Firefox est devenu fou

Je n'aborderai pas en détail les erreurs de CSS, le code crado ou en doublon, etc. Chacun fait ce qu'il peut avec ce qu'il a ; bien sûr le site gagnerait à être "bien" fait mais je comprends que tout le monde ne peut pas tout savoir. Tout cela dans la supposition que le site a été fait par un amateur, probablement impliqué dans l'association en question.
Si toutefois ce site a été fait par un professionnel, il faut s'en séparer...

Deux grosses erreurs tout de même :
=> oui, J5012 a raison, les balises de fermetures ne doivent pas avoir d'espace entre le "/" et le nom de la balise ;
=> il y a un bloc "header" en dehors du body : le body doit contenir l'intégralité de ce qui s'affiche, le header doit donc se situer dans le body.
Heureusement, les navigateurs web arrivent à contourner ces erreurs : Firefox replace la balise <body> avant le <header> et met les bonnes balises de fermeture au bon endroit. C'est pour ça que le site web d'affiche quand même bien. Mais corriger ces deux erreurs est essentiel.

-----

Concernant la problématique du centrage en elle-même, ça se trouve facilement en examinant le code avec les "developer tools" intégrés dans Firefox ou Chrom[e|ium] (touche F12).

Tu as un bloc <figure> dans un bloc <section> dans un bloc <header>. Bon, je passerai sur l'accumulation inutile de blocs, je constate simplement la chose suivante :

- <figure> et <header> ont la propriété "text-align" à "center" (lignes 129 et 158 de ecml.css)
- <section> a la propriété "text-align" à "justify" (ligne 250 de ecml.css)

Pour centrer, il faut :
==> mettre "text-align: center" au bloc "section {" ;
==> réduire la marge de gauche à 10px ou autre valeur faible, selon tes désirs.

Sébastien Maccagnoni - https://www.maccagnoni.eu - https://www.domotego.com

Hors ligne

#12 Le 06/01/2015, à 10:50

dauphin

Re : Firefox est devenu fou

Merci à tous les deux,
Oui, c'est moi qui ai fait cette horrible chose! Je ne connaissais rien à la programmation. J'ai troué un manuel sur internet et j'ai fait comme je pouvais.  Merci pour vos indications, je vais m'atteler à la correction dès demain, aujourd'hui je vais m'absenter.

20.04 sur carte Asus M5 et proc AMD64 2000 8GO de Ram
Video et son intégrés

Hors ligne

Pages : 1