Fiche de présentation

Alors, pour enlever le soulignage, c'est bien text-decoration qu'il faut utiliser :p. Sur #infobulle :

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

Pour l'ascenseur de l'infobulle, j'ai pas compris :$...

Pour les titres, ça marche pas de pb ! Voici 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;
text-decoration: none;
}

a#infobulle h1, a#infobulle + h2{
opacity: 1;
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
}

a#infobulle span{
display: none;
}

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

a#infobulle:hover h1, a#infobulle:hover + h2{
opacity: 0;
}

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; z-index: 1;">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>

Est-ce que tu els comprends ? As-tu besoin d'explications ? Smile

Et pour mettre le "opacity" uniquement sur une couleur de fond, on n'utilise pas opacity :p.
On utilise les fonds en rgba (red, green, blue, alpha).
En gros, on définit la couleur par sa couleur en rgb, et on définit son opacité grace au paramètre alpha Wink

.
Tu as un background-color en blanc.
Le blanc correspond au mélange des 3 couleurs bleu, vert et rouge. Il faut donc mettre leur max à chaque fois. Le max, c'est 255 (pour des raisons de pixel je crois, je ne saurai pas rentrer dans les détails)...
On a donc : background-color: rgb(255, 255, 255);
On rajoute notre paramètre alpha pour avoir une opacité de 0.4 (soit 40%) sur notre blanc :
background-color: rgba(255, 255, 255, 0.4);

Soit le code final :

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;
text-decoration: none;
}

a#infobulle h1, a#infobulle + h2{
opacity: 1;
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
}

a#infobulle span{
display: none;
background-color: rgba(255, 255, 255, 0.4);
width: 440px;
height: 440px;
left: 15px;
top: -120px;
color: orange;
overflow: auto;
}

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

a#infobulle:hover h1, a#infobulle:hover + h2{
opacity: 0;
}

a#infobulle:hover span{
display: inline;
position: absolute;
}
</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; z-index: 1;">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>

Et voilà le résultat : https://a-toi-de-coder.forumactif.org/h12-page-d-accueil

Alors pour l'histoire de l'ascenseur, j'aimerais qu'il n'y en ait pas, et que l'infobulle s'adapte automatiquement à la taille du texte, comme ça :

Pas beaucoup de texte

Fiche de présentation - Page 2 725831Fiche1

Beaucoup de texte

Fiche de présentation - Page 2 152476Fiche2

Et si ce n'est pas possible, peut-on modifier les ascenseur ?

Je veux bien une petite explication ^^'.
Par contre tu as changé quelque chose dans le code ou tu as juste ajouté les quelques modif' dans #infobulle ? Parce qu'en rajoutant la même chose que toi ça a tout modifié en moche. (Du coup j'ai C/C ton code >.<)

C'est possible ! Il me semble que tu as vu dans la formation les propriétés min-height/height/max-height non ? =p.

Ok, alors :

Code:: a#infobulle h1, a#infobulle + h2{
opacity: 1;
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
}

Ici, je sélectionne le titre h1 dans le lien, et le titre h2 qui suit le lien. Je leur définis une transition pour qu'ils disparaissent lentement au survol du lien.

Et ici :

Code:: a#infobulle:hover h1, a#infobulle:hover + h2{
opacity: 0;
}

Je me contente de modifier l'opacité justement pour que le h1 et le h2 disparaissent au survol du lien !

J'ai peut être bien modifié l'emplacement de certaines propriétés CSS oui :$

D'accord, je vais essayer avec ces propriétés !
Mmmh, et ça ne fonctionne qu'avec certains types de balise ? J'ai essayé avec le p du paragraphe où il y a tout le texte pour le faire disparaître aussi, mais ça n'a pas fonctionné

En tout cas merci pour ta patience et tes explications Very Happy

Coucou

.

Je pensais avoir repondu :$.
Tu as du te tromper avec les sélecteurs (les +, ~, > etc). Montr moi ton code et je pourrai t'aider si tu veux Wink

.

Pas de soucis ^^. J'ai réussi à faire ce que je voulais avec l'infobulle, mais toujours pas avec le paragraphe à faire disparaître

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;
text-decoration: none;
}

a#infobulle h1, a#infobulle + h2, a#infobulle + p{
opacity: 1;
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
}

a#infobulle span{
display: none;
background-color: rgba(255, 255, 255, 0.25);
width: 440px;
max-height: 440px;
left: 15px;
top: -120px;
color: #B03500;
overflow: auto;
}

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

a#infobulle:hover h1, a#infobulle:hover + h2, a#infobulle:hover p{
opacity: 0;
}

a#infobulle:hover span{
display: inline;
position: absolute;
}
</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; z-index: 1;">TITRE 1</h1>

<span><center>Trois petits chats<br>
Trois petits chats<br>
Trois petits chats, chats, chats<br>

Chapeau de paille<br>
Chapeau de paille<br>
Chapeau de paille, paille, paille<br>

Paillasson,<br>
Paillasson<br>
Paillasson, son, son<br>

Somnambule,<br>
Somnambule,<br>
Somnambule, -bule, -bule<br>

Bulletin<br>
Bulletin<br>
Bulletin –tin, -tin<br>

Tintamarre,<br>
Tintamarre<br>
Tintamarre, -marre, -marre<br>

Marabout, <br>
Marabout,<br>
Marabout – bout, -bout,<br></center>
</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 que je veux faire disparaître mais que je n'arrive pas à faire disparaître T.T
</p>

</body>
</html>

Et voilà le travail corrigé !

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;
text-decoration: none;
}

a#infobulle h1, a#infobulle + h2, a#infobulle ~ p{
opacity: 1;
-webkit-transition: opacity 1s ease;
transition: opacity 1s ease;
}

a#infobulle span{
display: none;
background-color: rgba(255, 255, 255, 0.25);
width: 440px;
max-height: 440px;
left: 15px;
top: -120px;
color: #B03500;
overflow: auto;
}

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

a#infobulle:hover h1, a#infobulle:hover + h2, a#infobulle:hover ~ p{
opacity: 0;
}

a#infobulle:hover span{
display: inline;
position: absolute;
}
</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; z-index: 1;">TITRE 1</h1>

<span><center>Trois petits chats<br>
Trois petits chats<br>
Trois petits chats, chats, chats<br>

Chapeau de paille<br>
Chapeau de paille<br>
Chapeau de paille, paille, paille<br>

Paillasson,<br>
Paillasson<br>
Paillasson, son, son<br>

Somnambule,<br>
Somnambule,<br>
Somnambule, -bule, -bule<br>

Bulletin<br>
Bulletin<br>
Bulletin –tin, -tin<br>

Tintamarre,<br>
Tintamarre<br>
Tintamarre, -marre, -marre<br>

Marabout, <br>
Marabout,<br>
Marabout – bout, -bout,<br></center>
</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 que je veux faire disparaître mais que je n'arrive pas à faire disparaître T.T
</p>

</body>
</html>

J'ai juste changé les sélecteurs, comme je t'avais dit

Ah, je n'avais pas compris de quoi tu parlais la dernière fois x)
Meerciiiii ! Maintenant ma fiche est nickel ! Ça fera un nouveau LS Very Happy

Tu peux fermer le sujet.