Bonsoir à vous !

Alors, aujourd'hui, surprise : je bloque sur un code tout bête mais qui me donne du fil à retordre et pas qu'un peu ! Voici le code :

Code:

<DIV style="TEXT-ALIGN: center" align=center><SPAN style="FONT-FAMILY:Arial"><FONT face=Georgia size=6>[img]adresse de l'image[/img]
[color=#A56163]blablabla [/color]</FONT></SPAN><BR></DIV>

J'arrive effectivement à superposer le texte à l'image mais lorsque je touche aux couleurs ou même à la taille, tout se lâche... Voyez plutôt :

Code:

<DIV style="TEXT-ALIGN: center" align=center><SPAN style="FONT-FAMILY:Arial"><FONT face=Georgia size=6>[img]http://25.media.tumblr.com/tumblr_la5besLMRm1qzpegzo1_500.gif[/img]
[center][size=24][font=Georgia][color=#BC4E1B]‟TITRE[/color][/font][/size][/center]</FONT></SPAN><BR></DIV>

Voilà, aidez-moi par pitié !
Merci d'avance !

Hey.

Tout d'abord, tu mélanges pas mal de choses dans ce code, qui ne sont pas forcément utiles.

Code:

style="TEXT-ALIGN: center" align=center

Non seulement c'est la même chose, mais le second n'est plus utilisé.

Code:

<SPAN style="FONT-FAMILY:Arial"><FONT face=Georgia size=6>

Pourquoi prendre la peine d'ouvrir un SPAN sans y mettre toutes les propriétés liées au texte (font-size...) ? De plus, la balise FONT devrait être évitée.

Sans compter que tu remets par dessus du BBcode pour des choses déjà spécifiées (font, center, size, color). J'ai du mal à comprendre comment tu t'y retrouves. XD En tout cas c'est rapidement simplifiable.

Bref. Si tu veux juste superposer du texte sur une image, tu peux faire beaucoup plus simple, avec une seule div ! :O Tu peux en passant lui donner une class et mettre tout le style dans le CSS...

Code:

<div class="titre-image">TEXTE</div>

Code:

.titre-image {
  background-image:url('http://25.media.tumblr.com/tumblr_la5besLMRm1qzpegzo1_500.gif'); /* ton image */
  width:500px; /* largeur de l'image */
  height:207px; /* hauteur de l'image */
  color:#BC4E1B; /* couleur du texte */
  font-family:Georgia; /* police du texte */
  font-size:24px; /* taille du texte */
  text-align:center; /* centre le texte */
  margin:0 auto; /* centre la div */
}

Tu peux aussi tout laisser dans la div, ou une partie. Dépend de ce qui change, ou pas.

Code:

<div style="background-image:url('http://25.media.tumblr.com/tumblr_la5besLMRm1qzpegzo1_500.gif');color:#BC4E1B;font-family:Georgia;font-size:24px;text-align:center;width:500px;height:207px;margin:0 auto;">TEXTE</div>

Bref, c'est une base de travail. Après je ne sais pas trop ce que tu cherchais comme rendu. J'espère en tout cas que tu comprends l'idée et peut avancer de là.

OK, donc merci les codes PRD

Alors, tout ce qui est paramétrable en CSS ne peut pas fonctionner pour ce que je veux faire puisque je compte utiliser ce type de mise en page en en-tête de sujets importants, avec différentes images. Quant à la div toute seule, elle fonctionne du tonnerre si ce n'est que je suis incapable de positionner le texte où je veux sur l'image : à savoir centrée en bas plutôt que centrée en haut...

Enfin, pour ce qui est s'en servir pour le profil : impossible. Trop compliqué de mettre

Code:

{postrow.displayed.POSTER_AVATAR}

en background...

Encore un petit coup de main ?

Il va falloir être beaucoup plus précis quant à l'usage de cette technique.

J'ai compris que tu souhaitais t'en servir en en-tête des sujets importants. Ce qui changerait, ce serait donc la taille et l'image ? Toutes les images seraient différentes ? (Du point de vue du style, j'entends.) Si oui, la taille et l'image peuvent très bien être indiquées dans la balise, et le reste en CSS. Si les images se répètent (en fonction du sujet abordé, je ne sais quoi), on peut utiliser aussi des class.

Concernant le positionnement du texte, tu peux envisager la chose suivante :

Code:

<div class="titre-image"><div class="titre-texte">TEXTE</div></div>

Code:

.titre-image {
  position:relative; /* permet de positionner le texte par rapport à l'image */
  margin:0 auto; /* centre la div */
  background-image:url('http://25.media.tumblr.com/tumblr_la5besLMRm1qzpegzo1_500.gif'); /* ton image */
  width:500px; /* largeur de l'image */
  height:207px; /* hauteur de l'image */
}
.titre-texte {
  position:absolute; /* définit une position absolue */
  bottom:0; /* positionne en bas de l'image */
  width:100%; /* permet de centrer le texte */
  padding:10px; /* espace entre le texte et le bord */
  text-align:center; /* centre le texte */
  color:#BC4E1B; /* couleur du texte */
  font-family:Georgia; /* police du texte */
  font-size:24px; /* taille du texte */
}

Enfin, le profil est encore une autre histoire. Je n'ai pas compris ce que tu veux y faire... ^^'

Alors, je diviser mes questions en deux points car moi aussi, à force, je vais m'y perdre.

PREMIER POINT : EN-TÊTE DE SUJET. Ici tu m'as proposé un code CSS qui place l'image en background et sur laquelle on place le texte. C'est tout à fait ce que je veux sauf que puisque l'image est définie dans la CSS, alors elle sera identique partout où j'utiliserais le code. Ce que j'aimerais serait donc une DIV dans laquelle j'indiquerais l'image de telle sorte qu'elle ne soit pas similaire partout où le code sera utilisé.

PREMIER POINT : LE PROFIL. Ici j'aimerais faire exactement le même effet sauf que l'image "background" serait l'avatar et le texte superposé le nom de l'utilisateur postant le message.

J'espère avoir été plus clair

1/ En considérant que toutes les images utilisées sont différentes, y compris en taille, tu peux donc spécifier le "background-image" et les dimensions directement dans la balise, et laisser le reste en CSS.

Code:

<div class="titre-image" style="background-image:url('LIEN');width:LARGEUR;height:HAUTEUR;"><div class="titre-texte">TEXTE</div></div>

Code:

.titre-image {
  position:relative; /* permet de positionner le texte par rapport à l'image */
  margin:0 auto; /* centre la div */
}
.titre-texte {
  position:absolute; /* définit une position absolue */
  bottom:0; /* positionne en bas de l'image */
  width:100%; /* permet de centrer le texte */
  padding:10px; /* espace entre le texte et le bord */
  text-align:center; /* centre le texte */
  color:#BC4E1B; /* couleur du texte */
  font-family:Georgia; /* police du texte */
  font-size:24px; /* taille du texte */
}

Après, cela dépend de ta gestion et peut-être que tu n'es pas encore décidé sur ce point, mais si jamais tu te rends compte que tu utilises une poignée d'images que tu réutilises plusieurs fois, tu peux considérer utiliser plusieurs class pour alléger ton code.

Par exemple :

---

2/ Quelle version de forum utilises-tu ? Si tu as accès aux templates, il faudrait peut-être toucher au "view_topic_body" pour déplacer le pseudo.
Autrement, on va probablement se contenter d'un "margin-top" négatif pour faire superposer le pseudo à l'avatar, faute de mieux.

1/ Alors là ça marche du tonnerre, mille merci !

2/ Déjà touché et rien à faire : je n'y arrive foutrement pas ! J'ai essayé avec le premier code que je t'ai fourni et, sans surprise, ça n'a pas marché !

Donc, pour te répondre, je suis en 'phpBB2' avec templates modifiés. Je te met en cache mon "view_topic_body" :


Merci d'avance pour le "2/" et un grand merci pour le "1/" !

Dans la partie qui concerne le profil :

Code:

  <!-- BEGIN postrow -->
  <!-- BEGIN displayed -->
  <tr class="post">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
        <div class="cadreprofil">
            <div class="nomperso"><font color=#522B0F>‟</font>{postrow.displayed.POSTER_NAME}</div>
            <div class="cadreprofilavatar">{postrow.displayed.POSTER_AVATAR}</div>
            <div class="cadreprofildtls">
              <strong><center>{postrow.displayed.POSTER_RANK}<br>{postrow.displayed.RANK_IMAGE}</center></strong><br>
              <!-- BEGIN profile_field -->
              {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
              <!-- END profile_field -->
              {postrow.displayed.POSTER_RPG}
            </div>
        </div>
        <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>

Tu vas déplacer "nomperso" dans "cadreprofilavatar", après {postrow.displayed.POSTER_AVATAR}.

Dans le CSS, en considérant que tous les avatars ont des dimensions fixes...

Code:

.cadreprofilavatar {
  text-align:center; /* centre avatar et pseudo */
  height:100px; /* hauteur de l'avatar, permet à ce qui est en dessous du pseudo de ne pas remonter aussi */
}
.nomperso {
  margin-top:-20px; /* décalage du pseudo vers le haut, par-dessus l'avatar */
}

Alors là, je suis impressionné ! Encore une fois ça marche. Le fait que tu fasses ça en deux coups de cuillère pot me sidère vu le temps que j'aurais mis moi pour trouver ça ! Je pensais me débrouiller en codage, pourtant...

En tout cas, un énorme merci. Je n'y serais pas arrivé sans toi !
problème résolu.

Hello !
Effectivement Doare mérite une standing ovation
Je déplace le sujet, puisqu'il est résolu ! Merci de l'avoir signalé