Rendre un menu et une bannière flexible en fonction de la taille de l’écran

**Samix.94** · 24/02/2018, 11h10

Bonjour,comme vous l'avez compris je veux rendre mon menu et ma bannière flexible.
C'est deja le cas pour ma section mais je n'y arrive pas pour ma bannière et pour mon menu
Dans mon html ça se presente comme ceci:

Code HTML :

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
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
    <head> 
 
	    <title>Menu html/Css recensement college</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="fichier css.css">
		</head>
	<body>
 
		<header>
		<img src="images/banniere creteil.jpg"height="200"style="width: 1350px"VSPACE="0" HSPACE="0" align=center  /> 
		</header>
			<nav>
			<label for="menu-mobile" class="menu-mobile">Menu</label>
			<input type="checkbox" id="menu-mobile" role="button"> 
			<ul>
				<li class="menu-acceuil"><a href="index.php">Accueil </a></li>
				<li class="menu-inscription"><a href="inscription.php">Inscription</a>
				</li>
				<li class="menu-connexion"><a href="connexion.php"> Connexion </a>
				</li>	
				<li class="menu-college"><a href="description college.html"> Le college Amedee Laplace </a>
				</li>
				<li class="menu-liste"><a href="liste des membres.php"> Les anciens eleves du college </a>	
				</li>
			</ul>
		</nav>
		 </div>
	</header><hr>

ceci n'est qu'une petite partie de mon html.
Mais comment faire dans ma partie CSS??Doit on utiliser @media........
Merci d'avance

**JefReb** · 24/02/2018, 11h40

Bonjour,
le css nous aurait été très utile, comme d'habitude.
Bien sûr en pur css il faudra utiliser @media screen.

Pour le calcul il faudra peut être utilier calc() et en spécifiant la largeur du viewport. 100vw=100% du viewport.
comme par exemple:

Code css :

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

1
2
	width: calc(100vw - 20px);						
	height: calc((100vw - 20px) / 1.3);

Et dans un site j'ai utilisé pour le header

Code css :

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
 
...
header {
	width:100vw;						/* largeur du viewport */
	height:calc(100vw / 5.485);			/* hauteur par rapport au ratio 960/200 */
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	background: url(/img/fond/bandeau.jpg)top left no-repeat;
	background-size:contain;
...
...
@media screen and (min-width: 960px) {
header {
	height: 175px;
}
}

**Samix.94** · 24/02/2018, 11h59

et ta banniere s'adapte a tout type d'affichage maintenant?

**JefReb** · 24/02/2018, 12h04

Cela dépend de ton @media screen bien sur ...
il faudra peut être faire plusieurs ajustement.
Mais d'autres développeurs ont peut être une autre ou meilleure solution.

Code css :

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
 
#tourniquet {
	width: calc(100vw - 20px);						
	height: calc((100vw - 20px) / 1.3);
}
@media screen and (min-width: 415px) and (max-width:666px) {
#tourniquet {					
	height: calc((100vw - 20px) / 1.9);
}
}
@media screen and (min-width: 667px) and (max-width:959px)  {
#tourniquet {					
	height: calc((100vw - 20px) / 2.2);
}
}
@media screen and (min-width: 960px){
#tourniquet {
	width: 444px;
	height: calc( 444px / 1.2);
}
}

Rendre un menu et une bannière flexible en fonction de la taille de l’écran

CSS

Vue hybride

Discussions similaires

Partager

Partager