[Résolu] Cacher les rubriques d'un site one-page

Bonsoir à tous,

Voilà, je souhaiterais (re)faire un site One Page et lors du développement de mon 1er j'avais toujours le même problème : selon les résolutions d'écrans certaines parties étaient visible ensembles .

J'aimerais que chaque partie soit indépendante et cela malgré toutes les résolutions.


Avez-vous des conseils ? Des astuces ?


Merci d'avance

Bonsoir,

Pour un design fluide, privilégier les pourcentages comme unités de travail plutôt que les traditionnels pixels.

Voici un exemple très simple de site one-page vertical possédant trois rubriques et un menu fixe. Chaque rubrique bénéficie d'une hauteur de 100%, ce qui permet une parfaite adaptation à toutes les résolutions, à moindre frais !

HTML :

<ul id="menu">
	<li><a href="#rubrique_1">Rubrique 1</a></li><!--
	--><li><a href="#rubrique_2">Rubrique 2</a></li><!--
	--><li><a href="#rubrique_3">Rubrique 3</a></li>
</ul>
<div id="rubrique_1" class="rubrique">Rubrique 1</div>
<div id="rubrique_2" class="rubrique">Rubrique 2</div>
<div id="rubrique_3" class="rubrique">Rubrique 3</div>

CSS :

body, ul {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
}

#menu {
	position: fixed;
	top: 0;
	right: 0;
	padding: 10px;
	background-color: #f00;
}

#menu > li {
	display: inline;
}

#menu > li + li {
	margin-left: 10px;
}

#menu a {
	display: inline-block;
	padding: 10px;
	background-color: #0f0;
}

.rubrique {
	height: 100%;
}

#rubrique_1 {background-color: #00f;}
#rubrique_2 {background-color: #ff0;}
#rubrique_3 {background-color: #0ff;}

Un autre conseil (qui se prête d'ailleurs à l'intégration de tout type de site) : éviter de recourir à des positionnements hors-flux ou à la précision inutile de dimensions, autant que faire se peut. C'est encore le meilleur moyen d'assurer un rendu correct pour la plupart des résolutions

Salut et merci !

Je doutais pour la hauteur de 100% et tu as confirmé mes doutes ! Merci de tes conseils, c'est exactement ce dont j'avais besoin


Bonne soirée et encore merci