FORUM D’ENTRAIDE INFORMATIQUE (FEI)
Site d’assistance et de sécurité informatique

Entraide concernant le webmastering (administration de sites).
Règles du forum : Entraide concernant le webmastering (administration de sites). Pour se faire aider à choisir un hébergeur, le service le mieux adapté selon ses objectifs, se faire aider à la création d'un site (problèmes de programmation, d'organisation, résolution de bugs...).
Merci de lire et de respecter la charte générale du forum.
  • Avatar du membre
Avatar du membre
par laurent38387
#183920
Bonjour,

j'ai passé pas mal d'heures à rendre un site responsive mais il me reste encore un problème à régler

J'ai un slide avec des photos taille 400px et le problème est que sur les téléphones, la résolution est souvent 320/ 360px de large.
Du coup le slide déborde sur le coté.

vous pouvez visualiser mon site ici : http://laetitiacreations.free.fr/

Code Html
Code : Tout sélectionner
<section id="slideshow">

	<div class="container">
		<div class="c_slider"></div>
		<div class="slider">
			<figure>
				<img src="slide/1.jpg" alt="" width="400" height="400" />
				<figcaption>Laetitia Cr&eacute;ations</figcaption>
			
			</figure><!--
			--><figure>
				<img src="slide/2.jpg" alt="" width="400" height="400" />
				<figcaption>Laetitia Cr&eacute;ations</figcaption>
			</figure><!--
			--><figure>
				<img src="slide/3.jpg" alt="" width="400" height="400" />
				<figcaption>Diffuseurs</figcaption>

			</figure><!--
			--><figure>
				<img src="slide/4.jpg" alt="" width="400" height="400" />
				<figcaption>Laetitia Cr&eacute;ations</figcaption>
			</figure>
			<figure>
				<img src="slide/5.jpg" alt="" width="400" height="400" />
				<!--<figcaption>Laetitia Cr&eacute;ations</figcaption>-->
			</figure>
			<figure>
				<img src="slide/6.jpg" alt="" width="400" height="400" />
				<figcaption>Laetitia Cr&eacute;ations</figcaption>
			</figure>
		</div>
	</div>
		
	<span id="timeline"></span>
</section>
CSS
Code : Tout sélectionner
#slideshow {
	position: relative;
	width: 420px;
	height: 420px;
	padding: 10px;
	margin: 0 auto 2em;
	border: 1px solid #ddd;
	background: #FFF;
	/* CSS3 effects */
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	border-radius: 2px 2px 2px 2px;
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
 
/* avanced box-shadow
 * tutorial @
 * https://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow 
*/
#slideshow:before,
#slideshow:after {
	position: absolute;
	bottom:16px;
	z-index: -10;
	width: 50%;
	height: 20px;
	content: " ";
	background: rgba(0,0,0,0.1);
	border-radius: 50%;
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
}
#slideshow:before {
	left:0;
	transform: rotate(-4deg);
}
#slideshow:after {
	right:0;
	transform: rotate(4deg);
}
/* gestion des dimensions et débordement du conteneur */
#slideshow .container {
	position:relative;
	width: 400px;
	height: 400px;
	overflow: hidden;
}
	
/* on prévoit un petit espace gris pour la timeline */
#slideshow .container:after {
	position:absolute;
	bottom: 0; left:0;
	content: " ";
	width: 100%;
	height: 1px;
	background: #999;
}
/* 
   le conteneur des slides
   en largeur il fait 100% x le nombre de slides
*/
#slideshow .slider {
	position: absolute;
	left:0; top:0;
	width: 700%;
	height: 400px;
}

/* annulation des marges sur figure */
#slideshow figure {
	position:relative;
	display:inline-block;
	padding:0; margin:0;
}
/* petit effet de vignette sur les images */
#slideshow figure:after {
	position: absolute;
	display:block;
	content: " ";
	top:0; left:0;
	width: 100%; height: 100%;
	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}
/* styles de nos légendes */
#slideshow figcaption {
	position:absolute;
	left:0; right:0; bottom: 5px;
	padding: 20px;
	margin:0;
	border-top: 1px solid rgb(225,225,225);
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Georgia, Times, serif;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #555;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}
/* fonction d'animation, n'oubliez pas de prefixer ! */
@keyframes slider {
	0%, 9%, 100%	{ left: 0 }
	10%, 25%		{ left: -100% }
	30%, 35%		{ left: -200% }
	40%, 55%		{ left: -300% }
	60%, 75%		{ left: -400% }
	80%, 95%		{ left: -500% }
}
/* complétez le sélecteur : */
#slideshow .slider {
	/* ... avec la propriété animation */
	animation: slider 25s infinite;
}
#timeline {
	position: absolute;
	background: #999;
	bottom: 5px;
	left: 5px;
	height: 1px;
	background: rgb(214,98,13);
	background: rgba(214,98,13,.8);
	width: 0;
	/* fonction d'animation */
	animation: timeliner 32s infinite;
}
@keyframes timeliner {
	0%, 25%, 50%, 75%, 100%	{ width: 0;		}
	20%, 45%, 70%, 90%		{ width: 400px;	}
}
@keyframes figcaptionner {
	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
}
}
/* ajouter à l'élément : */
#slideshow figcaption {
	/* ... la propriété animation */
	animation: figcaptionner 25s infinite;
}

#sContent li {
	display: inline;
}

#sContent {

	top: 0;
	left: 0;
	width: 200px;
	margin: 0;            
	padding: 0;
	
	/*CSS3 keyframes animation*/
	animation-name: AutoSlide;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
Je pensais créer une variable en disant dans mon CSS @media (max-width: 450px) => taille slide fera 250px
=> les photos sont sélectionnées dans le code html donc elles seront encore avec la taille 400px de base et la taille du slide est définie dans le code html

Sinon créer une variable avec un if dans mon code html qui détermine une taille suivant la résolution d'écran
=> dans le css, le slide sera toujours sur une base de 400px. Les photos ne se décaleront pas complètement (seulement de 250px)

Vous avez une idée? :reflexion:

So sánh giá online ở đâu l&ag[…]

sdasd

asdas

Elevate your online presence with our expert wiki […]

Message d'erreur

Bonjour, Je viens de reconditionner un PC portable[…]