Positionner une image en arrière-plan pour un QEEL

[Ishtar]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Hello!

En suivant un tutoriel sur un autre forum, je suis arrivée à créer mon QEEL, mais un petit problème subsiste. J'aimerais arriver à insérer une image en arrière-plan, hors ça ne fonctionne pas. J'ai regardé sur le FDF, mais soit je ne trouve pas ce que je dois modifier, soit ça ne change rien ou ça détruit carrément le QEEL. Alors, si possible, j'aimerais bien avoir un petit coup de pouce pour trouver où mettre cette image!

Voici donc la partie concernée du template:

Code:

<!-- BEGIN disable_viewonline -->

       
         
         
         
<!--
=================================
PERSONNALISATION DU QUI EST EN LIGNE
====================================
Code proposé par Sayuri
Corrigé par CSSActif
====================================
-->
<div class="QeelPerso">
  <div class="ImgQeel">
      <!-- BEGIN switch_viewonline_link -->
        <a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></a>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
        <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" />
      <!-- END switch_viewonline_nolink -->
  </div>
 
<table width="100%" border="0" cellspacing="5" cellpadding="5" align="center">
<tr>
<td colspan="2" align="center">
<span class="groupe1">If everyone cared</span>
<span class="groupe2">How to save a life</span>
<span class="groupe3">Welcome to my life</span>
<br>
<span class="groupe4">Smooth Criminal</span>
<span class="groupe5">I'm bad like Jesse James</span>
<span class="groupe6">Love for Sale</span>
<span class="groupe7">Sharp-Eye</span>
</td>
</tr>

<tr>
<td width="50%" valign="top" align="center" class="statistiques">
<div class="BlocStats">
<span class="gensmall">
               
               
               
Philadelphie, la ville de l'amour fraternel,

               
<!-- NOMBRE TOTAL DE MEMBRES ENREGISTRÉS SUR LE FORUM -->               
<span id="matt">{TOTAL_USERS}. </span><script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"abrite");</script>
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membres enregistrés/,"habitants");</script>
            
            
<!-- NOMBRE DE MESSAGES POSTÉS SUR LE FORUM -->             
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membre enregistré/,"habitant");</script> <span id="kumao">Ils ont la langue bien pendue, <span id="bert">{TOTAL_POSTS}</span>
<script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/,"car ils ont ").replace(/messages/," paroles échangées. ");</script>
            
            
<!-- DERNIER MEMBRE INSCRIT SUR LE FORUM -->             
<span id="yosh">{NEWEST_USER}. </span>
<script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"La dernière personne à avoir déménagé ses pénates en ville est"); </script>
            
         
Ne vous inquiétez pas, les forces de l'ordre l'auront à l'oeil!
            
            
<!-- NOMBRE TOTAL DE PERSONNES PRÉSENTES SUR LE FORUM -->             
<span id="celine">{TOTAL_USERS_ONLINE}</span>
<script type="text/javascript">document.getElementById('celine').innerHTML=document.getElementById('celine').innerHTML.replace(/Il y a en tout/,"Il y a présentement").replace(/utilisateur en ligne/,"personne dans les rues de Philly dont").replace(/utilisateurs en ligne/,"personnes dans les rues de Philly dont").replace(/Enregistré(s?)/,"citoyen$1").replace(/Invisible(s?) et/,"criminel$1 et").replace(/Invité(s?)/,"voyageur$1.</center>");</script>
   
               

   
 
<!-- NOMBRE RECORD DE PERSONNES CONNECTÉES EN MÊME TEMPS SUR LE FORUM | PRÉSENTEMENT EN LIGNE -->
<span id="connectes">{RECORD_USERS}.</span>
<script type="text/javascript">document.getElementById('connectes').innerHTML=document.getElementById('connectes').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de/,"Le record de visiteurs dans les rues de notre belle cité est de");</script>
               

<br><br>
 

<!-- NOMS DES MEMBRES CONNECTÉS SUR LE FORUM -->
<span id="alpha">{LOGGED_IN_USER_LIST}</span>
<script type="text/javascript">document.getElementById('alpha').innerHTML=document.getElementById('alpha').innerHTML.replace(/Utilisateurs enregistrés :/,"Sont présentement sous surveillance: ");</script>

<br>
 
 
 
 
               
               
</span>
</div>
</td>
       
<td width="50%" valign="top" align="center"  class="statistiques">
<div class="BlocStats">
<table class="DeBug">

 

<table id="kaboum">


 
<!-- MEMBRES CONNECTÉS DURANT LES DERNIÈRES 48 HEURES --> 
{L_CONNECTED_MEMBERS}</table>
<script type="text/javascript">
jQuery('#kaboum span.gensmall').html(jQuery('#kaboum span.gensmall').html().replace('Membres connectés au cours des 48 dernières heures :','Suspects aperçus durant les dernières 48 heures: '));
</script>
             
             
            </div>
        </td>
      </tr>
  </table>
</div>
<!--
=================================
PERSONNALISATION DU QUI EST EN LIGNE (fin)
====================================
-->
         
         
         
         
  <!-- END disable_viewonline -->

Et le CSS concerné:

Code:

/* =================================
PERSONNALISATION DU QUI EST EN LIGNE
====================================
Code proposé par Sayuri
Corrigé par CSSActif
==================================== */
/* conteneur du QEEL */
.QeelPerso {
border: 0px dotted #0E070F; /* bordure : épaisseur style couleur */
padding: 10px 5px; /* espacement du contenu par rapport à la bordure */
background-color: #CodeCouleur; /* couleur de fond */
/* coins arrondis (tous navigateurs) */
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;}



/* Centrage image du QEEL */
.ImgQeel {text-align: center;
background-image : url("lien de votre image");
background-repeat : no-repeat;
background-position : top center;}


/* Retirer un fond gênant derrière les "connectés durant les dernières X heure" */
#plop .row1{background:none;}



/* Apparence des groupes */

/* IF EVERYONE CARED */
.groupe1 {
color: #96000F !important;
font-family: Arial;
font-size: 16pt; /* taille du texte */
font-weight: normal; /* épaisseur du texte */
font-style: none; /* texte en italique */
text-transform: uppercase; /* texte en majuscules */
text-decoration: none !important; /* pas de soulignement du lien */
letter-spacing: -1px; /* espacement des lettres */
padding-left: 2px;
padding-right: 2px;
text-shadow: 2px 2px 1px #CodeCouleur;}


/* HOW TO SAVE A LIFE */
.groupe2 {
color: #008A7A !important;
font-family: Arial;
font-size: 16pt; /* taille du texte */
font-weight: normal; /* épaisseur du texte */
font-style: none; /* texte en italique */
text-transform: uppercase; /* texte en majuscules */
text-decoration: none !important; /* pas de soulignement du lien */
letter-spacing: -1px; /* espacement des lettres */
padding-left: 2px;
padding-right: 2px;
text-shadow: 2px 2px 1px #CodeCouleur;}


/* WELCOME TO MY LIFE */
.groupe3 {
color: #003DB8 !important;
font-family: Arial;
font-size: 16pt; /* taille du texte */
font-weight: normal; /* épaisseur du texte */
font-style: none; /* texte en italique */
text-transform: uppercase; /* texte en majuscules */
text-decoration: none !important; /* pas de soulignement du lien */
letter-spacing: -1px; /* espacement des lettres */
padding-left: 2px;
padding-right: 2px;
text-shadow: 2px 2px 1px #CodeCouleur;}


/* SMOOTH CRIMINAL */
.groupe4 {
color: #6B00C2 !important;
font-family: Arial;
font-size: 16pt; /* taille du texte */
font-weight: normal; /* épaisseur du texte */
font-style: none; /* texte en italique */
text-transform: uppercase; /* texte en majuscules */
text-decoration: none !important; /* pas de soulignement du lien */
letter-spacing: -1px; /* espacement des lettres */
padding-left: 2px;
padding-right: 2px;
text-shadow: 2px 2px 1px #CodeCouleur;}


/* I'M BAD LIKE JESSE JAMES */
.groupe5 {
color: #CC4700 !important;
font-family: Arial;
font-size: 16pt; /* taille du texte */
font-weight: normal; /* épaisseur du texte */
font-style: none; /* texte en italique */
text-transform: uppercase; /* texte en majuscules */
text-decoration: none !important; /* pas de soulignement du lien */
letter-spacing: -1px; /* espacement des lettres */
padding-left: 2px;
padding-right: 2px;
text-shadow: 2px 2px 1px #CodeCouleur;}


/* LOVE FOR SALE */
.groupe6 {
color: #109C03 !important;
font-family: Arial;
font-size: 16pt; /* taille du texte */
font-weight: normal; /* épaisseur du texte */
font-style: none; /* texte en italique */
text-transform: uppercase; /* texte en majuscules */
text-decoration: none !important; /* pas de soulignement du lien */
letter-spacing: -1px; /* espacement des lettres */
padding-left: 2px;
padding-right: 2px;
text-shadow: 2px 2px 1px #CodeCouleur;}


/* SHARP-EYE */
.groupe7 {
color: #A8007B !important;
font-family: Arial;
font-size: 16pt; /* taille du texte */
font-weight: normal; /* épaisseur du texte */
font-style: none; /* texte en italique */
text-transform: uppercase; /* texte en majuscules */
text-decoration: none !important; /* pas de soulignement du lien */
letter-spacing: -1px; /* espacement des lettres */
padding-left: 2px;
padding-right: 2px;
text-shadow: 2px 2px 1px #CodeCouleur;}




/* Mise en forme des cellules de statistiques */
.statistiques {
padding: 10px;
margin: 10px;
text-align: justify; /* alignement texte */
/* coins arrondis */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;}



/* Limitation en hauteur des blocs de statistiques */
.BlocStats {
font-size: 10px !important;
overflow: auto;
max-height: 200px; /* hauteur maxi */}

/* Debuggage : on retire le fond de la liste des dernières 24h */
.DeBug td.row1 { background: none; }

/* =================================
PERSONNALISATION DU QUI EST EN LIGNE (fin)
==================================== */ 

Si jamais j'ai oublié quelque chose, il suffit de le dire! Merci d'avance à ceux qui se pencheront sur mon problème! ^^

[Invité]

Salut Ishtar ,
ceci devrait faire l'affaire :

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Code:


.QeelPerso
{
background-image:url(LE LIEN DE L IMAGE);
background-repeat:no-repeat;
background-position:center center;
}


Penses à cliquer sur le bouton

a++

[Ishtar]

Salut Milouze!

Tout d'abord, je te remercie de t'être penché sur mon problème!

Sinon, avec le code que tu m'as donné, l'image se place bien à l'arrière, mais ça occasionne un autre pépin, elle est comme "tronquée". Pour résumer, j'ai fait une image asymétrique (la voici) et bien qu'elle se place derrière le QEEL comme elle doit l'être, elle n'a pas du tout l'aspect souhaité. Une idée du pourquoi? Et peut-être une idée de comment fixer ça?

Mais merci encore!

[Invité]

Re,

il faut attribuer une largeur et une hauteur au conteneur en l'occurrence ici :

Code:

.QeelPerso

Tu devras donc avoir ceci:

Code:


        /* conteneur du QEEL */
        .QeelPerso {
  background-image:url(http://img4.hostingpics.net/pics/749638FondQEEL.png);
background-repeat:no-repeat;
        border: 0px dotted #0E070F; /* bordure : épaisseur style couleur */
        padding: 10px 5px; /* espacement du contenu par rapport à la bordure */
    width:840px;
    height:340px;
        /* coins arrondis (tous navigateurs) */
        -moz-border-radius: 0px;
        -webkit-border-radius: 0px;
        border-radius: 0px;
}


a++

[Ishtar]

Ah d'accord! Je comprends tout maintenant! Ça ne pouvait bien pas fonctionner quand j'essayais de mettre l'image plus tôt! ^^ C'est donc résolu, je vais l'indiquer de ce pas!

Merci beaucoup pour le coup de pouce! ^^