Liens vers sections

par **two3d** » 13 oct. 2022, 23:04

Tous les liens des templates à télécharger sont avec des href #, c'est pas des vrais liens, à toi de mettre "ta-page.html" ou une ancre, comme la expliqué ynx.

par **ynx** » 10 oct. 2022, 18:45

Bonjour,

Pour créer un lien vers une section de la même page, il faut définir un attribut id à ta section et spécifier l'id après le # dans la cible du lien :

<a href="#intro">Lien vers l'introduction</a>
<a href="#content">Lien vers le contenu</a>
<a href="#footer">Lien vers le pied de page</a>

<section id="intro">
    Introduction...
</section>

<section id="content">
    Contenu...
</section>

<section id="footer">
    Pied de page
    <a href="#">Lien vers le haut de la page</a>
</section>

par **Lenny-s** » 10 oct. 2022, 11:12

Bonjour,
J'essaye d'utiliser un template en HTML5 sur le site : html5up, template : halcyonic

Ma Question :
Dans le menu du haut "Two Column #2", la page apparait avec un menu à gauche.
Le menu de gauche est écrit comme ça :

Code : Tout sélectionner

<li><a href="#">Sed dolore viverra</a></li>

Avec quoi dois-je remplacer le "#" pour que mon menu fonctionne ?
J'ai essayé de créer une

Code : Tout sélectionner

<section 2>

mais ça ne fonctionne pas...

Merci pour toute aide !

Code de la page complet :

Code : Tout sélectionner

<!DOCTYPE HTML>
<!--
	Halcyonic by HTML5 UP
-->
<html>
	<head>
		<title>Two Column 2 - Halcyonic by HTML5 UP</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="assets/css/main.css" />
	</head>
	<body class="subpage">
		<div id="page-wrapper">

			<!-- Header -->
				<section id="header">
					<div class="container">
						<div class="row">
							<div class="col-12">

								<!-- Logo -->
									<h1><a href="index.html" id="logo">Halcyonic</a></h1>

								<!-- Nav -->
									<nav id="nav">
										<a href="index.html">Homepage</a>
										<a href="threecolumn.html">Three Column</a>
										<a href="twocolumn1.html">Two Column #1</a>
										<a href="twocolumn2.html">Two Column #2</a>
										<a href="onecolumn.html">One Column</a>
									</nav>

							</div>
						</div>
					</div>
				</section>

			<!-- Content -->
				<section id="content">
					<div class="container">
						<div class="row">
							<div class="col-3 col-12-medium">

								<!-- Sidebar -->
									<section>
										<header>
											<h2>Magna Phasellus</h2>
										</header>
										<ul class="link-list">
											<li><a href="#">Sed dolore viverra</a></li>
											<li><a href="#">Ligula non varius</a></li>
											<li><a href="#">Nec sociis natoque</a></li>
											<li><a href="#">Penatibus et magnis</a></li>
											<li><a href="#">Dis parturient montes</a></li>
											<li><a href="#">Nascetur ridiculus</a></li>
										</ul>
									</section>
									<section>
										<header>
											<h2>Ipsum Dolor</h2>
										</header>
										<p>
											Vehicula fermentum ligula at pretium. Suspendisse semper iaculis eros, eu aliquam
											iaculis. Phasellus ultrices diam sit amet orci lacinia sed consequat.
										</p>
										<ul class="link-list">
											<li><a href="#">Sed dolore viverra</a></li>
											<li><a href="#">Ligula non varius</a></li>
											<li><a href="#">Dis parturient montes</a></li>
											<li><a href="#">Nascetur ridiculus</a></li>
										</ul>
									</section>

							</div>
							<div class="col-9 col-12-medium imp-medium">

								<!-- Main Content -->
									<section>
										<header>
											<h2>Two Column #2</h2>
											<h3>Another generic two column layout</h3>
										</header>
										<p>
											Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam metus, congue
											vel suscipit ut, dignissim non risus. Vestibulum ante est, fringilla nec placerat
											eu, vestibulum vitae diam. Integer eget egestas eros. Duis enim erat, mollis quis
											lacinia eget, blandit nec ipsum. Donec vitae turpis ipsum. Aliquam mauris libero,
											sagittis in eleifend at, mattis imperdiet velit. Donec urna risus, rutrum molestie
											varius ac, lacinia sit amet augue. Nam ultrices elementum eros.
										</p>
									</section>

							</div>
						</div>
					</div>
				</section>

			<!-- Footer -->
				<section id="footer">
					<div class="container">
						<div class="row">
							<div class="col-8 col-12-medium">

								<!-- Links -->
									<section>
										<h2>Links to Important Stuff</h2>
										<div>
											<div class="row">
												<div class="col-3 col-12-small">
													<ul class="link-list last-child">
														<li><a href="#">Neque amet dapibus</a></li>
														<li><a href="#">Sed mattis quis rutrum</a></li>
														<li><a href="#">Accumsan suspendisse</a></li>
														<li><a href="#">Eu varius vitae magna</a></li>
													</ul>
												</div>
												<div class="col-3 col-12-small">
													<ul class="link-list last-child">
														<li><a href="#">Neque amet dapibus</a></li>
														<li><a href="#">Sed mattis quis rutrum</a></li>
														<li><a href="#">Accumsan suspendisse</a></li>
														<li><a href="#">Eu varius vitae magna</a></li>
													</ul>
												</div>
												<div class="col-3 col-12-small">
													<ul class="link-list last-child">
														<li><a href="#">Neque amet dapibus</a></li>
														<li><a href="#">Sed mattis quis rutrum</a></li>
														<li><a href="#">Accumsan suspendisse</a></li>
														<li><a href="#">Eu varius vitae magna</a></li>
													</ul>
												</div>
												<div class="col-3 col-12-small">
													<ul class="link-list last-child">
														<li><a href="#">Neque amet dapibus</a></li>
														<li><a href="#">Sed mattis quis rutrum</a></li>
														<li><a href="#">Accumsan suspendisse</a></li>
														<li><a href="#">Eu varius vitae magna</a></li>
													</ul>
												</div>
											</div>
										</div>
									</section>

							</div>
							<div class="col-4 col-12-medium imp-medium">

								<!-- Blurb -->
									<section>
										<h2>An Informative Text Blurb</h2>
										<p>
											Duis neque nisi, dapibus sed mattis quis, rutrum accumsan sed. Suspendisse eu
											varius nibh. Suspendisse vitae magna eget odio amet mollis. Duis neque nisi,
											dapibus sed mattis quis, sed rutrum accumsan sed. Suspendisse eu varius nibh
											lorem ipsum amet dolor sit amet lorem ipsum consequat gravida justo mollis.
										</p>
									</section>

							</div>
						</div>
					</div>
				</section>

			<!-- Copyright -->


		</div>

		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/browser.min.js"></script>
			<script src="assets/js/breakpoints.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>

	</body>
</html>

Liens vers sections

Répondre

Étendre la vue Revue du sujet : Liens vers sections

Re: Liens vers sections

Re: Liens vers sections

Liens vers sections