Comment faire ceci ?

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

Résolu Comment faire ceci ?

Message par Caddaric le Dim 31 Oct 2010 - 16:31

Bonjour,

J'aimerais savoir comment je peux faire CECI (les genre de bouton rouge et vert).
Et si je peux faire un mix de CSS et HTML pour ne pas avoir de longs codes.

Merci d'avance pour vos réponses Smile

Cordialement,

Caddaric


Dernière édition par Caddaric le Lun 1 Nov 2010 - 20:11, édité 1 fois

Caddaric
***

Masculin
Messages : 145
Inscrit(e) le : 22/02/2009

http://terres-desolees.forumactif.org/
Caddaric a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire ceci ?

Message par Caddaric le Lun 1 Nov 2010 - 16:45

Petit UP Smile

Caddaric
***

Masculin
Messages : 145
Inscrit(e) le : 22/02/2009

http://terres-desolees.forumactif.org/
Caddaric a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire ceci ?

Message par Waaapi le Lun 1 Nov 2010 - 17:09

Bonjour,

→ Vous pouvez le faire en image, ce sera plus facile (mais je vous mets les codes quand même Wink)
→ Voilà pour le codage :

__________________________________________
► Codage entier :
Votre texte
Code:
[table style="margin: 10px; border: 2px solid #000000; background:#FFFFFF ; "][tr][td vertical-align="middle" style="padding-left:5px; padding-right:5px; padding-bottom:5px; padding-top:5px;"][color=darkblue][color=black]Votre texte[/color][/color][/td][/tr][/table]

__________________________________________
► Graphisme :
→ Tout le reste est une question de graphisme Wink Pour donner de la couleur, une police, une " forme " au cadre.

- - - - - - - - - - - - - - - - - --
► Correspond à la couleur du contour du cadre. Pour changer la couleur, il faut modifier la valeur #000000 (blanc)
2px solid #000000
- - - - - - - - - - - - - - - - - --
► Correspond à la couleur du fond du cadre. Pour changer la couleur, il faut modifier la valeur : #FFFFF (noir)
background:#FFFFF
- - - - - - - - - - - - - - - - - --

→ Ensuite, pour les raccourcis de ces codes là, je ne sais pas... Je ne suis pas assez forte en codage pour pouvoir t'aider plus loin (sauf si c'est une question de graphisme Wink).
Bonne journée Very Happy


Dernière édition par Waaapi le Lun 1 Nov 2010 - 19:10, édité 1 fois (Raison : Erreur)

Waaapi
****

Féminin
Messages : 241
Inscrit(e) le : 22/05/2010

http://edenwell.forumgratuit.org/forum.htm?tt=1
Waaapi a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Comment faire ceci ?

Message par Lixyr le Lun 1 Nov 2010 - 17:15

@Waaapi a écrit:

- - - - - - - - - - - - - - - - - --
► Correspond à la couleur du fond du cadre. Pour changer la couleur, il faut modifier la valeur #000000 (blanc)
2px solid #000000
- - - - - - - - - - - - - - - - - --
► Correspond à la couleur du contour du cadre. Pour changer la couleur, il faut modifier la valeur : #FFFFF (noir)
background:#FFFFF
- - - - - - - - - - - - - - - - - --

C'est l'inverse. x)

Background, c'est le fond, et border c'est la bordure.

Donc pour reprendre Waaapi mais la corriger :

- - - - - - - - - - - - - - - - - --
► Correspond à la couleur de la bordure du cadre. Pour changer la couleur du cadre, il faut modifier la valeur #000000 (blanc)
2px solid #000000
- - - - - - - - - - - - - - - - - --
► Correspond à la couleur du fond du cadre. Pour changer la couleur de fond, il faut modifier la valeur : #FFFFF (noir)
background:#FFFFF
- - - - - - - - - - - - - - - - - --


Lixyr
Aidactive
Aidactive

Féminin
Messages : 5646
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire ceci ?

Message par Waaapi le Lun 1 Nov 2010 - 17:21

Ah mince ! (ça reste entre nous, hein ? Siffleur )
[Quand je dis que le codage c'est pas totalement ça... x)]

Merci Very Happy
Je vais modifier mon message Wink


Dernière édition par Waaapi le Lun 1 Nov 2010 - 19:09, édité 2 fois (Raison : Erreur de frappe)

Waaapi
****

Féminin
Messages : 241
Inscrit(e) le : 22/05/2010

http://edenwell.forumgratuit.org/forum.htm?tt=1
Waaapi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire ceci ?

Message par Caddaric le Lun 1 Nov 2010 - 18:53

Ah cool merci =)

Par contre il y aurait un moyen de mettre tout le code dans la feuille CSS, pour avoir moins de code ?

Caddaric
***

Masculin
Messages : 145
Inscrit(e) le : 22/02/2009

http://terres-desolees.forumactif.org/
Caddaric a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire ceci ?

Message par Waaapi le Lun 1 Nov 2010 - 19:08

Mmmh... Interrog
Je sais qu'on peu faire des raccourcis, mais pour les cadres...
Je vais chercher et je posterais après Wink

Waaapi
****

Féminin
Messages : 241
Inscrit(e) le : 22/05/2010

http://edenwell.forumgratuit.org/forum.htm?tt=1
Waaapi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire ceci ?

Message par Caddaric le Lun 1 Nov 2010 - 19:10

Si pour les cadres on peut pas, c'est pas grave. Le principal c'est d'avoir le moins possible e code pour que se soit plus facile à lire.

Caddaric
***

Masculin
Messages : 145
Inscrit(e) le : 22/02/2009

http://terres-desolees.forumactif.org/
Caddaric a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire ceci ?

Message par Lixyr le Lun 1 Nov 2010 - 19:15

Oui.

Comme ceci (dans le css):

.cadre {
margin: 10px;
border: 2px solid #000000;
background-color: #FFFFFF; }

Et ensuite :

Code:
<table class="cadre"><tr><td vertical-align="middle" style="padding: 5px;><font color="black">Votre texte</font></td></tr></table>

(vous retrouvez le cadre dans la classe, dans le tableau)

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5646
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire ceci ?

Message par Waaapi le Lun 1 Nov 2010 - 19:34

Je venais de la trouvais Wink

Bon... Autre astuce tant qu'on y est, hein Razz
Si vous voulais faire des cadre avec des coins arrondis, vous pouvez rajoutez cette partie :

; -webkit-border-radius:4px;-moz-border-radius:20px; border-radius:4px;

Ce qui vous donnera donc :
Code:
[table style="margin: 10px; border: 2px solid #000000; background:#FFFFFF ; -webkit-border-radius:4px;-moz-border-radius:20px; border-radius:4px;"]

L'arrondi ce forme ainsi :
; -webkit-border-radius:4px;-moz-border-radius:20px; border-radius:4px;
→ Si vous mettez 4, vous aurez arrondi peu visible
→ Plus vous metterez haut (comme 20px), vous aurez un plus belle arrondi.

Exemple :
► avec 4px =>
Votre texte
► avec 20px =>
Votre texte

Voilà Very Happy

Waaapi
****

Féminin
Messages : 241
Inscrit(e) le : 22/05/2010

http://edenwell.forumgratuit.org/forum.htm?tt=1
Waaapi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire ceci ?

Message par Caddaric le Lun 1 Nov 2010 - 20:10

Ah c'est fantastique =)

Merci pour les arrondis, ça peut me servir ^^

Merci beaucoup, je met en résolu

Caddaric
***

Masculin
Messages : 145
Inscrit(e) le : 22/02/2009

http://terres-desolees.forumactif.org/
Caddaric a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire ceci ?

Message par Waaapi le Lun 1 Nov 2010 - 20:14

De rien victoire
Bonne soirée Wink

Waaapi
****

Féminin
Messages : 241
Inscrit(e) le : 22/05/2010

http://edenwell.forumgratuit.org/forum.htm?tt=1
Waaapi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire ceci ?

Message par Caddaric le Lun 1 Nov 2010 - 20:41

Merci bonne soirée à vous aussi Yahoo

Caddaric
***

Masculin
Messages : 145
Inscrit(e) le : 22/02/2009

http://terres-desolees.forumactif.org/
Caddaric 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