Comportement Internet explorer

[Vicotr]

Bonjour,
J'ai un petit souci de mise en page de mon site.
Le rendu sur Mozillla est correcte mais pas avec IE
Sur IE les modules de droite de ma page d'accueil se repositionnent en dessous de mes articles.

https://fo-solea.fr/

J'ai aussi d'autres petits problèmes à régler si une personne pouvait m'aider à résoudre l'ensemble de ses points.

A savoir que j'utilise le template protostar-eighteen

1.Je cherche à savoir dans quel fichier modifier la couleur des boutons du menu au survol (comportement # des couleurs du menu dans IE)
Au survol police en blanc sur fond blanc !!!
2.Je cherche également à fixer et à redimensionner l'image intitulé "Flash Info" que j'ai rattaché à mon titre en comportement responsive.

[pmleconte]

Bonjour,

IE : mais qui utilise encore IE aujourd'hui ? OK, c'est du mauvais esprit de ma part, mais, c'est samedi, on s'amuse.....

Donc, pour votre 1er problème, vous utilisez un image d'arrière-plan (background-image) pour votre "Flash Info" et vous avez mis dans votre fichier user.css en ligne 208 : background-position-x: 75%! important;

Cela fonctionne correctement jusqu'aux écrans en 1024x768 (écran 15'). En dessous, votre image passe sur le texte.

Pour fonctionner en mode responsive, il faut redéfinir la position. Donc, essayez d'ajouter dans votre user.css, une commande du style :

@media all and (min-width:760px) {
background-position-x: right! important;
}

Cela poussera votre image vers la droite sur les écran plus petit. Il faut naturellement faire plusieurs essais pour trouver la min-width idéale.

Au niveau du 2éme problème, c'est un peu plus compliqué, car IE ne supporte pas la commande gradient (voir https://css-tricks.com/css3-gradients/). Vous utilisez cette commande pour l'image de fond du menu (user.css ligne 224) dans la définition de la classe .navigation. Pour l'instant, je sêche un peu pour trouver une solution,...

Pascal

[pmleconte]

En cherchant un peu plus, on doit pouvoir utiliser les commandes

<!--[if lt IE 9]>

que vous utilisez déjà dans votre fichier index.php pour intégrer un code CSS compatible avec IE : https://css-tricks.com/how-to-create...ly-stylesheet/

Dans un fichier css externe à mettre dans votre répertoire templates/protostarplus-eightteen/css, par exemple ie-only.css, et à ajouter dans votre index.php.
Vous avez déjà une commande

<!--[if lt IE 9]><script src="/media/jui/js/html5.js"></script><![endif]-->

, donc vous pouvez ajouter

<link rel="stylesheet" type="text/css" href="css/ie-only.css" />

Votre fichier ie-only.css devra contenir quelque chose comme :

.navigation: { background : none !important}

Je n'ai pas testé, mais cela devrait fonctionner.

Pascal

[Vicotr]

Bonjour et déjà merci de t'être penché sur mon sujet.
Si j'ai bien compris ta réponse concernant mon image "Flash info" suite à ce code. On indique que toutes les images seront poussées à droite lorsque l'écran passera sur une taille inférieure à 760px ?

Le souci est que la taille de l'image reste constante pour se placer correctement.
Il n'y a pas moyen de lui adjoindre une image de substitution de taille plus réduite quand on est en deça de 760px ?
C'est une réflexion que je me pose !

Concernant le background principal, le problème proviendrait du dégradé rouge utilisé ?

Pour moins point 1 aurais tu une piste à me soumettre (couleur bouton navigation)?
J'ai du mal à identifier le fichier et les lignes de code à modifier.

Merci par avance

[pmleconte]

Si j'ai bien compris ta réponse concernant mon image "Flash info" suite à ce code. On indique que toutes les images seront poussées à droite lorsque l'écran passera sur une taille inférieure à 760px ?

Effectivement, j'ai fait un peu vite : il faut naturellement conditionner l'affichage et ne faire cette modification que pour l'entête :

[USER="80685"]media[/USER] all and (min-width:760px) {
.blog-featured h1 {
background-position-x: right! important;
}
}

Ce code est à inséré dans votre fichier user.css dans le répertoire templates/protostarplus-eighteen/css.

Le souci est que la taille de l'image reste constante pour se placer correctement.
Il n'y a pas moyen de lui adjoindre une image de substitution de taille plus réduite quand on est en deça de 760px ?
C'est une réflexion que je me pose !

Concernant le background principal, le problème proviendrait du dégradé rouge utilisé ?

Oui, cela ne fonctionne pas sous IE.

Pour moins point 1 aurais tu une piste à me soumettre (couleur bouton navigation)?
J'ai du mal à identifier le fichier et les lignes de code à modifier.

La gestion de la couleur de fond du menu semble actuellement faite dans le fichier index.php du template.

Pascal

[pmleconte]

Le café du matin n'était pas terrible : le code à insérer doit être

@media only screen and (max-width: 760px) { .blog-featured h1 { background-position-x: right! important; } }

[pmleconte]

Vous pouvez y ajouter

text-align: left !important;

pour que le texte soit quant à lui cadrer à gauche.

Vous pouvez aussi ajouter

background-size: 30% !important;

pour réduire la taille de votre image.

[pmleconte]

Concernant le point n°1, je viens de charger votre template et la définition actuelle de la couleur est en ligne 161 (.navigation :....). Cela reprend les couleurs que vous avez définies dans votre template, mais; cela ne fonctionne pas avec IE.

En testant avec ce template, je ne parviens pas à recréer votre problème sour IE.

Quelles valeurs avez-vous dans l'onglet 'Colors' de votre template ?

Pascal

[Vicotr]

Pour l'image intitulé flash, avec votre ligne de code tout est bon

[Vicotr]

J'ai du mal à saisir pourquoi il y a 2 template , 1 nommé template tout court et 1 l'autre 960

[pmleconte]

Attention: au niveau de votre user.css, ligne 210 et suivante, vous avez mis background-position-x: 60%! important; alors que c'était 75% avant. Sur un écran en 1024x768 (écran 15'), l'image écrase le titre.

Au niveau du template 960, est-il assigné à des pages ? cela se voit dans Extensions/templates/Styles, colonne Pages et * jaune si template par défaut.

Pascal

PS: je ne parviens pas à ouvrir votre fichier 'rar', car c'est bloqué par le forum.

[Vicotr]

Toutes mes pages sont assignées template protostarplus-eighteen

[Vicotr]

tous mes autres templates sont note aucune pages assignées

[Vicotr]

protostarplus-eighteen est le template par défaut

[Vicotr]

Comment puis je vous envoyer mes fichiers css pour y jeter un oeil?