28106 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je vais essayer d'expliquer clairement ma problématique :

Dans ma page j'ai un div ayant la propriété "overflow:hidden" et d'une hauteur limitée (par ex 300vh) contenant un texte très long comportant plusieurs paragraphes (#chap1, #chap2, etc.).
Je souhaite pouvoir naviguer de chapitre en chapitre à l'intérieur de ce bloc.
J'ai donc fait une sorte de sommaire avec des liens internes ( <a href=#chap1">, <a href="chap2>, ... etc.).

Jusqu'ici tout va bien, le souci se produit quand la page devient plus haute que le fenêtre : du coup quand je clique sur le lien interne, c'est l'ensemble de la page qui scrolle.

Bref pour faire simple, je souhaite que des liens internes fassent défiler le texte uniquement dans le div de visualisation sans que le reste de la page ne bouge.
Je pense que je pourrais le faire avec du javascript, mais je préfèrerais m'en tenir au html / css.

Merci d'avance pour votre aide.
Modifié par Tetef (31 Mar 2021 - 19:43)
Je me rends compte que ma description n'est pas très claire !
J'ai construit vite fait un exemple sur codepen :
https://codepen.io/jsblanc/pen/yLggZJQ?editors=1100
Je voudrais que le corps de la page ne bouge pas quand je clique sur les liens et que le scroll se limite à l'intérieur du bloc "viewer"
Modifié par _laurent (01 Apr 2021 - 14:54)
Modérateur
Salut !

Effectivement c'est un peu plus clair comme ça merci !
Par contre juste avec des ancres je ne pense pas que ce soit possible... en tout cas je n'ai pas la solution. Pour moi, tu devrais passer par un peu de Js et améliorer un peu cette partie par la même occasion (cacher les contenu et ne les afficher qu'à la sélection, ca sera plus joli, tu pourra mettre des effet, le bloc pourra varier selon la taille du contenu etc)
Modérateur
Bonjour,

Si on connait la hauteur du haut de page a priori (ou que l'on est capable de le calculer avec une formule simple en css), on peut peut-être s'en sortir en mettant les ancres dans le contenu principal et en les positionnant en relatif en les remontant de la hauteur du haut de page.

Exemple ci-dessous, j'ai considéré que le haut de page faisait 6em, mais on aurait pu aussi le calculer en fonction par exemple du nombre de vw que fait la fenêtre (plus la fenêtre serait large, moins cette hauteur serait haute) :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="Test">
<title>Test</title>
<style>
body
{
	margin:0;
	padding:0;
}
header
{
	position:fixed;
	top:0;
	background:#fff;
	z-index:1;
	padding:0.5em;
}
#reste-de-la-page
{
	position:relative;
	pointer-events:none;
	padding:6em 0.5em 0.5em 0.5em;
}
#reste-de-la-page div
{
	padding-top:0;
	padding-bottom:1em;
	margin:0;
	position:relative;
	top:-6em;
}
nav
{
	padding:1em;
}
</style>
<script>
</script>
</head>
<body>
<header>
<div id="debut-de-la-page">
  Sed vehicula augue eu tellus volutpat consequat. In ac eros gravida, blandit erat eget, scelerisque ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
</div>

<nav>
  <a href="#chap1">lien vers chap 1</a>
  <a href="#chap2">lien vers chap 2</a>
  <a href="#chap3">lien vers chap 3</a>
  <a href="#chap4">lien vers chap 4</a>
  <a href="#chap5">lien vers chap 5</a>
  <a href="#chap6">lien vers chap 6</a>
</nav>
</header>

<div id="reste-de-la-page">
  <div id="chap1"></div>
  <p>
1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu purus tempor, maximus elit sed, cursus elit. Sed interdum, neque vel lobortis pharetra, quam dolor volutpat diam, placerat sodales est lectus vitae ipsum. Duis sed euismod velit, ac egestas ligula. Proin vitae justo ac nisi sagittis tristique non nec mauris. Maecenas aliquet commodo arcu, quis rutrum turpis vestibulum vel. Phasellus fringilla aliquet magna nec lobortis. Sed cursus nisi ac nunc vestibulum ultrices. Pellentesque euismod efficitur odio ut vulputate. Sed id enim fringilla, facilisis dolor in, aliquet felis. Donec pharetra nibh erat, vel tempor urna venenatis et. Pellentesque commodo mauris in dapibus tincidunt. Fusce eleifend risus ac sapien dictum tincidunt. Maecenas auctor orci diam, vitae laoreet velit consequat tristique. Praesent dapibus felis augue, et bibendum ligula interdum ac.
  </p>
  <div id="chap2"></div>
  <p>
2) Donec vestibulum justo nunc, id porttitor velit auctor et. Maecenas luctus porta justo, sit amet gravida lacus tempor ac. Curabitur mollis lobortis dui quis interdum. Nam a turpis ullamcorper, consequat risus ac, bibendum mauris. Duis ut ligula commodo, vulputate neque ac, aliquet lectus. Morbi sodales rhoncus facilisis. Aliquam turpis ligula, maximus et augue quis, dignissim bibendum massa. Mauris volutpat a massa eu volutpat. In tristique velit vitae libero condimentum pulvinar. Aliquam nibh nisi, mollis quis nibh non, varius convallis mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Nulla elementum aliquet nibh nec commodo. Nulla id efficitur turpis. Etiam mollis massa aliquam libero placerat vulputate. Integer in enim feugiat arcu sagittis faucibus.
  </p>
  <div id="chap3"></div>
  <p>
3) Sed vehicula augue eu tellus volutpat consequat. In ac eros gravida, blandit erat eget, scelerisque ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce non pharetra enim. Donec volutpat in mi lacinia faucibus. Nulla molestie elementum lobortis. Suspendisse potenti. Etiam feugiat condimentum metus. Aenean eget diam feugiat quam semper laoreet quis in dolor. Integer maximus elementum diam vestibulum luctus. Donec bibendum nisl nec neque blandit finibus. Fusce gravida volutpat tristique. Quisque vel massa at velit aliquam sollicitudin. Suspendisse convallis imperdiet quam non maximus.
  </p>
  <div id="chap4"></div>
  <p>
4) Nunc tempus eros ac turpis dictum pellentesque. Duis feugiat nisl vestibulum, posuere justo id, egestas orci. Integer nisl erat, aliquet vitae mauris cursus, fermentum maximus felis. Nunc finibus felis eget convallis dignissim. Pellentesque ut erat purus. In quis posuere tortor. Nam et nibh scelerisque, ultrices felis a, semper metus. Duis dictum faucibus tortor at lobortis. Pellentesque pharetra elementum nibh, nec fringilla mi interdum commodo. Integer vitae posuere dui, vel aliquet leo. Proin placerat congue lacus et luctus. Suspendisse semper, dolor sed varius tristique, ligula magna fermentum nulla, et blandit massa nisi at tellus. Suspendisse turpis orci, porta sed aliquet venenatis, malesuada in leo.
  </p>
  <div id="chap5"></div>
  <p>
5) Nunc tempor leo a felis imperdiet bibendum. Morbi a mauris sed quam posuere tincidunt. Aliquam sit amet libero eu nisl venenatis eleifend. Phasellus dui nibh, faucibus quis risus convallis, volutpat aliquet arcu. Nam tincidunt nunc in sapien tempor vulputate. Nam quis odio sit amet quam vulputate venenatis. Ut scelerisque tincidunt arcu sit amet pharetra. Donec neque velit, interdum vitae efficitur in, pharetra sit amet ligula. Nulla luctus ex id lorem commodo tincidunt. Nulla rhoncus magna in sollicitudin imperdiet. Fusce sed convallis libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ut quam pharetra mauris auctor volutpat vitae vel mi. Curabitur ultricies euismod eros, non dapibus velit hendrerit pellentesque.
  </p>
  <div id="chap6"></div>
  <p>
6) Integer placerat odio erat, id facilisis eros pellentesque in. Phasellus viverra tellus nisi, nec ultricies felis tincidunt in. Aliquam eleifend eu ex egestas gravida. Maecenas fringilla egestas tristique. Sed laoreet, lorem sed viverra molestie, sapien enim euismod nisi, ut mattis tellus ligula nec odio. Duis facilisis sem at mi malesuada, egestas dictum eros consequat. Proin eu purus ut nunc congue vulputate. Mauris interdum hendrerit enim nec finibus.
  </p>
</div>
</body>
</html>


Amicalement,
Modifié par parsimonhi (02 Apr 2021 - 12:37)
_laurent a écrit :
Salut !

Effectivement c'est un peu plus clair comme ça merci !
Par contre juste avec des ancres je ne pense pas que ce soit possible... en tout cas je n'ai pas la solution. Pour moi, tu devrais passer par un peu de Js et améliorer un peu cette partie par la même occasion (cacher les contenu et ne les afficher qu'à la sélection, ca sera plus joli, tu pourra mettre des effet, le bloc pourra varier selon la taille du contenu etc)


Bonjour
Merci pour votre retour.
En effet je crois que je vais passer par un peu de JS. J'ai trouvé une solution simple en jouant sur la valeur des marges supérieures des chapitres avec javascript. Ca fonctionne et je pense que je conserve pas mal d'accessibilité.

Est-ce que le fait de cacher les éléments (visibility:hidden) permet de conserver l'accessibilité du doc ?
parsimonhi a écrit :
Bonjour,

Si on connait la hauteur du haut de page a priori (ou que l'on est capable de le calculer avec une formule simple en css), on peut peut-être s'en sortir en mettant les ancres dans le contenu principal et en les positionnant en relatif en les remontant de la hauteur du haut de page.

Exemple ci-dessous, j'ai considéré que le haut de page faisait 6em, mais on aurait pu aussi le calculer en fonction par exemple du nombre de vw que fait la fenêtre (plus la fenêtre serait large, moins cette hauteur serait haute) :

&lt;!DOCTYPE html&gt;
&lt;html lang="fr"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
&lt;meta name="description" content="Test"&gt;
&lt;title&gt;Test&lt;/title&gt;
&lt;style&gt;
body
{
	margin:0;
	padding:0;
}
header
{
	position:fixed;
	top:0;
	background:#fff;
	z-index:1;
	padding:0.5em;
}
#reste-de-la-page
{
	position:relative;
	pointer-events:none;
	padding:6em 0.5em 0.5em 0.5em;
}
#reste-de-la-page div
{
	padding-top:0;
	padding-bottom:1em;
	margin:0;
	position:relative;
	top:-6em;
}
nav
{
	padding:1em;
}
&lt;/style&gt;
&lt;script&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;header&gt;
&lt;div id="debut-de-la-page"&gt;
  Sed vehicula augue eu tellus volutpat consequat. In ac eros gravida, blandit erat eget, scelerisque ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
&lt;/div&gt;

&lt;nav&gt;
  &lt;a href="#chap1"&gt;lien vers chap 1&lt;/a&gt;
  &lt;a href="#chap2"&gt;lien vers chap 2&lt;/a&gt;
  &lt;a href="#chap3"&gt;lien vers chap 3&lt;/a&gt;
  &lt;a href="#chap4"&gt;lien vers chap 4&lt;/a&gt;
  &lt;a href="#chap5"&gt;lien vers chap 5&lt;/a&gt;
  &lt;a href="#chap6"&gt;lien vers chap 6&lt;/a&gt;
&lt;/nav&gt;
&lt;/header&gt;

&lt;div id="reste-de-la-page"&gt;
  &lt;div id="chap1"&gt;&lt;/div&gt;
  &lt;p&gt;
1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu purus tempor, maximus elit sed, cursus elit. Sed interdum, neque vel lobortis pharetra, quam dolor volutpat diam, placerat sodales est lectus vitae ipsum. Duis sed euismod velit, ac egestas ligula. Proin vitae justo ac nisi sagittis tristique non nec mauris. Maecenas aliquet commodo arcu, quis rutrum turpis vestibulum vel. Phasellus fringilla aliquet magna nec lobortis. Sed cursus nisi ac nunc vestibulum ultrices. Pellentesque euismod efficitur odio ut vulputate. Sed id enim fringilla, facilisis dolor in, aliquet felis. Donec pharetra nibh erat, vel tempor urna venenatis et. Pellentesque commodo mauris in dapibus tincidunt. Fusce eleifend risus ac sapien dictum tincidunt. Maecenas auctor orci diam, vitae laoreet velit consequat tristique. Praesent dapibus felis augue, et bibendum ligula interdum ac.
  &lt;/p&gt;
  &lt;div id="chap2"&gt;&lt;/div&gt;
  &lt;p&gt;
2) Donec vestibulum justo nunc, id porttitor velit auctor et. Maecenas luctus porta justo, sit amet gravida lacus tempor ac. Curabitur mollis lobortis dui quis interdum. Nam a turpis ullamcorper, consequat risus ac, bibendum mauris. Duis ut ligula commodo, vulputate neque ac, aliquet lectus. Morbi sodales rhoncus facilisis. Aliquam turpis ligula, maximus et augue quis, dignissim bibendum massa. Mauris volutpat a massa eu volutpat. In tristique velit vitae libero condimentum pulvinar. Aliquam nibh nisi, mollis quis nibh non, varius convallis mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Nulla elementum aliquet nibh nec commodo. Nulla id efficitur turpis. Etiam mollis massa aliquam libero placerat vulputate. Integer in enim feugiat arcu sagittis faucibus.
  &lt;/p&gt;
  &lt;div id="chap3"&gt;&lt;/div&gt;
  &lt;p&gt;
3) Sed vehicula augue eu tellus volutpat consequat. In ac eros gravida, blandit erat eget, scelerisque ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce non pharetra enim. Donec volutpat in mi lacinia faucibus. Nulla molestie elementum lobortis. Suspendisse potenti. Etiam feugiat condimentum metus. Aenean eget diam feugiat quam semper laoreet quis in dolor. Integer maximus elementum diam vestibulum luctus. Donec bibendum nisl nec neque blandit finibus. Fusce gravida volutpat tristique. Quisque vel massa at velit aliquam sollicitudin. Suspendisse convallis imperdiet quam non maximus.
  &lt;/p&gt;
  &lt;div id="chap4"&gt;&lt;/div&gt;
  &lt;p&gt;
4) Nunc tempus eros ac turpis dictum pellentesque. Duis feugiat nisl vestibulum, posuere justo id, egestas orci. Integer nisl erat, aliquet vitae mauris cursus, fermentum maximus felis. Nunc finibus felis eget convallis dignissim. Pellentesque ut erat purus. In quis posuere tortor. Nam et nibh scelerisque, ultrices felis a, semper metus. Duis dictum faucibus tortor at lobortis. Pellentesque pharetra elementum nibh, nec fringilla mi interdum commodo. Integer vitae posuere dui, vel aliquet leo. Proin placerat congue lacus et luctus. Suspendisse semper, dolor sed varius tristique, ligula magna fermentum nulla, et blandit massa nisi at tellus. Suspendisse turpis orci, porta sed aliquet venenatis, malesuada in leo.
  &lt;/p&gt;
  &lt;div id="chap5"&gt;&lt;/div&gt;
  &lt;p&gt;
5) Nunc tempor leo a felis imperdiet bibendum. Morbi a mauris sed quam posuere tincidunt. Aliquam sit amet libero eu nisl venenatis eleifend. Phasellus dui nibh, faucibus quis risus convallis, volutpat aliquet arcu. Nam tincidunt nunc in sapien tempor vulputate. Nam quis odio sit amet quam vulputate venenatis. Ut scelerisque tincidunt arcu sit amet pharetra. Donec neque velit, interdum vitae efficitur in, pharetra sit amet ligula. Nulla luctus ex id lorem commodo tincidunt. Nulla rhoncus magna in sollicitudin imperdiet. Fusce sed convallis libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ut quam pharetra mauris auctor volutpat vitae vel mi. Curabitur ultricies euismod eros, non dapibus velit hendrerit pellentesque.
  &lt;/p&gt;
  &lt;div id="chap6"&gt;&lt;/div&gt;
  &lt;p&gt;
6) Integer placerat odio erat, id facilisis eros pellentesque in. Phasellus viverra tellus nisi, nec ultricies felis tincidunt in. Aliquam eleifend eu ex egestas gravida. Maecenas fringilla egestas tristique. Sed laoreet, lorem sed viverra molestie, sapien enim euismod nisi, ut mattis tellus ligula nec odio. Duis facilisis sem at mi malesuada, egestas dictum eros consequat. Proin eu purus ut nunc congue vulputate. Mauris interdum hendrerit enim nec finibus.
  &lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;


Amicalement,


Merci pour votre retour, je vais étudier ça !