Bonjour,

Je suit débutant en html/css/json et je dois modifier une page réalisé par quelqu'un d'autre présentant 2 rangées de 5 vidéos (pour une borne).

Les vidéos sont pour l'instant centrés dans ma page. Je souhaite les décaler vers la droite pour laisser apparaitre un dessin de mon image de fond.

Quelqu'un pourrait-il m'orienter sur les modifs à apporter ?

J'ai un autre problème, je n'arrive pas à afficher ma page sur les différents navigateurs, ça fonctionne sur la borne, mais sur mon pc, il n'y a que l'image de fond qui s'ouvre. C'est pas pratique... quelqu'un à une idée ?

Merci !

-
Edité par MathieuBAUX 6 septembre 2023 à 17:51:14

Bonsoir,

>> Quelqu'un pourrait-il m'orienter sur les modifs à apporter ?

Sans connaitre votre code, ni le framework/template utilisé, je pense que cela ne sera pas possible. Peut être un margin-left ?

Postez votre code en utilisant le bouton code </> de la barre d'outil.

@charset "UTF-8";
@font-face {
	font-family: "Ma Super Fonte";
	src: url('HVD_Poster.ttf');
}


html {
	
}
body {

    background-color: #fff;
	font-family: "PT Sans";
	color : #ae0033; 
	background: url("./images/Ecran-borne-INA-FCC-2023-1920x1080_mod.jpg") no-repeat center  fixed; 
	background-size: 100%;
	font-size: 14px;
    line-height: 1.42857143;
   
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.container{
	font-size: 20px;
	letter-spacing: 0.2em; 
	padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.text-center {
    text-align: center;
}
.header {
	position: relative;
}
.HeaderRgt {
}
.HeaderLt {
}

footer {
	display: none;
	position: absolute; 
	bottom: 5px; 
	left: 0;
	background-color: rgb(237, 234, 236,0.30);
	width: 100%;
	z-index: 3;
}

section {
	margin: 0px auto; 
	width: 1450px;
}
#content{
	font-weight: bold;
	position: relative; 
	height: auto;
	top: 270px; 
	width: auto; 
}
#content a  {
	width: 270px;
	height: 270px;
	display: inline-block;
	position:relative;
	text-decoration: none;
	padding: 0px;
	background-color: rgba(255, 255, 255, 1);
    margin: 10px;
	border:1px solid rgba(0, 0, 0, 0.26);
	
    -webkit-border-radius: 10px / 10px; 
    -moz-border-radius: 10px  / 10px; 
   
}
#content a img {
	width: 268px; 
	height: 170px;
	border:1px solid rgba(0, 0, 0, 0.26);
    -webkit-border-radius: 10px 10px 0 0; 
    -moz-border-radius: 10px 10px 0 0; 
}
#content a span {
	position: absolute;
}
#content a:hover span {
	display: block;
}
			 		
#content span.title{
	position: absolute;	
	top:180px;
	text-align: center;
	color : #ae0033;
	font-size: 1.2em;
	z-index: 2;
}
span { display:block;
       margin:0 auto;
       width:270px;
}
#content span.date{
/*	text-align: center;*/
	position: absolute;
	top: 245px;
	left: 9px; 
	color : #ae0033;
	font-size: 0.9em;
	z-index: 2;
}
#content span.duration{
	
/*	text-align: center;*/
	top: 245px;
	position: absolute;
	left: 192px;
	color : #ae0033;
	font-size: 0.9em;
	z-index: 2;
	
}
			 
#content span.summary {
	top: 225px;
	position: absolute;
	text-align: center;
	font-size: 0.95em;
	color : #ae0033;
	z-index: 2;  
	
}
#content span.bg{
	top : 2px;
	left: 3px; 
	width : 250px; 
	height: 193px;
	z-index: 1; 
	background: no-repeat center url(images/play_icone4.png);
	background-size: 25%;
	opacity:0.70;
}
.bg:hover {
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2); 
	opacity:1;
}
#surcouche{
	display: none;
	position: fixed;
	top: 0; 
	right:0; 
	bottom:0; 
	left: 0;
	background-color: rgba(0, 0, 0, 0.80);
	z-index : 1000;
	
}
#case{
	display : none;
}
#case:checked + #surcouche{
	display: block;
}
#msgbox{ 
	z-index: 1;
	height: 1080px;
	width: 1920px; 
	position: absolute; 
/*	margin:0 auto;*/
/*	top:15%; 
	left: 24%; */
/*	border-radius: 10px 10px 0 0;*/
	background-color: #000000;
}
#msgbox .clicCacher {
/*
	position: absolute; 
	background-color: #ffffff;
	border-radius: 10px 10px 10px 10px;
	padding : 10px;
	top :25px; 
*/
background-color: #ffffff;
	border-radius: 10px 10px 10px 10px;
	position: absolute;
	right: 50px; 
	bottom : 30px;
	z-index: 125;
	padding : 10px;
	
	
}
#tiltediv { 
	display: none;
	text-align: left;
	font-weight: bold; 
	font-size: 0.9em;
	margin:25px;
	z-index: 2;
}
#myVideoPlayer {
	display: block; 
	/*margin:20px; */
	margin-left: auto;
	margin-right: auto ;
	width:1920px ;
	height:auto;
}
h5#New_duration {
    position: relative;
    top: -80px;
    margin-block-start: 0.1em;
    margin-block-end: 0.1em;
    font-size: 25px;
    text-align: right;	
}
.filterDiv {
	float: left;
}
.show {
	display: block;
}

-
Edité par MathieuBAUX 8 septembre 2023 à 10:21:02

Bonjour

Apparemment ce serait les marges appliquées à section que tu devrais modifié.  En l'état,  section est centré via margin:0 auto;. Essai : margin: 0 3em 0 auto; par exemple. Si cela est bien le conteneur de tes vidéos.

Cdt

Merci Beaucoup, ça a parfaitement décaler les vidéos. Mais ça a aussi créé une barre de défilement en bas que j'aimerai bien supprimer.

-
Edité par MathieuBAUX 8 septembre 2023 à 14:25:27

Sans ton HTML, il va être difficile de déboguer si par exemple :margin:0 0 0 auto; ne fonctionne pas un peu mieux.

Il est par exemple possible que tu ais plusieurs balises section dans ton HTML.

Cdt

Bonjour, Vous pouvez partager votre code de différentes façon, via un codepen https://codepen.io/ , un jsfiddle https://jsfiddle.net/ , jsbin https://jsbin.com/?html,output

Ou partager un projet complet si les images sont importantes pour votre visuel : Ex https://wetransfer.com/ (cliquer sur les trois petit point puis "obtenir un lien" et le poster ici) Ou tout autre serveur d'hébergement de fichier de votre choix.