Probleme de mise en page

Résolu
powerguitou Messages postés 472 Date d'inscription   Statut Membre Dernière intervention   -  
powerguitou Messages postés 472 Date d'inscription   Statut Membre Dernière intervention   -
bonsoir a tous,

J'essaie tant bien que mal à mettre en place une mise en page un peu particulière sur mon site mais la je bloque carrément.
En gros j'ai une image d'une salle de cinéma, la ou il y a l'écran je met une iframe youtube,le probleme c'est que l'image de la salle de cinéma est en width 100% car je souhaite qu'elle sois à 100% de la résolution des gens.
Mais lorsque je change ma résolution ou que j'enlève le plein écran la vidéo est décalé et plus dans les bonnes proportion du coup.
J'avoue ne pas trop savoir comment faire sur le coup la.
merci de votre aide 
<div id="concertfond">
	<img src="/images/concert/cinema.png" style="width:100%"/>
		</div>
<div id="concertlogo">
	<center>
		<img src="/images/concert/logo.png" />
			</div>
<div id="concertvideo">	
<iframe width="575" height="260" src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
		</div>
	<img src="/images/concert/on.png" />
	<img src="/images/concert/off.png"/>
	</center>

Et le css 
#concertlogo{
position:fixed;
z-index: 10;
	width:100%;
	height:800px;
	border:5px solid #006580;
	}
	
	#concertfond{
position:fixed;
z-index: 9;
	width:100%;
	height:800px;
	border: 5px solid #077700;
	}
	
#concertvideo{
display:block;
margin-top:330px;
margin-left:520px;
z-index: 10;
	width:100%;
	height:382px;
	border: 0px solid #004870;
	position:fixed;
	}
A voir également:

4 réponses

Réponse 1 / 4
roptat Messages postés 276 Date d'inscription   Statut Membre Dernière intervention   77
 
Alors déjà, tes balises se ferment bizarrement. Tu ferme le div avant le center, alors que le center est dans le div.
Tu mets un margin fixe sur #concertvideo. Il faudrait que la vidéo se centre sur l'écran, pas qu'elle reste à tant de pixel du bord. tu devrais laisser tomber les marges sur #concertvideo et en mettre une en auto sur iframe (après l'avoir mis en display: block;).
0
Réponse 2 / 4
powerguitou Messages postés 472 Date d'inscription   Statut Membre Dernière intervention   29
 
Hello merci de ta réponse, je viens de tester tout ce que tu as dit mais pour le moment le probleme reste le même.
Je suis en train de tester divers truc sans succès.

Si quelqu'un a d'autre idée je suis preneur
0
powerguitou Messages postés 472 Date d'inscription   Statut Membre Dernière intervention   29
 
Pour aider a comprendre j'ai une image dans ce style
https://www.nicetoile.com/W/cms_sites/SITE_7624/images7624/MASSENA01.jpg

Donc l'image est toujours en width 100% pour être toujours a la résolution du navigateur, et l'iframe dois ce situé toujours dans le cadre ou il y a l'écran.
0
Réponse 3 / 4
roptat Messages postés 276 Date d'inscription   Statut Membre Dernière intervention   77
 
en gros, vire la balise center (c'est moche une balise de présentation), vire les margin dans #concertvideo et ajoute : 
iframe {
  display: block;
  margin: auto;
  margin-top: 250px; /*valeur à modifier suivant l'image*/
  width: 10%; /*le cadre de la video est aussi rétrécie pour tenir dans l'ecran*/
}

enfin, vire width="575" dans la balise iframe.

Au fait, pourquoi ne pas simplement utiliser la balise video plutôt qu'un iframe vers youtube ?
0
Réponse 4 / 4
powerguitou Messages postés 472 Date d'inscription   Statut Membre Dernière intervention   29
 
Voila j'ai pas mal modifier le code et adapter tout ça 
<div id="concertfond">
	<img src="/images/concert/cinema.png" style="width:100%"/>
		</div>
		
<div id="concertlogo">
	<center>
		<img src="/images/concert/logo.png" style="width:60%"/>
			</center>		
				</div>
			
<div id="concertvideo">
		<iframe height="260" src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
			
				</div>

<div id="onoff">	
	<center>			
		<img src="/images/concert/on.png" />
		<img src="/images/concert/off.png"/>
			</center>	
				</div>



Et pour le css 

#concertlogo{
position:fixed;
z-index: 10;
	width:100%;
	}
	
#concertfond{
position:fixed;
z-index: 9;
	width:100%;
	}
	
#concertvideo{
position: fixed;
	left:33%;
	right:31%;
 display: block;
z-index: 20;

	}
	
iframe {
  display: block;
  margin: auto;
  margin-top: 56%; /*valeur à modifier suivant l'image*/
  margin-bottom: 0%; /*valeur à modifier suivant l'image*/
  width: 100%; /*le cadre de la video est aussi rétrécie pour tenir dans l'ecran*/
}
#onoff{
position:fixed;
z-index: 20;
top:90%;
width:100%;
	}



Donc dans l'état actuelle l'iframe reste bien au centre et s'adapte en fonction de la largeur idem pour le logo et le fond cinéma donc c'est parfait

Le seul soucis encore c'est que l'iframe ne s'adapte pas dans la hauteur, donc je vais cherché un peu mais en tout cas la c'est déjà beaucoup beaucoup mieux

Merci de ton aide
0