[Résolu] Margin ou div vide ?

Bonjour à tous,

je suis sur la réalisation d'un site onepage avec un menu de nav en fixed d'une hauteur de 100px.

Chaque rubrique du site démarre par une entête de titre sous forme de bandeau avec une width 100%, une background-color et une hauteur de 90px environ, le menu de navigation couvre donc cette entête.

Une solution que j'ai trouvé est d'ajouter une div vide au début de chaque section et avant l'entête de titre, div vide à laquelle j'ajoute une classe avec une height de 100px, soit la hauteur de ma barre de nav, de manière à "caler" la nav sur chaque bandeau d'entête.

Ceci dit, j'aime bien vérifier si je code "proprement", et je suis tombé sur des commentaires et il me semble que ce n'est pas une bonne pratique, je vous laisse des bouts de code pour avoir vos avis éclairés !!

Merci.

<nav class="bandeau">

				<ul id="menu">
					<li><a href="#"></a></li><!--
					--><li><a href="#"></a></li><!--
					--><li><a href="#"></a></li><!--
					--><li><a href="#"></a></li><!--
					-->
				</ul>

			</nav>

<section id="" class="pad"> 

			<h1 class="titre white bluebgd">Titre de la section</h1>

</section>

nav {
	position: fixed;
}	

nav ul {
	position: absolute;
	right: 20px;
}

nav li {
	text-align: center;
	display: inline-block;
	width: 170px;
	height:100px;
}

.bluebgd {
	background-color: #2297d3;
}

.white {
	color: #ffffff;
}

.bandeau {
	width:100%;
	height: 100px;
	background-color: rgba(40, 40, 40, 0.8);
	z-index: 1000;
}

.titre {
	text-align: center;
	padding-top: 32px;
	padding-bottom: 30px;
	font-size: 1.6em;
}

.pad {
	padding-bottom: 100px;
}

Modifié par Djned (09 Jun 2015 - 15:24)