Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par Ek'o le Mer 15 Juin 2011 - 13:21

Salut a tous Smile

Je cherche depuis quelques jours a placer un cadre (Cadre personnelle) autour de code HTML, je vous explique je voudrais en faite placer un cadre (Image) et aussi y placer du HTML dans ce cadre


Voici l'exemple :


Le cadre




Bouton a intégrer dans le cadre (Code HTML ci dessous)




Résultat rechercher







Voici le code a placer dans le cadre

Code:
<div align="center">
<br>
<a href="http://barjotsweedlandiens.keuf.net/faq.htm" class="special"><img src="LIEN IMAGE" border="0" alt="" /></a>
<br>
<a href="http://barjotsweedlandiens.keuf.net/search" class="special"><img src="LIEN IMAGE" border="0" alt="" /></a>
<br>
<a href="http://barjotsweedlandiens.keuf.net/memberlist" class="special"><img src="LIEN IMAGE" border="0" alt="" /></a>
<br>
<a href="http://barjotsweedlandiens.keuf.net/groupcp.forum" class="special"><img src="LIEN IMAGE" border="0" alt="" /></a>
<br>
<a href="http://barjotsweedlandiens.keuf.net/profile?mode=editprofile" class="special"><img src="LIEN IMAGE" border="0" alt="" /></a>
<br>
<a href="http://barjotsweedlandiens.keuf.net/msg.forum?folder=inbox" class="special"><img src="LIEN IMAGE" border="0" alt="" /></a>
<br>
<a href="http://barjotsweedlandiens.keuf.net/calendar?start=20101201" title="Calendrier" target="wclose"
onclick="window.open('http://barjotsweedlandiens.keuf.net/calendar?start=20101201','wclose','width=900,height=800, resizable=yes, scrollbars=yes, toolbar=no, status=no, left=0, top=0')"><img src="LIEN IMAGE" border="0" alt="" /></a>


<a href="LIEN SHOUTBOX" title="Shoutbox" target="wclose"
onclick="window.open('LIEN SHOUTBOX','wclose','width=400,height=400, resizable=yes, scrollbars=yes, toolbar=no, status=no, left=0, top=0')"><img src="LIEN IMAGE" border="0" alt="" /></a>







Merci d'avance de vos réponses Smile





Dernière édition par Ek'o le Jeu 16 Juin 2011 - 16:23, édité 1 fois

Ek'o
Nouveau membre

Masculin
Messages : 17
Inscrit(e) le : 27/04/2010

http://barjotsweedlandiens.keuf.net/
Ek'o a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par SoraNoHime le Mer 15 Juin 2011 - 19:59

Bonjour,

Remplacer ceci dans votre code
Code:
<div align="center">
<br/>

remplacer le par
Code:
<div class="cadre">

ajouter à la fin de votre code
Code:
</div>

Et mettez dans votre css :

Code:
.cadre {
text-align :center;
padding : 10px;
border : 1px solid #000000;
}

Cordialement.

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par Ek'o le Jeu 16 Juin 2011 - 13:54



Merci de votre réponse mais ce n'est pas ce que je rechercher a faire (Moi qui est mal expliquer)


Le cadre que je voudrais placer est un cadre que j'aurai fait moi même (Logiciel de dessin en GIF) et ainsi placer ce cadre personnalisé + y placer mon codage des liens par dessus


En gros mettre une image (Cadre) et par dessus mon codage des liens (Bouton)


Smile

Ek'o
Nouveau membre

Masculin
Messages : 17
Inscrit(e) le : 27/04/2010

http://barjotsweedlandiens.keuf.net/
Ek'o a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par SoraNoHime le Jeu 16 Juin 2011 - 13:56

Dans ce cas, un background vous irait-il ? ou est-ce vraiment un découpage de cadre que vous désirez (soit 9 parties) ?

Cordialement.

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par Ek'o le Jeu 16 Juin 2011 - 14:06

Je pensais que j'aurai pu le placer directement sans retouche mais si il faut le découper pourquoi pas Smile

Ek'o
Nouveau membre

Masculin
Messages : 17
Inscrit(e) le : 27/04/2010

http://barjotsweedlandiens.keuf.net/
Ek'o a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par SoraNoHime le Jeu 16 Juin 2011 - 14:23

Si vous passez par un background, vous n'aurez pas besoin de le découper, mais le fond sera celui de votre cadre (que vous pouvez faire transparent d'ailleurs)



Dans ce cas reprenez le code ainsi :
.cadre {
background-image: url('adresse de votre image');
background-repeat: no-repeat;
background-position: center center;
height : hauteurpx;
width: largeurpx;
}


SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par Ek'o le Jeu 16 Juin 2011 - 14:40


Je viens d'essayer, le résultat s'affiche en code.

J'ai oublier de préciser que sa serai pour le placer dans un widget (Utiliser une table type : Non)

Désolé de donnais les infos au fur est a mesure


Ek'o
Nouveau membre

Masculin
Messages : 17
Inscrit(e) le : 27/04/2010

http://barjotsweedlandiens.keuf.net/
Ek'o a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par SoraNoHime le Jeu 16 Juin 2011 - 14:42


SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par Ek'o le Jeu 16 Juin 2011 - 14:50

Oui le HTML est bien activer puisque le codage du premier message et bien d'autre sont en place est marche bien Smile

Ek'o
Nouveau membre

Masculin
Messages : 17
Inscrit(e) le : 27/04/2010

http://barjotsweedlandiens.keuf.net/
Ek'o a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par SoraNoHime le Jeu 16 Juin 2011 - 14:55

Puis je avoir un lien où je pourrais le voir en invité ?

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par Ek'o le Jeu 16 Juin 2011 - 15:09

http://barjotsweedlandiens.keuf.net/

Je vous est placer deux widgets sur la droite pour vous montrez, merci de prendre le temps de m'aidai Smile

Ek'o
Nouveau membre

Masculin
Messages : 17
Inscrit(e) le : 27/04/2010

http://barjotsweedlandiens.keuf.net/
Ek'o a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par SoraNoHime le Jeu 16 Juin 2011 - 15:12

Le problème s'est qu'on me demande de m'inscrire ou de me connecter. POuriez vous déverrouillé juste le temps que je vérifie ?

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par Ek'o le Jeu 16 Juin 2011 - 15:18

Je vous est envoyer un MP Smile

Ek'o
Nouveau membre

Masculin
Messages : 17
Inscrit(e) le : 27/04/2010

http://barjotsweedlandiens.keuf.net/
Ek'o a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par SoraNoHime le Jeu 16 Juin 2011 - 15:24

D'accord, nous nous sommes mal compris ^^

Ceci est pour le code du widget :

Code:
<div class="cadre">
    <a href="http://barjotsweedlandiens.keuf.net/faq.htm" class="special"><img src="LIEN IMAGE" border="0" alt="" /></a>
    <br>
    <a href="http://barjotsweedlandiens.keuf.net/search" class="special"><img src="LIEN IMAGE" border="0" alt="" /></a>
    <br>
    <a href="http://barjotsweedlandiens.keuf.net/memberlist" class="special"><img src="LIEN IMAGE" border="0" alt="" /></a>
    <br>
    <a href="http://barjotsweedlandiens.keuf.net/groupcp.forum" class="special"><img src="LIEN IMAGE" border="0" alt="" /></a>
    <br>
    <a href="http://barjotsweedlandiens.keuf.net/profile?mode=editprofile" class="special"><img src="LIEN IMAGE" border="0" alt="" /></a>
    <br>
    <a href="http://barjotsweedlandiens.keuf.net/msg.forum?folder=inbox" class="special"><img src="LIEN IMAGE" border="0" alt="" /></a>
    <br>
    <a href="http://barjotsweedlandiens.keuf.net/calendar?start=20101201" title="Calendrier" target="wclose"
    onclick="window.open('http://barjotsweedlandiens.keuf.net/calendar?start=20101201','wclose','width=900,height=800, resizable=yes, scrollbars=yes, toolbar=no, status=no, left=0, top=0')"><img src="LIEN IMAGE" border="0" alt="" /></a>


    <a href="LIEN SHOUTBOX" title="Shoutbox" target="wclose"
    onclick="window.open('LIEN SHOUTBOX','wclose','width=400,height=400, resizable=yes, scrollbars=yes, toolbar=no, status=no, left=0, top=0')"><img src="LIEN IMAGE" border="0" alt="" /></a></div>

et ceci pour votre css :

Code:
.cadre {
background-image: url('adresse de votre image');
background-repeat: no-repeat;
background-position: center center;
height : hauteurpx;
width: largeurpx;
}

oubliez par d'uy faire les changements, hauteur, largeur et adresse de l'image

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par Ek'o le Jeu 16 Juin 2011 - 15:29

Alors j'ai bien placer tout les codes mais rien se passe

Comment va t'il placer le cadre a tel ou tel widget et non a tous ?

Ek'o
Nouveau membre

Masculin
Messages : 17
Inscrit(e) le : 27/04/2010

http://barjotsweedlandiens.keuf.net/
Ek'o a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par SoraNoHime le Jeu 16 Juin 2011 - 15:48

Pourriez vous me donner le code css que vous avez placé. Je ne le trouve pas dans vos codes, j'aimerai tester chez moi.

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par Ek'o le Jeu 16 Juin 2011 - 15:52

Code:
.cadre {
background-image: url('http://i27.servimg.com/u/f27/15/17/24/93/colone11.png');
background-repeat: no-repeat;
background-position: center center;
height : 100px;
width: 100px;
}

Pour la largeur et hauteur je suis pas sur des quel mettre

Ek'o
Nouveau membre

Masculin
Messages : 17
Inscrit(e) le : 27/04/2010

http://barjotsweedlandiens.keuf.net/
Ek'o a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par SoraNoHime le Jeu 16 Juin 2011 - 16:01

Il faut que ce soit les dimensions de votre image. soit 178 largeur pour 242 hauteur

Code:
.cadre {
background-image: url('http://i27.servimg.com/u/f27/15/17/24/93/colone11.png');
background-repeat: no-repeat;
background-position: center center;
height : 242px;
width: 178px;
}

Il apparait chez moi mais pas vos liens. Mais c'est normal, vu que je n'ai pas le code des images qui vous servent de boutons.

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par Ek'o le Jeu 16 Juin 2011 - 16:11

Je viens de testé ça

Widget :

Code:
<div align="center">
<br />
<a href="http://radio.funradio.fr/player.html" title="Fun Radio" target="wclose"
onclick="window.open('http://radio.funradio.fr/player.html','wclose','width=400,height=400, resizable=yes, scrollbars=yes, toolbar=no, status=no, left=0, top=0')"><img src="http://www.phenoming.net/wp-content/Fun-Radio.png" border="0" alt="" /></a>
<br />
</div>


CSS :

Code:
.cadre {
background-image: url('http://i27.servimg.com/u/f27/15/17/24/93/colone11.png');
background-repeat: no-repeat;
background-position: center center;
height : 242px;
width: 178px;
}


Mais je n'est pas l'image du cadre qui s'affiche

Ek'o
Nouveau membre

Masculin
Messages : 17
Inscrit(e) le : 27/04/2010

http://barjotsweedlandiens.keuf.net/
Ek'o a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par SoraNoHime le Jeu 16 Juin 2011 - 16:13

<div align="center"> à changer par <div class="cadre">

Il faut mettre la class pour que cela fonctionne,

une class css marche ainsi :

dans le code : class="xxx" dans la css .xxx {changements}

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par Ek'o le Jeu 16 Juin 2011 - 16:20

Comment vous dire que vous êtes un "Dieu" pour moi Laughing Un grand merci Smile

J'aurai quelques derniers questions si cela vous dérange pas Smile

Je ne trouve pas le code de centrage des boutons et pour ce qui est des différent cadrage que je voudrait placer, il a t'il une commande pour dire tel cadre a tel widget ?



Ek'o
Nouveau membre

Masculin
Messages : 17
Inscrit(e) le : 27/04/2010

http://barjotsweedlandiens.keuf.net/
Ek'o a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par SoraNoHime le Jeu 16 Juin 2011 - 16:40

dans la css ajoutez

align:center;

juste avant }

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par Ek'o le Jeu 16 Juin 2011 - 16:40

Pour le centrage j'ai trouver mais pour les différents cadres je ne vois pas


Edite : Merci Smile

Ek'o
Nouveau membre

Masculin
Messages : 17
Inscrit(e) le : 27/04/2010

http://barjotsweedlandiens.keuf.net/
Ek'o a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par SoraNoHime le Jeu 16 Juin 2011 - 16:44

Si votre cadre est répétitif ailleurs, remettez le code class="cadre"

sinon
dans le code : class="xxx" dans la css .xxx {changements}

changez les xxx par le nom de votre choix, un par cadre différents, et faites les changements dans les accolades.

SoraNoHime
+ Hyperactif +

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre personnalisé (Image) + inserer Code HTML (Bouton)

Message par Ek'o le Jeu 16 Juin 2011 - 16:50

D'accord j'avais pas compris votre message plus haut de cette façon, probléme régler je vous remercie encore pour tout Smile

Bonne fin de journée Wink

Ek'o
Nouveau membre

Masculin
Messages : 17
Inscrit(e) le : 27/04/2010

http://barjotsweedlandiens.keuf.net/
Ek'o a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum