Écrire sur une image (résolu) Bouton_activeÉcrire sur une image (résolu) Bouton_hoverÉcrire sur une image (résolu) Fb-hoverÉcrire sur une image (résolu) Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Structure de Qui Est En Ligne (1)
Écrire sur une image (résolu) EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Écrire sur une image (résolu) EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Écrire sur une image (résolu) EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Écrire sur une image (résolu) EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Écrire sur une image (résolu) EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Écrire sur une image (résolu) EmptyMar 07 Fév 2023, 08:40 par Oxtran

» Mettre votre © Copyright dans le footer de votre forum
Écrire sur une image (résolu) EmptyMar 07 Fév 2023, 07:35 par Oxtran

» Barre(s) Hitskinienne
Écrire sur une image (résolu) EmptyVen 03 Fév 2023, 17:22 par Krager

-20%
Le deal à ne pas rater :
Pack Gigabyte Ecran PC Gamer 27″ LED M27Q (rev2.0) + Radeon RX 6950 ...
749 € 939 €
Voir le deal

Partagez
 

Écrire sur une image (résolu)

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://alakazam.forumactif.ws/
Viggo
Viggo
{ Membre }
{ Membre }

Masculin Messages : 41



Écrire sur une image (résolu) Empty
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 ! Écrire sur une image (résolu) 1920415962 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é ! pale
Merci d'avance !


Dernière édition par Viggo le Mar 12 Juin 2012, 14:24, édité 1 fois
MessageSujet: Écrire sur une image (résolu)   Écrire sur une image (résolu) EmptyLun 11 Juin 2012, 15:44
Revenir en haut Aller en bas
Doare
Doare
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 544



Écrire sur une image (résolu) Empty
Hey. Smile

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é. Smile

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. Smile

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. Smile

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. Smile
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à. Smile
MessageSujet: Re: Écrire sur une image (résolu)   Écrire sur une image (résolu) EmptyLun 11 Juin 2012, 21:44
Revenir en haut Aller en bas
http://alakazam.forumactif.ws/
Viggo
Viggo
{ Membre }
{ Membre }

Masculin Messages : 41



Écrire sur une image (résolu) Empty
OK, donc merci les codes PRD Rolling Eyes

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... Laughing

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 ? Ange
MessageSujet: Re: Écrire sur une image (résolu)   Écrire sur une image (résolu) EmptyMar 12 Juin 2012, 06:21
Revenir en haut Aller en bas
Doare
Doare
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 544



Écrire sur une image (résolu) Empty
Il va falloir être beaucoup plus précis quant à l'usage de cette technique. Smile

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. Smile

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... ^^'
MessageSujet: Re: Écrire sur une image (résolu)   Écrire sur une image (résolu) EmptyMar 12 Juin 2012, 09:43
Revenir en haut Aller en bas
http://alakazam.forumactif.ws/
Viggo
Viggo
{ Membre }
{ Membre }

Masculin Messages : 41



Écrire sur une image (résolu) Empty
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 Razz
MessageSujet: Re: Écrire sur une image (résolu)   Écrire sur une image (résolu) EmptyMar 12 Juin 2012, 10:27
Revenir en haut Aller en bas
Doare
Doare
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 544



Écrire sur une image (résolu) Empty
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. Smile
Autrement, on va probablement se contenter d'un "margin-top" négatif pour faire superposer le pseudo à l'avatar, faute de mieux.
MessageSujet: Re: Écrire sur une image (résolu)   Écrire sur une image (résolu) EmptyMar 12 Juin 2012, 11:00
Revenir en haut Aller en bas
http://alakazam.forumactif.ws/
Viggo
Viggo
{ Membre }
{ Membre }

Masculin Messages : 41



Écrire sur une image (résolu) Empty
1/ Alors là ça marche du tonnerre, mille merci ! Écrire sur une image (résolu) 2176505670

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/" ! Écrire sur une image (résolu) 3933776953
MessageSujet: Re: Écrire sur une image (résolu)   Écrire sur une image (résolu) EmptyMar 12 Juin 2012, 13:07
Revenir en haut Aller en bas
Doare
Doare
{ Spécialiste }
{ Spécialiste }

Féminin Messages : 544



Écrire sur une image (résolu) Empty
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 */
}

MessageSujet: Re: Écrire sur une image (résolu)   Écrire sur une image (résolu) EmptyMar 12 Juin 2012, 14:02
Revenir en haut Aller en bas
http://alakazam.forumactif.ws/
Viggo
Viggo
{ Membre }
{ Membre }

Masculin Messages : 41



Écrire sur une image (résolu) Empty
Shocked
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... Rolling Eyes

En tout cas, un énorme merci. Je n'y serais pas arrivé sans toi !
problème résolu.
MessageSujet: Re: Écrire sur une image (résolu)   Écrire sur une image (résolu) EmptyMar 12 Juin 2012, 14:24
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



Écrire sur une image (résolu) Empty
Hello !
Effectivement Doare mérite une standing ovation Écrire sur une image (résolu) 215926
Je déplace le sujet, puisqu'il est résolu ! Merci de l'avoir signalé Écrire sur une image (résolu) 926145
MessageSujet: Re: Écrire sur une image (résolu)   Écrire sur une image (résolu) EmptyMar 12 Juin 2012, 14:49
Revenir en haut Aller en bas
Contenu sponsorisé




Écrire sur une image (résolu) Empty
MessageSujet: Re: Écrire sur une image (résolu)   Écrire sur une image (résolu) Empty
Revenir en haut Aller en bas
 

Écrire sur une image (résolu)

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Écrire sur une image mais que celle-ci ne se répète pas [terminé]
» Image sur PA accordéon [résolu]
» Image qui tourne RESOLU
» Image en bordure [Résolu]
» Image au milieu [résolu]

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit