Le Deal du moment : -51%
Montre Ice-Watch pour Femme – ICE glam Black ...
Voir le deal
44 €

Aller en bas
Pêpêche
Pêpêche
Mascotte
Messages : 4860

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Jeu 13 Juin 2019 - 14:34
C'est ça Smile

Mieux vaut ne rien laisser au hasard avec les navigateurs web, parce que d'un navigateur à l'autre tu peux avoir un comportement totalement différent

_________________
Oxa
Oxa
Informations : Alias Moumousse ♪
Pseudo Discord : Moumousse
Messages : 216

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Jeu 13 Juin 2019 - 14:38
Oukiiii, je comprends ! Very Happy
Pêpêche
Pêpêche
Mascotte
Messages : 4860

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Jeu 13 Juin 2019 - 14:54
Est-ce que tout est bon pour les animations/transitions du coup ? Smile

_________________
Oxa
Oxa
Informations : Alias Moumousse ♪
Pseudo Discord : Moumousse
Messages : 216

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Jeu 13 Juin 2019 - 19:23
yes nickel ^^
Pêpêche
Pêpêche
Mascotte
Messages : 4860

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Jeu 13 Juin 2019 - 20:59
Super =)

Du coup, voilà l'avant-dernière partie avant le big big exo Razz

Cette fois, ce cours concerne les infobulles (on s'en sert souvent dans les en-têtes, du coup, c'est bien de savoir les faire Smile ).

Voilà le tutoriel explicatif. Comme d'habitude, si tu as des questions ou remarques, je suis là, sinon, l'exo est ici Smile

_________________
Oxa
Oxa
Informations : Alias Moumousse ♪
Pseudo Discord : Moumousse
Messages : 216

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Mar 18 Juin 2019 - 23:41
Hello ! Avec mon WE bien chargé, je ne m'y suis remise que cet après-midi, donc un peu de retard cette fois ci ><

Alors j'ai réussis à faire quelque chose de semblable, mais bien zûûûr, j'ai des questions, car je n'arrive pas à fignoler l'exo comme il se devrait. :

Alors j'ai commencé en voulant juste centrer les div des images tout bêtement : Pas réussi. Puis j'ai tenté les display en tableau : pas réussi.
Bon j'ai finis par faire avec les flex et ça m'a centrer tout ça mais seulement horizontalement Sad pas verticalement ><

Aussi, les images dans mes ronds ne sont pas centrée comme dans les ronds de l'exo. Forcément, je me suis dit : il y a problème quelque part.
Je suis arrivé à les centrer comme sur l'exo (avec la tête de ton vava coupée, et le nounours de Mäven + en vu) je ne sais plus comment, mais les images se mettaient en dessous de l'autre au lieu de se mettre sur la même ligne.
Bref, j'ai pas voulu me compliquer la vie + que je me l'étais déjà compliqué, vu que le but ce sont les infobulles xD Donc j'ai laissé tel quel en me disant que peut-être je ne suis pas autant à côté de la plaque que ça, ou que tu me pisteras pour que je comprenne mon erreur !

Sans plus tarder, mon mélimélo de code :

Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Exercice 13 - Les animations</title>

      <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" media="all" type="text/css" />

      <style type="text/css">

#staff {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}

.infobulle{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

 .rond{
    border-radius: 50px;
    width: 80px;
    height: 80px;
    overflow:hidden;
    margin: 20px;
}   
   
.rond img {
    width: 80px;
    height: auto;
    position: relative;
   }
   
.description{
    display:none;
}

.infobulle:hover .description {
    display:block;
    position: absolute;
    color: #a9936a;
    background-color: #f2eacb;
    border: 2px solid #ffffff;
    border-radius: 15px;
    box-shadow:1px 2px 10px #f2eacb;
    padding: 8px;
    z-index:99;
    text-align :center;
    width: 80px;
    height: auto;
    top : 80px;
    bottom: 770px;
}

.description a:first-child{
text-decoration: none;
color: #a9936a;
 font-weight: bold;
 font-size: 18px;
 }
 .description a {
 text-decoration: none;
color: #a9936a;
 }
 
      </style>
    </head>
    <body>

<div id="staff">

<div class="infobulle">
<div class="rond">
<img src="https://2img.net/u/4014/30/77/56/avatars/2-65.jpg" alt="Mäven" /></div>
<div class="description"><a href="maven">Mäven</a><br />
<a href="ralons">Râleuse</a></div>
</div>

<div class="infobulle">
<div class="rond">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-74.png" alt="miettes" /></div>
<div class="description"><a href="miettes">Miettes</a>
<a href="ralons">Râleuse</a></div>
</div>

</div>

    </body>
    </html>


Bisous ♥
Pêpêche
Pêpêche
Mascotte
Messages : 4860

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Mer 19 Juin 2019 - 9:41
coucou Smile

Je vais regarder tout ça ^^

Première remarque : essaie de bien indenter ton code (c'est à dire mettre des "tab" pour bien voir quelle balise et dans quoi ; tu t'y retrouveras mieux)

Cela étant dit, coté html, on est ok Smile

Passons à la CSS Smile

• Pour centrer les avatars aussi bien en verticalement qu'horizontalement, tu peux juste mettre ta classe ".rond" en flex et appliquer dessus les propriétés qui vont bien (je n'en dis pas plus, tu essaieras par toi-même) ; c'est la façon la plus simple & pratique de le faire Smile

• Parlons de l'infobulle Smile
Premier problème : son élément de référence. Tu as choisi de mettre en référence l'image qui est ici :
Code:

<div class="rond">
      <img src="https://2img.net/u/4014/30/77/56/avatars/2-65.jpg" alt="Mäven" />
    </div>
Le problème, c'est que ta div .description n'est pas dans l'image.

Ici, il vaut mieux choisir comme référence ".infobulle" qui contient l'avatar + l'infobulle Smile C'est plus logique (même si ton code semble faire ce qu'il faut, c'est pas terrible).

ensuite, tu as mis ça pour ton infobulle :
Code:
    top : 80px;
    bottom: 770px;
Tu peux m'expliquer ce que ça signifie pour toi ? Smile

_________________
Oxa
Oxa
Informations : Alias Moumousse ♪
Pseudo Discord : Moumousse
Messages : 216

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Mer 19 Juin 2019 - 10:20
Alors j'ai fais les modif :
Code:
       <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Exercice 13 - Les animations</title>

      <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" media="all" type="text/css" />

      <style type="text/css">

#staff {
 display: flex;
 flex-flow: row nowrap;
 align-items: center;
     justify-content: center;
}

.infobulle{
 display: flex;
 flex-flow: column nowrap;
 align-items: center;
     justify-content: center;
}

 .rond{
     display: flex;
 align-items: center;
     justify-content: center;
     border-radius: 50px;
 width: 80px;
 height: 80px;
 overflow:hidden;
 margin: 20px;
}
 
.rond img {
 width: 80px;
 height: auto;
 }

.infobulle {
 position: relative;
}
 
.description{
     display:none;
}

.infobulle:hover .description {
 display:block;
 position: absolute;
 color: #a9936a;
 background-color: #f2eacb;
 border: 2px solid #ffffff;
 border-radius: 15px;
 box-shadow:1px 2px 10px #f2eacb;
 padding: 8px;
 z-index:99;
 text-align :center;
 width: 80px;
 height: auto;
 margin-top: 40px;
 margin-bottom: 0px;
}

.description a:first-child{
 text-decoration: none;
 color: #a9936a;
 font-weight: bold;
 font-size: 18px;
 }
 .description a {
 text-decoration: none;
 color: #a9936a;
 }
 
      </style>
    </head>
    <body>

<div id="staff">

<div class="infobulle">
<div class="rond">
<img src="https://2img.net/u/4014/30/77/56/avatars/2-65.jpg" alt="Mäven" /></div>
<div class="description"><a href="maven">Mäven</a><br />
<a href="ralons">Râleuse</a></div>
</div>

<div class="infobulle">
<div class="rond">
<img src="https://2img.net/u/4014/30/77/56/avatars/1-74.png" alt="miettes" /></div>
<div class="description"><a href="miettes">Miettes</a>
<a href="ralons">Râleuse</a></div>
</div>

</div>

    </body>
    </html>

(j'avais mis des mesures à top & bottom pour que l'encadré se place comme il faut, avec les margin ça f'sait n'importe quoi. Mais maintenant c'est good !! Donc je pense que c'est parce que le placement était pas bon du départ.)

edit : quand j'enregistre le message, les "tab" ne restent pas comme il faut, ça se décalle tout :O Pourtant dans mon notepad j'ai bien mis les espaces Surprised
Pêpêche
Pêpêche
Mascotte
Messages : 4860

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Mer 19 Juin 2019 - 14:17
Oh ça doit être la balise "code" qui merdouille alors Smile

Essayons d'améliorer un peu tout ça Smile

Code:
#staff {
 display: flex;
 flex-flow: row nowrap;
 align-items: center;
    justify-content: center;
}

.infobulle{
 display: flex;
 flex-flow: column nowrap;
 align-items: center;
    justify-content: center;
}

C'est exactement la même chose, on ne peut faire s'arranger pour faire un truc qui rassemble le tout ? Smile

tu saurais faire en sorte qu'au survol de l'avatar, mon curseur de souris change pour devenir la petite main ?

_________________
Oxa
Oxa
Informations : Alias Moumousse ♪
Pseudo Discord : Moumousse
Messages : 216

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Mer 19 Juin 2019 - 14:53
Paf j'ai tout réunis comme ça :

Code:

#staff , .infobulle{
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
   justify-content: center;
}

.infobulle {
  position: relative;
}

Alors pour le curseur j'ai essayé 2/3 trucs mais ça n'a pas fonctionné Surprised Le curseur devient une main lorsqu'il survol un lien non ? Du coup à par mettre un lien autour de l'image je vois pas alien
Pêpêche
Pêpêche
Mascotte
Messages : 4860

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Mer 19 Juin 2019 - 16:05
eh bien il y a une petite astuce js qui permet de changer le curseur :

Code:
cursor: pointer;

et là, tu auras le même comportement que pour les liens.

Arrow Plus d'infos ici

(c'est nickel pour le reste ^^)

_________________
Oxa
Oxa
Informations : Alias Moumousse ♪
Pseudo Discord : Moumousse
Messages : 216

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Mer 19 Juin 2019 - 16:19
Oh cool, oui ça marche c'est super ^^
Pêpêche
Pêpêche
Mascotte
Messages : 4860

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Mer 19 Juin 2019 - 17:00
Bon eh bien, c'était le dernier "petit exo" avant l'exercice final. Comme celui-ci va reprendre tout ce qu'on a vu depuis le début, est-ce qu'il y a des choses que tu veux revoir ? Des choses que tu aimerais éclaircir ? Ou tu es prête à te lancer ?

_________________
Oxa
Oxa
Informations : Alias Moumousse ♪
Pseudo Discord : Moumousse
Messages : 216

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Mer 19 Juin 2019 - 17:04
Mes questions arrivent souvent pendant que je fais les exo, donc là pour le moment je n'ai pas d'interrogation ^^

Aller, j'ai hâte de voir l'exo final et mes neurones prendre feu Crazy
Pêpêche
Pêpêche
Mascotte
Messages : 4860

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Jeu 20 Juin 2019 - 9:14
Hello hello Smile

Désolée de ne pas avoir répondu hier mais ce [...] js me rendait chèvre :p

C'est donc partie pour l'exo final Smile tu le trouveras ici. On va se mettre dans la peau d'un codeur qui prend en charge une commande publicité.

Bon courage, et si besoin, tu sais où me trouver :p

_________________
Oxa
Oxa
Informations : Alias Moumousse ♪
Pseudo Discord : Moumousse
Messages : 216

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Lun 24 Juin 2019 - 11:53
Coucou !

Alors depuis hier je bloque sur quelque chose : Pour les positionnements, par exemple, est ce possible de donner la priorité à un élément plutôt qu'un autre ? Car pour les blocs avec la scroll barre, il y a: l'image avec le texte "nouveauté" "stats".. etc, + le bloc avec le descriptif qui doit être aussi sur l'image orange de fond, mais impossible de faire passer l'image + le descriptif en 1 er plan en même temps, j'ai essayé avec d'autre façon mais ça marche pas non plus, et comme je sens que je vais rester bloquée dessus pendant plusieurs jours, j'appelle à l'aide, j'ai besoin de lumière Idea

Bon je sais pas si mon problème est vraiment bien compréhensible par contre scratch

Merci bisous ♥
Pêpêche
Pêpêche
Mascotte
Messages : 4860

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Mar 25 Juin 2019 - 10:12
Coucou Smile

J'ai compris (enfin je pense).

On va traduire ton problème autrement (et tu vas voir, ça va te débloquer je pense ^^). On a donc :
> 1 bloc, qui contient :
---> une image
---> un bloc "descriptif" (avec une scrollbar)

Tu vois comment coder ça ? Smile

_________________
Oxa
Oxa
Informations : Alias Moumousse ♪
Pseudo Discord : Moumousse
Messages : 216

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Mar 25 Juin 2019 - 15:13
Coucou ! Very Happy

Alors moi j'ai mon bloc avec
- 2 images (le fond et le texte stat, nouveauté..) :
- le bloc descriptif sur lequel il ya la scrollbar

Les 2 images j'arrive à les superposer comme je le veux, mais pas mon bloc texte en gros. scratch
Pêpêche
Pêpêche
Mascotte
Messages : 4860

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Mar 25 Juin 2019 - 15:30
Tu me montres tes codes ? Smile

_________________
Oxa
Oxa
Informations : Alias Moumousse ♪
Pseudo Discord : Moumousse
Messages : 216

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Mar 25 Juin 2019 - 15:45
Alors j'ai mi le code juste des 2 premiers blocks (c'est pour le moment sur cela que je m'acharne du coup j'ai fais séparément du code principal pour éviter de mettre des conneries en plein milieu xD ) Bon comme j'ai tenté des tas de choses, il se peut qu'il y a des balises inutiles qui trainent, mais j'ai vérifié normalement c'est bon :

Code:
 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Fiche de publicité</title>
      <link href="https://fonts.googleapis.com/css?family=Great+Vibes&display=swap" rel="stylesheet">
  <style type="text/css">


 .imgfond {
    position: relative;
    height: 110px;
    width: auto;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.imgtxt {
    position: absolute;
    left: 10px;
   
}

  .blocscroll {
    margin-left: -10px;
    height: 110px;
    width: 300px;
    overflow-y: auto;
    background-color: #fffaab;
    border-top: 6px solid #e7a973;
    border-bottom: 6px solid #e7a973;
    border-right: 6px solid #e7a973;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
   box-sizing: border-box;
    }


        </style>
    </head>
    <body>
   


<div>
<img src="http://pvereecken.fr/tambouille/f-ef-html/bkg-bloc.png" alt="fond" class="imgfond" />
<img src="http://pvereecken.fr/tambouille/f-ef-html/titre-stats.png" alt="stat" class="imgtxt" />
<p class="blocscroll">Vivamus auctor non lacus et viverra. Pellentesque varius augue ac odio posuere, sed rhoncus elit hendrerit. Donec porta vitae lorem quis sodales. Phasellus aliquam auctor auctor. Mauris malesuada vehicula lorem, vitae fermentum diam bibendum non. In id nisl eu leo accumsan malesuada. Maecenas vitae lacinia sapien, nec rutrum odio. Morbi scelerisque nisl lectus, ut maximus odio lacinia quis. Quisque dolor diam, lobortis id lorem at, porta efficitur ex.
</p>
</div>

<div>
<img src="http://pvereecken.fr/tambouille/f-ef-html/bkg-bloc.png" alt="fond" class="imgfond" />
<img src="http://pvereecken.fr/tambouille/f-ef-html/titre-nouveautes.png" alt="stat" class="imgtxt" />
<p class="blocscroll">Sed nec purus ut dui mollis interdum. Sed condimentum vulputate dictum. Nam eget ante at ipsum auctor placerat quis non tortor. Cras suscipit nisl a ex bibendum, a viverra sapien blandit. Aliquam egestas turpis vel metus consequat suscipit. Curabitur condimentum quis leo in tincidunt. Suspendisse volutpat sem gravida dignissim ultrices. Quisque tempus bibendum consequat.
</p>
</div>

    </body>
    </html>
Pêpêche
Pêpêche
Mascotte
Messages : 4860

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Mar 25 Juin 2019 - 15:50
Alors, pour te simplifier la vie, tu peux faire :
> Un bloc général
--> un bloc qui contient tes 2 images
--> un bloc qui contient ta description Smile

sinon, c'est bon pour le reste :p

_________________
Oxa
Oxa
Informations : Alias Moumousse ♪
Pseudo Discord : Moumousse
Messages : 216

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Mar 25 Juin 2019 - 17:10
Et alors le positionnement se fera malgré tout? Car je pense avoir testé pas mal de chose, notamment au niveau d'ajout de div un peu pour tout et rien xD
Pêpêche
Pêpêche
Mascotte
Messages : 4860

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Mar 25 Juin 2019 - 17:12
Peut etre que pour mettre les éléments cote à cote tu peux le faire avec autre chose que de la position absolue Smile

Sinon, j'ai une méthode beaucoup plus simple :

> un bloc qui a une image de fond qui ne se répéte pas et qui est bloquée à gauche. Ce bloc contient :
---> une image pour titre
---> un bloc avec une scrollbar

_________________
Oxa
Oxa
Informations : Alias Moumousse ♪
Pseudo Discord : Moumousse
Messages : 216

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Mar 25 Juin 2019 - 17:37
Aaaah oui c'est pas bête scratch *retourne s'acharner sur son code*
Pêpêche
Pêpêche
Mascotte
Messages : 4860

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

le Mar 25 Juin 2019 - 17:41
Bon courage =)

_________________
Contenu sponsorisé

[Codage HTML/CSS] Aidez Oxa !  - Page 7 Empty Re: [Codage HTML/CSS] Aidez Oxa !

Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Post-It des Râleuses