11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Fonction de replaçage d'ancre automatique

Bonjour,
J'ai un design à header fixe sur mon site avec un menu toujours accessible.
Le truc c'est que lorsque je fais un lien avec une ancre, le navigateur place toujours l'ancre en tout début de page, du coup, une partie du texte est cachée par le header. Avec une fonction en js, il doit être possible de replacer automatiquement la page correctement juste en dessous du header?
Du genre:
<a href="#ancre" onclick="maFonctionSousLeHeader(); return true;">toto</a>

Le truc, c'est que je ne connais rien à js, moi c'est plutôt php côté serveur. Je pense que le script de la fonction doit tenir en quelques lignes, si quelqu'un pouvais me donner un coup de main... Smiley cligne
Modifié par djkori (06 Sep 2010 - 17:19)
Salut,

tu n'as pas besoin de JavaScript : il suffit d'affecter un padding-top un peu plus grand que la hauteur du header à tes éléments ciblés.

Par exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
}
#global {
	width: 900px;
	background: lavender;
	margin: 0 auto;
}
#header {
	position: fixed;
	top: 0;
	height: 100px;
	width: 900px;
	background: #f90;
}
h1 {
	padding-top: 110px;
	margin-top: 0;
}
</style>
</head>
<body>
<div id="global">
	<div id="header">
		<p>Bla Bla</p>
		<p><a href="#ancre1">Ancre 1</a> <a href="#ancre2">Ancre 2</a> <a href="#ancre3">Ancre 3</a></p>
	</div>
	<div id="content">
		<h1 id="ancre1">Titre 1</h1>
		<p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
		<h1 id="ancre2">Titre 2</h1>
		<p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
		<h1 id="ancre3">Titre 3</h1>
		<p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
	</div>
</div>
</body>
</html>
Bonjour Heyoan,
Effectivement, c'est faisable comme ceci, mais ça fait un espace horrible et puis les ancres ne sont pas forcément sur des titres, elles peuvent ètre sur tout un tas d'endroits...
djkori a écrit :
Effectivement, c'est faisable comme ceci, mais ça fait un espace horrible
Ben il suffit de modifier la valeur du padding. <edit>Ah OK : tu veux parler de l'espace visible au dessus des ancres si on ne se sert pas des liens.</edit>

djkori a écrit :
les ancres ne sont pas forcément sur des titres, elles peuvent ètre sur tout un tas d'endroits...
Ben il suffit de ne pas cibler les H1 mais les id des ancres.
Modifié par Heyoan (04 Sep 2010 - 18:24)
Une autre solution :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
}
#global {
	width: 900px;
	background: lavender;
	margin: 0 auto;
	padding-top: 100px;
}
#header {
	position: fixed;
	top: 0;
	width: 900px;
	height: 100px;
	background: #f90;
}
.ancre {
	position: relative;
}
.ancre span {
	position: absolute;
	top: -110px;
}
</style>
</head>
<body>
<div id="global">
	<div id="header">
		<p>Bla Bla</p>
		<p><a href="#ancre1">Ancre 1</a> <a href="#ancre2">Ancre 2</a> <a href="#ancre3">Ancre 3</a></p>
	</div>
	<div id="content">
		<div class="ancre"><span id="ancre1"></span></div>
		<h1>Titre 1</h1>
		<p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
		<div class="ancre"><span id="ancre2"></span></div>
		<h1>Titre 2</h1>
		<p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
		<div class="ancre"><span id="ancre3"></span></div>
		<h1>Titre 3</h1>
		<p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
	</div>
</div>
</body>
</html>

Modifié par Heyoan (04 Sep 2010 - 21:50)
Heyoan a écrit :
Une autre solution :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
}
#global {
	width: 900px;
	background: lavender;
	margin: 0 auto;
	padding-top: 100px;
}
#header {
	position: fixed;
	top: 0;
	width: 900px;
	height: 100px;
	background: #f90;
}
.ancre {
	position: relative;
}
.ancre span {
	position: absolute;
	top: -110px;
}
</style>
</head>
<body>
<div id="global">
	<div id="header">
		<p>Bla Bla</p>
		<p><a href="#ancre1">Ancre 1</a> <a href="#ancre2">Ancre 2</a> <a href="#ancre3">Ancre 3</a></p>
	</div>
	<div id="content">
		<div class="ancre"><span id="ancre1"></span></div>
		<h1>Titre 1</h1>
		<p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
		<div class="ancre"><span id="ancre2"></span></div>
		<h1>Titre 2</h1>
		<p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
		<div class="ancre"><span id="ancre3"></span></div>
		<h1>Titre 3</h1>
		<p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
	</div>
</div>
</body>
</html>


Oui, ça marche, je vais essayer d'adapter ceci sur mon site... en effet pas besoin de js en fait, c'est faisable en css.
Merci pour l'info Smiley biggrin
Je n'ai pas compris pourquoi tu avais cité tout mon message...


En tout cas de rien Smiley smile !

Et si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre. Smiley cligne
Sujet clos
Aller à