28111 sujets

CSS et mise en forme, CSS3

Bonjour à tous je viens vous demander votre aide desesperement car j'ai un gros soucis
je suis sur un slider fullscreen avec background vidéo et du texte animé par dessus et voici mon problème :

je voudrais que le texte reste fixé sur la vidéo quand on bouge la taille de la page je me casse le crane depuis 24h dessus et je n'y arrive pas je vous présente le code :


<div class="slide_2"  data-mightyslider="cover: { mp4:'vid/9-Biographie.mp4'}">
						  <div class="mSCaption paper_i txt9 centralizeY" style="font-family: didot;" data-msanimation="{ delay: 1000, speed: 2000, style: { textShadow: '0px 0px 0px rgba(0, 0, 0, 1)' } }, ">Naissance de Christian Dior</div>


.txt9{         
				top: 18%;
                letter-spacing: 0.3em;
				-webkit-transform: translateY(-50px);
				transform: translateY(-50px);
                left: 10%;
				right: 80px;
				color: rgba(255, 255, 255, 0);
				text-shadow: 0 0 20px rgba(255, 255, 255, 0);
				cursor: default;
			}
#example .frame .slide_2 .mSCaption,
			#example .frame .slide_3 .mSCaption,
			#example .frame .slide_4 .mSCaption {
				right: 80px;
				color: rgba(255, 255, 255, 0);
				text-shadow: 0 0 20px rgba(255, 255, 255, 0);
				cursor: default;
			}
.paper_i {
				font-size: 34px;
				font-weight: 200;
				line-height: 40px;
			}



et du coup quand je change la taille de la page le texte ce balade un peu je remercie d'avance celui qui me donne la solution je suis vraiment dans la galère Smiley sweatdrop
Modifié par simax (04 Aug 2018 - 17:33)
Bonjour. Ce serait plus facile de conseiller avec une page en ligne pour voir le rendu global. Mais déjà avec les indications données : pour le positionnement du texte il y a des valeurs de pourcentage mélangées avec des valeurs fixes, c'est un problème. Il vaudrait mieux jouer avec les margin/padding. Le texte doit-il être centré ? A priori non, mais si cette option est retenue voir aussi pour des valeurs en auto sur le positionnement horizontal.

Bien sûr on pourrait aussi sortir la boite à outil flexbox, mais il faudrait connaître le rendu attendu afin de proposer une solution appropriée.