28111 sujets

CSS et mise en forme, CSS3

Hauteur de la page + Menu mal espacé

Salut !
J'ai 2 petits problèmes avec le code suivant :

<!DOCTYPE html> 
<html>
<head>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<title>Index</title>
	<meta charset="utf-8" />
</head>
<body>
<div class="centre">
	<nav>
		<ul class="menu">
			<li id="home"><a href="index.php">Home</a></li>
			<li id="config"><a href="index.php?p=config">Configurations</a>
				<ul class="sm">
					<a class="smt1" href="index.php?p=bureautique"><li>Bureautique</li></a>
					<a class="smt1" href="index.php?p=gaming"><li>Gaming</li></a>
					<a class="smt1" href="index.php?p=performances"><li>Performances</li></a>
				</ul>
			</li>
			<li id="info"><a href="#">Plus d'informations</a>
				<ul class="sm">
					<a class="smt2" href="index.php?p=contact"><li>Nous contacter</li></a>
					<a class="smt2" href="#"><li>NewsLetters</li></a>
				</ul>
			</li>
		</ul>
	</nav>
	<hr>
	<main>
		<?php
			if(isset($_GET['p'])){
				switch ($_GET['p']){
					case "config":
						include ("Configurations.php");
						break;
					case "bureautique":
						include ("Bureautique.php");
						break;
					case "gaming":
						include ("Gaming.php");
						break;
					case "performances":
						include ("Performances.php");
						break;
					case "contact":
						include("Contact.php");
						break;
				}
			}
		?>
	</main>

	<footer>
	</footer>
</div>
</body>
</html>


avec le code CSS suivant :


body{
	background-color: black;
	font-family: Comic Sans MS, Rockwell, MS Reference Sans Serif;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.centre{
	width: 800px;
	background-color: white;
	margin: auto;
	height: 100%;
}

nav{
	width: 444px;
	height: 45px;
	margin: auto;
	background-color: white;
}


/*---- Menu ----*/
nav ul{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	color: black;
}

.menu li a{
	padding: 10px 20px 0px 20px;
}

.menu li{
	float: left;
	position: relative;
	text-decoration: none;
	padding: 10px 5px 10px 5px;
}

.ssm{
	padding: 0px 0px 0px 0px;
}

.menu > ul::after{
	content: "";
	display: block;
	clear: both;
}

	/*---- Sous-menu ----*/
.sm{
	display: none;
}

.menu li:hover .sm{
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	z-index: 1000;
}

.sm a li{
}

.smt1 li{
	width: 93%;
}

.smt2 li{
	width: 95%;
	height: 25px;
}

.smt1{
	margin: 2px 2px 2px 2px;
}

ul{
	list-style-type: none;
}
		/*---- Couleurs menu ----*/

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

.menu li:hover{
	border-top: solid 2px #212121;
	background-color: #afafaf;
}

.menu li:hover .sm{
	background-color: #afafaf;
}

.smt1 li:hover, .smt2 li:hover{
	border-top: solid 2px #969696;
	background-color: #bfbfbf;
}
		/*---- ----*/
	/*---- Sous-menu ----*/
/*---- Menu ----*/

main{
	padding: 0px 0px 0px 5px;
}

footer{
	bottom: 0px;
	height: 20px;
}

h1{
	text-align: center;
	text-decoration: underline;
}


Le bloc div pour centrer ne prend pas toute la hauteur à 100% puisque je ne vois pas le bloc blanc aller jusqu'en bas de la page.
Et dans mon menu lorsque je survole le menu il y a un espace en trop.
Comment je peux faire ?

Merci d'avance ! Smiley ravi 

.centre{
	width: 800px;
	background-color: white;
	margin: auto;
	height: 100vh;
}


Pour l'espace je ne vois pas ce que tu veut dire

100vh; prend 100% de la hauteur de la page.

L'unité de longueur CSS vh est relative à la hauteur du bloc conteneur initial. vh est égale à 1% de cette dernière.
L'unité de longueur CSS vh a été introduite en CSS3.

La valeur de viewport height semble être basée sur window.innerHeight, elle est donc variable suivant la taille de la fenêtre du navigateur.
Exemple dynamique : 3x(1024/100) = 307px

Il n'existe pas de règle, mais de mon point de vue l'unité Css de longueur vh sera plus utilisée pour les tailles de blocs tel que width ou height.
Meilleure solution
Ben voila que dire de plus si ce n'est que pour width c'est vw.
Pour le reste en ce qui concerne ton menu, refait le en entier ou garde cet espace.
Pour exemple si je corrige pour chrome, et Edge, ça décale tout sous Firefox, a savoir je n'ai pas tester sous Opera.
Tiens look un peut.

<!DOCTYPE html>
<html lang="fr">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css">

<title>Test</title>


<!-- LE CSS -->

<style type="text/css">
body{
	background-color: black;
	font-family: Comic Sans MS, Rockwell, MS Reference Sans Serif;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.centre{
	width: 800px;
	background-color: white;
	margin: auto;
	height: 100vh;
}

nav{
	width: 444px;
	height: 45px;
	margin: auto;
	background-color: white;
}


/*---- Menu ----*/
nav ul{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	color: black;
}

.menu li a{
	/*padding: 10px 20px 0px 20px;*/ /*<-- ici */
	padding: 5px 20px 0px 20px;

}

.menu li{
	float: left;
	position: relative;
	text-decoration: none;
	padding: 7px 5px 10px 5px; /*<--ici*/
}

.ssm{
	padding: 0px 0px 0px 0px;
}

.menu > ul::after{
	content: "";
	display: block;
	clear: both;
}

	/*---- Sous-menu ----*/
.sm{
	display: none;

}

.menu li:hover .sm{
	display: inline-block;
	position: absolute;
	/*top: 100%;*/ /*<-- ici */
	top: 32px;
	
	left: 0px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	z-index: 1000;
}

.sm a li{

}

.smt1 li{
	width: 93%;

}

.smt2 li{
	width: 95%;
	height: 25px;

}

.smt1{
	margin: 2px 2px 2px 2px;
}

ul{
	list-style-type: none;
}
		/*---- Couleurs menu ----*/

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

.menu li:hover{
	border-top: solid 2px #212121;
	background-color: #afafaf;
}

.menu li:hover .sm{
	background-color: #afafaf;
}

.smt1 li:hover, .smt2 li:hover{
	border-top: solid 2px #969696;
	background-color: #bfbfbf;
}
		/*---- ----*/
	/*---- Sous-menu ----*/
/*---- Menu ----*/

main{
	padding: 0px 0px 0px 5px;
}

footer{
	bottom: 0px;
	height: 20px;
}

h1{
	text-align: center;
	text-decoration: underline;
}
/*.test{
	background-color: red;
	height: 30px;
}*/
</style>

</head>


<body>

<div class="centre">
	<nav>
		<ul class="menu">
			<li id="home"><a href="index.php">Home</a></li>
			<li id="config" class="test"><a href="index.php?p=config">Configurations</a>
				<ul class="sm">
					<a class="smt1" href="index.php?p=bureautique"><li>Bureautique</li></a>
					<a class="smt1" href="index.php?p=gaming"><li>Gaming</li></a>
					<a class="smt1" href="index.php?p=performances"><li>Performances</li></a>
				</ul>
			</li>
			<li id="info"><a href="#">Plus d'informations</a>
				<ul class="sm">
					<a class="smt2" href="index.php?p=contact"><li>Nous contacter</li></a>
					<a class="smt2" href="#"><li>NewsLetters</li></a>
				</ul>
			</li>
		</ul>
	</nav>
	<hr>
	<main>
		<?php
			if(isset($_GET['p'])){
				switch ($_GET['p']){
					case "config":
						include ("Configurations.php");
						break;
					case "bureautique":
						include ("Bureautique.php");
						break;
					case "gaming":
						include ("Gaming.php");
						break;
					case "performances":
						include ("Performances.php");
						break;
					case "contact":
						include("Contact.php");
						break;
				}
			}
		?>
	</main>

	<footer>
	</footer>
</div>

</body>
</html>


Tiens si tu veut des idées de menus

http://www.css3create.com/Menu-Slides-avec-CSS3
Sujet clos
Aller à