Partage

Mes boutons refusent de se placer correctement

Sujet résolu

26 avril 2017 à 12:18:23

Bonjour à toutes et tous ,

Je suis un petit nouveau sur le site et j'ai besoin de votre aide.

Je vais essayer d'être le plus complet possible dans mes explications ; j'ai une page "media" dans laquelle je voudrais centrer les différents éléments présents ( la vidéo , le canvas ET les boutons ) . Tout ce met bien en place quand je travail sur la version local mais une fois le site mis en ligne sur mon hébergeur les boutons refusent de ce mettre au milieu .... sans que je comprenne pourquoi . J'ai testé beaucoup de solutions mais rien ne fonctionne.

Petites infos complémentaires: Je code avec Eclipse , mon hébergeur est https://fr.000webhost.com/ et j'héberge mes fichiers avec FileZilla .

Je vous met l'entièreté du code pour que vous puissiez avoir une vue d’ensemble des fois que cela vous serve.

Voici le code HTML de ma page

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Média</title>
<link rel="stylesheet" href="styles/main_style.css" />
</head>
<body>
	<div id="header_index" onclick="location.href='index.html';" style="cursor:pointer;">>
		<header>
			
		</header>
	</div>
	<div id="menu_nav">


		<div id="menu2">
			<nav>
				<ul>
					<li><a href="index.html">Présentation</a></li>
					<li><a href="news.html">Actualité</a></li>
					<li><a href="medias.html">Médias</a></li>
					<li><a href="team.html">Equipe</a></li>
					<li><a href="contact.html">Contact</a></li>

					<li><div id="recherche">
							<form method="GET" action="http://google.com/search">
								<input type="search" name="q" placeholder="Rechercher" /> <input
									type="submit" value="Go" />

							</form>
						</div></li>
				</ul>

			</nav>
		</div>

	</div>

	<div id="colonne_menu_droite">
		<aside>
			<h1>Bienvenue sur le site !</h1>

			<p>Huic Arabia est conserta, ex alio latere Nabataeis contigua;
				opima varietate conmerciorum castrisque oppleta validis et
				castellis, quae ad repellendos gentium vicinarum excursus
				sollicitudo pervigil veterum per oportunos saltus erexit et cautos.
				haec quoque civitates</p>

			<p>Huic Arabia est conserta, ex alio latere Nabataeis contigua;
				opima varietate conmerciorum castrisque oppleta validis et
				castellis, quae ad repellendos</p>

		</aside>
	</div>

	<div id="colonne_menu_gauche">
		<div id="menu_inscription">
			<h1>Inscription :</h1>
			<form action="cgi/register.cgi">
				<p>

					<label for="name">Nom :</label> <input id="name" name="name"
						required />
				</p>

				<p>
					<label for="pwd1">Mot de passe :</label> <input type="password"
						id="pwd1" name="password" oninput="checkPasswords()">
				</p>

				<p>
					<label for="pwd2">Confirmez mot de passe :</label> <input
						type="password" id="pwd2" oninput="checkPasswords()">
				</p>
				<p>
					<input type="submit" value="Envoyer"> <input type="reset"
						value="Effacer">
				</p>
			</form>
		</div>
	</div>

	<script type="text/javascript">
		function checkPassword() {

			//accès aux éléments "password" 1 et 2
			var password1 = document.getElementById('pwd1');
			var password2 = document.getElementById('pwd2');
			if (password1.value != password2.value) {
				pass2
						.setCustomValidity('Les mots de passe ne sont pas identiques');
			} else {
				password2.setCustomValidity(''); // élément valide

			}

		}
	</script>


	<div id="main_contenu">
	
		<!--  <audio controls>
		<source src="son/waf.mp3" />
		<source src="son/waf2.ogg"/>
		</audio>
		-->
		
     
		 
		<video id="myvideo" controls  poster="images/apercusvideo.jpg" width="500" height="400" onloadedmetadata="initCanvas()">
		<source src="video/plage.webm" type="video/webm"/>
		<source src="video/plage.mp4" type="video/mp4"/>
		</video>

 		<canvas id="mycanvas" width="600" height="500">Votre naviguateur ne supporte pas l'élément canvas></canvas>
        <script type="text/javascript" src="scriptsite.js"></script>
        
        
        <p ><input id="myvideoboutons" type="button" value="Aperçu" onclick="screenshot()"/>
           <input type="button" value="Enregistrer" onclick="save()"/></p>
         <div id="mypicture"></div>
        
       


	</div>



	<div id="footer_index">

		<footer>
			Akyleo 2011, certains droits reserves
			<div>
				<a href="legals.html">Mentions légales</a> - <a href="map.html">Plan
					du site</a>
			</div>

		</footer>
	</div>
</body>
</html>

Et voici mon code CSS :

@charset "UTF-8";
html,body{
	height:100%;
	margin:0;
	padding:0;	
	
}

body{
	min-height:100%;
	
	
}
#header_index {
	border: solid;	
	border-radius: 5px;
	height:600px;
	background-image:url("../images/bg_index2.jpg");
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center;
}




#menu_nav {
	border: solid;
	background: #819FF7;
	color: blue;
	font-size: 1em;
	max-height: 40px;
	text-align: center;
	border-radius: 5px;
}

#recherche{
	float:right;
	border-radius: 5px;
	border: solid;
	margin-top:-8px;	
}

#menu2 a {
	color: red;
	text-decoration: none;
}

#menu2 a:hover {
	color: magenta;
	background: blue;
}

/* "menu2_ul" règle la position du menu horizontalement */

#menu2 ul {
	margin-left:170px;
}

/* le padding règle l'espacement entre les composants du menu de navigation */

#menu2 li {
	display: inline;
	padding: 50px;
}

#main_contenu {
	margin-right: 156px;
	min-height: 100%;
	border: solid;
	color: blue;
	border-radius: 5px;
	background-image:url("../images/fondMain2.jpg");
	background-repeat: no-repeat;
	background-size:100%;
	background-position: center;
	
	
}

#myvideo{
	margin-left:auto;
	margin-right:auto;
	display:block;

}


#myvideoboutons{
    
	margin-left:705px;
	
}



#mycanvas{
	border:2px solid;
	display:block;
	margin:auto;
	margin-top:10px;
	
}



#colonne_menu_droite {
	float: right;
	color: blue;
	min-height: 100%;
	width: 150px;
	border: solid;
	background: #EFCA89;
	border-radius: 5px;
	
}

#colonne_menu_gauche {
	float: left;
	color: blue;
	min-height: 100%;
	width: 200px;
	border: solid;
	background: #EFCA89 ;
	border-radius: 5px;
	margin-left:3px;
}

#menu_inscription{	
	margin-left:5px;

}

aside {
	padding: 10px;
}

article {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size: 0.9em;
}

#header_article {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	color: green;
	background: url("../images/fond_header.jpg");
	background-position: 300% 65%;
	background: url("../images/fond_header.jpg");
}

/* Span" change la couleur d'un texte pour le mettre en ÃÂÃÂ©vidence */

span.color {
	color: red;
}

input:focus:valid{
	outline: 2px lime solid;	
}

input:focus:invalid{
	outline: 2px red solid;	
}

input:required{
	outline: 2px blue solid;	
}

#footer_index {
	clear: both;
	padding-top: 2em;
	background: dimgray;
	color: white;
}

#footer_article{
	background:#819FF7;
	border-radius: 5px;
	border: solid;
	color: blue;
	
}

footer a {
	text-decoration: none;
	color: gainsboro;
}

footer a:hover {
	color: white;
}

Voila je vous remercie d'avance de toute l'aide que vous pourrez m'apporter.

Un petit programmeur qui désespère ;)

-
Edité par Baka356 27 avril 2017 à 19:31:29

Syrosh

27 avril 2017 à 12:10:50

As tu essayé avec un autre hebergeur ?

Tu as biz.nf qui est gratuit

Vérifie que le chemin d’accès au css est bon aussi..

Comment vous représentez-vous ça : l'endroit ou l'espace se termine ? | Iss Live Feed

MrChampy

27 avril 2017 à 12:33:15

Salut,

Aucun rapport avec l'hébergeur selon moi.

Tu as une URL de ton site ?

Baka356

27 avril 2017 à 13:57:48

Merci pour vos réponses rapides !

Alors je n'ai pas essayé avec un autre hebergeur , cela dis je me suis aussi posé la question du css et quand je change une autre donnée c'est bien pris en compte donc je ne pense pas que ça vienne de là mais pourquoi pas tenter le coup ...

Oui voici l'url : https://lebergerallemand.000webhostapp.com/medias.html

-
Edité par Baka356 27 avril 2017 à 13:58:24

wimbo

27 avril 2017 à 14:13:34

bonjour,

il y a bien une solution (parmis d'autre) ,j'ai un peu, modifier ton code en donnant un id au <p> qui englobe les boutons,puis en le changeant en div, laisser p n'est pas correct

<div id="btn_p">
   <input value="Aperçu" onclick="screenshot()" type="button">
   <input value="Enregistrer" onclick="save()" type="button">
</div>

puis dans le css

#btn_p{ text-align: center; }

-
Edité par wimbo 27 avril 2017 à 14:21:08

Baka356

27 avril 2017 à 19:30:53

Bonjour wimbo,

Pour commencer je te remercie du temps que tu consacres à m'aider !

J'ai tester ta solution et les choses évoluent !! Sur la version locale, le résultat est bon mais sur la version web ce n'est pas encore ça , en fait ils se placent trop loin...

Voici un screen pour t'aider à visualiser :

MrChampy

28 avril 2017 à 9:33:43

Re,

Pourquoi ne pas faire :

.myvideoboutons {
  width:auto;
  display:flex;
  justify-content:center;
  margin-left:0;
  margin-top:10px;
}

Et sur ton second input :

margin-left:25px;

Afin d'obtenir ça :

Baka356

28 avril 2017 à 11:16:10

J'avais mal retranscrit le code de wimbo , j'obtiens malgré tout le résulat suivant :

Mr champy,

Merci également de ton aide ,

Avec ta proposition que j'applique donc de cette façon :

	<div id="main_contenu">
	
		<!--  <audio controls>
		<source src="son/waf.mp3" />
		<source src="son/waf2.ogg"/>
		</audio>
		-->
		
     
		 
		<video id="myvideo" controls  poster="images/apercusvideo.jpg" width="500" height="400" onloadedmetadata="initCanvas()">
		<source src="video/plage.webm" type="video/webm"/>
		<source src="video/plage.mp4" type="video/mp4"/>
		</video>

 		<canvas id="mycanvas" width="600" height="500">Votre naviguateur ne supporte pas l'élément canvas></canvas>
        <script type="text/javascript" src="scriptsite.js"></script>
        
        <div id="myvideoboutons">
        <input id="myvideoboutons" type="button" value="Aperçu" onclick="screenshot()"/></div>
        
        <div id="myvideoboutons2">
        <input type="button" value="Enregistrer" onclick="save()"/></div>
         <div id="mypicture"></div>
        
       


	</div>

j'obtiens le résultat suivant sur le local :

C'est un vrai casse tête . Ce que je ne comprend pas c'est cette différence entre le résultat obtenu en local et le celui obtenu en version web ...si quelqu'un peux éclairer ma lanterne ? :)

-
Edité par Baka356 28 avril 2017 à 11:19:14

wimbo

28 avril 2017 à 11:43:32

C'est bizarre

J'ai fait une modif de code en ouvrant lediteur de style avec FF sur le lien du site..

Et chez moi ça a fonctionnais. .

-
Edité par wimbo 28 avril 2017 à 11:44:07

MrChampy

28 avril 2017 à 11:54:13

Tu as du oublier de virer le margin-left:750px; de ton bouton (et peut être de ta div aussi)

Baka356

28 avril 2017 à 14:18:13

Wimbo,

J'ai retenté ton code en vérifiant tout 3 fois mais rien n'y fait , je ne m'explique pas cette différence .. une notion doit m'échapper mais laquelle ..

MrChampy,

je pense avoir bien appliquer le code , voici le code complet au cas ou j'aurais négligé quelque chose :

html :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Média</title>
<link rel="stylesheet" href="styles/main_style.css" />
</head>
<body>
	<div id="header_index" onclick="location.href='index.html';" style="cursor:pointer;">>
		<header>
			
		</header>
	</div>
	<div id="menu_nav">


		<div id="menu2">
			<nav>
				<ul>
					<li><a href="index.html">Présentation</a></li>
					<li><a href="news.html">Actualité</a></li>
					<li><a href="medias.html">Médias</a></li>
					<li><a href="team.html">Equipe</a></li>
					<li><a href="contact.html">Contact</a></li>

					<li><div id="recherche">
							<form method="GET" action="http://google.com/search">
								<input type="search" name="q" placeholder="Rechercher" /> <input
									type="submit" value="Go" />

							</form>
						</div></li>
				</ul>

			</nav>
		</div>

	</div>

	<div id="colonne_menu_droite">
		<aside>
			<h1>Bienvenue sur le site !</h1>

			<p>Huic Arabia est conserta, ex alio latere Nabataeis contigua;
				opima varietate conmerciorum castrisque oppleta validis et
				castellis, quae ad repellendos gentium vicinarum excursus
				sollicitudo pervigil veterum per oportunos saltus erexit et cautos.
				haec quoque civitates</p>

			<p>Huic Arabia est conserta, ex alio latere Nabataeis contigua;
				opima varietate conmerciorum castrisque oppleta validis et
				castellis, quae ad repellendos</p>

		</aside>
	</div>

	<div id="colonne_menu_gauche">
		<div id="menu_inscription">
			<h1>Inscription :</h1>
			<form action="cgi/register.cgi">
				<p>

					<label for="name">Nom :</label> <input id="name" name="name"
						required />
				</p>

				<p>
					<label for="pwd1">Mot de passe :</label> <input type="password"
						id="pwd1" name="password" oninput="checkPasswords()">
				</p>

				<p>
					<label for="pwd2">Confirmez mot de passe :</label> <input
						type="password" id="pwd2" oninput="checkPasswords()">
				</p>
				<p>
					<input type="submit" value="Envoyer"> <input type="reset"
						value="Effacer">
				</p>
			</form>
		</div>
	</div>

	<script type="text/javascript">
		function checkPassword() {

			//accès aux éléments "password" 1 et 2
			var password1 = document.getElementById('pwd1');
			var password2 = document.getElementById('pwd2');
			if (password1.value != password2.value) {
				pass2
						.setCustomValidity('Les mots de passe ne sont pas identiques');
			} else {
				password2.setCustomValidity(''); // élément valide

			}

		}
	</script>


	<div id="main_contenu">
	
		<!--  <audio controls>
		<source src="son/waf.mp3" />
		<source src="son/waf2.ogg"/>
		</audio>
		-->
		
     
		 
		<video id="myvideo" controls  poster="images/apercusvideo.jpg" width="500" height="400" onloadedmetadata="initCanvas()">
		<source src="video/plage.webm" type="video/webm"/>
		<source src="video/plage.mp4" type="video/mp4"/>
		</video>

 		<canvas id="mycanvas" width="600" height="500">Votre naviguateur ne supporte pas l'élément canvas></canvas>
        <script type="text/javascript" src="scriptsite.js"></script>
        
        <div id="myvideoboutons">
        <input type="button" value="Aperçu" onclick="screenshot()"/></div>
        
        
        <div id="myvideoboutons2">
        <input type="button" value="Enregistrer" onclick="save()"/></div>
         <div id="mypicture"></div>
        
       


	</div>



	<div id="footer_index">

		<footer>
			Akyleo 2011, certains droits reserves
			<div>
				<a href="legals.html">Mentions légales</a> - <a href="map.html">Plan
					du site</a>
			</div>

		</footer>
	</div>
</body>
</html>

et le code css:

@charset "UTF-8";
html,body{
	height:100%;
	margin:0;
	padding:0;	
	
}

body{
	min-height:100%;
	
	
}
#header_index {
	border: solid;	
	border-radius: 5px;
	height:600px;
	background-image:url("../images/bg_index2.jpg");
	background-repeat: no-repeat;
	background-size:cover;
	background-position: center;
}




#menu_nav {
	border: solid;
	background: #819FF7;
	color: blue;
	font-size: 1em;
	max-height: 40px;
	text-align: center;
	border-radius: 5px;
}

#recherche{
	float:right;
	border-radius: 5px;
	border: solid;
	margin-top:-8px;	
}

#menu2 a {
	color: red;
	text-decoration: none;
}

#menu2 a:hover {
	color: magenta;
	background: blue;
}

/* "menu2_ul" règle la position du menu horizontalement */

#menu2 ul {
	margin-left:170px;
}

/* le padding règle l'espacement entre les composants du menu de navigation */

#menu2 li {
	display: inline;
	padding: 50px;
}

#main_contenu {
	margin-right: 156px;
	min-height: 100%;
	border: solid;
	color: blue;
	border-radius: 5px;
	background-image:url("../images/fondMain2.jpg");
	background-repeat: no-repeat;
	background-size:100%;
	background-position: center;
	
	
}

#myvideo{
	margin-left:auto;
	margin-right:auto;
	display:block;

}


#myvideoboutons{
   width:auto;
  display:flex;
  justify-content:center;
  margin-left:0;
  margin-top:10px;
	
}

#myvideoboutons2{
  width:auto;
  display:flex;
  justify-content:center;
  margin-left:25;
  margin-top:10px;
	
	
}





#mycanvas{
	border:2px solid;
	display:block;
	margin:auto;
	margin-top:10px;
	
}



#colonne_menu_droite {
	float: right;
	color: blue;
	min-height: 100%;
	width: 150px;
	border: solid;
	background: #EFCA89;
	border-radius: 5px;
	
}

#colonne_menu_gauche {
	float: left;
	color: blue;
	min-height: 100%;
	width: 200px;
	border: solid;
	background: #EFCA89 ;
	border-radius: 5px;
	margin-left:3px;
}

#menu_inscription{	
	margin-left:5px;

}

aside {
	padding: 10px;
}

article {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size: 0.9em;
}

#header_article {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	color: green;
	background: url("../images/fond_header.jpg");
	background-position: 300% 65%;
	background: url("../images/fond_header.jpg");
}

/* Span" change la couleur d'un texte pour le mettre en ÃÂÃÂ©vidence */

span.color {
	color: red;
}

input:focus:valid{
	outline: 2px lime solid;	
}

input:focus:invalid{
	outline: 2px red solid;	
}

input:required{
	outline: 2px blue solid;	
}

#footer_index {
	clear: both;
	padding-top: 2em;
	background: dimgray;
	color: white;
}

#footer_article{
	background:#819FF7;
	border-radius: 5px;
	border: solid;
	color: blue;
	
}

footer a {
	text-decoration: none;
	color: gainsboro;
}

footer a:hover {
	color: white;
}

en local j'obtiens ceci :

et en web :

Le même résultat qu'avec le code proposé par Wimbo ....

Edit : Le problème semble venir de FileZilla.... quand je supprime le canvas ( je voulais voir si par hasard ça pouvais venir de là ) , la version web m'affiche toujours le canvas .. connaissez vous un client FTP fiable par hasard ? que je vois si le problème persiste

-
Edité par Baka356 28 avril 2017 à 14:49:21

MrChampy

28 avril 2017 à 15:00:53

Re,

Je t'ai répondu en MP, moins galère. Et je pense pas que ce soit Filezilla non, mais si ca peut te rassurer essaye Cyberduck au pire.

Baka356

28 avril 2017 à 16:18:47

Le problème semble réglé et il semble venir de plusieurs facteurs , une utilisation non maîtrisée de fillezilla ( mauvaise synchronisation des fichiers ) ==> je suis passé a Cyberduck qui est bien plus pratique pour ça !! et d'un problème venant de chrome puis que tout s'affiche correctement sur les autres navigateurs .... mais ça c'est un autre problème :)

Encore un grand merci à MrChampy et Wimbo pour le temps et l’énergie que vous m'avez consacrés !!