Bonjour/bonsoir à tous !   

Je reviens vers vous une nouvelle fois pour vous demander de l'aide au sujet d'un petit problème que je n'arrive pas à résoudre (car ne sachant même pas s'il existe solution au shmilblick) malgré mes recherches/essais de ces derniers jours.

Je m'explique !
J'ai décidé d'ajouter des images un peu disséminées partout sur la page d'accueil de mon forum pour ajouter quelques détails sympathiques. Jusque là, aucun problème et tout fonctionne parfaitement.

Le soucis viens de l'affichage différent selon les navigateurs. J'ai testé mon forum sur 4 navigateurs différents :

Firefox :


Opéra :


Chrome :


Safari :


Comme on peut voir, sur Chrome et Safari, on trouve une différence de quelques pixels, décalant l'image vers le bas (j'imagine que c'est parce qu'il y a des espaces/marges ignorées par certains navigateurs et non par d'autres qui font que le forum n'est pas à la même hauteur partout) . Je souhaiterai que les images s'affichent toutes au même niveau (à la manière de Firefox et Opéra) sur tous les navigateurs.

Existe-t-il une variable CSS me permettant de régler la position de l'image en personnalisant pour chaque navigateur ?

Je n'ai intégrée l'image directement dans le code du titre du forum car elle se répéterait lors de la navigation dans le dit forum, hors je souhaite qu'elle n'apparaisse que sur la page d'accueil.

Je vous donne le CSS lié à mon image (elle se trouve dans la template index_body) :

Code:

.imgsnow2 {
margin-left: 380px;
margin-top: 648px;
position: absolute;
}

Merci beaucoup à ceux qui ont pris la peine de me lire !   
Si il y a besoin d'autres détails ou quoi que ce soit qui pourrait vous aider à résoudre ce problème je vous donnerai tout ce qu'il faudra !

Si la question a déjà été posée avant moi je m'excuse platement. J'ai fais une recherche sur le forum mais mes yeux ne sont pas infaillibles, j'ai pu passer à côté de quelque chose...   

Bonne journée/soirée !

Bonjour Gigi,

Pourrais tu me fournir le lien du forum concerné pour m'aider à mieux voir tout cela s'il te plait ? (cela n'est peut être pas dû qu'à ce code CSS là)

Merci pour ton intérêt !   
Je t'envoie le lien du forum via mp.

Si tu veux la prochaine fois tu peux mettre ton lien sous la balise hide, comme ça seules les personnes qui postent dans cette conversation (et les modos) peuvent voir le lien.

---

Si je comprends bien, tu as mis les images dans ton template, et ensuite en CSS tu les places manuellement, en les décalant vers le bas et vers la droite.
Le point de départ (si j'enlève les marges) ici est la partie en haut à gauche de ta Page / Panneau d'accueil.
D'où vient le décalage de positionnement ? Tout simplement de la PA : si tu fais une screenshot en comparant les 2, tu verras qu'elles ne font pas exactement la même hauteur, il y a environ 9~10 px de différence . Ca vient du fait que tous les navigateurs ne gèrent pas tout exactement de la même façon, et il est difficile d'avoir du "pixel perfect" !
Du coup ces 9~10px en haut crée un décalage, vu que tu décales tes images "en dur" : si tu modifies un truc dans le forum, il faut replacer manuellement chaque image, ce qui n'est pas vraiment pratique.

Une idée pourrait être de placer les images directement dans le CSS (exemple de positionnement)

Code:

.secondarytitle h2:after {
    background: url("http://i.imgur.com/HwwZmmP.png") no-repeat;
    content: "";
    height: 20px;
    width: 255px;
    position: absolute;
    right: 10px;
    top: 5px;
}

.secondarytitle h2 { position: relative;}

Mais il resterait à régler : la gestion du changement de background pour chaque titre + comprendre qu'on est sur la page d'accueil.

Citation :

Je n'ai intégrée l'image directement dans le code du titre du forum car elle se répéterait lors de la navigation dans le dit forum, hors je souhaite qu'elle n'apparaisse que sur la page d'accueil.

Une possibilité : mets les images dans le titre du forum (je sais plus où j'avais vu un tuto pas trop mal sur ce sujet là), et ensuite une fois que ton code marche, je peux te donner un code javascript pour que cela ne le fasse que sur la page d'accueil ^^

Merci pour ta réponse !     
Je vais tester ça !
Sinon je veux bien jeter un oeil au fameux Java dont tu parles, ça m'intéresse beaucoup.

Est-ce que tu as déjà essayé de positionner tes images avec des % ?

Notsaw. qu'entends tu " positionner tes images avec des %" dans ce cas là ^^ ? Là c'est davantage un placement "pixel perfect", il faut que cela coïncide parfaitement avec la ligne en dessous si je ne me trompe pas. Comme la taille du cadre derrière est définie et fixe (elle ne change pas), cela me semble un peu plus simple en pixels, non ^^ ?

J'ai résolu mon problème !   
C'était tout simple en fait : plutôt que de mettre mes images dans le "index_body" je les ai mises dans mon "index_box" (qui démarre après la page d'accueil, donc adios les espaces en trop).

Je tiens à vous remercier vous qui m'avez répondu, ça fait super plaisir, ça m'a aidé à comprendre d'où venait le problème pour mieux le contourner.   
A très bientôt !

Fait gaffe, index-box marche aussi dans les sous forum . Il gère l'affichage des forums, donc les images mises dans ce template là seront aussi dans les sous forum ^^

Ah ouaiiiiis j'avais pas pris ça en compte.   mais quelle nouille je fais. XD
Bon je vais essayer en le mettant directement dans le code du titre du forum.   tu as toujours le java qui permet que ça ne s'affiche que sur la page principale ?

Nihil a écrit:

Notsaw. qu'entends tu " positionner tes images avec des %" dans ce cas là ^^ ? Là c'est davantage un placement "pixel perfect", il faut que cela coïncide parfaitement avec la ligne en dessous si je ne me trompe pas. Comme la taille du cadre derrière est définie et fixe (elle ne change pas), cela me semble un peu plus simple en pixels, non ^^ ?

Autant pour moi   Je sais que sur mon forum quand j'ai des soucis du genre en mettant les tailles en % (par exemple 50% au lieu de 18px, je dis au hasard) les problèmes peuvent se régler au niveau des positionnements qui ne sont pas pareils partout mais j'ai peut-être mal analysé la situation ici

Oui j'ai le code Javascript pour le faire marcher, il y aura juste une petite modification à faire pour le CSS ^^

Voici le code qu'il faudra mettre, en utilisant le module de script javascript de FA, et en l'activant seulement sur l'index du forum :

Code:

$(function() {
    $("body").addClass("home-css"); /* Ajoute la class home-css au body */
});

Quand on sera sur la page d'index, le body (la balise qui contient le contenu du site) aura donc la class "home-css".
Ensuite on va simplement utiliser les sélecteurs CSS, pour que le CSS ne se mette que quand il y a la class "home-css" au body.

Si par exemple dans ton CSS tu as (là je prend un CSS au hasard hein) :

Code:

.forumline { border: 5px solid red; }

Avec notre code, pour que cet effet ne se mette que sur la page d'index on mettra donc :

Code:

.home-css .forumline { border: 5px solid red; }

Le sélecteur .home-css .forumline signifie "la class forumline à l'intérieur d'un élément avec la class home-css".

Tu dois donc modifier ton CSS pour les images de titres de la même manière.
Si tu as du mal, n'hésite pas à me copier / coller ton CSS

Damned, je dois mal faire le truc (c'est pourtant bien expliqué ToT)... il faut que j'ajoute le .home-css sur le CSS lié à mon image ?   

J'ai mis le code de l'image directement dans le titre de mon forum via "catégorie et forum" :

Code:

<img src="http://i.imgur.com/KM8YX3c.png" class="imgsnow2" />Gestion des personnages <span>Gérer et intégrer son personnage</span>

puis dans le CSS :

Code:

.home-css .imgsnow2 {
position:absolute;
  margin-top:-18px;
margin-left:380px;
  }

EDIT : j'ai essayé sur une autre partie de mon CSS (les titres de mes catégories) et ça marche parfaitement bien pourtant ! J'ignore pourquoi ça ne fonctionne pas avec mon code lié à l'image du coup.

Finalement ça fonctionne ou pas ?

Voici comment je ferais moi.

Je rajouterai l'image à l'intérieur des titres comme ceci :

Code:

<img src="http://i.imgur.com/KM8YX3c.png" class="imgsnow2" />Gestion des personnages <span>Gérer et intégrer son personnage</span>

Ensuite, dans le CSS, je masquerai par défaut l'image :

Code:

.imgsnow2 { display: none; }

Ensuite on rajoute le code CSS pour afficher l'image, seulement sur la page d'accueil :

Code:

.home-css .imgsnow2 { display: block; }

Spoiler:

Puis une fois que c'est bon tu peux positionner chaque image comme tu le souhaites ^^

Code:

.imgsnow2 {
    position: absolute;
    right: 100px;
    top: -16px;
}

/!\ Si tu utilises position: absolute, normalement il ne faut pas utiliser les marges pour déplacer (margin-top ou margin-left), mais top, left, bottom ou right.
Ici j'ai remplacé ton code pour qu'il marche de la même manière que l'ancien code CSS.
Attention néanmoins, pour que le position: absolute fonctionne correctement il faut ajouter ceci pour le CSS des titres :

Code:

.secondarytitle h2 { position: relative;}

---

Note : il existe une solution plus propre que de mettre l'image dans le titre directement comme cela, mais par simplicité on gardera ici la technique avec les images dans le titre.

C'est parfait !
J'avais tout simplement oublié le :

Code:

.imgsnow2 { display: none; }

En revanche j'ai gardé les "margin-top" (etc) parce que si je mets simplement "top", ça fait partir l'image du haut du forum (donc on se retrouvait avec le même problème de décalage des 10 px à cause de la PA) alors que là elle semble partir du titre dans laquelle je l'ai placée. En tout cas ça a l'air de très bien marcher !

Je te remercie énormément pour ton aide précieuse !    Ca fait vraiment chaud au coeur, j'aurais jamais réussi à me dépatouiller de mon bazar sans ça.
Merci merci merci ! à bientôt peut-être !   Et bonne journée à toi !

Ok nickel

Code:

En revanche j'ai gardé les "margin-top" (etc) parce que si je mets simplement "top", ça fait partir l'image du haut du forum (donc on se retrouvait avec le même problème de décalage des 10 px à cause de la PA) alors que là elle semble partir du titre dans laquelle je l'ai placée.

En fait pour que le top ne parte pas du haut du forum, il faut penser à mettre "d'où on part".
Pour cela il faut mettre ce code là dans le CSS :

Code:

    .secondarytitle h2 { position: relative;}

Mais après tu fais comme tu veux, comme c'est plus simple pour toi

Si tu as le temps, pourrais tu éditer le titre de ton sujet pour rajouter la mention "Résolu" dedans s'il te plait ?