Discussion :

[CCACC02]

Bonjour,

Pour un exercice sur le modèle flex-box, je dois réaliser un titre centré accolé à un logo. Tout doit être cliquable et la couleur plus claire au roll-over.

HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<header>
  <div class="title">
    <a href="#" class="link">        
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNCafSp6UgcuTYR16cyRFt-RVuInMDpInz__5dgoCwZMGOm8twAQ" alt="Logo" width="80" height="80">
		  <h1>Street life</h1>
	  </a>
  </div>
</header>

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
header{
  display: flex;
}
.title{
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
h1{
  margin-left: 20px;
  color: #0087cc;
  font-size: 48px;
  font-weight: bold;
}
.title a{
  text-decoration: none;
}
.title a:hover{
  /*ici je ne sais pas comment eclaicir la couleur du logo et du texte */
}

Mon problème tient dans l'ajout de la balise <a> pour rendre le tout cliquable. Sans cette balise, le logo et le titre s'alignent. J'ai cherché à me documenter sur internet mais je n'ai pas trouvé ou pas bien cherché

Merci de votre aide

[CCACC02]

Malgré le post de ma question, j'ai finalement trouvé pour l'éclaircissement au roll-over... mais toujours pas pour l'alignement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.title a:hover{
 opacity: 0.5; /* Cétait tout simple :mouarf::oops:*/
}

je progresse mais je ne comprends toujours pas pourquoi cela marche sans le lien

[Invité]

Bonjour,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
    <a href="#" class="link"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNCafSp6UgcuTYR16cyRFt-RVuInMDpInz__5dgoCwZMGOm8twAQ" alt="Logo" width="80" height="80"></a>
    <h1><a href="#" class="link">Street life</a></h1>

et :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
h1{
  margin-left: 20px;
}
h1 a{
  color: #0087cc;
  font-size: 48px;
  font-weight: bold;
}

[CCACC02]

J'ai encore cherché et j'ai peut-être une solution.
J'ai remanié le CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
header{
  margin-top: 30px;
}
.title {
  display: flex;
  justify-content: center;
 
}
h1{
  margin-left: 20px;
  color: #0087cc;
  font-size: 48px;
  font-weight: bold;
}
.title a{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.title a:hover{
  opacity: 0.5;
}

Donc je suis content