Partage
  • Partager sur Facebook
  • Partager sur Twitter

responsive altéré

filemaker
    20 mars 2018 à 11:19:56

    BONJOUR 

    j ai fait une page avec css 3 j ai suivi les directives pour rendre ma page responsive mais, j'ai rendu certaines div absente avec le display: none

    et je me retrouve devant un formulaire qui refuse d'être centré voilà le lien

    http://isdriver.fr/def/

    le code html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IS driver│VTC-Paris</title>
<link href="design.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="images/favicon.png">
<script type="text/javascript" src="jquery-1.11.3-jquery.min.js"></script>
</head>

<body>
<div class="page">
  <div class="top-header">
  <li class="bouton"><a href="#">S'enregistrer</a>
  </li>
  <li class="bouton"><a href="#">Déja inscrit</a>
  </li>
  <li style="width:50px"><div class="call-img"></div></li>
  <li >
                <div class="phone"></div>
        </li>
  <li style="width:165px">
  <div class="appel">APPEL</div><div class="numero">+ 33 06 00 00 00</div></li>
   <li >
                <div class="call-img"><img src="images/phone-icone copie.png" width="346" height="610" alt="phone" /></div>
        </li>
        <li >
                <div class="call-img"></div>
        </li>
        <li >
                <div class="call-img"></div>
        </li>
  	 <li>
          	<div class="drapo-text">Français</div>
       	    <div class="drapo"><img src="images/Drapeau_France.png" width="45" height="25" alt="Français" /></div>
   	  </li>
      <li>
          	<div class="drapo-text">Anglais</div>
       	    <div class="drapo"><img src="images/Drapeau_anglais.png" width="45" height="25" alt="Anglais" /></div>
      </li>
      
  </div>
  <div class="header">
  <div class="header-right">
    <a href="#contact">NOS TARIFS</a>
  </div>
  </div>
  <div class="logo"><a href="#"><img src="images/logo.png" width="200" height="114" /></a></div>
  
  <div class="milieu">
    <div class="formulaire">
  <form  action="<?php echo $_SERVER['PHP_SELF'] ?>"method="post" class="form-signin" >
    
    <?php
			if(isset($error))
			{
			 	foreach($error as $error)
			 	{
					 ?>
    <div class="alert-danger">
      <i class="glyphicon glyphicon-warning-sign"></i> &nbsp; <?php echo $error; ?>
      </div>
    <?php
				}
			}
			else
			{
				 ?>
    <div class="alert-info">
      
      <i class="glyphicon glyphicon-log-in"></i> &nbsp; RESERVATION REUSSIE
      </div>
    
    <?php
			}
			?>
    <div class="form-group">
      <input type="text" class="form-control" name="nom" placeholder="Entrer votre nom" value="<?php if(isset($error)){echo $nom;}?>" />
      </div>
    <div class="form-group">
      <input type="text" class="form-control" name="mail" placeholder="Entrer votre E-Mail" value="<?php if(isset($error)){echo $mail;}?>" />
      </div>
    <div class="form-group">
      <input type="tel" class="form-control" name="tel" placeholder="Numéro de téléphone" value="<?php if(isset($error)){echo $tel;}?>"/>
      </div>
    <div class="form-group">
      <input type="date" class="form-control" name="date"/>
      </div>
    <div class="form-group">
      <div class="texte">à</div>
      </div>
    <div class="form-group">
      <input type="time" class="form-control" name="heure"/>
      </div>
    
    <div class="form-group">
      <input type="text" class="form-control" name="dpar" placeholder="Départ"  />
      </div>
    <div class="form-group">
      <input type="text" class="form-control" nname="dest" placeholder="Destination"  />
      </div>
    <div class="form-group">
      <select class="form-control" name="nb_A" p value="<?php if(isset($error)){echo $nb_A;}?>" />
      <option value="1">Adulte</option>
      <option value="2" >0</option>
      <option value="3" >1</option>
      <option value="4" >2</option>
      <option value="5" >3</option>
      <option value="6" >4</option>
      <option value="7" >5</option>
      <option value="8" >6</option>
      <option value="9" >7</option>
      <option value="10" >8</option>
      <option value="11" >+</option>
      </select>
      </div>
    <div class="form-group">
      <select class="form-control" name="nb_E"  />
      <option value="1">Enfant</option>
      <option value="2" >0</option>
      <option value="3" >1</option>
      <option value="4" >2</option>
      <option value="5" >3</option>
      <option value="6" >4</option>
      <option value="7" >5</option>
      <option value="8" >6</option>
      <option value="9" >7</option>
      <option value="10" >8</option>
      <option value="11" >+</option>
      </select>
      </div>
    <div class="form-group">
      <select class="select_conf" name="nb_B"  />
      <option value="1">Bébé</option>
      <option value="2" >0</option>
      <option value="3" >1</option>
      <option value="4" >2</option>
      <option value="5" >3</option>
      <option value="6" >4</option>
      <option value="7" >5</option>
      <option value="8" >6</option>
      <option value="9" >7</option>
      <option value="10" >8</option>
      <option value="11" >+</option>
      </select>
      </div>
    <div class="form-group">
      <select class="form-control" name="nb_V" />
      <option value="1">Valise</option>
      <option value="2" >0</option>
      <option value="3" >1</option>
      <option value="4" >2</option>
      <option value="5" >3</option>
      <option value="6" >4</option>
      <option value="7" >5</option>
      <option value="8" >6</option>
      <option value="9" >7</option>
      <option value="10" >8</option>
      <option value="11" >+</option>
      </select>
      </div>
    <div class="form-group">
      <div class="texte-2">RECEVOIR LA CONFIRMATION PAR</div>
      </div>
    <div class="form-group">
      <select class="form-control" name="repse" placeholder="Mode de confirmation" />
      <option value="mail" >Email</option>
      <option value="SMS" >SMS</option>
      <option value="Appel" >Appel</option>
      </select>
      </div>
    
    <div class="clearfix"></div>
    <div class="form-group">
      <button type="submit" class="btn btn-primary" name="envoi">
        <i class="glyphicon glyphicon-open-file"></i>&nbsp;RESERVEZ MAINTENANT
        </button>
      </div>
    <br />
    
  </form>
    </div>
    <div class="bloc">Placez ici le contenu de  class "bloc"</div>
    
    
    <div class="diapo">
      <!-- Slideshow container -->
  <div class="slideshow-container">
    
    <!-- Full-width images with number and caption text -->
    <div class="mySlides fade">
      <div class="titre"><h1>MISE À DISPOSITION</h1></div>
      
      <div class="text">Une Heure, un jour, plus, c'est comme vous voulez</div>
      </div>
    
    <div class="mySlides fade">
      <div class="titre"><h1>CHAUFFEUR VTC À PARIS</h1></div>
      <div class="text">Vos déplacements privés ou professionnels</div>
      </div>
    
    <div class="mySlides fade">
      <div class="titre"><h1>NAVETTE AÉROPORT</h1></div>
      <div class="text">Paiements à bord</div>
      </div>
    <div class="mySlides fade">
      <div class="titre"><h1>PONCTUALITÉ & CONFORT</h1></div>
      <div class="text">Réservez et partez tranquille</div>
      </div>
    <div class="mySlides fade">
      <div class="titre"><h1>MISE À DISPOSITION</h1></div>
      <div class="text">Un Heure, un jour, plus, c'est comme vous voulez</div>
      </div>
    
    <!-- Next and previous buttons -->
  </div>
      
  <!-- The dots/circles -->
  <div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
    <span class="dot" onclick="currentSlide(4)"></span>
    <span class="dot" onclick="currentSlide(5)"></span>
  </div> 
      
      
  </div>
  </div>
</div>


</div>
<script>
var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 5000); // Change image every 2 seconds
}
</script>
<script src="bootstrap/js/bootstrap.min.js"></script>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

</body>

    ensuite le css

    @charset "UTF-8";
/* CSS Document */
html, body{
   margin: 0px;
   padding: 0px;clear
   outline: 0px;
   height: 100%;
   font-family: Tahoma, Geneva, sans-serif;
}

.page{
	height: 100%;
	width: 100%;
	background-image: url(images/bg.jpg);
	background-repeat: no-repeat;
	padding-top: 10px;
}
.top-header {
	margin-top: 0px;
	height: 40px;
	width: 90%;
}
.top-header li {
	float: right;
	margin-right: 10px;
	height: 40px;
	width: auto;
	text-decoration: none;
	list-style-type: none;
}
.bouton a{
	background-color: dodgerblue;
	color:#FFF;
	margin-right: 10px;
	text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px; 
   line-height: 40px;
   border-radius: 4px;
}
.logo{
	float: left;
	margin-top: 50px;
	margin-left: 70px;
	height: 120px;
	width: 30%;
	margin-right: 0px;
	margin-bottom: 0px;
	z-index: 100;
}
.lang {
	height: 35px;
	width: 100px;
	margin-top: 0px;
	margin-right: 30px;
	padding-top: 0px;
}
.lang li{
	display: inline-block;
	color: #FFF;
	float: left;
	height: 35px;
	width: 50px;
	margin-top: 0px;
	margin-left: 10px;
	position: relative;
}
.drapo {
	height: 66%;
	width: 100%;
	padding-top: -3px;
}
.drapo-text {
	height: 40%;
	width: 100%;
	font-size: 13px;
	margin-bottom: 0%;
	word-spacing: 3px;
	vertical-align: middle;
	color: #FFF;
}
.call-img {
	width: 15%;
	height: 100%;
	font-size: 14px;
	margin-bottom: 1%;
}
.call-img img{
	width: auto;
	height: 100%;
}
.phone {
	position: relative;
	height: 40px;
	width: 10%;
	margin-top: 5px;
	border-right-width: 2px;
	border-right-style: solid;
	border-right-color: #000;
}
.phone li{
	display: inline-block;
	color: #FFF;
	float: left;
	height: 35px;
	width: 50px;
	margin-top: 0px;
	margin-left: 10px;
	position: relative;	
}
.appel{
	color: #000;
	display: inline-block;
	color: #000;
	float: left;
	height: 16px;
	width: 83%;
	margin-top: 0px;
	margin-left: 2px;
	clear: left;
	position: relative;
	font-size: 15px;
	font-weight: bold;
}
.numero{
	color: #FFF;
	display: inline-block;
	color: #FFF;
	float: left;
	height: 15px;
	width: 83%;
	margin-top: 2px;
	margin-left: 2px;
	clear: left;
	position: relative;
	font-size: 15px;
	font-weight: bold;
}
.header {
	width: 100%;
	overflow: hidden;
	height: 100px;
}

/* Style the header links */
.header a {
  float: left;
  color: white;
  font-size: 18px;
  text-decoration:none 
}

/* Style the logo link */
.header a.img {
	width: 200px;
	height: 200px;
    margin-left: 0px;
	margin-top: -100px
}

/*  on mouse-over */
.header a:hover {
  color: white;
  border-bottom-color:#F00;
  border-bottom-width: 4px;
}

/* Style the active*/
.header a.active {
  color: white;
  border-bottom-color:#F00;
  border-bottom-width: 4px;
}

/* Float the link section to the right */
.header-right {
  float: right;
  margin-top: 40px;
  margin-right: 200px;
  display:inline
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */ 
@media screen and (max-width: 600px) {
.diapo{
	display:none;	
}
.formulaire {
	float: none;
	width: 380px;
	margin-right:10px;
	margin-left:auto;
	
}
.top-header {
    float: none;
    display: none
  }
 
}
@media screen and (max-width: 600px) {
  .header a {
    float: none;
    display: block;
    tmargin-right:auto;
	margin-left:auto;
  }
  .bloc {
	width: 25px;
	float:none;
	display: block
}

  .header-right {
	display:none
  }
  .top-header li {
	float: none;
	display: none;
}
.diapo{
	float: none;
	display:none;	
}
.formulaire {
	float: none;
	width: 380px;
	margin-right:10px;
	margin-left:auto;
	
}

  .form-signin {
	width: 100%;
	float:none;
	margin-left:20px;
}
.form-signin input[type="tel"],
.form-signin input[type="text"],
.form-signin input[type="password"],
.form-signin input[type="email"] {
	width: 100%;
	margin-top:10px;
	font-size: 16px;
	height: 30px;
	padding-right: 9px;
	padding-left: 9px;
	
}
.form-signin input[type="date"] {
	float:none;
	width:40%;

}
.form-signin input[type="time"] {
	float:none;
	width:40%;

}
.form-signin select {
	float:none;
	width: 23%;

}
.form-signin button[type="submit"] {
	width: 100%;
}
}
.form-signin {
	width: 100%;
	margin-top: 30px;
	background-color: rgba(255,255,255,0.2);
	border: 1px solid gba(255,255,255,0.2);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
	box-shadow: 0 1px 2px rgba(0,0,0,.05);
	font-family: Tahoma, Geneva, sans-serif;
	color: #990000;
	font-weight: lighter;
	padding-top: 19px;
	padding-right: 29px;
	padding-bottom: 19px;
	padding-left: 29px;
}

.form-signin .form-signin-heading{
    color:#00A2D1;
}
.form-signin input[type="tel"],
.form-signin input[type="text"],
.form-signin input[type="password"],
.form-signin input[type="email"] {
	width: 100%;
	margin-top:10px;
	font-size: 16px;
	height: 30px;
	padding-right: 9px;
	padding-left: 9px;
}
.form-signin input[type="date"] {
	float:left;
	width: 40%;
	margin-top:10px;
	font-size: 16px;
	height: 30px;

}
.form-signin input[type="time"] {
	float:left;
	width:40%;
	margin-top:10px;
	margin-left: 20px;
	font-size: 16px;
	height: 30px;

}
.form-signin select {
	float:left;
	width: 23%;
	margin-top:10px;
	font-size: 16px;
	height: 30px;
	margin-left:6px;
	padding-top: 0px;
	padding-bottom: 0px;
}
.texte {
	float: left;
	width: 8%;
	margin-top: 15px;
	margin-left: 5%;
	font-size: 18px;
	height: 20px;
	padding-top: 7px;
	padding-right: 9px;
	padding-bottom: 0px;
	padding-left: 9px;
	text-align: center;
	color: #FFF;
}
.texte-2 {
	float: left;
	width: 74%;
	margin-top: 15px;
	margin-left: 0%;
	font-size: 14px;
	height: 20px;
	padding-bottom: 0px;
	text-align: left;
	color: #F00;
	background-color: rgba(255,255,255,0.2);
}
.form-signin button[type="submit"] {
	width: 100%;
	background-color: #ff324a;
	margin-top:10px;
	font-size: 16px;
	color:#FFF;
	height: 45px;
	padding-top: 7px;
	padding-bottom: 7px;
	border-color: #ff324a;
}
.signin-form, .body-container
{
	//border:solid red 1px;
	margin-top:110px;
}
.diapo{
	float: left;	
	max-height: 416px;
	width: 30%;
	margin-left: 30px;
}
 * {box-sizing:border-box;
 border-width:0px}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  max-height:300px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}


/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #fff;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 8px;
  width: 8px;
  margin: 0 2px;
  background-color: #FFF;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #00bcff;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
.alert-info {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 16px;
	font-weight: bolder;
	text-transform: capitalize;
	color: #090;
}
.alert-danger {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 16px;
	font-weight: bolder;
	text-transform: capitalize;
	color: #F00;
}
.titre {
	margin-top: 150px;
	height: 200px;
	width: 300px;
	color:#FFF;
}
.milieu {
	width: 90%;
}
.formulaire {
	float: right;
	width: 380px;
	margin-right:20px;
	margin-left:auto;	
}
.bloc {
	width: 25px;
	float:right;
	display:none
}
.logo {
	height: 120px;
	width: 200px;
	margin-top: -50px;
	margin-left: 75px;
	float:left
}

     S'il vous plait aidez moi


    • Partager sur Facebook
    • Partager sur Twitter
    Mewen_bzh
    • HTML / CSS
      20 mars 2018 à 11:27:40

      Bonjour,

      Pour commencer je te conseille de vérifier (voir de refaire) ton code. En effet le validateur HTML du W3C renvoie 40 erreurs (https://validator.w3.org/check?uri=http%3A%2F%2Fisdriver.fr%2Fdef%2F&charset=%28detect+automatically%29&doctype=Inline&group=0) pour ton site. Tu as aussi plusieurs erreurs en CSS : https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fisdriver.fr%2Fdef%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=fr

      Le problème ici c'est que tu essayes de faire la décoration d'une maison dont les fondations ne sont même pas encore creusées. Il faut reprendre la base, corriger tout cela et ensuite tu pourras passer aux styles. ;)

      • Partager sur Facebook
      • Partager sur Twitter
      Je ne réponds pas aux messages privés.
      ChrisLebure
        20 mars 2018 à 11:33:25

        Bonjour,

        l'inspecteur web de mon navigateur indique que les media queries ne sont pas placées en fin de CSS, d'où le problème, il y a une déclaration .formulaire { } APRÈS les @media, voilà l'erreur

        • Partager sur Facebook
        • Partager sur Twitter

        responsive altéré

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
        • Editeur ●
        • Markdown