Retour en haut de la page non controllé par MoïseCochin - page 1

Bonjour,

J'ai simplement utiliser des sliders pour pouvoir faire defiler des images avec des boutons situés en bas des images mais le problème c'est que lorsque j'appuis sur un bouton, la page descend toute seule pour se mettre au niveau des images..

Cela ne parait sans doute pas très clair mais j'espère que vous saurez m'apporter de l'aide.

Merci

Voici mon code HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Sophrologue et Réflexologue à Châtellerault 86100 | Laure Griffiths</title>
	<script src="https://kit.fontawesome.com/55a36199d2.js" crossorigin="anonymous"></script>
	<link rel="stylesheet" href="CSS/style_acceuil.css" />
</head>
<body>
	<header>
		<div class="titre_header">
			<img src="Images/logo_sophro.jpeg">
			<div class="nom_numero">
				<h2 id="titre_nom">LAURE GRIFFITHS</h2>
				<h2>06.78.16.72.25</h2>
			</div>
		</div>
		<nav class="nav_header">
			<ul>
				<li id="acceuil"><a href="acceuil.com"> Acceuil </a></li>
				<li id="sophro"><a href="sophro.com"> Sophrologie </a></li>
				<li id="temoignages"><a href="temoignages.com"> Témoignages </a></li>
				<li id="blog"><a href="blog.com"> Blog </a></li>
				<li id="tarifs_plan"><a href="tarifs_plan.com"> Tarifs/Plan </a></li>
				<li id="facebook"><a href="https://www.facebook.com/sophrologielauregriffiths" target="blank">Ma Page Facebook</a></li>
			</ul>
		</nav>
	</header>
	<section class="section_acceuil1">
		<div class="slider-container">
		<span id="slider-image1"></span>
		<span id="slider-image2"></span>
		<div class="image-container">
			<img src="Images/banner-1.jpg" class="slider-image">
			<img src="Images/banner-2.jpg" class="slider-image">
			<h1 id="question1" >POURQUOI CHOISIR LA SOPHROLOGIE ?</h1>
			<h1 id="question2" >POURQUOI ME FAIRE CONFIANCE ?</h1>
			<p id="question_p1">Parce que mes formations et certifications sont une garantie pour vous<br>
				Parce que des professionels de santé me font confiance.Médecins, psychologues, naturopathes, acupuncteurs...<br>
				Parce que mon objectif est votre bien-être.</p>
			<p id="question_p2">Pour apprendre des méthodes faciles à utiliser dans des contextes stressants, en autonomie.<br>
				Pour retrouver confiance en vous et maîtriser vos ressources par l'entrainement et la pratique de la Sophrologie.<br>
				Pour activer votre potentiel positif au niveau physique et mental et maintenir votre équilibre.</p>
		</div>
		<div class="button-container">
			<a href="#slider-image1" class="slider-button"></a>
			<a href="#slider-image2" class="slider-button"></a>
		</div>
		<div class="white-box"></div>
		
	</div>
	</section>
	<section class="section_acceuil2">
		<div class="temoignages">
			<div class="temoignage1">
				<h1 id="titre_temoignage">"APAISEMENT"</h1>
					<span>
						<i class="fa fa-star" style="color:#386280;"></i>
              			<i class="fa fa-star" style="color:#386280;"></i>
              			<i class="fa fa-star" style="color:#386280;"></i>
              			<i class="fa fa-star" style="color:#386280;"></i>
              			<i class="fa fa-star" style="color:#386280;"></i>
              			<p>Par ANNOUCHKA</p>
					</span>
					<p>MERCI POUR VOTRE APPROCHE DE NOTRE MAL ÊTRE... J'ai pu affronter deux échéances douloureuses avec plus de hauteur, plus sereinement. Le lâcher prise ... Je recommande vivement et regrette la distance qui ne me permet pas un suivi plus régulier...</p>
			</div>
			<div class="temoignage2">
				<h1 id="titre_temoignage">"Séances Sophro remarquables"</h1>
					<span>
						<i class="fa fa-star" style="color:#386280;"></i>
              			<i class="fa fa-star" style="color:#386280;"></i>
              			<i class="fa fa-star" style="color:#386280;"></i>
              			<i class="fa fa-star" style="color:#386280;"></i>
              			<i class="fa fa-star" style="color:#386280;"></i>
              			<p>Par Bjc</p>
					</span>
					<p>Découverte de séances de sophro étonnantes avec une approche réfléchie préparée personnalisée pour le patient. Programme en continuité et toujours renouvelé, embarquement vers de nouvelles visualisations positives ! Phrasé et montages sonores remarquables. Merci bcp à Mme Laure Griffiths Sophrophologue douée, pour son implication et la qualité de son approche des séances.</p>
			</div>
		</div>
		<iframe src="https://www.google.com/maps/embed/v1/place?key=AIzaSyC-dVijRlt_ITmhBAHXIuFBfW_S43nvaYw&q=115 av. Paul Pain Levé, 86100 Châtellerault&zoom=14&language=fr"></iframe>
		<div class="horaire">
			<p>Horaires d'ouverture :</p>
			<p>Du lundi au vendredi de 8h à 20h</p>
			<p>Le samedi de 8h à 12h</p>
		</div>
		<img src="https://files.sbcdnsb.com/images/7ydseyg2G32rnqY-7KS8QQ/content/1601203049/1435650/600/132434f1-3f3f-4506-adab-bd780ba429c5_1_201_a20200917-122225-uarzbw20200927-1987954-7wisx.jpeg">
		<a href="temoignages" id="lien_temoignages">Voir tous les témoignages</a>
	</section>
	<footer>
		<p>©2018 Cabinet de Sophrologie Laure Griffiths - Sophrologue - Châtellerault</p>
	</footer>
</body>
</html>

Voici mon code CSS :

body {
	margin: auto;
}
.section_acceuil1 {
	color: #19191a;
}
header {
	color: #19191a;
	background-color: white;
	position: fixed;
	z-index: 50;
	width: 1920px;
	border: 1px solid black;

	

}
.section_acceuil2 {
	background-color: #383b38;
	color: white;
}
.nav_header li a {
	text-decoration: none;
	color: #19191a;
}

#acceuil {
	border-top: 3px solid #202124;
	background-color: #dcdce0;
}
.nav_header {
	margin-right: 300px;
}
ul {
	list-style-type: none;
  	margin: 0;
  	padding: 0;
  	overflow: hidden;
  	
}
li {
	float: left;
}
li:not(#acceuil) :hover {
	background-color: #f0f5fa;
	color: #416c9c;
	transition: 0.1s;
	text-decoration-style: : none;
	border-top: 3px solid #97bfdb;
}
li a {
	display: block;
  	color: white;
  	text-align: center;
  	padding: 50px 16px;
  	text-decoration: none;
}
li a (#acceuil):hover {
	color: #97bfdb;
}
header {
	display: flex;
	justify-content: space-between;
}
.titre_header {
	
	float: left;
	margin-left: 300px;

}

.titre_header img {
	height: 90px;
	width: 150px;
	float: left;
	margin-right: 20px;
	margin-top: 10px;
	margin-left: 20px;
	border-right: 2px #dcdce0 solid;
	padding-right: 13px;
}
.nom_numero {
	float: left;
}
#titre_nom {
	color: #97bfdb;
}
#lien_temoignages:hover {
	background-color: #2a2b2a;
	color: white;
	padding: 10px 10px 10px 10px;
	border-radius: 5px;
	transition: 0.3s;
	text-align: center;
}
#lien_temoignages{
	color: white;
	text-decoration: none;
	transition: 0.3s;
}










.section_acceuil1 {
	margin-top: 20px;
}
.slider-container {
	width: 1920px;
	height: 500px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	position: relative;
}
.white-box {
	height: 250px;
	width: 1920px;
	background-color: white;
	opacity: 30%;
	z-index: 20;
	position: absolute;
	bottom: 0px;
}
#question1 {
	color: #414347;
	position: absolute;
	z-index: 30;
	top: 140px;
	left: 200px;
}
#question2 {
	color: #414347;
	position: absolute;
	z-index: 50;
	top: 140px;
	left: 2120px;
}
#question_p1 {
	color: #414347;
	position: absolute;
	z-index: 30;
	left: 200px;
	bottom: 73px;
	font-size: 23px;
	text-align: left;
}
#question_p2 {
	color: #414347;
	position: absolute;
	z-index: 30;
	left: 2120px;
	bottom: 73px;
	font-size: 23px;
	text-align: left;

}
.image-container {
	width: 3840px;
	height: 500px;
	position: relative;
	transition: left 1s;
	-webkit-transition: left 1s;
	-moz-transition: left 1s;
	-o-transition: left 1s;	
}
.slider-image {
	float: left;
	margin: 0px;
	padding: 0px;
	
}
.button-container {
	top: -20px;
	position: relative;
}
.slider-button {
	display: inline-block;
	height: 20px;
	width: 20px;
	border-radius: 10px;
	background-color: white;
	position: relative;
	bottom: 8px;
	z-index: 30;
}
.slider-button:hover {
	transition: 0.5s;
	background-color: darkgrey;
}
#slider-image1:target ~ .image-container{
	left: 0px;

}
#slider-image2:target ~ .image-container{
	left: -1920px;

}

-
Edité par MoïseCochin 11 octobre 2020 à 18:17:13

MoïseCochin

11 octobre 2020 à 18:04:22

Kovsky

15 octobre 2020 à 11:43:59

Salutations,

J'ai essayé de reproduire ici sans grand succès

https://codepen.io/barbgegrasse/pen/YzWwaEy

juste une chose que j'ai vu en passant, tu utilises deux H1 sur la même page ce qui n'est pas une pratique recommandée.

Développeur react freelance à Toulouse

Je suis développeur react freelance spécialisé dans la création de site internet basé à Toulouse

Shonen17

16 octobre 2020 à 10:10:14

Salut,

Tu n'utilises aucun script pour ton slider ? Car je ne vois que du HTML et CSS, c'est difficile de passer d'un slide à l'autre en 100% CSS.

La preuve, ici tu utilise

<span id="slider-image1"></span>
<span id="slider-image2"></span>

[...]

<div class="button-container">
  <a href="#slider-image1" class="slider-button"></a>
  <a href="#slider-image2" class="slider-button"></a>
</div>

Donc au clic sur tes liens, naturellement tu vas être redirigé vers ton span id. C'est le principe des ancres en HTML.

Si tu veux changer d'image au clic, il faut trigger du Javascript, au moins pour faire un return false qui annule ton ancre. Ou alors ne pas mettre des a href mais des button ou un autre élément HTML qui ne va pas te faire une action au clic.

16 octobre 2020 à 10:45:35

Je me suis fais la même remarque, pour faire de ce genre de chose le mieux est de passé par une librairie JS qui se chargera en plus de la compatibilité avec les navigateurs.
Ceci dit j'ai vu passer il y a quelques mois de nouvelles propriétés CSS présenté par Google dans une video qui permet de faire des sliders simple en CSS à creuser peut-être.

Retour en haut de la page non controllé

Retour en haut de la page non controllé

Supprimer

Modérer

Signaler le message aux modérateurs