Flexbox et responsive design

Version mobile

16 mai 2017 à 10:36:40

Bonjour,

Je fais mon C.V. sous forme de site web. Pour la barre de navigation, j'ai utilisé flexbox.

Le problème est que lorsque je cherche à faire du responsive design pour l'adapter au mobile, à la page d'accueil, le texte d'un lien de la barre de navigation est remplacé par le texte d'un autre lien de cette barre.

Savez-vous quoi faire ?

Voici le code :

.titre { font-style:italic; font-weight:normal; }

@font-face { font-family: 'black_jackregular';
                     src: url('blackjack-webfont.eot');
                     src: url('blackjack-webfont.eot?#iefix') format('embedded-opentype'),
                            url('blackjack-webfont.woff2') format('woff2'),
                            url('blackjack-webfont.woff') format('woff'),
                            url('blackjack-webfont.ttf') format('truetype'),
                            url('blackjack-webfont.svg#black_jackregular') format('svg');
					 font-weight: normal;
                     font-style: normal; }

body { background: url("Fond1.png") no-repeat scroll 100%;
	         font-family:"black_jackregular", Time New Roman; }
p { font-size:1.2em; }

.flex { display: flex; flex-direction:row; justify-content:space-around; }
.block { width:200px; height:100px;
			 text-align:center; line-height:6em; }
.block:hover { background-color:grey; opacity:0.25;
					   border-radius:45px; }

a { text-decoration:none; color:black; }

@font-face { font-family: 'fontello';
								src: url('fontello.eot');
                                src: url('fontello.eot?#iefix') format('embedded-opentype'),
                                       url('fontello.woff2') format('woff2'),
                                       url('font/fontello.woff') format('woff'),
                                       url('.fontello.ttf') format('truetype'),
                                       url('fontello.svg#fontello') format('svg');
                     font-weight: normal;
					 font-style: normal; }
					 
.icon::after { font-family:'fontello'; content: '\e800'; font-size:1.5em; }
.taille { font-size:1.5em; }

.focus { margin-left:20px; }
.focus:hover { opacity:0.5; background-color:green;
					   width:450px; border-radius:10px 30px 30px 10px; }
					   
.img { float:right; }

@media screen and (max-width: 760px) { .block:hover, .focus:hover { display:none; }
																		 .focus { margin-left:0px; }
																		 .flex { flex-direction:column; }
																		 .block { width:200px; height:50px; }
																		 .taille, .icon { margin:auto; } }

Merci de vos réponses.

Lamecarlate

16 mai 2017 à 10:43:00

Bonjour,

sans ton HTML on n'ira pas loin C'est comme si tu nous servais un bon potage, mais sans bol, ça a l'air chouette mais on peut pas en faire grand chose.

(fais attention à l'indentation, aussi : ta dernière partie est illisible)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Maxime :)

18 mai 2017 à 9:20:51

<html>

	<head><meta charset="utf-8" />
	<link rel="stylesheet" href="css.css" />
	<title>Accueil</title>
	</head>
	
	<body>
	  
	  <h1>Bienvenue !</h1>
	  
	  <p><img class="img" src="M.jpg" alt="Photo" />
		 Je m'apelle Maxime et j'ai 23 ans. J'ai crée ce site dans le but de montrer mes compétences. Les fichiers du site sont donc <a href="CVWeb.zip">téléchargeables</a> (au format .zip) pour que vous puissiez vous faire une idée de ce que je peux faire.<br />
	         Ce site est donc amené à changer au fur et à mesure que mes compétences évoluent.<br /><br />
		 Pour ce qui est de la police d'écriture, j'utilise black jack reular que j'ai télécharger sur <a href="https://www.fontsquirrel.com">fontsquirrel.com</a>. Vous verrez dans les pages qui suit un icône représentant la page d'accueil, je l'ai télécharger du site <a href="http://fontello.com">fontello.com</a> l'icône en question.<br />
	  </p>
	
	  <nav class="flex">
	          <div class="block"><a href="Comp.html">Compétences</a></div>
		  <div class="block"><a href="Ben.html">Bénévolat</a></div>
		  <div class="block"><a href="EtuForms.html">Formation/Études</a></div>
		  <div class="block"><a href="XpPro.html">Éxpériences professionnelles</a></div>
		  <div class="block"><a href="CeInt.html">Centres d'intérêts</a></div>
	  </nav>
	 
          <script src="JS.js"></script>
	</body>
	
</html>

-
Edité par Maxime :) 18 mai 2017 à 9:22:37

Lamecarlate

18 mai 2017 à 9:26:03

Tu fais .block:hover { display: none; }. Cela signifie que dès qu'un élément de classe "block" est survolé, il disparaît (ce qui fait donc qu'il n'est plus survolé, donc réapparaît, donc est survolé, donc disparaît… ça clignote ^^). Or tes éléments de menu sont dans des éléments avec cette classe. Cette instruction devrait purement et simplement être supprimée, à mon sens : que cherchais-tu à faire exactement ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Maxime :)

22 mai 2017 à 9:46:24

Ah je vois ! Avec :hover je voulais que les éléments de la barre de navigation soient un peu comme des boutons.

Peut être devrais-je mieux maîtriser javascript pour ça.

Lamecarlate

22 mai 2017 à 10:25:16

"Un peu comme des boutons", c'est-à-dire ?

Je pense que tu n'as pas besoin de JavaScript, par contre, peux-tu expliciter le comportement que tu attendais ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)