Sujet Précédent Sujet Suivant

Probleme de mise en page

Résolu/Fermé
powerguitou Messages postés 472 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 - 19 avril 2013 à 19:57
powerguitou Messages postés 472 Date d'inscription vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 - 20 avril 2013 à 20:02
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 275 Date d'inscription samedi 20 octobre 2012 Statut Membre Dernière intervention 26 juillet 2013 77
19 avril 2013 à 20:50
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 vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 29
20 avril 2013 à 14:19
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 vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 29
20 avril 2013 à 14:23
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 275 Date d'inscription samedi 20 octobre 2012 Statut Membre Dernière intervention 26 juillet 2013 77
20 avril 2013 à 15:40
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 vendredi 24 juillet 2009 Statut Membre Dernière intervention 29 janvier 2021 29
20 avril 2013 à 20:02
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

Discussions similaires

[PIX] Commencer chaque poème sur une nouvelle page
ETHAN -
Willzac -

19 réponses
[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses
Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses