avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Mer 30 Mai 2018 - 19:43
Oups j'avais zappée la question >_<
Alors si je me trompe pas, elle sont block vu qu'elles se positionnent l'une en dessous de l'autre ?

J'ai ajouté l'image :3


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Jeu 31 Mai 2018 - 0:53
En effet, les deux sont de types blocs, bravo :3

Tu peux remettre le lien s'il te plait ?


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Jeu 31 Mai 2018 - 18:09


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Jeu 31 Mai 2018 - 18:39
Oh c'est parfait !

On va rendre notre fiche plus belle pour avoir quelque chose de la sorte



Sais-tu comment ajoute-on une bordure en CSS ?


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Jeu 31 Mai 2018 - 18:40
Hm... nope je pense pas ^^


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Jeu 31 Mai 2018 - 19:07
D'accord. Alors pour ajouter une bordure on a les propriétés "border-"

Voici un petit tuto qui explique un peu les choses border
Il est en anglais au fait. Si tu as des questions je suis là :3


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Ven 1 Juin 2018 - 21:54
Voilà c'est fait :3
Désolée pour le retard mais j'ai eu quelques problèmes persos >_<


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Sam 2 Juin 2018 - 1:31
Pas de soucis :3

Ajoutons donc un border-bottom à notre paragraphe :3 Tu peux le faire ?


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 3 Juin 2018 - 9:06
C'est fait :3


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 3 Juin 2018 - 15:15
Coucou :3

Alors pour le titre
Code:
h1 {
  border: 3px solid lavenderblush;
   background : lavenderblush;
 }

Tes bordures ont la même couleur que ton arrière plan donc elle ne sert pas vraiment à grand chose à part rendre ton élément plus large.
Même chose pour h3 et p.

Code:
img{
  border-image: 3px solid gainsboro;
  margin: o;
}

border-image sert à mettre une image en bordure par exemple:

Je suis une belle div



Voici le CSS de cet exemple :
Code:
.madiv {
  width: 200px;
  padding: 20px;
  border: 10px solid transparent;
  border-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpsW85YYg23Ni_iUmsBnrrvrjLGSvLxlSACGHGpUf5SLCYx9D0cQ') 10;
}

Revenons donc à notre schéma. Si tu regardes le schéma on a une bordure uniquement en bas de la partie paragraphe et elle est de la couleur du fond de h1 (skyblue pour mon exemple)

A savoir que le propriété "border" permet d'ajouter directement 4 bordures autour de l'élément. Mais on n'a besoin que de la bordure du bas, on va donc utiliser border-bottom

Donc dans mon schéma j'ai mis : border-bottom: 5px solid skyblue;

Pour mettre une bordure uniquement en haut on utilise border-top
pour la gauche c'est border-left
et pour la droite border-right

Je te laisse donc corriger ton code :3


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 3 Juin 2018 - 15:41
Voilà c'est modifié je pense :3


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 3 Juin 2018 - 17:50
C'est beaucoup mieux :3

Code:
h3{
  border-top: 5px solid top;
}

top n'est pas une couleur attention

Et pour l'image il faut mettre une bordure déjà qui va abriter l'image. Remarque que dans mon exemple précédent j'ai mis une bordure transparente

Code:
border: 10px solid transparent;
  border-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpsW85YYg23Ni_iUmsBnrrvrjLGSvLxlSACGHGpUf5SLCYx9D0cQ') 10;


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 3 Juin 2018 - 18:01
Hey !
J'ai modifié top ainsi que les autres couleurs (que je modifie régulièrement) et j'ai modifié pour l'image ^^


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 3 Juin 2018 - 18:18
Pourquoi tu as la même image en border ? ça fait bizarre x)
Tes colos sont jolis, dommage que ça ne va pas avec l'image, mais bon :3
Et au fait tu peux utiliser des codes hexadécimal pour les couleurs aussi, t'es pas obligée d'écrire les noms des couleurs.

On va maintenant mettre de belles typo à nos titres :3

utiliser une police Google fonts

Moi j'ai mis Sacramento pour le grand titre et Tangerine pour feat reine


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 3 Juin 2018 - 18:29
Je savais pas si il fallait en mettre une autre ou pas ^^"
Je cherche encore pour mettre d'autres colo ^^
Je sais mais je préfère mettre le nom car je les retiens plus facilement :3
J'ai ajouté deux polices d'écritures :
- Shadows into light to pour le grand titre
- Dancing Script pour le reste :3


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 3 Juin 2018 - 18:59
Tu as oublié quelque chose d'important, je te laisse vérifier


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 3 Juin 2018 - 19:03
Oups désolée j'étais sure d'avoir mis dans le HTML >_<


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 3 Juin 2018 - 19:18
C'est très bien :3

Donc pour ajouter une police on utilise font-family
Ce n'est pas forcément une police personnalisée, on peut très bien mettre arial, calibri, verdana, times new roman etc.
Quand le nom est composé il faut le mettre entre deux apostrophes comme pour les polices que tu as choisies.
Il est préférable de mettre une police neutre ou basique pour les textes vu que c'est plus lisible. On peut mettre donc les polices décorées pour les titres, là où il n'y a pas beaucoup de texte de façon général.

Est-ce que tu as des questions sur les polices ?


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Dim 3 Juin 2018 - 19:23
Je pense avoir bien compris pour les polices ^^


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Lun 4 Juin 2018 - 1:00
D'accord :3

En relisant ton code, je vois des choses à modifier

Au fait sur Google fonts tu peux sélectionner autant de police que tu veux et récupérer le lien après, comme ça tu auras un seul lien à mettre dans le HTML et non pas un lien par police.

Code:
<img src="https://img2.lght.pics/jUzg.png" alt="Une rose rouge">

Quand on a parlé de la balise img, on a dit que l'attribut alt sert à décrire l'image aux non-voyants ou quand l'image ne charge pas. Or ici je vois que tu as juste copié mon exemple avec la description "une rose rouge", alors qu'il n'y a pas de rose dans ton image.

Code:
img {
  margin: o;
}

Ici tu as mis la lettre O et non un zéro 0.
Par contre les images ont une marge 0 par défaut, tu n'as pas besoin de le spécifier.


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Mar 5 Juin 2018 - 17:54
Alors pour le premier point s'est rectifié mais vu que j'étais pas sure j'avais préférée faire ainsi ^^
Pour le deuxième point je l'ai écrit automatiquement en pensant à ton modèle donc ^^"
Et pour le troisième c'est enlever ^^


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Jeu 7 Juin 2018 - 18:50
C'est parfait :3

On va voir à présent les deux balises div et span.

@Caroline a écrit:Quelle est la différence entre div et span
Les balises div permettent de mettre un éléments et qui s'affichent dans un bloc rectangle et si on en met plusieurs à la suite, les éléments se retrouvent l'un au dessus de l'autre. Contrairement aux balises span qui elle permet d'isoler un élément dans le texte et lorsqu'il y en a plusieurs elle se suivent sur la même ligne.

On en a parlé aussi quand on a parlé des types de balises. Donc tu connais déjà la différence.
div vient de "divide" ou diviser, va donc diviser ou séparer en bloc un élément du reste du contenu et génère un saut de ligne.
span va entourer du texte et le séparer sur la même ligne pour lui appliquer par exemple une mise en forme différente.
div et span sont des balises non-sémantiques, c'est à dire qu'elles ne décrivent pas leur contenu.
Si jamais du mal pour la différence, il y a ce tuto qui donne des exemples en détails.

Donc je vais te demander de mettre tout le contenu de la fiche dans un bloc, ce bloc va nous servir pour mettre un fond à notre fiche et donner un nom de classe spécifique à notre fiche. On va alors ajouter une class dans la balise et je te laisse choisir le nom que tu veux. Attention à ne pas mettre des espaces ou des accents. Tu peux remplacer les espaces par un tiret bas (_) si tu veux mettre plus d'un mot.


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Sam 9 Juin 2018 - 18:01
Hey :3
Disons que malgré le fait que j'ai compris la théorie, je ne sais pas comment faire la pratique ^^"
Enfin, je ne sais pas vraiment ce que je dois faire et où le faire ^^"
Est-ce que tu aurais un tuto ou un exemple pour me montrer ce que je dois faire ?


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
avatar
Sexe : Féminin
Date d'inscription : 15/08/2017
Messages : 2858
Rose des sables Designer
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Sam 9 Juin 2018 - 18:09
Au fait quand je dis ajouter un bloc c'est simplement la balise div, vu que c'est une balise de type bloc et non-sémantique donc on l'appelle un bloc.
Donc on va mettre la div de façon à ce qu'elle comporte le titre, l'image, la citation et le paragraphe. C'est à dire que la balise ouvrante sera au tout début et la alise fermante à la fin. On va garder uniquement le lien de la police à l'extérieur.


avatar
Sexe : Féminin
Date d'inscription : 07/05/2017
Messages : 1229
Anim' & Potterhead lapine
Voir le profil de l'utilisateur
# Re: Classe N°6 | Carolinele Sam 9 Juin 2018 - 18:53
Hey !
C'est fait, je pense avoir fait ce que tu voulais ?


Merchiiii Moses ♥️ ♥️  plz  Coeur 2






Cadeaux :

By Reine :

By Chhaya :

By Naüt :

By Nox :
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum