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

[Ek'o]

Salut a tous

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

[SoraNoHime]

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.

[Ek'o]

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)

[SoraNoHime]

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.

[Ek'o]

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

[SoraNoHime]

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;
}

[Ek'o]

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

[SoraNoHime]

Avez-vous activer le HTML au trois points sur votre forum ?

https://forum.forumactif.com/t285442-activation-du-html-3-points-de-controle?highlight=html

[Ek'o]

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

[SoraNoHime]

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

[Ek'o]

http://barjotsweedlandiens.keuf.net/

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

[SoraNoHime]

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 ?

[Ek'o]

Je vous est envoyer un MP

[SoraNoHime]

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

[Ek'o]

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 ?

[SoraNoHime]

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

[Ek'o]

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

[SoraNoHime]

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.

[Ek'o]

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

[SoraNoHime]

<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}

[Ek'o]

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

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

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 ?

[SoraNoHime]

dans la css ajoutez

align:center;

juste avant }

[Ek'o]

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


Edite : Merci

[SoraNoHime]

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.

[Ek'o]

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

Bonne fin de journée