28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
Je n'arrive pas à mettre mon deuxième texte sur le deuxième slide, les deux texte reste sur le premier slide?
Merci pour votre aide !

Lien: http://philippe-delasalle.fr/WebAgency/


<section>
				<div id="slider">
          
					<div class="slide1_img">
						<div class="texte1">
							<h2>webagency:l'agence de tous<br> les projets !</h2>
							<p>
								Vous avez un projet? la WebAgency vous aide à le réaliser
							</p>
						</div>
						<img src="images/slider/bg1.jpg" alt="" />
					</div>
          
					<div class="slide2_img">
						<div class="texte2">
							<h2>webagency:une agence<br> des projets !</h2>
							<p>
								Ceci est le deuxième texte !
							</p>
						</div>
						<img src="images/slider/bg2.jpg" alt="" />
					</div>
          
				</div>
			</section>




/*Mise en place du diaporama*/

@keyframes slide 
{
	0%
	{
		left: 0%;
	}

	45%
	{
		left: 0%;
	}

	50%
	{
		left: -100%;
	}

	/*Permet de régler la seconde image */
	95%
	{
		left: -100%;
	}

	100%
	{
		left: 0%;
	}
}

#slider
{ 
       overflow: hidden;
       position: relative;
       width: 200%;
       margin: 0;
       left: 0;
       animation: 10s slide infinite; 
}

#slider img 
{
	width: 50%; 
	float: left;
}


#slide1_img 
{
       position: relative;
}

.texte1 
{
	position: absolute;
	z-index: 2;
	margin-top: 30px;
	margin-left: 30px;
}

#slide2_img 
{
	position: relative;
}

.texte2 
{
	position: absolute;
	z-index: 2;
	margin-top: 30px;
	color:#ffffff;
}
Hello Wesheida

en ajoutant la propriété left:50% à .texte2, tout rentre dans l'ordre semble-t-il :

.texte2 
{
	position: absolute;
	left:50%;
	z-index: 2;
	margin-top: 30px;
	color:#ffffff;
}


on peut même lui ajouter margin-left: 30px; par souci de cohérence avec la slide 1
Modifié par farang (20 Oct 2016 - 16:48)
Merci farang,

Tu viens de me sortir de deux jours de recherche, et moi qui pensait avoir un code complètement nul !

Je te remercie beaucoup.

A bientôt j'espère Smiley cligne
Wesheida a écrit :
Merci farang,

Tu viens de me sortir de deux jours de recherche, et moi qui pensait avoir un code complètement nul !

Je te remercie beaucoup.

A bientôt j'espère Smiley cligne