8791 sujets

Développement web côté serveur, CMS

Problème fenêtres modales et Php

Bonjour à tous,

Bonne fêtes à tous Smiley cligne !
Je suis sur le developement de mon premier site web!
Pour celui-ci je me suis basé sur bootstrap3 pour le CSS/JS, Wamp pour le serveur local et notepad pour le traitement de texte.

Mon problème est arrivé lorsque j'ai passé mon fichier principal en php pour pouvoir l'executer sur serveur local. En effet, j'utilise des modales suivant le script de bootstrap et sous .php, à la fermeture de ma modale toute ma page est décalée vers la gauche. Plus j'ouvre, puis ferme, la modale plus la fenêtre se décale vers la gauche.
Je dirais que la width est modifiée à chaque fermeture de modale, mais n'arrive pas à comprendre pourquoi.

Chose qui n'arrive pas sur mon fichier de sauvegarde .html.

Je cherche actuellement du côté de Wamp, un soucis de compatibilité bootstrap/php mais n'ai rien encore trouvé!
Merci d'avance pour votre aide.

Clément
Salut clementB !

Il nous faudrait à minima pouvoir visualiser ton code pour voir ce qui ne colle pas, mais je dirais que tu dois avoir une incrémentation en PHP peut-être qui à chaque chargement ajoute "+1" et pour une raison étrange cette incrémentation doit se retrouver dans ton CSS ou bien générer une <div> ou quelque chose du genre qui décale ta page.

Mais sans le code c'est difficile d'en dire plus !

Bonne journée et bonne année Smiley smile
Hello,

Meci pour ton retour, ok je pensais que cela ne venais pas du code au vu de mes essais, c'est pour ça que je n'ai pas surchargé le post avec!

Du coup, le voilà :

	/* CSS of the general menu + some line in bootstrap.css */
	#menu {
		position:relative;
		width:100%;
		top:0;
		padding: 3px;
	    position: -webkit-sticky; /* Safari */
        position: sticky;
		background-color: white;
		opacity:0.95;
		z-index: 1020;
	}
	#menu ul {
		padding: 15px 5%;
		margin-left: 14px; margin-right:10px;
		display: block;
	}
	#menu li a {
    font-family: 'Sedgwick Ave',"Roboto",sans-serif;
    text-transform: uppercase;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: 2px;
    color: #000;
    margin: 0% 1.75% 0% 2%;
	}
	
	li:hover {
    top:5px;
    transition: top 0.7s linear;
    -webkit-transition: top 0.7s linear;
    -moz-transition: top 0.7s linear;
}
	
	ul li {
display: inline;
position: relative;
	}
	
	
	.triangle {
	width:25px;	
	}
	
		/* End of the menu CSS */

		/* Black lines for separation */
		
	.black {
	margin-top: 1%;
	border-top : 1px solid #000; 
	width : 40%; 
	margin-left: auto; margin-right:auto;
	}
	
	.blackbas {
	position:relative;
	border-top : 1px solid #000; 
	width : 40%; 
	margin-left: 29%;
	top:10px;
	}

		/* Black line end */
		
		/* Title of the page */
	
	h2 {
		font-family: 'Sedgwick Ave', sans-serif;
		font-size:3em;
		text-align: center;
		margin: 0 auto;
		padding-top: 3%;
		}

		/* Title end */
		
		/* Top logo spec */
	
	#logo-entete {
	width: 70% ;
	display: block ;
	/*background: url(title.gif) no-repeat ;*/
	position: relative ;
	margin : auto;
	top: 0;
	padding:10px;
	margin-bottom: 1.5%;
	}
	
		/* Top logo end */
	
	
		/* code repris du site  http://epicadesign.fr/   Framing of the portefolio with hover effect */
		@font-face{font-weight:normal;font-style:normal;}
*, *:after, *:before {box-sizing: border-box;}
.grid{position:relative;margin: 5px auto 10px auto;width:100%;list-style:none;text-align:center;display: inline; z-index:1010;}
.grid figure{position:relative;float:left; margin: 10px; overflow:hidden;width:370px;max-height:300px/*;width:48%*/;/*background:#3085a3*/;text-align:center;cursor:pointer}
.grid figure img{position:relative;display:block;min-height:100%;max-width:100%;opacity:.9;}
.grid figure figcaption{/*padding:2em;*/color:#fff;text-transform:uppercase;font-size:1.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.grid figure figcaption::before,.grid figure figcaption::after{pointer-events:none}
.grid figure figcaption,.grid figure figcaption>a{position:absolute;top:0;left:0;width:100%;height:100%}
.grid figure figcaption>a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0}
.grid figure h2{word-spacing:-0.15em;font-weight:300}
.grid figure h2 span{font-weight:800}
.grid figure h2,.grid figure p{margin:0}
.grid figure p{letter-spacing:1px;font-size:68.5%}
@media screen and (max-width:50em){
.grid figure{display:inline-block;float:none;margin:10px auto;width:100%}
}
/*figure.effect-goliath{background:#df4e4e}*/
 figure.effect-goliath img,figure.effect-goliath h2{-webkit-transition:-webkit-transform .30s;transition:transform .30s;}
 figure.effect-goliath img{-webkit-backface-visibility:hidden;backface-visibility:hidden;}
 figure.effect-goliath h2,figure.effect-goliath p{position:absolute;bottom:0;left:0;padding:30px}
 figure.effect-goliath p{text-transform:none;font-size:90%;opacity:0.1;-webkit-transition:opacity .30s,-webkit-transform .30s;transition:opacity .30s,transform .30s;-webkit-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0)}
 figure.effect-goliath:hover img{-webkit-transform:translate3d(0,-80px,0);transform:translate3d(0,-80px,0);}
 figure.effect-goliath:hover h2{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0)}
 figure.effect-goliath:hover p{opacity:1; background-color:rgba(200, 202, 203, 0.79); width:100%; color:black; -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}

		
	#portefolio {
		position: relative;
		top:0;
		margin: 2% 3.5% 2% 3.5% ;
		display: block;
	}
	
		/* End of portefolio framing */
		
		/* Footer framing */

	#footer {
		position:relative;
		margin:auto;
		height: 100px;
		width:100%;
		border-top: 1px black solid 500px;
	} 
	#iconinsta {
		position:relative;
		top:22px;
		width: 4.5%;
		height:auto;
		float:right;
		margin-right:45%;
		
	}
	#iconmail {
		position:relative;
		top:27px;
		width:5%;
		height: auto;
		float:left;
		margin-left:44%;
	}
	#iconbike {
		position:absolute;
		top:13px;
		width:6.5%;
		height: auto;
		right: 30px;
	}
	
		/* End of footer framing */


<!DOCTYPE html>
<html>
	<!-- Meta head of the page -->

	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="description" content="En roue libre">
		<meta name="author" content="Clément Blondin">
		<link rel="SHORTCUT ICON" href="favicon.ico" />
		<!-- Bootstrap core CSS -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/bootstrap.css" rel="stylesheet">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
		<!-- Custom styles for this template -->
		<link href="css/erlcss.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css?family=Sedgwick+Ave');
</style>

<div id="container">
		<title> En roue libre </title>
	</head>

	<!-- include the top de page -->
<?php include("topdepage.html"); ?>

<div class="texte">

<h2 id="titrepage1"> Les biclous </h2>
	
<ul id="portefolio">
	<li><div class="grid">
                    <figure class="effect-goliath">
                        <img src="Photos/photoatelier.jpg" alt="vitus992bleu"/>
                        <figcaption>
                            <h2>Cadre Vitus 992</h2>
                            <p>Clique sur le biclou pour plus d'infos !</p>
							<a href="#" data-toggle="modal" data-target="#Modal-1">View more</a>        
						</figcaption>            
                    </figure>
                </div> </li>

                       ===== // Repetition de li pour créer le portefolio // =====

	<li> <div class="grid">
                    <figure class="effect-goliath">
                        <img src="Photos/photoatelier.jpg" alt="vitus992bleu"/>
                        <figcaption>
                            <h2>Cadre Vitus 992</h2>
                            <p>Clique sur le biclou pour plus d'infos !</p>
                            <a href="#">View more</a>
                        </figcaption>            
                    </figure>
                </div> </li>
	

 </body>	
 </div>
 
 	
	 <div class="clear" style="clear:both"></div>

		<!-- include the footer -->
<?php include("footer.html"); ?>



		<!-- Modal -->
		
		<!-- Modal for portfolio item 1 -->
	<div class="modal fade" id="Modal-1" tabindex="-1" role="dialog" aria-labelledby="Modal-label-1">
		<div class="modal-dialog modal-lg" role="document">
			<div class="modal-content">
				<div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="Modal-label-1">Nom du vélo</h4>
				</div>
				<div class="modal-body">
		       <!-- <div class="modal-works"><span>Branding</span><span>Web Design</span></div> -->
					<div id="carouselleft">
						<?php include("carouseltest.php"); ?>
					</div>
					<div id="carouselright">
						<p> infos vélos, prix, nom, etc </p>
					</div>

						

				</div>
			</div>
		</div>
	</div>

</div>
	
		<!-- Bootstrap core JavaScript
			================================================== 
		Placed at the end of the document so the pages load faster -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/SmoothScroll.js"></script>
		<script src="js/theme-scripts.js"></script>
		 
		
</html>
Sujet clos
Aller à