avatar
Sexe : Féminin
Date d'inscription : 05/06/2015
Messages : 649
Maxi-codeuse
Voir le profil de l'utilisateurhttp://felinae.forumactif.org/
# Classe de Rinle Sam 20 Aoû 2016 - 20:28
Bienvenue dans ta classe :D

Je suis ravie d'avoir une nouvelle élève et j'espère que je pourrais t'aider alors que tu as l'air de déjà pas mal maîtriser ton sujet ^^ J'ai vu que tu souhaitais "cacher du texte sous une image" je pense donc que tu veux parler de faire un fondu. Je vais entrer directement dans le vif du sujet vu qu'apparemment tu as déjà les bases.

Pour se faire il faudra que tu utilises des balises style et non pas que tu intègres le css directement dans les balises html. Je vais avoir besoin de parler de position et espère ne pas te perdre mais, dans tous les cas, n'hésite pas à me poser toutes les questions qui peuvent te passer par la tête.

Un code avec l'effet que tu veux donnera quelque chose dans ce genre :



Blablabla on peut écrire n'importe quoi en dessous et TADAAA ! °°


Code:
<style>#container{width:75%;height:90px;margin:auto;font-family:Times New Roman;font-size:13px;color:rgb(250,250,250);text-align:center;background-color:rgb(10,10,10);position:relative;}#container img{width:100%;height:100%;position:absolute;top:0;left:0;opacity:1;transition:all 2s ease;}#container img:hover{opacity:0.4;}</style>

<div id="container"><img src="http://www.w3schools.com/css/trolltunga.jpg"/>Blablabla on peut écrire n'importe quoi en dessous et TADAAA ! °°</div>

La position: absolute de l'image est indispensable pour qu'elle ne bouge pas dès que tu rajouteras du texte en dessous. Si c'est quelque chose d'incongru pour toi n'hésite pas à me sonner (:
Ensuite, ce qui est important c'est de voir que seule l'opacité varie au passage de la souris. J'ai pu voir dans ce que tu m'as montré que tu avais déjà des effets au survol donc je ne dois pas te parler chinois en abordant le sujet du hover ^^
Après les valeurs de l'attribut transition peuvent être modifiées en fonction de ce que tu souhaites obtenir (effet plus rapide ou plus lent, qui commence lentement ou quoi bref, pour faire ce que tu veux).

Voilou en espérant que cette première leçon t'aura convaincue ^.^ Pose toutes les questions que tu auras et dis moi quel est le point suivant que tu aimerais aborder :D
avatar
Sexe : Féminin
Date d'inscription : 12/08/2016
Messages : 58
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Rinle Sam 20 Aoû 2016 - 21:11
Tu as tout à fait compris ce que je cherchais **

Pour tout t'avouer, il est beaucoup de codes que j'ai pris ici ou sur CCCRUSH pour construire mon forum, notamment pour la PA, le QUEEL et les catégories, entre autres choses. Cela, parce que je ne maîtrise pas du tout la création de CSS même si j'ai compris comment on le lit aux templates ^^"
Du coup je ne vois pas ce qu'est le hover XD Tu peux m'expliquer, s'il te plaît?

Mis à part cela, je vois ce qu'est la position puisque je l'utilise en "relative" ^^

Ensuite, si je souhaite mettre cette effet sur cette partie de code :

Spoiler:

Il s'agit d'une fiche de présentation que je suis en train de composer et qui donne ça en ce moment :

Spoiler:
Nom & Prénom
Ces informations peuvent changer, ça c'est certain. Ne t'y accroches pas puisque tu pourras les changer avec un petit MP au staff ou dans les infos du profil ♪

Code par Rin sur Forum-service
avatar
Sexe : Féminin
Date d'inscription : 05/06/2015
Messages : 649
Maxi-codeuse
Voir le profil de l'utilisateurhttp://felinae.forumactif.org/
# Re: Classe de Rinle Sam 20 Aoû 2016 - 22:44
Alors, si tu veux on peut reprendre ensemble le code que tu as actuellement (: Comme ça on pourra l'adapter ensemble et tu sauras re-faire seule si tu en a de nouveau besoin une prochaine fois ^^

Mais je vais tout de même commencer par répondre à ta première question. Le hover est ce que l'on appelle une pseudo-class ce qui te premet de donner des propriétés à une class. Un hover ça te permet de donner un effet au survol. C'est à dire que, dans ton CSS, tu vas décrire en premier quel est l'aspect de ton élément lorsqu'il est "normal" et ensuite tu vas décrire ce qu'il se passe lorsqu'on passe dessus avec la souris. Je sais pas si mon explication va te sembler super claire ^^'

Pour la position absolute que j'ai cité précédemment elle ne peut pas se dissocier d'un position: relative qui sera présent dans la balise mère (je te parle chinois si j'évoque les balises mère et fille ? ö). L'absolute va venir se calquer sur le cadre qui le précède (balise mère) qui se trouve au dessus de lui. Là encore j'ai peur que ce soit un peu abstrait comme explication :')


avatar
Sexe : Féminin
Date d'inscription : 12/08/2016
Messages : 58
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Rinle Sam 20 Aoû 2016 - 23:03
Je veux bien qu'on le reprenne ^^

Si j'ai bien compris le hover, si j'ai une image et quelque chose en dessous, on va "décrire" dans le CSS l'image avant de passer à ce qui se passe quand on passe la souris dessus, c'est ça?

Je ne suis pas certaine de comprendre "balise mère et fille" car je suis trop sur des cadres, avec div ^^" C'est certainement à cause de ça que je dois avoir du mal à créer avec du CSS XD
avatar
Sexe : Féminin
Date d'inscription : 05/06/2015
Messages : 649
Maxi-codeuse
Voir le profil de l'utilisateurhttp://felinae.forumactif.org/
# Re: Classe de Rinle Dim 21 Aoû 2016 - 13:41
C'est exactement ça ^.^ Si on reprend l'exemple que je t'ai donné dans mon premier post et qu'on regarde le CSS on a :

Code:
#container img{width:100%;height:100%;position:absolute;top:0;left:0;opacity:1;transition:all 2s ease;}#container img:hover{opacity:0.4;}

Je dis donc que toute image se trouvant dans container doit prendre toute la largeur (width: 100%) mais aussi toute la hauteur (height: 100%) de la divison container. Ensuite je lui dis qu'elle doit se mettre en position: absolute ce qui signifie qu'elle se positionnera par rapport au cadre de départ à 0 pixels du haut (top: 0) et à 0 pixels du bord gauche (left: 0). Mais, surtout on lui dit d'être opaque à fond pour cacher le texte. Une fois que tu le survole (grâce au hover donc) l'opacité diminue pour qu'on voir le texte au travers o/

Pour ce qui est des balises mère et fille cela permet de comprendre qu'il existe une héritabilité entre les balises. En fait, celle que tu mets en premier, va donner ses caractéristiques à la suivante. Mais, pour bien comprendre ce que c'est, je te laisse lire ce sujet d'Alsacréation parce qu'il est très bien fait et sera bien plus clair que mes propres explications ^^' Après tu peux bien évidemment me demander des précisions s'il y a des choses que tu ne comprends pas.


avatar
Sexe : Féminin
Date d'inscription : 12/08/2016
Messages : 58
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Rinle Dim 21 Aoû 2016 - 14:08
Donc, si j'ai bien compris les balises mères et fille, en prenant l'exemple de mon code j'ai des balises div qui sont mère d'autres balises div parce qu'elles sont imbriquées dedans?

Merci pour ton explication du hover :)
Mais dis-moi, dans un code HTML comme un cadre rp ou une fiche de présentation, le container se place où? Est-ce qu'il faut utiliser une balise spéciale?
avatar
Sexe : Féminin
Date d'inscription : 05/06/2015
Messages : 649
Maxi-codeuse
Voir le profil de l'utilisateurhttp://felinae.forumactif.org/
# Re: Classe de Rinle Dim 21 Aoû 2016 - 14:58
Tu as tout compris :D La div la plus extérieure est la balise mère et ta div contenue dans la mère est ce qu'on appelle la fille ^.^

Il n'y a pas de balise spéciale à utiliser. En fait c'est juste que j'ai décidé d'appeler mon style "container" mais j'aurais très bien pu l'appeler "patate" ou "table". Le tout c'est de bien l'appeler par son nom dans le html. Tu vois ce que je veux dire ? (: Parce que, si tu regardes bien mon exemple, tu as dans le CSS (entre les balises style) le nom de mon style qui est container et, quand tu regardes dans mon html (ma div pour le coup), tu retrouves le même nom ^^
Sachant que tu peux appeler depuis le CSS un style de deux manière différentes. Soit le nom de ton style est précédé d'un # et dans le html tu écriras id="nomdustyle". Soit le nom de ton style est précédé d'un . et dans le html tu écriras class="nomdustyle".



J'ai ici mon style que j'ai nommé "truc" que j'ai précédé d'un . et que j'appelle en disant "class"


J'ai ici mon style que j'ai nommé "chose" que j'ai précédé d'un # et que j'appelle donc en écrivant "id"


Code:
<style>.truc{width:60%;height:40px;margin:auto;background-color:red;border:2px solid rgb(0,0,0);}#chose{width:60%;height:40px;margin:auto;background-color:rgb(0,0,0);border:2px solid red;color:rgb(240,240,240);}</style>

<div class="truc">J'ai ici mon style que j'ai nommé "truc" que j'ai précédé d'un . et que j'appelle en disant "class"</div>

<div id="chose">J'ai ici mon style que j'ai nommé "chose" que j'ai précédé d'un # et que j'appelle donc en écrivant "id"</div>

Ca te semble pas trop trop compliqué ? ^^ Sachant que tu peux appeler une class autant de fois que tu veux alors qu'un id ne sera utilisable qu'une seule fois. C'est la seule différence qui existe entre les deux (:
avatar
Sexe : Féminin
Date d'inscription : 12/08/2016
Messages : 58
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Rinle Dim 21 Aoû 2016 - 15:34
Donc la partie :

Code:
<style>.truc{width:60%;height:40px;margin:auto;background-color:red;border:2px solid rgb(0,0,0);}#chose{width:60%;height:40px;margin:auto;background-color:rgb(0,0,0);border:2px solid red;color:rgb(240,240,240);}</style>

Je peux le mettre juste avant mon code tant que mes noms sont pareil après, n'est-ce pas?
Si c'est ça, je vais pouvoir simplifier mon code XD A moins que le CSS soit obligatoire?
avatar
Sexe : Féminin
Date d'inscription : 05/06/2015
Messages : 649
Maxi-codeuse
Voir le profil de l'utilisateurhttp://felinae.forumactif.org/
# Re: Classe de Rinle Dim 21 Aoû 2016 - 19:21
Cette partie correspond bel et bien au CSS ^^ Si tu veux avoir des explications un peu plus précise sur où cela doit se trouver dans une vraie page html (pas sur FA donc) je te laisse regarder ce tuto de Mello qui récapitule très bien le tout (:

Mais oui en effet cela te permet d'alléger ton code :D Parce qu'en théorie le CSS n'est pas vraiment fait pour être intégré directement dans les balises html. De plus, si cette fiche doit être une fiche d'inscription utilisable pas tous les nouveaux arrivants tu peux même mettre cette partie directement dans le CSS de ton forum.


avatar
Sexe : Féminin
Date d'inscription : 12/08/2016
Messages : 58
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Rinle Dim 21 Aoû 2016 - 19:33
Je vois ^^

Si je comprends bien le tutoriel, le code :
Code:
#container img{width:100%;height:100%;position:absolute;top:0;left:0;opacity:1;transition:all 2s ease;}#container img:hover{opacity:0.4;}
serait placé entre les balises
Code:
<style type="text/css">Feuille de style CSS</style>
et mes div seraient dans les balises body, c'est ça?

Par contre, je ne comprends pas du tout ça :

Code:
<meta charset="utf-8" />

Après tout, lorsqu'on fait un code comme moi les écritures dites "normales" sont automatiquement acceptées, non?
avatar
Sexe : Féminin
Date d'inscription : 05/06/2015
Messages : 649
Maxi-codeuse
Voir le profil de l'utilisateurhttp://felinae.forumactif.org/
# Re: Classe de Rinle Lun 22 Aoû 2016 - 10:58
Tu as tout compris :D Le petite bout de code que tu ne comprends pas sert à rendre affichable les caractères spéciaux tels que les "ë" qui sont particuliers à la langue française ^^

Les polices les plus souvent utilisées comme Times New Roman ou Arial par exemple sont en effet utilisables sans faire plus d'efforts que de noter leur nom ^^ Après si tu souhaites utiliser des polices avec un effet un peu particulier je te conseille d'aller voir sur GoogleFonts. Grâce à un lien que tu placeras dans le body ou juste avant ton code html dans FA tu pourras utiliser toutes les polices qui se trouvent là dedans. Si tu ne sais pas de quelle manière on procède je pourrais te montrer ça avec des petites captures d'écrans parce que c'est plus simple x)


avatar
Sexe : Féminin
Date d'inscription : 12/08/2016
Messages : 58
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Rinle Lun 22 Aoû 2016 - 12:47
D'accord ^^

J'ai souvent vu cette pratique. Dans ces cas les balises link étaient utilisées en début de code. Personnellement j'aurais voulu utiliser des écritures plus calligraphiques qui sont proposées sur Dafont.com ^^" malheureusement pour ça faudrait que tout le monde enregistre l'écriture que je prendrais XD

Désolée d'éditer que maintenant mais je viens de modifier mon code comme conseillé et j'aimerais savoir ce que tu en penses ^^

Code:
<!DOCTYPE html>
  <html>
      <head>
          <meta charset="utf-8" />
<style>#cadre{width:400px;height:600px;margin:auto;margin-top:-175px;background:url(http://orig12.deviantart.net/6522/f/2011/311/c/d/texture_36_by_xnienke-d4ffbtf.jpg);}</style>
<style>#container{width:100px;height:100px;margin:auto;padding:3px;font-family:Georgia;font-size:10px;color:rgb(250,250,250);text-align:center;background-color:rgb(10,10,10);position:relative; bottom:35px;left:-160px;border-radius: 50px;}#container img{width:100px;height:100px;position:absolute;top:0;left:0;opacity:1;transition:all 2s ease;border-radius: 50px;border: 3px solid blue; }#container img:hover{opacity:0.3;}</style>
<style>.np{width:280px;height:75px;margin:auto; margin-top:-164px; margin-left:80px;font-size:35px;font-family:Monotype Corsiva; text-align:center;color:#888BF3;}</style>
<style>.note{width:250px;height:75px;margin:auto;margin-top:-50px;margin-left:120px;font-size:13px;font-family:Georgia;text-align:center;color:#14153C;}</style>
      </head>

      <body>
      <div id="cadre">
<div id="container"><img src="http://i35.servimg.com/u/f35/19/36/53/41/ia_voc10.jpg"/><b>Avatar</b>

Nom & provenance</div>
<div class="np">Nom & Prénom</div>
<div class="note">Ces informations peuvent changer, ça c'est certain. Ne t'y accroches pas puisque tu pourras les changer avec un petit MP au staff ou dans les infos du profil ♪</div>
<hr width="400" size="4" align="center" color ="#4A4DA6"></hr></div>
</div>
      </body>
  </html>

Par contre j'ai un problème avec le np : j'ai beau rétrécir le cadre ou l'écriture j'ai le "Prénom" qui passe sous le reste :/ Je vais tenter de corriger de mon côté ^^"

voilà XD
avatar
Sexe : Féminin
Date d'inscription : 05/06/2015
Messages : 649
Maxi-codeuse
Voir le profil de l'utilisateurhttp://felinae.forumactif.org/
# Re: Classe de Rinle Lun 3 Oct 2016 - 17:42
Coucou,

Déjà mille pardons je n'avais plus re-pensé à ton message ö Cependant je vais être dans l'obligation de te rediriger vers un autre codeur du forum. En effet je quitte le staff à cause de quelques événements irl et ne pourrais donc plus tenir mes classes. Je te présente mes plus plates excuses u.u

Bonne continuation à toi !


avatar
Sexe : Féminin
Date d'inscription : 12/08/2016
Messages : 58
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Rinle Lun 3 Oct 2016 - 19:03
Kikoo ^^

Je comprends et te remercie de m'avoir prévenue :)
Je serais ravie que tu me redirige vers quelqu'un d'autre ^^ Tiens moi au courant, stp ;)

Bon courage à toi ^^
avatar
Sexe : Féminin
Date d'inscription : 05/06/2015
Messages : 649
Maxi-codeuse
Voir le profil de l'utilisateurhttp://felinae.forumactif.org/
# Re: Classe de Rinle Lun 3 Oct 2016 - 21:20
Je te laisse regarder quelles sont les classes encore ouvertes ö J'ai vu sur la page principale qu'il restait deux places disponibles.
Après avoir jeté un petit coup d'oeil ce sont Awful et Batty qui ont encore une place disponible chacun !


avatar
Sexe : Féminin
Date d'inscription : 12/08/2016
Messages : 58
Newbie
Voir le profil de l'utilisateur
# Re: Classe de Rinle Lun 3 Oct 2016 - 21:21
oki ^^ Merci :)
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum