|
|
Auteur | Message |
---|
| Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Classe de Mystigri Jeu 12 Nov - 10:10 | |
| Hellooooo! Je serai ta prof de codage!
Alors, que veux tu apprendre?
|
|
| |
| Mystigri
CAS's Points : 143 Messages : 99 Date d'arrivée : 25/10/2015
| |
| Sujet: Re: Classe de Mystigri Jeu 26 Nov - 18:00 | |
| On peut commencer par le codage qui se fait dans le panneau d'administration ? ^^
Je voudrais savoir comment on réduit ou augmente la largeur du forum, si possible.
|
|
| |
| Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Mystigri Sam 28 Nov - 9:42 | |
| Après le but d'une classe n'est pas que je te "donne" les codes dont tu as besoin Mystigri.. Le but est que tu apprennes des choses..
Pour changer la largeur d'un forum, perso ici ça s'est fait en fonction de la largeur de la bannière..
|
|
| |
| Mystigri
CAS's Points : 143 Messages : 99 Date d'arrivée : 25/10/2015
| |
| Sujet: Re: Classe de Mystigri Sam 28 Nov - 14:07 | |
| Eh bien, tu ne me donne pas des codes et j'apprends des choses ! x)
Et si tu ne me donne pas des codes, comment veux-tu que j'apprenne quelque chose ? ^^ (imaginons que je te demande comment changer les bordures, c'est mieux de montrer le code avec.)
|
|
| |
| Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Mystigri Dim 29 Nov - 20:26 | |
| Je te dis, ça se change en fonction de la largeur de ta bannière ^^
Dis-moi plutôt ce que tu veux apprendre, un truc un peu plus large x)
|
|
| |
| Mystigri
CAS's Points : 143 Messages : 99 Date d'arrivée : 25/10/2015
| |
| Sujet: Re: Classe de Mystigri Mar 1 Déc - 18:37 | |
| Oui oui, j'avais compris. x) En fait, je ne sais pas faire des codes mais les modifier. Déjà, comment on fait pour simplement avoir un cadre sans bordures arrondies (ça, je sais faire). Une boîte comme tu dis. ^^
|
|
| |
| Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Mystigri Dim 3 Jan - 20:02 | |
| Mince, j'avais complètement oublié ta classe, UP-moi quand c'est comme ça Mystigri!
Du coup tu veux qu'on voit les codes de bases sur une boite? Genre les arrondis, les types d'encadrements, les fonds, les ombres, les dispositions dans la boite etc..
|
|
| |
| Mystigri
CAS's Points : 143 Messages : 99 Date d'arrivée : 25/10/2015
| |
| Sujet: Re: Classe de Mystigri Dim 17 Jan - 13:42 | |
| Ce que j'aimerais très précisément, c'est une boite un peu arrondie (les bordures, je sais faire) avec un titre et de l'ombre. Je voudrais aussi qu'il y ait des image rondes en bas qui tournent sous le passage de la souris (comme les topsites de la PA) . C'est correct comme demande ?
Enfin bon ! faisons étapes par étapes.
|
|
| |
| Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Mystigri Dim 17 Jan - 13:55 | |
| Ca me va très bien! On va voir les codes indépendamment les uns des autres et on les assembles après!
Tout d'abord on va voir la boite (Ensuite on verra le titre, puis les images en rond "qui tourne" :3)
Voici une boite tout simple:
Et voici le code: - Code:
-
<center><div style="width: 500px; height: 200px; background: url('http://img11.hostingpics.net/pics/871055giallo5.jpg'); overflow: auto; font-size: 14px; border: 1px solid black; cursor: crosshair" > </div></center> Tu peux déjà apporter des modifications à ta boite grâce à ces attributs: - width: largeur de ta boite - height: hauteur de ta boite - background url: c'est l'url de mon image de fond - border: 1px: épaisseur du contour - border: solid: style de contour (solide, pointillé, tirait, double,...) - border: black: couleur de ton contour
Apporte les modifications que tu veux! Jusque là tu me suis encore?
|
|
| |
| Mystigri
CAS's Points : 143 Messages : 99 Date d'arrivée : 25/10/2015
| |
| Sujet: Re: Classe de Mystigri Dim 17 Jan - 14:37 | |
| Oui ! Les bordures, c'est ce que je sais l mieux faire !Maintenant, je mets les arrondis, vu que je sais comment faire. border-radius: 10px (par exemple) Je sais que le background-url peut être remplacé par background-color aussi.
Par contre... Je ne savais pas qu'on pouvait modifier la forme de la souris sous son passage sur la boite. C'est : cursor: crosshair je suppose ?
- Code:
-
<center><div style="width: 500px; height: 200px; background: url('http://img11.hostingpics.net/pics/871055giallo5.jpg'); overflow: auto; font-size: 14px; border-top: 5px solid orange; border-bottom: 5px solid orange;border-radius: 10px; border-left: 5px solid pink; border-right: 5px solid pink; cursor: crosshair" > </div></center> Ensuite, on fait le titre ?
|
|
| |
| Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Mystigri Dim 17 Jan - 14:49 | |
| Parfait, tu t'es super bien débrouillée!
Du coup on laisse le code de la boite de coté!
Pour le titre, on va créer une div pour mettre toute les caractéristiques du titre dedans!
J'ai mis des couleurs dégeu uniquement pour te monter Dans ce code tu as encore plusieurs attributs que tu peux modifier à ta guise: color: couleur du texte text-shadow red: couleur de ton ombre font-size: taille du texte font-family: police font-style: italique, gras, souligné,..
- Code:
-
<div style="color:black;text-shadow: 0px 0px 7px red;font-size:50px;font-family:times new roman;font-style:italic;">Le joli titre ici</div>
- Codes déjà réalisés:
|
|
| |
| Mystigri
CAS's Points : 143 Messages : 99 Date d'arrivée : 25/10/2015
| |
| Sujet: Re: Classe de Mystigri Dim 17 Jan - 15:22 | |
| Oki. Juste, c'est quoi la différence entre div et span ? Bon, j'ai pas d'idées de titre hein. Comme je ne sais pas mettre "gras" j'ai écrit - Code:
-
<b></b> Je n'ai trop modifié, mais ça va.
Miaou
- Code:
-
<center><div style="color: #FF6600;text-shadow: 0px 0px 8px #CC99FF;font-size:40px;font-family:Apple Chancery;font-style:italic;"><b>Miaou</b></div></center>
|
|
| |
| Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Mystigri Dim 17 Jan - 15:27 | |
| C'est la même chose, à notre niveau, c'est la même chose. En gros, div crée un bloc, ce qui fait que deux div à la suite sont automatiquement sur deux lignes différentes alors que deux span restent sur la même ligne. Après on peut, grâce au CSS, mettre deux div sur la même ligne, donc en soit, il n'y a pas vraiment de différence
C'est tout bien ce que tu as fais, c'est vrai que t'as pas changé grand chose x) Du coup on va déjà assembler la boite avec le titre non? Tu sais le faire?
- Codes déjà réalisés:
|
|
| |
| Mystigri
CAS's Points : 143 Messages : 99 Date d'arrivée : 25/10/2015
| |
| Sujet: Re: Classe de Mystigri Dim 17 Jan - 15:52 | |
| Merci pour cette petite explication Alicia. Attention... Magie !
- Code:
-
<center><div style="width: 500px; height: 200px; background: url('http://img11.hostingpics.net/pics/871055giallo5.jpg'); overflow: auto; font-size: 14px; border-top: 5px solid orange; border-bottom: 5px solid orange;border-radius: 10px; border-left: 5px solid pink; border-right: 5px solid pink; cursor: crosshair" > <div style="color: #FF6600;text-shadow: 0px 0px 8px #CC99FF;font-size:40px;font-family:Apple Chancery;font-style:italic;"><b>Miaou</b></div> </div></center> On peut rajouter un petit autre texte en dessous aussi. Par contre, j'ai utilisé des blockquote et non de la marge. J'ai grossi la hauteur pour qu'il y ai de la place pour les trois images rondes à mettre.
- Spoiler:
Miaou meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow.
- Code:
-
<center><div style="width: 500px; height: 250px; background: url('http://img11.hostingpics.net/pics/871055giallo5.jpg'); overflow: auto; font-size: 14px; border-top: 5px solid orange; border-bottom: 5px solid orange;border-radius: 10px; border-left: 5px solid pink; border-right: 5px solid pink; cursor: crosshair" > <div style="color: #FF6600;text-shadow: 0px 0px 8px #CC99FF;font-size:40px;font-family:Apple Chancery;font-style:italic;"><b>Miaou</b></div>
<blockquote><div style="color: #FF6600;font-size:15px;font-family:Arial; text-align:left;">meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow.</div></blockquote> </div></center>
Ou alors mettre le texte dans un nouveau cadre.
- Spoiler:
Miaou meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow. - Code:
-
<center><div style="width: 500px; height: 250px; background: url('http://img11.hostingpics.net/pics/871055giallo5.jpg'); overflow: auto; font-size: 14px; border-top: 5px solid orange; border-bottom: 5px solid orange;border-radius: 10px; border-left: 5px solid pink; border-right: 5px solid pink; cursor: crosshair" > <div style="color: #FF6600;text-shadow: 0px 0px 8px #CC99FF;font-size:40px;font-family:Apple Chancery;font-style:italic;"><b>Miaou</b></div>
<div style="width: 400px; background-color: #CCCCFF; border-radius: 5px; overflow: auto; font-size: 14px; color: #FF6600;font-size:15px;font-family:Arial; text-align:left;"><blockquote>meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow.</blockquote></div> </div></center>
Ça commence ressembler à quelque chose tout ça !
|
|
| |
| Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Mystigri Dim 17 Jan - 16:14 | |
| Mais c'est parfait tout ça, tu te débrouilles super bien!
Pour les images rondes, déjà le but c'est de mettre une image en 100x100 et qu'elle se mette toute seule en rond, non? Eh oui, on est comme ça, nous sommes des faignasses qui ne veulent pas ouvrir leur Photoshop! Tu voulais le même que sur la PA, alors on va reprendre ce code que je vais décortiquer pour toi
- Code:
-
<a rel="nofollow" target="_blank" href="http://creactifspace.forumgratuit.org"><img src="http://img15.hostingpics.net/pics/667564281.jpg" style="border-radius: 126px;width:50px;" /></a> Comme d'habitude, le width détermine la largeur de l'image, que j'ai réduite pour une meilleure visibilité! Ensuite, c'est tout simple, on se sert des border-radius pour que l'image soit ronde! Donc maintenant que tu mettes n'importe quelle image carrée dans le code, elle sera remise à 50px et arrondie
Ensuite il faut que ça tourne quand on passe la souris dessus, sinon c'est pas drôle! Le code qui permet de modifier un affichage quand on "passe dessus", est le hover.
Le code qu'on est train de faire, c'est une signature pour un forum?
- Code déjà réalisé:
Miaou meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow.
|
|
| |
| Mystigri
CAS's Points : 143 Messages : 99 Date d'arrivée : 25/10/2015
| |
| Sujet: Re: Classe de Mystigri Dim 17 Jan - 16:49 | |
| j'en ai fait deux versions. ^^ J'aime bien les deux. Mais on va rester sur la première.
- Première:
Miaou Meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow. Meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow. Meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow. - Code:
-
<center><div style="width: 500px; height: 250px; background: url('http://img11.hostingpics.net/pics/871055giallo5.jpg'); overflow: auto; font-size: 14px; border-top: 5px solid orange; border-bottom: 5px solid orange;border-radius: 10px; border-left: 5px solid pink; border-right: 5px solid pink; cursor: crosshair" > <div style="color: #FF6600;text-shadow: 0px 0px 8px #CC99FF;font-size:40px;font-family:Apple Chancery;font-style:italic;"><b>Miaou</b></div>
<blockquote><div style="color: #FF6600;font-size:15px;font-family:Arial; text-align:left;">Meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow. Meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow. Meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow.</div></blockquote> <a rel="nofollow" target="_blank" href="http://creactifspace.forumgratuit.org"><img src="http://zupimages.net/up/16/02/qbno.jpeg" style="border-radius: 126px;width:50px; border: 1px solid orange;" /></a> <a rel="nofollow" target="_blank" href="http://creactifspace.forumgratuit.org"><img src="http://zupimages.net/up/16/02/9jp9.jpeg" style="border-radius: 126px;width:50px; border: 1px solid orange;" /></a> <a rel="nofollow" target="_blank" href="http://creactifspace.forumgratuit.org"><img src="http://zupimages.net/up/16/02/1e0h.jpeg" style="border-radius: 126px;width:50px; border: 1px solid orange;" /></a> </div></center>
- Autre:
- Code:
-
<center><div style="width: 500px; height: 210px; background: url('http://zupimages.net/up/16/02/nkst.jpeg'); overflow: auto; font-size: 14px; border-top: 5px solid orange; border-bottom: 5px solid orange;border-radius: 10px; border-left: 5px solid pink; border-right: 5px solid pink; cursor: crosshair" > <div style="color: #FF6600;text-shadow: 0px 0px 8px #CC99FF;font-size:40px;font-family:Apple Chancery;font-style:italic;"><b>Miaou</b></div>
<div style="width: 400px; background-color: #CCCCFF; border-radius: 5px; overflow: auto; font-size: 14px; color: #FF6600;font-size:15px;font-family:Arial; text-align:left;"><blockquote>meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow.</blockquote></div> <a rel="nofollow" target="_blank" href="http://creactifspace.forumgratuit.org"><img src="http://zupimages.net/up/16/02/qbno.jpeg" style="border-radius: 126px;width:50px; border: 2px solid orange;" /></a> <a rel="nofollow" target="_blank" href="http://creactifspace.forumgratuit.org"><img src="http://zupimages.net/up/16/02/9jp9.jpeg" style="border-radius: 126px;width:50px; border: 2px solid orange;" /></a> <a rel="nofollow" target="_blank" href="http://creactifspace.forumgratuit.org"><img src="http://zupimages.net/up/16/02/1e0h.jpeg" style="border-radius: 126px;width:50px; border: 2px solid orange;" /></a> </div></center>
Oui, je pensais faire un code pour RP, puis je me suis rappelé que je voulais mettre des images et je me suis dis qu'en signa ce serait super !
|
|
| |
| Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| |
| |
| Mystigri
CAS's Points : 143 Messages : 99 Date d'arrivée : 25/10/2015
| |
| Sujet: Re: Classe de Mystigri Dim 17 Jan - 18:53 | |
| Montres-moi le CSS quand même, je sais comment faire, enfin, à peu près.
|
|
| |
| Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Mystigri Dim 17 Jan - 19:06 | |
| Dans ce cas dis-moi comment tu veux faire et j'essaye ^^
|
|
| |
| Mystigri
CAS's Points : 143 Messages : 99 Date d'arrivée : 25/10/2015
| |
| Sujet: Re: Classe de Mystigri Dim 17 Jan - 20:47 | |
| Alors en fait, je pensais créer une page HTML (ce qui est déjà fait d'ailleurs) pour pouvoir mettre le CSS. Mets-le en enlevant le /*-Ici, on écrit le texte de CSS-*/ et on mettra un div class j'ai vu ça pour les PA's
http://forumtestdegoutti.forumactif.fr/h2-signa-minouche
- Code:
-
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Signa by Mystigri - Cré'actif Space</title> <style type="text/css"> /*====SIGNA - MYSTIGRI - CRE'ACTIF SPACE====*/ /*-Ici, on écrit le texte de CSS-*/ </style><link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'/></head><body><center><div style="width: 500px; height: 250px; background: url('http://img11.hostingpics.net/pics/871055giallo5.jpg'); overflow: auto; font-size: 14px; border-top: 5px solid orange; border-bottom: 5px solid orange;border-radius: 10px; border-left: 5px solid pink; border-right: 5px solid pink; cursor: crosshair" > <div style="color: #FF6600;text-shadow: 0px 0px 8px #CC99FF;font-size:40px;font-family:Apple Chancery;font-style:italic;"><b>Miaou</b></div>
<blockquote><div style="color: #FF6600;font-size:15px;font-family:Arial; text-align:left;">Meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow. Meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow. Meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow.</div></blockquote> <a rel="nofollow" target="_blank" href="http://creactifspace.forumgratuit.org"><img src="http://zupimages.net/up/16/02/qbno.jpeg" style="border-radius: 126px;width:50px; border: 1px solid orange;" /></a> <a rel="nofollow" target="_blank" href="http://creactifspace.forumgratuit.org"><img src="http://zupimages.net/up/16/02/9jp9.jpeg" style="border-radius: 126px;width:50px; border: 1px solid orange;" /></a> <a rel="nofollow" target="_blank" href="http://creactifspace.forumgratuit.org"><img src="http://zupimages.net/up/16/02/1e0h.jpeg" style="border-radius: 126px;width:50px; border: 1px solid orange;" /></a> </div></center> </body></html>
|
|
| |
| Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Mystigri Lun 18 Jan - 8:36 | |
| Je te laisse essayer pour voir si ça marche alors, voici le code:
- Code:
-
.NOMDETADIVCLASS:hover{ -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); -webkit-border-radius: 126px; -moz-border-radius: 126px; border-radius: 126px; margin-left: 5px; margin-top: 3px; }
|
|
| |
| Mystigri
CAS's Points : 143 Messages : 99 Date d'arrivée : 25/10/2015
| |
| Sujet: Re: Classe de Mystigri Lun 18 Jan - 19:30 | |
| Arf, après beaucoup d'observation sur comment faisaient les PA's, plein de tests, j'ai finis par réussir ! Par contre, j'ai pris un autre code de rotation que celui que tu m'as donné, mais du moment que ça tourne. ^^ Par contre, le cadre se décale quand on fait tourner les images, je ne suis pas une pro non plus. x)
|
|
| |
| Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| |
| |
| Alicia.
CAS's Points : 8506 Messages : 6934 Date d'arrivée : 25/10/2011 Âge : 27 Localisation : Lorraine Humeur : Le sourire aux lèvres ! | |
| Sujet: Re: Classe de Mystigri Sam 23 Jan - 17:14 | |
| |
|
| |
| Mystigri
CAS's Points : 143 Messages : 99 Date d'arrivée : 25/10/2015
| |
| Sujet: Re: Classe de Mystigri Lun 8 Fév - 20:51 | |
| Je voulais savoir un truc mais j'ai oublié... *pasdouée* Je poste un message dès que je me suis rappelé ce que c'était.
|
|
| |
| Sujet: Re: Classe de Mystigri | |
| |
|
| |
|