Comment faire ceci ?

3 participants

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

Résolu Comment faire ceci ?

Message par Caddaric 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
avatar

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 Lun 1 Nov 2010 - 16:45

Petit UP Smile
avatar

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

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

Lixyr
Aidactive
Aidactive

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

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire ceci ?

Message par Waaapi 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

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 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 ?
avatar

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

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

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

Lixyr
Aidactive
Aidactive

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

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire ceci ?

Message par Waaapi 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

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

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 Lun 1 Nov 2010 - 20:14

De rien victoire
Bonne soirée Wink
Waaapi

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 Lun 1 Nov 2010 - 20:41

Merci bonne soirée à vous aussi Yahoo
avatar

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

- Sujets similaires

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