Fiche de présentation

Bonjour !

Je viens faire appelle à vous pour apporter une modification à cette fiche :
J'aimerais que lorsqu'on passe la souris sur le premier rectangle TITRE 1 une petite bulle s'affiche (ou un rectangle zoomé) avec un autre texte (que j'écrirais moi même).
Je ne sais pas si c'est clair, mais j'espère ^^'.
Pour les dimensions et les couleurs, faites comme vous voulez.
J'aimerais en plus changer la police du TITRE 1 par Handlee, avec une petite explication si possible car je n'y arrive pas ^^'.
Et pour finir (Si si c'est vrai) réussir à zoomer le rectangle titre 2 Very Happy

TITRE 1

TITRE 2

TEXTE

SYGEA SUR EXQUISITE

Merci d'avance !

Code:: <link href='https://fonts.googleapis.com/css?family=Changa+One' rel='stylesheet' type='text/css'><div style="max-height: 750px;width: 525px;padding: 25px;background: #eeeeee;border-radius:25px;border-top:10px solid #e3e3e3;border-bottom:20px solid #e3e3e3;"><center><h1 style="font-weight: lighter;font-family:Changa One;color: #00806F;font-size: 70px;text-shadow:1px 1px 0px #7fb45c;margin-top: 15px;"><span style="font-size: 110px;"></span>TITRE 1<span style="font-size:80px;"></span></h1></center><div style="height: 30px;width: 490px;background: #00806F;box-shadow:1px -1px 0px #7fb45c;margin-bottom:5px;padding: 10px;"><center><h4 style="color: #f7f7f7;font-family:Changa One;font-size: 30px;text-shadow:1px 1px 0px #7fb45c;margin-top:5px;">TITRE</h4></center></div><div style="max-height: 570px;width: 515px;background: #f7f7f7;overflow: auto;padding: 5px;"><p style="text-shadow:1px 1px 0px #dbdbdb;">
TEXTE
</p></div><br/><center><div style="font-size: 8px"> SYGEA SUR EXQUISITE</div></center></div></center>

Coucou

Donc, tu veux une infobulle sur Titre 1, tu veux agrandir Titre 2, et tu veux aussi changer la police c'est ça ? :p
Rien de plus simple si c'est le cas !

Oui c'est ça, sauf que je me suis trompée c'est CENTRER titre 2 est pas zoomer x)
Pour la couleur de l'info bulle j'aimerais bien qu'elle soit un peut plus clair que la couleur que j'ai utilisé pour les titres.
Merci !

EDIT : j'ai réussi à le centrer, la balise n'était juste pas au bon endroit.

Alors, pour la police d'abord :
Vu que c'est une police personnalisée, tu dois l'appeler dans ton code. Pour cela, Google Fonts te propose un code à insérer avant ton CSS. Il s'agit de :

Code:: <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">

Ensuite, tu regardes où est ton titre 1. On remarque qu'il est là :

Code:: <h1 style="font-weight: lighter;font-family:Changa One;color: #00806F;font-size: 70px;text-shadow:1px 1px 0px #7fb45c;margin-top: 15px;"><span style="font-size: 110px;"></span>TITRE 1<span style="font-size:80px;"></span></h1>

(c'est d'ailleurs très mal codé, mais bon xD).
On commence par corriger le code tout moche :

Code:: <h1 style="font-weight: lighter;font-family:Changa One;color: #00806F;font-size: 70px;text-shadow:1px 1px 0px #7fb45c;margin-top: 15px;">TITRE 1</h1>

On obtient... ça :

TITRE 1

Ensuite, on utilise notre police personnalisée !
Vu que c'est une police personnalisée, on doit la mettre entre guillemets simples et si possible indiquer des polices non personnalisées qui seront prises à la place de Handlee dans le cas où celle-ci n'arrive pas à être chargée par le navigateur.
On modifie donc la propriété font-family :

Code:: font-family:Changa One;

De la sorte :

Code:: font-family: 'Handlee', Arial;

Là, si le navigateur n'arrive pas à charger Handlee, il prendra du Arial Wink

.
Du coup on obtient ça :

Code:: <link href='https://fonts.googleapis.com/css?family=Changa+One' rel='stylesheet' type='text/css'><h1 style="font-weight: lighter;font-family: 'Handlee', Arial;color: #00806F;font-size: 70px;text-shadow:1px 1px 0px #7fb45c;margin-top: 15px;">TITRE 1</h1>

Ce qui donne avec l'ensemble de la fiche :

Code:: <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet"><div style="max-height: 750px;width: 525px;padding: 25px;background: #eeeeee;border-radius:25px;border-top:10px solid #e3e3e3;border-bottom:20px solid #e3e3e3;"><center><h1 style="font-weight: lighter;font-family: 'Handlee', Arial;color: #00806F;font-size: 70px;text-shadow:1px 1px 0px #7fb45c;margin-top: 15px;">TITRE 1</h1></center><div style="height: 30px;width: 490px;background: #00806F;box-shadow:1px -1px 0px #7fb45c;margin-bottom:5px;padding: 10px;"><center><h4 style="color: #f7f7f7;font-family:Changa One;font-size: 30px;text-shadow:1px 1px 0px #7fb45c;margin-top:5px;">TITRE</h4></center></div><div style="max-height: 570px;width: 515px;background: #f7f7f7;overflow: auto;padding: 5px;"><p style="text-shadow:1px 1px 0px #dbdbdb;">
TEXTE
</p></div><br/><center><div style="font-size: 8px"> SYGEA SUR EXQUISITE</div></center></div></center>

Soit :

TITRE 1

TITRE

TEXTE

SYGEA SUR EXQUISITE

Et si on veut pas avoir les yeux qui ont mal, on modifie le code pour qu'il soit joli, correct, le moins lourd possible et pratique :

Code:: <link href='https://fonts.googleapis.com/css?family=Changa+One' rel='stylesheet' type='text/css'><link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet"><div style="max-height: 750px;width: 525px;padding: 25px;background: #eee;border-radius:25px;border-top:10px solid #e3e3e3;border-bottom:20px solid #e3e3e3;"><h1 style="font-weight: lighter; width: 100%; text-align: center; font-family: 'Handlee', Arial;color: #00806F;font-size: 70px;text-shadow:1px 1px 0px #7fb45c;margin-top: 15px;">TITRE 1</h1><h2 style="color: #f7f7f7;font-family:'Changa One', Arial;font-size: 30px;text-shadow:1px 1px 0px #7fb45c;margin:5px 0; height: 30px;width: 490px;background: #00806F;box-shadow:1px -1px 0px #7fb45c;padding: 10px; text-align: center;">TITRE</h2><p style="text-shadow: 1px 1px 0px #dbdbdb;max-height: 570px;height: 50px;width: 515px;background: #f7f7f7;overflow: auto;padding-left: 5px;margin: 0 0 17px 0;">
TEXTE
</p><div style="font-size: 8px; text-align: center;"> SYGEA SUR EXQUISITE</div></div>

TITRE 1

TITRE

TEXTE

SYGEA SUR EXQUISITE

Ca va jusqu'ici ? Wink

Oui c'est tout bon !
Mais maintenant le titre 2 n'est plus centré dans son rectangle qui lui même n'est plus centré dans la fiche Very Happy

(Si on veut prendre une police de chez Dafont, c'est le même principe ?)

C'est mieux ?

Code:: <link href='https://fonts.googleapis.com/css?family=Changa+One' rel='stylesheet' type='text/css'><link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet"><div style="max-height: 750px;width: 525px;padding: 25px;background: #eee;border-radius:25px;border-top:10px solid #e3e3e3;border-bottom:20px solid #e3e3e3;"><h1 style="font-weight: lighter; width: 100%; text-align: center; font-family: 'Handlee', Arial;color: #00806F;font-size: 70px;text-shadow:1px 1px 0px #7fb45c;margin-top: 15px;">TITRE 1</h1><h2 style="color: #f7f7f7;font-family: 'Changa One', Arial;font-size: 30px;text-shadow: 1px 1px 0px #7fb45c;margin: 5px auto;height: 50px;line-height: 50px;width: 515px;background: #00806F;box-shadow: 1px -1px 0px #7fb45c;text-align: center;">TITRE</h2><p style="text-shadow: 1px 1px 0px #dbdbdb;max-height: 570px;height: 50px;width: 515px;background: #f7f7f7;overflow: auto;padding-left: 5px;box-sizing: border-box;margin: auto;">
TEXTE
</p><div style="font-size: 8px; text-align: center;margin-top: 10px;"> SYGEA SUR EXQUISITE</div></div>

TITRE 1

TITRE

TEXTE

SYGEA SUR EXQUISITE

Si tu veux utiliser une police de Dafont :
-Tu prends regarde sur google fonts si la police existe
-Si elle existe, c'est la même méthode que ce qu'on a vu là
-Si elle n'existe pas, faut l'héberger sur ton site, gérer les droits d'accès, avoir un serveur etc. Mais heureusement, ATDC propose l'hébergement de polices ! (tu en sauras + avec la nouvelle maj).

On passe à l'infobulle ? Wink

Je préférerais quand c'était plus petit et centré :p
Oui on peut passer à la suite !

Plus petit ? Les dimensions sont toujours les mêmes :$. Et c'est centré ? Regarde ce qui s'affiche chez moi : (screen)
Fiche de présentation Captur10

Bon alors les infobulles, tu vas les voir dans ta formation HTML/CSS, donc je vais pas trop m'attarder dessus maintenant ! Mais avant j'aimerais résoudre ce problème de centrage dont tu parles. Tu as un screen ? Qu'est-ce qui n'est pas centré chez toi ?

Je parle du rectangle vert du titre 2 :p
Au début il était un peu moins large que le corps du texte, et était centré (enfin non et c'était le problème), mais en supprimant des parties du code tu l'as remis aux dimensions du reste ^^

De plus le crédit n'est plus centré en hauteur ^^'

Code:: <link href='https://fonts.googleapis.com/css?family=Changa+One' rel='stylesheet' type='text/css'><link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet"><div style="max-height: 750px;width: 525px;padding: 25px 25px 0 25px;background: #eee;border-radius:25px;border-top:10px solid #e3e3e3;border-bottom:20px solid #e3e3e3;"><h1 style="font-weight: lighter; width: 100%; text-align: center; font-family: 'Handlee', Arial;color: #00806F;font-size: 70px;text-shadow:1px 1px 0px #7fb45c;margin-top: 15px;">TITRE 1</h1><h2 style="color: #f7f7f7;font-family: 'Changa One', Arial;font-size: 30px;text-shadow: 1px 1px 0px #7fb45c;margin: 5px auto;height: 50px;line-height: 50px;width: 500px;background: #00806F;box-shadow: 1px -1px 0px #7fb45c;text-align: center;">TITRE</h2><p style="text-shadow: 1px 1px 0px #dbdbdb;max-height: 570px;height: 50px;width: 515px;background: #f7f7f7;overflow: auto;padding-left: 5px;box-sizing: border-box;margin: auto;">
TEXTE
</p><div style="font-size: 8px; text-align: center; width: 100%; height: 50px; line-height: 50px;">© SYGEA SUR EXQUISITE</div></div>

TITRE 1

TITRE

TEXTE

C'est mieux ?

Parfait alors !
Désolé avec la reprise des cours j'ai du mal à gérer mon temps pour le moment :$... On voit l'infobulle ensemble demain !

Ok donc on va s'attaquer à l'infobulle !

Une infobulle est un petit "cadre" qui s'affiche quand on survole un lien, une image, un texte enfin, ce qu'on veut, avec la souris.
Dans ce cadre, il y a souvent du texte.
Peut être as-tu du mal à voir ce que c'est exactement encore. Ca viendra, avec les explications ci-dessous Wink

Comment fait-on une infobulle ?

C'est assez simple regarde :

Code:: <a href="." id="infobulle">Texte qui actionne l'infobulle<span>Texte compris dans l'infobulle</span></a>

Déjà, on met un lien. Dedans on met un span. Et c'est ce span qui s'affichera comme infobulle lors du survol du lien Smile

.

Et en CSS, on aura alors la mise en page du lien, le CSS de l'infobulle cachée, et le CSS de l'infobulle affichée.

Code:: a#infobulle{
position:relative;
z-index:24;
}

a#infobulle span{
display: none;
}

a#infobulle:hover{
z-index: 25;
color: red;
}

a#infobulle:hover span{
display: inline;
position: absolute;
width: 100px;
height: 100px;
top: 5px;
right: 5px;
}

En gros, qu'est ce qui se passe ?
Au début, on a un lien, dans lequel se trouve le span, dans lequel se trouve le texte qui apparaîtra au survol de ce lien.

Quand on survole ce lien, le lien change de couleur, et l'infobulle apparaît.

Comment c'est possible ?
Le span, dans le lien, est au début, invisible, grâce au display: none.
Le display none indique qu'un élément est présent mais est invisible (du moins, le texte qu'il contient est invisible)

Puis, au survol du lien, on met un display: inline qui implique de rendre visible le contenu du span, dans une balise de type inline, qui sera notre infobulle.

Le reste, je pense que tu as compris Wink

Du coup, voici ce que ça donne avec un peu de modifications :
infobulle retravaillée

Et le code :

Code:: <!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Infobulle</title>
  <style type="text/css">
  a#infobulle{
position:relative;
z-index:24;
}

a#infobulle span{
display: none;
}

a#infobulle:hover{
z-index: 25;
color: red;
}

a#infobulle:hover span{
display: inline;
position: absolute;
width: 100px;
height: 100px;
left: 150px;
top: 8px;
background-color: green;
color: blue;
opacity: 0.5;
}</style>
</head>
<body>
<a href="." id="infobulle">Texte qui actionne l'infobulle<span>Texte compris dans l'infobulle</span></a>
</body>
</html>

Tu as des questions ?

Je pense que non, c'était clair Very Happy

!
J'essaierai de modifier l'infobulle tout à l'heure et je reviendrai te voir avec des questions Fiche de présentation 1787697386

Merci pour ton aide !

Bon après quelque tests, j'abandonne, j'arrive pas à faire ce que je veux Fiche de présentation 1263062960

J'aimerais bien que l'infobulle se dézoome du titre et atteigne la taille et la forme du rectangle gris ou il y a le titre 1, mais je veux qu'on la voit se dézoomer, je sais pas si c'est clair >.<

Concernant le design de l'infobulle, il suffit de reprendre ce qu'on voit dans le cours de CSS et de le rajouter dans le "a#infobulle:hover span{" ?

Dernière question, à quoi sert ce code ?

Code:: a#infobulle:hover{
z-index: 25;
color: red;
}

Si, je pense avoir compris :p.
En fait, on va avoir besoin des transitions. TU connais les transitions ?

Que dans les diaporamas qu'on faisait au collège Very Happy

C'est du CSS ?

Oui c'est du CSS Wink

. Enfin, pas dans tes diapos d'open office hein xD. Mais nous, on va les faire en CSS.
Voici un exemple de transition :
https://a-toi-de-coder.forumactif.org/h16-testransition

Tu peux me donner le code de ton infobulle ?

Bah c'est le code que tu m'as donné non ?

Code:: <style type="text/css">
a#infobulle{
position:relative;
z-index:24;
}

a#infobulle span{
display: none;
}

a#infobulle:hover{
z-index: 25;
color: red;
}

a#infobulle:hover span{
display: inline;
position: absolute;
width: 100px;
height: 100px;
left: 150px;
top: 8px;
background-color: green;
color: blue;
opacity: 0.5;
}</style>

Si tu veux le code de l'infobulle fini tu vas devoir attendre, je ne sais pas encore ce que je vais faire ^^'.

Oui, en fait, pour faire la transition, il me faut le code de l'infobulle finie. Enfin, au moins l'id et le hover de prêts :p.

Pour l'id tu peux garder "l'infobulle" et pour le hover... J'ai demandé la dernière fois à quoi correspondait le code (avec l'index et le red) mais tu ne m'as pas répondu ^^'.

Oups, désolé Surprised

.

Code:: a#infobulle:hover{
z-index: 25;
color: red;
}

Signifie :
au survol avec le curseur du lien qui a pour id "infobulle", on modifie le z-index à 25 et la couleur du texte en rouge.

Voici pour les transitions :
http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html

Le problème (je viens d'y penser Sad

), c'est que du coup on a besoin de balises style. Et malheureusement, ce serait pas correct de rajouter des balises style comme ça dans un message tout ça pour une fiche :/...

Oui mais c'est quoi index z xD ?

Ah, bah je vais modifier mon infobulle sans, et je reviendrais si j'ai un problème (ou pas) et pour montrer le résultat final !

z-index, c'est une propriété qui permet de placer un élément par dessus un autre, en gros. Tu verras ça dans la formation de toute façon Wink

.

Ca me va !

Voilà le nouveau code ! J'ai changé tout le design ^parce que je voulais une fiche à moi, et pas avec le crédit >.<
Seulement il y a 2-3 trucs que je n'arrive pas à faire :

- Enlever le souligné bleu du tritre 1, même en utilisant

Code:: text-decorartion: none

comme dans le cours
- J'aimerais enlever l’ascenseur de l'infobulle, et à la place qu'elle s’agrandisse autant qu'il faut en hauteur par rapport au texte (Je sais pas si c'est clair)
- Encore pour l'infobulle, j'aimerais que quand elle apparaisse, le titre 1, 2 et le texte de la fiche disparraissent pour que ça soit lisible (Je veux garder la transparence de l'infobulle)
- Pour finir je voudrais savoir si on peux mettre le "opacity sur le font blanc mais pas sur le texte orange ?

Voilà Very Happy

Code:: !DOCTYPE html>
<html lang="fr">
   <head>
      <meta charset="utf-8" />

      <title>Infobulle</title>
      <style type="text/css">
a#infobulle{
position:relative;
z-index:24;
}

a#infobulle span{
display: none;
}

a#infobulle:hover{
z-index: 25;
color: red;
}

a#infobulle:hover span{
display: inline;
position: absolute;
width: 440px;
height: 440px;
left: 15px;
top: -120px;
background-color: white 25%;
color: orange;
opacity: 0.4;
overflow: auto;
}
      </style>
   </head>

<body>
<a href="." id="infobulle">

<link href='https://fonts.googleapis.com/css?family=Changa+One' rel='stylesheet' type='text/css'><link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
   <div style="height: 450px;width: 470px;padding: 10px 0px 0px 0px; background-color: #6d695c;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;border-top :3px solid #FE7700;border-bottom: 3px solid #FE7700; border-left: 10px solid #FE7700;border-right: 10px solid #FE7700">
   <h1 style="font-weight: lighter; width: 100%; text-align: center; font-family: 'Handlee', Arial;color: #FE4C00;font-size: 65px;margin-top: 10px; margin-bottom: 20px;">TITRE 1</h1>

      <span>En gros, qu'est ce qui se passe ?
Au début, on a un lien, dans lequel se trouve le span, dans lequel se trouve le texte qui apparaîtra au survol de ce lien.

Quand on survole ce lien, le lien change de couleur, et l'infobulle apparaît.

Comment c'est possible ?
Le span, dans le lien, est au début, invisible, grâce au display: none.
Le display none indique qu'un élément est présent mais est invisible (du moins, le texte qu'il contient est invisible)

Puis, au survol du lien, on met un display: inline qui implique de rendre visible le contenu du span, dans une balise de type inline, qui sera notre infobulle.

Le reste, je pense que tu as compris Wink</span></a>

   <h2 style="color: #f7f7f7;font-family: 'Handlee', Arial;font-size: 30px;text-shadow: 1px 1px 0px #7fb45c;margin: 10px auto;height: 50px;line-height: 55px;width: 370px; background: transparent ;text-align: center;">

         TITRE 2</h2>

   <p style="color: white; height: 250px;width: 415px; background-image: transparent;border-top :3px solid #FE7700;border-bottom: 3px solid #FE7700; border-left: 10px solid #FE7700;border-right: 10px solid #FE7700;overflow: auto ;padding-left: 5px;box-sizing: border-box;margin: auto;">

TEXTE Bon, et bien pour vérifier que c'est tout ok, on va commencer à s'attaquer au CSS de notre exo continu !
On va donc reprendre les propriétés qu'on a vues !
On va commencer par la barre de navigation dans notre header.
On peut voir que les liens manquent de mise en page !
Liens non mis en page
On va alors les modifier.
D'abord, on enlève leur soulignage (avec text-decoration).
Ensuite on change leur couleur (couleur : #999999).
Liens en couleur
C'est déjà mieux. Mais y'a un souci... La police d'écriture n'est pas la même...
Hé oui ! C'est une police personnalisée. Les polices personnalisées sont celles que l'on ne peut utiliser en CSS que si on les a téléchargées sur notre site au préalable...
Heureusement, google propose des polices personnalisées à utiliser juste en insérant le lien de la police dans notre page.
Cool non ?
Du coup, on va utiliser la balise orpheline <link>.
On va mettre le code suivant dans les balises head, avant les balises style :
</p>

</body>
</html>

[Mon code c'est un bordel monstre, désolée xD]