 Loumina 
{ Membre actif }
 Messages : 308
 | Hop, jop jop j'ouvre le bal !
Expérience en codage : Euuuuuh, un certain temps ! Oo" je sais plus, d'un côté je codais sans le savoir vraiment, sans acquis particulier, puis j'ai vraiment commencer il y a un an.
Logiciel utilisé pour coder : KompoZer, Notepad ++, dreamweaver que je n'utilise que très peu.
Évaluation: [V] CSS [V] HTML
Folio codage :
http://made-in-paris.1fr1.net/ → juste la PA
http://19-ans-apres.forumotion.com/forum.htm → Juste le QQEL
https://css-actif.forumactif.org/conseils-avis-f45/elle-est-belle-ma-page-nan--ironie-t618.htm#10145
Un site très, très en cours ; http://site.voila.fr/testlou/index.html?0.5259864646825202
La page d'accueil et le QQEL ▬ http://tasse-de-the.forumactif.org/
http://img43.xooimage.com/files/8/b/3/signature1-1605012.jpg un signa modifiable
http://img26.xooimage.com/files/a/a/4/calen-vis1-15fc11a.jpg C'est moche hein ? On s'en fou c'est du JS qui vous donnera la date jusqu'en 9999 xD
- Spoiler:
Anti- Votre Signature Est Trop Longue
- Spoiler:
Décorer son texte avec du CSS
Introduction ;
En vous baladant sur les forums vous en avez vu de toutes sortes. Entre l'italique qui remet mystérieusement un manteau un peu trop doit, l'espacement des lettres d'un lien, de jolies majuscules qui décore tout et j'en passe. Mais voilà toi petit administrateur que tu es tu voudrais faire pareil et comprendre la magie de cet action! *0* Je suis désolé de t'apprendre que y'a rien de magique juste un peu de CSS et un petit sens de l'esthétique.
Prés-requis :
► Savoir écrire un lien
► Savoir ce qu'est le CSS et en connaitre la formation
Les liens :
Les liens non modifiés sont par définitions en souligné au passage de la souris, en gras. En gros banal à mourir. Avec un peu de CSS tout de suite c'est plus chouette !
Bref comme vu dans le tutoriel dédié aux différent style de liens on retrouve la balise - Code:
-
<a> qui ce retrouve avant chaque lien HTML. Donc en toute logique le style il va s'appeler a aussi. Par exemple pour enlever ce soulignement disgracieux qui apparait nous rajoutons ceci text-decoration:none; ce qui va nous donner;
- Code:
-
.a {
text-decoration:none;
}
Les liens au passage de la souris:
Maintenant pour modifier la mise en forme au passage de la souris on utilise un pseudo-format j'ai nommé :hover on le rajoute juste à la suite de la class. C'est à dire comme ceci : a:hover. Après libre cours à votre imagination *0*. Par exemple si je veux rendre mes liens tout en majuscule j'utilise la propriété text-transform et la valeur uppercase Soit :
- Code:
-
a:hover {
text-transform: uppercase ;
}
Les liens lorsqu'on clique dessus :
Pour modifier l'apparence de celui-ci à ce moment là on va utiliser le pseudo format :active puis un propriété. Par exemple ici on utilisera background-color qui changera la couleur du fond
- Code:
-
a:active {
background-color: #FFFFFF;
}
Les liens déjà visités :
Pour cela on utilise le pseudo format :visited qui signifie visité en anglais puis comme pour les autres pseudo format on va lui rajouter un propriété. Comme par exemple une italique
Et je mets ça où ?
On a les codes, soit. C'est bien, apparemment c'est joli mais j'en fais quoi au juste ?
Pour mettre en place ton CSS tu te rends dans ton panneau d'administration tu cliques ensuite sur Affichage puis sur couleurs tu cliques enfin sur Feuille de Style CSS mets ton code CSS à l'intérieure clique sur valider et magie que voila ça marche sur ton forum !
- Spoiler:
Les différents types de liens
- Spoiler:
Présentation de votre Staff
Introduction ;
Un petit code bien pratique pour qui veut un présentation de son staff de façon original . Les couleurs, images et tailles peuvent être changé au grès des envies.
aperçut de la chose ▬ http://img27.xooimage.com/files/e/3/0/infobulle-15ecdea.jpg
Prés-requis :
► Base en HTML et CSS
► Savoir lire et inventer pas juste copié/collé ... @.@
Le CSS :
- Code:
-
a.imginfo {
border-bottom:0 solid #couleur;
color:#couleur;
position:relative;
text-decoration:none;
}
a.imginfo span {
display:none;
}
a.imginfo:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
cursor:help;
z-index: 999;
}
a.imginfo:hover span {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:white none repeat scroll 0 0;
border-color:#couleur;
border-style:solid;
border-width:3px 3px 5px 5px;
display:inline;
left:20px;
padding:3px;
position:absolute;
top:15px;
white-space:nowrap;
}
Explications
EN COURS
Les liens lorsqu'on clique dessus : - Code:
-
<DIV style="BACKGROUND-COLOR: CadetBlue; TEXT-ALIGN: center" align=justify><SPAN style="FONT-FAMILY: Palatino Linotype"><SPAN style="COLOR: white">TEXTE</SPAN></SPAN><BR></DIV> [i][size=9][center][b]V[/b]euillez passer votre souris sur le nom de la personne.[/center][/size][/i] [list][list][b][color=#9CD160]►[/color][/b] <a class="imginfo">[color=Dimgrey] P S E U D O ( o u t e x t e , o u i m a g e ) [/color]<span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr><td style="text-align: center;"><font size="1">Tu marques ce que tu veux.</font><br/></td></tr><tr><td style="text-align: center;"><a class="imginfo"><img src="http://i36.tinypic.com/v7fcrd.png"/> <FONT SIZE=0>(c) Still Stocking</FONT></a></td></tr><tr><td style="text-align: center;"><font size="1"><br/> Ooooh un texte </font> [url=http://] LINK QUELQUONQUE[/url]</td></tr><tr align="center"/></tbody></table></span></a> [/list][/list]
Explications :
EN COURS
Et je mets ça où ?
Dans un message dans ton sujet!
ATTENTION JAMAIS SUR TA PAGE D'ACCUEIL ! Elle ne reconnaitra pas le BBCcode utilisé !
Tutoriel écris par ABBADON
Merci de ne pas copier !
Auto-évaluation du niveau: 12.5/20
Merci à celui qui me donnera le test! xD
| | |
|
Orange 
RocketMan
 Messages : 3086
| Très bien, apparemment mon staff attends que je lui donne l'exemple avant de prendre un premier Test de Niveau. Ils font une petite crise de résistance au changement...  Je vais donc faire ton évaluation et te donner les résultats selon les preuves que tu m'as données. Et, au besoin, te donnerais un petit exercice pour m'assurer que tu maîtrise telle ou telle notion.  Tout ça... demain ! À moins que quelqu'un ne se manifeste d'ici là  | | |
|
Loumina
{ Membre actif }
Messages : 308
| J'ai hâte de voir le test .... ou pas en faite ....  Puis t'façon faut bien que quelqu'un donne un bon exemple non ?  | | |
|
iowan
{ Membre actif }
Messages : 304
| oh tiens tiens un codeur qui veut un test je pense que je vais préparer quelque chose pour toi | | |
|
Loumina
{ Membre actif }
Messages : 308
| Soit pas trop méchant hein ? ET c'est moi qui dit ça .... --" | | |
|
iowan
{ Membre actif }
Messages : 304
| bon me revoila encore mais avec un test dans la poche  le but est de créer un logo "cssactif" comme cet exemple (SANS IMAGE) avec du html & css bien sur . bon j'ai utilisé le font abstract qui est populaire chez les designers ( je crois!) tu peut l'utilisé la note sera devisé en partie alors je note pas que la resultat mais aussi autre chose ( secret ) tu va ignorer Internet explorer et utiliser firefox voila l'exemple   je te souhaite bon chance  | | |
|
Loumina
{ Membre actif }
Messages : 308
| AAAAAAAAAAAAAAAAAH ! OO" Mais c'est quoi c'te test! Sadique =="
OUaif, bon je m'y met ... Par contre ayant réussi à casser la ligne du téléphone (no comment) je sais pas quand je vais le rendre! =X | | |
|
Orange
RocketMan
Messages : 3086
| Bonjour YOUNG ► dream,
Où en est ton test ? | | |
|
Tech
{ Membre actif }
Messages : 1378
| Bonjour,
Des nouvelles du test YOUNG ► dream ? | | |
|
Loumina
{ Membre actif }
Messages : 308
| Je fais cela d'ici fin mars ... Ayant eu à reformater tout l'ordinateur j'ai tout perdu .... | | |
|
Sam 30 Mar 2024, 22:07 par 
