avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 3932

Fiche Membre
Lots gagnés:
Admin' / Designer
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
# Classe n°1 - Floconle Lun 12 Juin 2017 - 11:18
Bonjour et bienvenue dans ta classe @Flocon ! Installe-toi confortablement, prends un truc à boire et de la musique et profite bien de ces cours

Nous allons commencer par un petit questionnaire qui me servira à évaluer tes connaissances en codage. Si tu ne connais pas toutes les réponses, ce n'est pas grave, tu es là pour apprendre. Tu n'es pas notée ni quoi que ce soit. Fais juste de ton mieux ! :D

Code:
[b]Qu'est-ce que le BBcode et quelle est son utilité ?[/b]

[b]Qu'est-ce que le HTML et quelle est son utilité ?[/b]
[b]Qu'est-ce qu'une balise ouvrante ?[/b]
[b]Qu'est-ce qu'une balise fermante ?[/b]
[b]Qu'est-ce qu'une balise orpheline ? Donne moi deux exemples.[/b]

[b]Qu'est-ce qu'un tableau ? [/b]
[b]Peux-tu m'en donner les balises pour un tableau de deux lignes sur deux colonnes ?[/b]
[code][/code]
[b]Comment fusionner les cellules d'un tableau ?[/b]
[b]Comment fusionner les colonnes d'un tableau ?[/b]

[b]Quelle est la différence entre style, class et id ?[/b]
[b]Quelle est la différence entre les balises div et span ?[/b]
[b]Qu'est-ce qu'une liste ordonnée/désordonnée ?[/b]
[b]Quelles en sont les balises ?[/b]

[b]Qu'est-ce que le CSS et quelle est son utilité ?[/b]
[b]Qu'est-ce qu'une propriété en CSS ?[/b]
[b]Qu'est-ce qu'une valeur en CSS ?[/b]
[b]Peux-tu me donner un exemple de propriété CSS en lui attribuant une valeur de ton choix ?[/b]

[b]A quoi correspond l'élément CSS position:absolute; ? Quelle est sa fonction ?[/b]
[b]A quoi correspond l'élément CSS position:relative; ? Quelle est sa fonction ?[/b]
[b]A quoi correspond l'élément CSS display:inline-block; ? Quelle est sa fonction ?[/b]
[b]A quoi correspond la propriété float ? Quelle est sa fonction ?[/b]

Après avoir répondu à ce questionnaire, je te proposerai des exercices en fonction de ton niveau. Comme tu as déjà les bases, je verrais seulement en fonction de tes réponses si tu as besoin de quelques approfondissements et tu me diras ce que tu auras envie d'étudier :D
Bien sûr, des exercices comme la création de pages d'accueils, de catégories ou autre seront au rendez-vous, mais c'est seulement quand on sentira toutes les deux que tu es prête qu'on s'y attaquera, bien sûr :D

Voilà, c'était le petit message d'introduction à mon cours. Maintenant je te souhaite bon courage pour répondre à mon petit questionnaire
avatar
Sexe : Féminin
Date d'inscription : 23/11/2014
Messages : 945

Fiche Membre
Lots gagnés:
Accro au forum
Voir le profil de l'utilisateur
# Re: Classe n°1 - Floconle Lun 12 Juin 2017 - 17:23
Coucou ! :D
Déjà, merci beaucoup à toi de m'avoir accepté, c'est très gentil ! Je vais essayer de faire de mon mieux pour répondre, mais je ne garantis rien... Bref, go x)

Qu'est-ce que le BBcode et quelle est son utilité ? Le BBcode est l'ensemble des boutons que l'on peut trouver au dessus de message que l'on écrit sur les forums, et qui sert à faciliter la mise en page pour ceux ne maîtrisant pas le codage en utilisant des petits codes tout simples entre crochets.

Qu'est-ce que le HTML et quelle est son utilité ? Le HTML et un langage que l'on utilise sur les sites internet permettant de mettre en page plusieurs chose. C'est en quelque sorte le squelette d'un site. Sans CSS, il n'est rien.
Qu'est-ce qu'une balise ouvrante ? Une balise ouvrante et une balise qui ouvre le code et que l'on trouve entre <> dans laquelle se trouve une propriété.
Qu'est-ce qu'une balise fermante ? La balise fermante sert à fermer la balise ouvrante en rajoutant un slash au début avant de rajouter la valeur.
Qu'est-ce qu'une balise orpheline ? Donne moi deux exemples. Une balise orpheline est un balise ne comportant pas de balise ouvrante/fermante. Elle se ferme automatiquement, même s'il faut rajouter un slash à la fin (je ne sais plus si c'est obligatoire ou pas...)
Exemples :
Code:
<img src="urldelimage" />
<br />


Qu'est-ce qu'un tableau ? Un tableau est un élément qui sert à classer plusieurs informations dans des lignes et des colonnes. Je ne connais pas vraiment là définition HTML
Peux-tu m'en donner les balises pour un tableau de deux lignes sur deux colonnes ?
Code:
<table><tr><td>Blabla</td><td>Blabla</td></tr><tr><td>Blabla</td><td>Blabla</td></tr>
(Je suis consciente que c'est un tableau très simple ne permettant pas une vrai mise en forme, mais j'avoue avoir un trou.

Comment fusionner les cellules d'un tableau ? Rowspan ? Je crois avoir lu un tutoriel sur les tableaux mais j'avoue que je ne m'y suis pas attardée, il faudra que je m'y mette.
Comment fusionner les colonnes d'un tableau ? Cellspan ?

Quelle est la différence entre style, class et id ? Bon alors, pour le style, je dois avouer que je ne sais pas vraiment, mais je sais quand m'en servir... C'est euh, quelque chose qui permet d'introduire du CSS ?
Pour class, c'est lorsque l'on veut introduire le nom que l'on a donné à une partie du CSS que l'on utilise plusieurs fois que l'on met entre deux balise style ou sur la feuille CSS sur un code HTML ?
Et pour l'id, c'est à peu près la même chose que le class, sauf que l'on ne l'utilise que lorsqu'il n'y a qu'un élément correspondant à la partie du code ?

C'est sans doute un peu fouillis x)
Quelle est la différence entre les balises div et span ? La balise div produit automatiquement un saut de ligne, ce qu'il n'est pas le cas pour la balise span. La div sert à créer un bloc, et le span est généralement utilisé pour le texte.
Qu'est-ce qu'une liste ordonnée/désordonnée ? Alors là, j'en sais rien :/
Quelles en sont les balises ? :/

Qu'est-ce que le CSS et quelle est son utilité ? Le CSS (Cascade Style et j'ai oublié x)) est un langage permettant de mettre en forme le HTML, il est en quelque sorte la peau. Pareil, sans le HTML, il n'est rien.
Qu'est-ce qu'une propriété en CSS ? Une propriété en CSS est le nom de la propriété que l'on va utiliser.
Qu'est-ce qu'une valeur en CSS ? La valeur est ce qui va indiquer de quelle taille/quelle couleur/etc de la propriété.
Peux-tu me donner un exemple de propriété CSS en lui attribuant une valeur de ton choix ?
Code:
border: #000 5px double

A quoi correspond l'élément CSS position:absolute; ? Quelle est sa fonction ? C'est ce qui sert à indiquer la position d'un élément en hauteur ?
A quoi correspond l'élément CSS position:relative; ? Quelle est sa fonction ? :/
A quoi correspond l'élément CSS display:inline-block; ? Quelle est sa fonction ? :/
A quoi correspond la propriété float ? Quelle est sa fonction ? La propriété float correspond à euh, introduire une image/une lettre en modifiant l'emplacement du texte pour ne pas qu'il se place dessus ?

Voilà, merci beaucoup, encore x)
avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 3932

Fiche Membre
Lots gagnés:
Admin' / Designer
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
# Re: Classe n°1 - Floconle Ven 16 Juin 2017 - 10:41
De rien, c'est tout naturel ! J'ai pas re-ouvert mes classes pour rien %D
Sinon, je trouve que tu t'en es vraiment très bien sorti ! Y'a des petits cafouillages, mais c'est normal. On va combler tout ça ;)

Pour les tableaux, dans ton résultat de tableau, tu as juste oublié de fermer ta balise table, mais sinon c'est bon :)

Après pour les fusions dans les tableaux, tu t'es un peu emmêlé les pinceaux. Colspan sert à fusionner les cellules horizontalement, tandis que rowspan fusionne les cellules verticalement.

A propos de la différence entre id, class et style, voilà un petit topo. Pour commencer, il faut savoir que ce sont tous ce qu'on appelle des attributs, c'est à dire des éléments qui permettent d'attribuer une fonction ou un aspect à un autre élément HTML quelconque.
- id : on peut lui donner le nom qu'on souhaite et l'attribuer de la même manière MAIS, comme tu l'as dit, il n'est pas possible que le même nom d'id soit présent deux fois dans une page HTML. Cependant, tu remarqueras qu'on peut en trouver plusieurs de même nom dans le CSS.
- class : cet attribut fonctionne grossièrement comme l'id, sauf qu'on peut attribuer la même class autant de fois qu'on le souhaite. On peut également attribuer deux classes à un même élément en les séparant d'un espace, comme ceci :
Code:
<div class="MaClass"></div>
<div class="MaClass MonAutreClass"></div>
- style : l'attribut style, quant à lui, permet d'implanter directement du CSS à un élément. Il sera prioritaire sur TOUS les autres (c'est à dire que si on attribut un CSS à un élément dans lequel il y a un style, ce sont les propriétés dans l'attribut style qui seront affichés en priorité). C'est pour ça qu'en général, on évite de mettre des attributs style avec des id ou des class tant que c'est possible.

Pour span et div, c'est tout à fait ça ! J'émettrais juste une réserve pour la définition de la div : le retour à la ligne se fait avant et après la balise div.

Pour les listes ordonnées et désordonnées, tu n'as pas l'air de connaître. Je vais t'expliquer ça brièvement.

Toi, quand tu créés une liste de lien, tu vas sûrement coder ça de cette manière
Code:
<a href="#">Lien 1</a><br />
<a href="#">Lien 2</a><br />
<a href="#">Lien 3</a><br />
<a href="#">Lien 4</a><br />

Mais en gros, en utilisant les listes, ça peut donner ça
Code:
<ul>
  <li><a href="#">Lien 1</a></li>
  <li><a href="#">Lien 2</a></li>
  <li><a href="#">Lien 3</a></li>
  <li><a href="#">Lien 4</a></li>
</ul>

Ce qui visuellement donnera ceci :

Il existe également deux types de listes : la liste ordonnée et la liste désordonnée. Je t'ai donné plus haut un exemple de liste désordonnée. Elle consiste à faire une liste (mdr) d'éléments sans les hiérarchiser par des chiffre ou des lettres. Une liste ordonnée fera le contraire. A la place des petits cercles à gauche, il y aura des chiffres
Code:
<ol>
  <li><a href="#">Lien 1</a></li>
  <li><a href="#">Lien 2</a></li>
  <li><a href="#">Lien 3</a></li>
  <li><a href="#">Lien 4</a></li>
</ol>

Ce qui donnera ceci :
  1. Lien 1
  2. Lien 2
  3. Lien 3
  4. Lien 4


Tu pourras également remarquer que la seule différence d'écriture dans le code se trouve ici
Code:
<ul></ul>
<ol></ol>

En anglais, ul signifie unordered list tandis que ol signifie ordered list. Tu vois, c'est tout bête ! C'est pratique dans les fiches de présentation par exemple.

De même, il est tout à fait possible de modifier l'aspect de l'élément qui permet de hiérarchiser ou non tes liens (ou ton texte). Il suffit d'ajouter la propriété suivante
Code:
li{
list-style-type:...;
}

A la place des points, tu peux attribuer la valeur que tu souhaites. Par contre, tu ne pourras pas attribuer les mêmes pour une liste ordonnée et une liste désordonnée. Les puces ne sont pas les mêmes.

Pour la liste désordonnée, il y a celles-ci :
- disc : puce ronde remplie
- circle : puce ronde vide
- square : carré rempli
- none : aucun signe

Pour la liste ordonnée, il y a celles-là :
- decimal : 1, 2, 3
- decimal-leading-zero : 01, 02, 03
- hebrew : numéroration hébraïque traditionnelle
- armenian : numérotation arménienne traditionnelle
- georgian : numérotation géorgienne tarditionnelle

- hiragana : a, i, u, e, o, ka, ki, ku
- katana : A, I, U, E, O, KA, KI, KU
- hiragana-iroha : i, ro, ha, ni, ho, he
- katana-iroha : I, RO, HA, NI, HO, HE

- lower-roman : i, ii, iii, iv
- upper-roman : I, II, III, IV
- lover-greek : α, β, γ, δ, ε
- lower-alpha : a, aa, aaa
- upper-alpha : A, AA, AAA
- lower-latin : a, b, c
- upper-latin: A, B, C

- none: aucun signe

Voilà, liste non-exhaustive. C'est surtout pour te donner une idée de ce que tu peux faire avec. Beaucoup de gens utilisent ces listes comme sommaires de sites web également.

Et je crois que c'est tout à propos des listes ! :D

L'abréviation entière de CSS c'est Cascading Style Sheets qui veut dire feuille de style en cascade :P
Pour l'écriture de ta propriété CSS, il manque juste un ;
C'EST SUPER IMPORTANT. Ca peut détruire un code et c'est super galère à se relire pour trouver ça
Code:
border: #000 5px double;

TU LE SENS LE VÉCU ? XD (en plus c'était même pas mon code ._.)

Pour le reste, petit topo :
- position:absolute; : positionne l'élément spécifié de valeur position:relative; par rapport à son ancêtre le plus proche. L'élément est donc hors du flux normal des autres éléments.
- position:relative; : dispose tous les éléments comme s'ils n'étaient pas positionnés (hors du flux mais à la même place) puis ajuste la position de l'élément, sans modifier la présentation.
- display:inline-block; : cet élément génère une ou plusieurs boîtes en ligne.
- float : indique qu'un élément doit être retiré du flux normal et doit être placé sur le côté droit ou sur le côté gauche de son conteneur. Le texte et les autres éléments en ligne (inline) entoureront alors l'élément flottant.

Voilà ! Je te laisse relire un peu tout ça tranquillement. Ne soit pas trop pressée dans ta lecture, prends bien le temps d'assimiler ce qui est écrit :)

Sinon, on va pouvoir passer au plat de résistance et faire de petits exercices ! Si jamais tu as une question pendant ceux-ci, n'hésite pas à la poser pour que je te re-explique tout ça. Pareil, si tu n'as pas compris certaines parties de ma correction, je peux te la re-expliquer plus clairement si tu en ressens le besoin

Aloooors, du coup je te propose plusieurs choses. On peut commencer doucement avec la création d'une fiche de RP ou de Pub. La différence, c'est que dans la fiche de Pub on mettra sûrement des infobulles et qu'on utilisera (ou non) les propriétés position, float ou le display:inline-block;

Aussi, si tu ne sais pas faire d'infobulles et que tu choisis la fiche de pub, je t'apprendrais à en faire sans problème

Sinon si tu te sens d'humeur féroce, on peut aussi attaquer directement sur une page d'accueil ^^
avatar
Sexe : Féminin
Date d'inscription : 23/11/2014
Messages : 945

Fiche Membre
Lots gagnés:
Accro au forum
Voir le profil de l'utilisateur
# Re: Classe n°1 - Floconle Ven 16 Juin 2017 - 16:37
Coucou !
Alors, déjà, merci beaucoup pour toutes ces précisions que tu m'as donné et ces nouvelles choses, je vais essayer de tout garder en tête :D
J'ai juste un peu de mal au niveau des position et du display, je vais essayer de relire pour vérifier mais j'avoue avoir du mal x) Si j'ai bien compris pour le position:relative, ça annule l'emplacement qu'on avait donné au reste et on peut remplacer ça pour le placer où on veut ?
Sinon, je veux bien essayer une fiche de pub ! Concernant l'infobulle, j'ai vu un tuto dessus, donc si tu veux, je peux aller le voir pour t'éviter de tout m'expliquer, mais c'est comme tu le souhaites !
avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 3932

Fiche Membre
Lots gagnés:
Admin' / Designer
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
# Re: Classe n°1 - Floconle Jeu 22 Juin 2017 - 14:17
Coucou, désolée pour le retard ^^
Pour le position relative, ce n'est pas tout à fait ça. En fait l'élément reste à sa place mais si tu le déplace, les autres éléments ne prendront pas compte de son déplacement. C'est à dire que tu peux avoir deux blocks qui se superposent sans revenir à la ligne avec l'un sur l'autre. Elle permet surtout d'utiliser "proprement" la valeur absolute de position :)

D'accord, je vais essayer de te faire un petit schéma. En attendant, tu peux en effet aller lire le tutoriel sur les infobulles pour le moment. Si tu as des questions à ce sujet, n'hésite pas à me les poser.

Quand tu auras fini le tutoriel, essaye de me créer une petite infobulle et je te dirai ce que j'en pense :)
avatar
Sexe : Féminin
Date d'inscription : 23/11/2014
Messages : 945

Fiche Membre
Lots gagnés:
Accro au forum
Voir le profil de l'utilisateur
# Re: Classe n°1 - Floconle Dim 25 Juin 2017 - 9:09
Coucou !
Alors, j'ai essayé une infobulle, mais il y a un petit problème de mon côté, je pense pour tout le monde aussi... L'infobulle s'affiche détachée de mon image est pas du tout à l'endroit que je souhaite. Je pense que ça doit être à cause du top et du left que j'ai mal placés ou mal indiqués ?
image
contenu de l'infobulle




Code:
<div class="infobulle"><img src="http://zupimages.net/up/17/25/d1t8.jpg" alt="image" /><div>contenu de l'infobulle</div></div>


<style>.infobulle{position: relative; display: inline-block; height: 70px; width: 70px;}.infobulle div{position: absolute;
top: 0px; left: 90px; z-index: 2; width: 100px; height: 30px; background: #669900; opacity: 0; visibility: hidden; transition: all 1s;}.infobulle:hover div{opacity: 1; visibility: visible;}  </style>

Merci d'avance :)
avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 3932

Fiche Membre
Lots gagnés:
Admin' / Designer
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
# Re: Classe n°1 - Floconle Lun 26 Juin 2017 - 20:09
Wow, c'est déjà très bien comme ça

En fait le problème vient de ton left:90px;. Ton bloc se déplace hors du cadre car tu lui dit de se placer 90 pixels à gauche de sa position initiale :)

Si tu veux placer ton bloc au dessous de ton image, il faut plutôt écrire left:0; top:0; et le tour est joué ! :D
avatar
Sexe : Féminin
Date d'inscription : 23/11/2014
Messages : 945

Fiche Membre
Lots gagnés:
Accro au forum
Voir le profil de l'utilisateur
# Re: Classe n°1 - Floconle Mer 28 Juin 2017 - 11:43
image
contenu de l'infobulle




Code:
<div class="infobulle"><img src="http://zupimages.net/up/17/25/d1t8.jpg" alt="image" /><div>contenu de l'infobulle</div></div>


<style>.infobulle{position: relative; display: inline-block; height: 70px; width: 70px;}.infobulle div{position: absolute;
top: 10px; left: 10px; z-index: 2; width: 100px; height: 30px; background: #669900; opacity: 0; visibility: hidden; transition: all 1s;}.infobulle:hover div{opacity: 1; visibility: visible;}  </style>
Yeah, merci !

Et euh, pour mettre l'infobulle à droite, juste à côté du carré, c'est comment ? Désolée, j'ai encore du mal avec les positions :$
avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 3932

Fiche Membre
Lots gagnés:
Admin' / Designer
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
# Re: Classe n°1 - Floconle Lun 17 Juil 2017 - 9:01
Je suis terriblement désolée je n'avais pas trouvé le temps de repasser par ici ;_; Comme je bosse cet été faut que je m'habitue au rythme ^^'
Je te réponds dans la foulée ! :D

EDIT : Sur ton message, l'infobulle est différente du code donné. Il doit prendre le CSS fait plus haut. Ce serait possible de le poster via un codepen ou jsfiddle ? Je ne sais pas si tu connais, je l'utilise souvent quand je donne des exemples de codes :)

Exemple ici https://jsfiddle.net/Hadhellia/wq9ne56o/

(en plus ça bugera moins que sur forumactif o/)

Sinon du coup, il faut tout bêtement attribuer à ta propriété left une valeur qui soit égale ou supérieure à la largeur de ton infobulle ! :D

En gros si ton image est de 90 pixels de largeur, tu attribues à https://jsfiddle.net/Hadhellia/wq9ne56o/ une valeur de 90 pixels ou plus.
avatar
Sexe : Féminin
Date d'inscription : 23/11/2014
Messages : 945

Fiche Membre
Lots gagnés:
Accro au forum
Voir le profil de l'utilisateur
# Re: Classe n°1 - Floconle Jeu 20 Juil 2017 - 15:51
T'inquiète pas pour le retard, prends tout ton temps ! :D
https://jsfiddle.net/Neigeou/0tnn62wd/embed/
C'est mieux, merci beaucoup pour le site
Du coup, je crois que c'est bon :D
avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 3932

Fiche Membre
Lots gagnés:
Admin' / Designer
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
# Re: Classe n°1 - Floconle Ven 21 Juil 2017 - 14:50
Le lien que tu m'as donné ne fonctionne pas
Est-ce possible de me le redonner ? :D
avatar
Sexe : Féminin
Date d'inscription : 23/11/2014
Messages : 945

Fiche Membre
Lots gagnés:
Accro au forum
Voir le profil de l'utilisateur
# Re: Classe n°1 - Floconle Ven 21 Juil 2017 - 14:54


Je sais pas trop comment prendre le lien, je suis pas douée en anglais
avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 3932

Fiche Membre
Lots gagnés:
Admin' / Designer
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
# Re: Classe n°1 - Floconle Ven 21 Juil 2017 - 14:55
Si c'est trop compliqué prends simplement le lien au dessus de la page de modification de ton code :P
avatar
Sexe : Féminin
Date d'inscription : 23/11/2014
Messages : 945

Fiche Membre
Lots gagnés:
Accro au forum
Voir le profil de l'utilisateur
# Re: Classe n°1 - Floconle Ven 21 Juil 2017 - 17:21
avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 3932

Fiche Membre
Lots gagnés:
Admin' / Designer
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
# Re: Classe n°1 - Floconle Ven 21 Juil 2017 - 18:15
Oh bah c'est très bien tout ça ! :D

Le seul truc que j'aurai à redire, c'est que le z-index n'est ici pas nécessaire, car même sans ton bloc conteneur vert passe au dessus de l'image comme le code HTML est placé après l'image :)

Sinon c'est bien ! Quand j'ai le temps, je te fais un schéma (demain aprem peut-être). En tout cas je te fais ça avant la fin de la semaine prochaine :D
avatar
Sexe : Féminin
Date d'inscription : 23/11/2014
Messages : 945

Fiche Membre
Lots gagnés:
Accro au forum
Voir le profil de l'utilisateur
# Re: Classe n°1 - Floconle Ven 21 Juil 2017 - 19:25
Merci beaucoup pour l'info et tout, prends ton temps pour le schéma :') Je vais enlever le z-index du coup, c'est vrai qu'il est en trop !
avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 3932

Fiche Membre
Lots gagnés:
Admin' / Designer
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
# Re: Classe n°1 - Floconle Sam 9 Sep 2017 - 19:42
Je suis une vraie plaie, je vais m'occuper de ton schéma @Flocon.

Encore désolée pour ce retard inexcusable.

Est-ce que ça te tente de faire ça ?

avatar
Sexe : Féminin
Date d'inscription : 23/11/2014
Messages : 945

Fiche Membre
Lots gagnés:
Accro au forum
Voir le profil de l'utilisateur
# Re: Classe n°1 - Floconle Sam 9 Sep 2017 - 21:40
Tu es tout à fait excusable, ne t'en fais pas ! Prends tout ton temps, ça ne me dérange pas de mon côté !

Concernant le schéma, ça me paraît un peu compliqué mais je vais tout de même tenter x) Je risque de poser beaucoup de questions en revanche Happyness En revanche, je pourrais avoir le lien des images ?
Merci beaucoup à toi d'avoir pris le temps de me faire le schéma
avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 3932

Fiche Membre
Lots gagnés:
Admin' / Designer
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
# Re: Classe n°1 - Floconle Dim 10 Sep 2017 - 1:52
Oui bien sûr, les voici :)





Si tu as des questions compte tenu de l'exercice, je pourrais y répondre pour te guider et que tu fasses le code comme voulu, bien évidemment. Tu n'es pas toute seule ^^

Si tu veux j'ai aussi le dossier avec les calques si tu en as besoin ! :D
avatar
Sexe : Féminin
Date d'inscription : 23/11/2014
Messages : 945

Fiche Membre
Lots gagnés:
Accro au forum
Voir le profil de l'utilisateur
# Re: Classe n°1 - Floconle Dim 10 Sep 2017 - 9:32
Hum... Je vais essayer de me débrouiller mais je n'hésiterai pas xD Merci encore, je vais m'y mettre !

EDIT : Après avoir cherché la police de titre trois heures, je ne la trouve toujours pas. Désolée de t'embêter encore mais est-ce que tu peux me la passer ? Merci beaucoup et excuse moi !
avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 3932

Fiche Membre
Lots gagnés:
Admin' / Designer
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
# Re: Classe n°1 - Floconle Dim 10 Sep 2017 - 14:39
Voici :)

Code:
<link href="https://fonts.googleapis.com/css?family=Julius+Sans+One|Philosopher" rel="stylesheet">
Pour les titres
Code:
font-family: 'Julius Sans One', sans-serif;

Pour les textes
Code:
font-family: 'Philosopher', sans-serif;
avatar
Sexe : Féminin
Date d'inscription : 23/11/2014
Messages : 945

Fiche Membre
Lots gagnés:
Accro au forum
Voir le profil de l'utilisateur
# Re: Classe n°1 - Floconle Dim 10 Sep 2017 - 15:14
Merciiii ! :D

EDIT : Aloooors, j'ai commencé et j'ai voulu me remettre à l'infobulle, du coup je l'ai testée en dessous mais je ne comprends pas pourquoi, ça ne marche pas J'ai relu plusieurs fois le code, trouvé quelques trucs mais jamais ça n'a marché. Peut-être que c'est parce qu'il y a beaucoup d'éléments ?
https://jsfiddle.net/Neigeou/v11vyr3n/1/
Excuse-moi encore, je vais essayer de plus te déranger Happyness
avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 3932

Fiche Membre
Lots gagnés:
Admin' / Designer
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
# Re: Classe n°1 - Floconle Jeu 14 Sep 2017 - 0:31
Coucou ! :D
Alors, premièrement je vais te demander de bien vouloir coder ta fiche en class et non avec class et style. Comme tu vas faire des infobulles, tu vas avoir besoin de class et il est souvent préférable de coder de la même manière, au cas où tu oublies des choses dans ton code HTML.

Ensuite, je te ferai remarquer que tu as mis ton infobulle en dehors de ton bloc principal, c'est pour ça qu'il se retrouve en dehors ^^'

Quand ce sera fait, il faudra alors que tu places ton image comme souhaité, mais ça je te laisse faire :P

Il faut aussi que tu t'imagines faire un tableau mais sans ses balises. Comment comptes-tu faire pour aligner rapidement et efficacement tes éléments Staff avec le Contexte et le A propos ? :)

N'hésite pas à poster un nouveau message, je préfère comme ça j'ai la notification de ton post et je sais que tu as répondu :P (même si c'est un double post c'est pas très grave, ce n'est pas du spam).
avatar
Sexe : Féminin
Date d'inscription : 23/11/2014
Messages : 945

Fiche Membre
Lots gagnés:
Accro au forum
Voir le profil de l'utilisateur
# Re: Classe n°1 - Floconle Jeu 14 Sep 2017 - 17:42
Ah excuse-moi dans ce cas !
Du coup pour le class c'est vrai, j'avais commencé comme ça et je n'ai pas réalisé que ça n'allait pas. Je vais modifier ça du coup !
Ensuite, pour l'infobulle, j'ai fait exprès pour essayer de tester mais ça ne marche pas, je ne sais pas trop pourquoi...
Je vais déjà faire un premier test pour le tableau. Je voulais essayer avec display: inline-block Mais au final, ça me paraît compliqué...
Je vais tenter un premier jet ce week-end n'ayant pas beaucoup de temps en semaine, encore merci !
avatar
Sexe : Féminin
Date d'inscription : 15/12/2012
Messages : 3932

Fiche Membre
Lots gagnés:
Admin' / Designer
Voir le profil de l'utilisateurhttp://sarahdealerevans.deviantart.com/gallery/
# Re: Classe n°1 - Floconle Jeu 14 Sep 2017 - 18:57
Ah mais je te dis pas de faire ça en tableaux, je te dis juste de t'en inspirer pour tes blocs, c'est pas pareil :P

Je ne vois pas pourquoi ton infobulle ne fonctionne pas si elle est dans le bloc avec le fond, c'est fort étrange

Tu me diras quand tu auras fait tout ça, prends ton temps surtout miss ♥️
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum