Bonjour

Préliminaires:
--------------
Selon mes 3 heures de recherches je dois passer impérativement par du JS mais, évidemment, le JS et moi ...
Le sujet a déjà été traité ici cependant je ne retrouve plus le post. J'avais toutefois copié le code pour tenter de le bidouiller à ma sauce Smiley cligne durant deux heures mais sans succès Smiley decu (v. plus bas).

Montée en température:
--------------------------
Je refonds un site créé il y a 10 ans en Xhtml 1.0 transitional et CSS2.1. Il est valide W3C (html et css) et je souhaite que la nouvelle mouture le reste également.

J'ai aligné à gauche un div (menu d'évitement) en "position: fixed".
Lorsque j'arrive en bas de page, mon div menu se superpose en grande partie au footer qui a une hauteur de 220px (v. img). Rien d'étonnant, sauf que ça ne me convient nullement.

Vas-y Johnny c'est bon ... :
----------------------------
Vous aurez compris ma demande, ... un coup de pouce pour adapter le JS à mon code, que voici.

Mon CSS

#nav_lat{
	position: fixed;
	width: 200px;
	margin: 295px 0 0 100px;
	padding: 0;
	border-right: 1px solid #CCC;
	border-left: 1px solid #CCC;
}
#nav_lat ul{
	list-style: none;
}
#nav_lat li{
	color: #727272;
	background: #fff;
	margin-bottom: 20px;
}
#nav_lat li a{
	padding: 4px 20px;
	color: #727272;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	line-height: 1em;
	text-align: center;
	text-decoration: none;
}
#nav_lat li a:hover, #nav_lat li a:focus, #nav_lat li a:active{
  text-decoration: underline;


Le code JS que j'ai trouvé mais que je n'arrive pas à bidouiller
		var offset = $("#cart_block").offset();
		var topPadding = 20;
		$(window).scroll(function() {
		    if ($(window).scrollTop() > offset.top && $(window).scrollTop() < $('#footer').offset().top-150) { 
			$("#cart_block").stop().animate({
			    marginTop: $(window).scrollTop() - offset.top + topPadding
			});
		    } else {
			$("#cart_block").stop().animate({
			    marginTop: 0
			});
		    };
		});


Le problème en image
upload/1505724415-67506-lecaca.jpeg

Le moment cigarette:
-----------------------
Merci aux bonnes âmes qui se pencheront sur mon cas.
Modifié par Silencio (18 Sep 2017 - 10:57)
Salut !

j'ai bien compris ton problème et suis prêt à jeter un coup d'oeil pour t'aider.
Par contre, peux tu mettre ton code sur JSFIDDLE ou CODEPEN, car il manque le HTML.

Cela serais pour simuler directement ton cas. Ou sinon si tu as un adresse valide pour tester en LIVE ça serait cool merci!
Salut Jencal

Merci pour ta réponse.
Tout ce que j'ai du code JS est posté ci-dessus. Je l'ai copié d'un poste, sur Alsa, mais ne retrouve pas ce poste. Il n'y avait rien de plus que le code original qui ne fonctionnait pas et le corrigé que j'ai collé ci-dessus.

Le site en ligne actuellement n'a plus la même structure (mise en page) que la nouvelle édition. Cette dernière est encore au four en train de cuir.

Par contre je peux te mettre le Html correspondant au menu d'évitement. Si c'est cela dont tu parles.
ps: c'est un menu copié de l'ancien site. il n'est pas entièrement mit à jour (title, liens, etc)

Mon code html
    
<div class="nav_top">
<ul>        
<li id="btn_accueil"><a href="test.html" title="Vous_êtes_sur_la_page_Accueil">Accueil</a></li>
<li><a href="biographie.html" title="Lien_vers_page_Biographie">Biographie</a></li>
<li><a href="agenda.html" title="Lien_vers_page_Agenda">Agenda</a></li>
<li><a href="lienstest.html" title="Lien_vers_page_Liens">Liens</a></li>
<li><a href="galerie.html" title="Lien_vers_page_Galerie">Galerie</a></li>
<li><a href="mailto:info@ecole-de-samba-de-bruxelles.be?subject=Infos Ecole de Samba" title="Pour plus d'infos contactez Liliane Fontaine">Contact</a></li>
   </ul>
</div>

Modifié par Silencio (18 Sep 2017 - 12:31)
Hello hello

Merci pour ton boulot.

Je viens de tester tout ça mais sans succès.
Ce que j'ai essayé:
Étape 1
-Ajouter dans .nav_top(css) bottom de 10px.
- Créer dans le doctype html un lien vers mon fichier "test.js".
<link type="text/javascript" src="test.js">

- Idem + ajouter avant la fermeture de "body" ceci
<script type="text/javascript" src="test.js"></script>

- Ôter le lien d'appel JS dans le doctype + insérer le code JS en bas de page (juste avant la fermeture de body comme conseillé).

Étape 2
Idem que ci-dessus mais en remplaçant les "#" (devant #nav_top et #footer) par des points - dans mon code ce sont des class et non des id.
Sans succès.

Cela vient peut-être aussi de la déclaration du JS. Je ne suis pas certain que ma façon de l'inclure soit bonne.
Si cela marche dans ton exemple il est certain que c'est mon interface cérébrale qui a loupé quelque chose.

Je veux bien te mettre tout mon code html mais est-ce autorisé ?

Merci en tout cas pour ce premier pas plein d'espoir.
Je viens de relire ton second message ... voici le body. Je l'ai un peu allégé en supprimant du contenu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="test.css" />
<title>test</title>
</head>

<body>
    <div class="conteneur_top">
        <div class="contenu_top">
            <div class="logo">
              <a href="index.html" title="Retour_page_index"><img src="images/logo2.png" alt="logo" /></a>
            </div>
            <div class="titre">
              <h1 title="Ecole de Samba de Bruxelles">Ecole de Samba de Bruxelles</h1>
            </div>
        </div>
    </div>

    <hr />
    
    <div class="nav_top">
		<ul>        
			<li id="btn_accueil"><a href="test.html" title="Vous_êtes_sur_la_page_Accueil">Accueil</a></li>
			<li><a href="biographie.html" title="Lien_vers_page_Biographie">Biographie</a></li>
			<li><a href="agenda.html" title="Lien_vers_page_Agenda">Agenda</a></li>
			<li><a href="lienstest.html" title="Lien_vers_page_Liens">Liens</a></li>
			<li><a href="galerie.html" title="Lien_vers_page_Galerie">Galerie</a></li>
			<li><a href="mailto:info@ecole-de-samba-de-bruxelles.be?subject=Infos Ecole de Samba" title="Pour plus d'infos contactez Liliane Fontaine">Contact</a></li>
		</ul>
	</div>
    
    <hr />
    
    <div id="nav_lat">
        <ul>        
            <li><a href="test.html" title="Vous_êtes_sur_la_page_Accueil">Historique</a></li>
            <li><a href="biographie.html" title="Lien_vers_page_Biographie">Notre groupe</a></li>
            <li><a href="agenda.html" title="Lien_vers_page_Agenda">Nos rytmes</a></li>
            <li><a href="lienstest.html" title="Lien_vers_page_Liens">Participer</a></li>
            <li><a href="galerie.html" title="Lien_vers_page_Galerie">Les répétitions</a></li>
            <li><a href="mailto:info@ecole-de-samba-de-bruxelles.be?subject=Infos Ecole de Samba" title="Pour plus d'infos contactez Liliane Fontaine">Contact</a></li>
        </ul>
    </div>    

<div class="contenu">

  <h1 align="center" title="Bienvenue sur le site de L'Ecole de Samba de Bruxelles.">Bienvenue sur le site de<br />L'Ecole de Samba de Bruxelles</h1>
			<br />
			
			<h2 class="marge_gauche">Depuis 1988 ...</h2>
				<p class="ligne_indent">
				C'est en 1988, sous l'impulsion d'Augusto Gonçalves <a id="lien_augusto" 
				</p>
			<div class="btn_retour">
			<a href="#top"><img  border="0" src="images/btn-retour-souligne.gif" title="retour_haut_de_page" alt="retour_haut_de_page" /></a>
			</div>
			<br />
            <hr />
			
			<h2 class="marge_gauche"><a name="lire_paragraphe:Où_allons-nous" id="lien_vers:Où_allons-nous">Où allons-nous</a></h2>

				<p class="ligne_indent">
				Notre école de samba sévit partout où les gens ont envie de bouger. Dans 
				<br /><br />
				Qu'il s'agisse de l'incontournable Zinneke Parade, des 20 km de Bruxelles, 
				</p>
			<div class="btn_retour">
			<a href="#top"><img  border="0" src="images/btn-retour-souligne.gif" title="retour_haut_de_page" alt="retour_haut_de_page" /></a>
			</div>
			<br />
			
			
			<h2 class="marge_gauche"><a name="lire_paragraphe:Qui_sommes-nous" id="lire_le_paragraphe:Qui_sommes-nous">Qui sommes-nous</a></h2>
				<p class="ligne_indent">
				Lors de la création de l'école de samba, Augusto aurait pu se tourner vers des musiciens  professionnels comme lui. Mais il cherchait un défi plus intéressant. 
				<br />
                <br />
				C'est pourquoi dans notre école de samba vous ne trouverez qu'une bande 
				</p>
			<div class="btn_retour">
			<a href="#top"><img  border="0" src="images/btn-retour-souligne.gif" title="retour_haut_de_page" alt="retour_haut_de_page" /></a>
			</div>
			<br />
			
			
			<h2 class="marge_gauche"><a name="lire_paragraphe:Que_faisons-nous" id="lire_le_paragraphe:Que_faisons-nous">Que faisons-nous</a></h2>
				<p class="ligne_indent">
				Notre groupe comprend uniqement des sections de percussions: agogos, tamborims, caixas, surdos et contra-surdos.
				<br />
				Notre école de samba est avant tout un laboratoire de rythmes où chaque 
				<br />
				Notre répertoire se nourrit de tous les rythmes brésiliens de la rue et pas seulement de la samba. 
				<br />
                <br />
				En effet, si tous nos rythmes sont issus du répertoire traditionnel brésilien, 
				<br />
				D'ailleurs, le terme &quot; Ecole de Samba &quot; n'est peut-être pas le plus judicieux en ce qui nous concerne.<br /> &quot; Ecole de rythmes du Brésil &quot; serait plus adéquat.
								<br />
                <br />
				En deux décennies d'existence notre répertoire a considérablement évolué (heureusement !). Chaque nouveau rythme est un peu plus riche, un peu plus complexe, un peu &hellip; plus.
				<br />
				La samba est évidemment présente dans notre répertoire mais aussi : le 
				</p>
			<div class="btn_retour">
			<a href="#top"><img  border="0" src="images/btn-retour-souligne.gif" title="retour_haut_de_page" alt="retour_haut_de_page" /></a>
			</div>
			<br />
			
			
			<h2 class="marge_gauche"><a name="lire_paragraphe:Comment_le_faisons-nous" id="lire_le_paragraphe:Comment_le_faisons-nous">Comment le faisons-nous</a></h2>
				<p class="ligne_indent">
				A l'Ecole de Samba de Bruxelles il n'existe pas de classes, pas de niveaux, 
				<br />
                <br />
				Nous sommes un groupe uni où chaque musicien a sa place. Les nouveaux 
				</p>
				<p>
				Y entrent ceux et celles qui le désirent pour autant qu'ils (elles) aient :
				</p>
			<br />
			<ul>
				<li><b>Le sens du rythme.</b>
                <br />
				Elément incontournable pour jouer de la musique.
				</li>
				<li><b>Une régularité aux répétitions.<br /></b>
				Nous sommes un groupe et l'essence même d'un groupe est d'être ensemble &hellip; ensemble</li>
				<li><b>Une présence régulière aux sorties (sans obligation de participer à toutes).<br /></b>
				Le but d'une école de samba est de défiler, de faire bouger, de mettre de la couleur dans les rues.
				</li>
				<li><b>Une bonne dose d'humour.<br /></b>
				Nous aimons rire et nous amuser. Grincheux s'abstenir.
				</li>
			</ul>
			<div class="btn_retour">
			<a href="#top"><img  border="0" src="images/btn-retour-souligne.gif" title="retour_haut_de_page" alt="retour_haut_de_page" /></a>
			</div>
			<br />
			
			<h2 class="marge_gauche"><a name="lire_paragraphe:Les_répétitions" id="lire_le_paragraphe:Les_répétitions">Les répétitions</a></h2>
				<p class="ligne_indent">
				Chaque  mardi de 20h00 à 22h00.
				Rue Traversière, 125 - 1210 Bruxelles (St-Josse) à &quot; l'Ecole de la Sagesse.&quot;
				<br />
				Les instruments sont fournis par l'école mais rien ne vous empêche d'apporter le vôtre.
				L'Ecole de Samba de Bruxelles est une <acronym> A.S.B.L. </acronym> En 
				<br />
				Pour de plus amples informations, contactez <a href="mailto:samboabresil@gmail.com?subject=Infos Ecole de Samba" title="Pour_plus_d'infos_contactez_Liliane_Fontaine"><i> Liliane Fontaine.</i></a>
				<br />
				</p>
			<br />
				<p class="plan_acces">
				<a href="images/plan_acces.jpeg"><b><u>Plan d'accès</u></b></a>
				</p>
</div>

<div class="footer">
  <div id="nav_bas">
        <ul>
	    <li><a href="test.html" title="Vous_êtes_sur_la_page_Accueil">Accueil</a></li>
            <li><a href="biographie.html" title="Lien_vers_page_Biographie">Biographie</a></li>
            <li><a href="agenda.html" title="Lien_vers_page_Agenda">Agenda</a></li>
            <li><a href="lienstest.html" title="Lien_vers_page_Liens">Liens</a></li>
            <li><a href="galerie.html" title="Lien_vers_page_Galerie">Galerie</a></li>
            <li><a href="mailto:info@ecole-de-samba-de-bruxelles.be?subject=Infos Ecole de Samba" title="Pour plus d'infos contactez Liliane Fontaine">Contact</a></li>
        </ul>
  </div>
    
    <div class="w3c" title="W3C c'est quoi ?">
        <div>
            <p><a href="http://validator.w3.org/check?uri=http://www.ecole-de-samba-de-bruxelles.be/accueil.html">
            <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" /></a></p>
        </div>
        <div>
            <p><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.ecole-de-samba-de-bruxelles.be/accueil.html">
            <img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="CSS Valide !" /></a></p>
        </div>
 
</div>
        <p class="info_w3c"><b>W3C ?</b> Ce site répond aux normes strictes recommandées 
        </p>            

</div>

</body>
</html>
Silencio a écrit :

Idem que ci-dessus mais en remplaçant les "#" (devant #nav_top et #footer) par des points - dans mon code ce sont des class et non des id.
Sans succès.

Normal, les classes et les ID ce n'est pas la même chose. Mon code est fait pour un ID car je cible un élement par son ID, pour les classes il faut adapter cela et bien sur mettre un point ne suffit pas, ça serait trop simple Smiley langue (un ID est unique donc ciblable (je sais ça ne ce dit pas) directement, alors que quand on cible une classe on cible un tas d'éléments, une collection, donc il faut affiner cela)

Je ne peux pas plus t'aider qu'avec l'exemple que je t'ai fourni, je ne peux l'adapter dans ton cas je n'ai pas toutes les billes, il faudrait que tu mettes ton cas en ligne, via jsfiddle ou codepen (avec le HTML, CSS, et le Javascript qui ne fonctionne pas), et la je pourrais faire plus.
Modifié par JENCAL (18 Sep 2017 - 17:23)
Ok je viens de voir la liste ! Je comprends tout à fait tes besoins.

Je me suis souvenu que mon FAI me permet un espace web (mini-100Mo) que je tente de joindre via Filzilla mais l'accès m'est refusé.
Je vais voir via jsfiddle et codepen (inconnu pour moi) et reviens donner des nouvelles.

Merci
Avant de passer par js vous auriez aussi pu passer par le css position sticky. Mais ce positionement ne concerne que les navigateurs récents.
Bonjour Olivier

Effectivement, j'ai vu pu voir certains effets très réussis sous CSS 3, mais je ne "connais" que le CSS 2.1 et html transitional. Cela dit, le rafraîchissement de mon site m'a redonné goût au bidouillage de code et motivé à étudier le css3 et JS.
Salut, ce n'est pas la bonne adresse jsfiddle Smiley smile

Il faut ajouter son code dans les bonnes parties, cliquer sur "save" et partager l'url.
Puisque le sujet continue d'être actif, voici une petite démonstration du procédé en full CSS : CodePen.

Le code css :
.sticky {
    position: sticky;
}

Pour être bien exploité le sticky doit se trouver dans une colonne qui longue la colonne principale, comme dans l'exemple donné en lien.
Salut Jencal

Vers la fin du css tu as un commentaire qui dit:
/*------------------------------------------------------------      --*/
/*------Navigations haut, laterale et bas. Toutes pages--------*/
/*-------------------------------------------------------     -----*/


Un peu plus bas tu as:
/*-----debut nav_lat----- */
#nav_lat{
	position: fixed;
	width: 200px;
	margin: 295px 0 0 100px;
	padding: 0;
	border-right: 1px solid #CCC;
	border-left: 1px solid #CCC;
}
Oui je suis d'accord, il y ai , mais le menu fixe "visuellement" je le vois pas dans la fenêtre de résultat, je ne peux pas reproduire exactement ton problème.
Ha ok ! Désolé.

Le menu est bien présent mais la taille de la fenêtre de visualisation n'est pas assez grande. Tu dois agrandir celle-ci au maximum et tu le verras apparaître en bas.
Ok, mais a cause de ton margin: 295px 0 0 100px; sur ton menu fixed, je le vois pas... du coup j'ai du l'enlever.. malgré la taille important de mon écran.
@ Olivier C

Désolé je n'avais pas remarqué ton message concernant "sticky". Je viens de le tester.
Ça fonctionne mais
- IE-11 ne veux rien savoir
- W3C ne l'accepte pas (html transitional et css 2.1 = mon niveau)
- Juste avant le "footer" j'ai un texte-lien qui, avec "hover", fait apparaître une image (plan d'accès). Avec FF au lieu d'afficher l'image un grand trou blanc se crée au milieu de mon texte contenu. Solution : En appliquant un a:focus en plus du a: hover ça règle le problème mais supprime aussi l'effet hover.
Opera et Chrome ne posent aucun souci et Safari je l'ai viré (intrusion de force dans réglages FF)

Comme expliqué au début du poste, je rénove un site existant valide w3c et je souhaite qu'il le reste. Ce qui ne sera pas le cas si j'applique "sticky".

Finalement je vais me tourner vers un menu d'évitement horizontal, que je positionnerai au-dessus de mon bloc contenu. Problème résolu Smiley decu

Merci.
Modifié par Silencio (23 Sep 2017 - 12:15)