Bonjour, bonsoir,

J'ai récupéré le code de Orange qui proposait un tuto pour une fiche rp, seulement j'ai modifié le code et je ne sais pas si c'est dû à cela mais chez mon co-fondateur, la fiche à un bug. une photo expliquera surement mieux que des mots. Voici comment il voit l'image :

Tandis que moi l'image, je la vois correctement,c'est à dire de cette manière :



Je suppose que le soucis vient de moi, ou bien le code n'a pas été fait pour s'adapter aux différentes résolutions de l'écran -il faut noter que j'ai un écran minuscule tandis que lui en a un plus grand- (ou le soucis vient de l'image) en bref je ne sais pas comment régler le soucis... alors je lance un appel à vos talents de codeurs que je n'ai pas (ouh yeah)...

Voici mes codes:

Code CSS:


Code html de la page :

L'image était bien en 600*170 comme noté dans le tutoriel.

Un grand merci d'avance à ceux qui m'aideront  

Alors, ne t'inquiète pas le problème ne sera pas compliqué à résoudre. Juste je ne sais pas si les erreurs viennent de ton code ou du code de la fiche sur CSSActif (pourrais tu me donner le lien du code que tu as pris ?)

Seconde petite chose, pour mettre ton code, pense à le mettre entre les balises code

Code:

[code]Ton code ici :)[/code]

---

Le problème est tout simple : comme la largeur de la fiche n'est pas définie, elle prend le maximum de large possible. La répétition se met en place à cause d'un petit bug.

Première chose :
Dans le code HTML, on a ceci à un moment :

Code:

<div class="cssactif_fiche_header" style="background: url(URL de l'image en taille 600*170);">

</div>

Quand on met l'image, cela va créer par défaut un background qui se répète et qui se positionne en haut à gauche.
Ainsi si je met :

Code:

<div class="cssactif_fiche_header" style="background: url(http://lorempixel.com/600/170/city/);"></div>

Le résultat en CSS sera :

Code:

background: url("http://lorempixel.com/600/170/city/") repeat scroll 0 0 rgba(0, 0, 0, 0);

Beaucoup plus de code que ce que j'ai écrit !

Du coup, ce qui était dans ton CSS pour gérer ça ne fonctionne pas :

Code:

  div.cssactif_fiche_header { /* En-tête avec image de fond */
background-repeat: none; /* Empêche la répétition de l'image du header */
background-position: top center; /* Postionne l'image du header en haut, au center */

Le code qu'on a mis directement avec notre image le surpasse
Il y a d'ailleurs une petite erreur, ce n'est pas background-repeat: none; mais background-repeat: no-repeat; (il faut corriger cela)

Solution ? Au lieu de définir dans le html un nouveau "background", nous allons définir un nouveau "background-image"

Code:

<div class="cssactif_fiche_header" style="background-image: url(http://lorempixel.com/600/170/city/);">

</div>

L'image arrêtera donc de se répéter, mais tu auras de l'espace vide sur les côtés du coup chez certains. Tu peux laisser comme ça si tu le souhaites, sinon il y a 2 solutions possibles.
La plus simple est de définir une largeur à ta fiche comme ceci :

Code:

div.cssactif_fiche {
    width: 600px; /* largeur de la fiche */
}

Comme ça ta fiche aura toujours la même largeur.

Dis moi si je ne suis pas claire sur certains points

Ooh pardon pour les balises "code" ... j'y ai pensé mais j'ai mécaniquement renoté "spoiler" comme au dessus

Sinon pour la fiche, c'est celle-ci http://www.css-actif.com/t11272-rpg-fiche-personnage-avec-banniere?highlight=Rechercher+++++fiche

L'explication est compliquée mais j'ai réussi à m'en sortir, merci beaucoup !!

Soucis résolu du coup ^^