Partage
  • Partager sur Facebook
  • Partager sur Twitter

positionnement formulaire CSS/HTML

positionnement formulaire css html

JCGAMELaChaine
    12 octobre 2017 à 22:16:54

    Bonjour a tous je me suis porté volontaire pour aider un ami a développer son premier site internet, sachant qu'il avais payé un informaticien pour faire un site mais il a abandonné le travail et lui a laissé le dossier du site qu'il ma donné. J'ai modifié quelques parties du sites et maintenant que j'arrive au formulaire je suis bloqué sur la mise en place ou "feuille de style" enfin mon message d'avertissement apparais pas et impossible de modifier l'emplacement de mon formulaire.

    photo 1 -> Formulaire test

    photo 2 -> Formulaire sur le site

    Puis le code que j'ai finis par mettre car rien n'a fonctionné ça reste fixe :/

    photo du formulaire pendant les test

    Photo une fois mis sur le site

    div#content1 div{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
  width: 32%;
  height: 42%;
  margin: 1em;
  background-color: white;
}

.rightbox{
    height: 100px;
    width: 100%;
    text-align: center;
    border-radius: 5px
    vertical-align:top;
}

input, textarea, select {
 padding:3px;
 border:1px solid #333;
 border-radius:5px;
 width:200px;
 box-shadow:1px 1px 2px #333 inset;
 }


  input[type=submit]:hover, input[type=reset]:hover {
 background-color:green;
 }
input[type=submit]:active, input[type=reset]:active {
 background-color:green;
 box-shadow:1px 1px 1px #333 inset;
}

    -
    Edité par AbcAbc6 13 octobre 2017 à 4:33:35

    • Partager sur Facebook
    • Partager sur Twitter
    AbcAbc6
      12 octobre 2017 à 22:33:48

      Bonsoir,

      Je t'invite à éditer ton premier message afin d'en modifier le titre de ton sujet, car «Débutant besoin d'aide CSS/HTML» n'est pas explicite de la problématique que tu rencontres. Merci (Point 3 de la charte de bonne conduite.)

      Et il nous faudrait aussi le code html.

      • Partager sur Facebook
      • Partager sur Twitter
      JCGAMELaChaine
        12 octobre 2017 à 22:49:46 

        LE html complet de la page et le css complet du site :
        <!DOCTYPE html>
<html lang="en">

<!-- Mirrored from calpronos.com/apropos.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Sep 2017 00:14:28 GMT -->
<head>
	<title>Lucas Fourmis</title>
	<meta charset="utf-8">
	<meta name="author" content="pixelhint.com">
	<meta name="description" content="La casa free real state fully responsive html5/css3 home page website template"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
	
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/responsive.css">
	<link rel="icon" type="image/jpg" href="img/favicon.jpg" />

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/main.js"></script>
</head>
<body>

	<section class="hero">
		<header>
			<div class="wrapper">
				<a href="index-2.html"><img src="img/logo.png" class="logo" alt="" titl=""/></a>
				<a href="#" class="hamburger"></a>
				<nav>
					<ul>
						<li><a href="index-2.html">Accueil</a></li>
						<li><a href="kit.html">Kits débutant</a></li>
						<li><a href="fourmilieres.html">Fourmilières</a></li>
						<li><a href="aireschasse.html">Aires de chasse</a></li>
						<li><a href="accessoires.html">Accessoires</a></li>
						<li><a href="apropos.html">À Propos</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</nav>
			</div>
		</header><!--  end header section  -->

			<section class="caption">
				<h2 class="caption">Contact</h2>
			</section>
	</section><!--  end hero section  -->


  <div id="content1">
    <div class="leftbox"> 
        <form action="contactmail.php" method="post" name="contactmail" id="contactmail">
  <table width="600" border="0" cellpadding="4" cellspacing="1" >
    <tr>
      <br><br>
      <td colspan="2">
          <div class="Style1"><font size="3" face="Verdana, Arial, Helvetica, sans-serif"><strong>Formulaire pour nous contacter :</strong> </font></td>
    </tr>
   <tr>
     <td >
          <font size="2" face="Verdana, Arial, Helvetica, sans-serif">Votre adresse mail :</font>
          </div></td>
     <td >
          <font size="2" face="Verdana, Arial, Helvetica, sans-serif">
            <input name="mail" type="text" id="mail" size="20" maxlength="100"/></font>
     </td>
   </tr>
   <tr>
      <td> 
         <font size="2" face="Verdana, Arial, Helvetica, sans-serif">
         <label for="objet">Objet du mail :</label></center>
         </font></td></div>
     <td>
          <font size="2" face="Verdana, Arial, Helvetica, sans-serif">
            <input name="objet" type="text" size="20" maxlength="100" />
          </font></td>
   </tr>
   <tr>
     <td >
          <font size="2" face="Verdana, Arial, Helvetica, sans-serif">
          <label for="msg">Votre message :</label>
          </font></td>
     <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
         <textarea name="msg" cols="40" rows="4"></textarea></font>
      </td>
   </tr>
   <tr>
      <td>
          <font size="2" face="Verdana, Arial, Helvetica, sans-serif"><span class="Style3"></span></font>
      </td>
      <td>
          <font size="2" face="Verdana, Arial, Helvetica, sans-serif">
            <input name="submit" type="submit" value="Envoyer le message"/></font></center>
      </td>
   </tr>
  </table>
  </form>

    </div>
    <div class="rightbox">
      <p>Au bout de 5envoies d'affilés vos messages partiront en spam. Veuillez faire un formulaire correct avec votre présentation et votre demande. </p>
    </div>
  </div>

  <h1>délais de 48h</h1>


	<footer>
		<div class="wrapper footer">
			<ul>

				<li class="about">
					<p>Les réseaux sociaux</p>
					<ul>
						<li><a href="https://www.facebook.com/lucas.fourmis" class="facebook" target="_blank"></a></li>
						<li><a href="#" class="skype"></a></li>
					</ul>
				</li>
			</ul>
		</div>

		<div class="copyrights wrapper">
			Lucas Fourmis © 2017 . All Rights Reserved.

		</div>
	</footer><!--  end footer  -->
	
</body>

<!-- Mirrored from calpronos.com/apropos.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Sep 2017 00:14:28 GMT -->
</html>

        /*

    Author Email    : jasoncarasco@gmail.com
    Template Name   : Lucasfourmis
    
    
    *****************************************
    
    
    - Fonts
    - General CSS
    - Header
    - Hero
    - Search
    - Listings
    - Footer
    - Responsive CSS
    

*/


.apropos{
    height: 100px;
    width: 100%;
    background-color: ;
    text-align: center;
    border-radius: 5px;
}



/*  Fonts  */
@font-face {
    font-family: 'lato-bold';
    src: url('../fonts/lato-bold.eot');
    src: url('../fonts/lato-boldd41d.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-bold.woff') format('woff'),
         url('../fonts/lato-bold.ttf') format('truetype'),
         url('../fonts/lato-bold.svg#LatoBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'lato-regular';
    src: url('../fonts/lato-regular.eot');
    src: url('../fonts/lato-regulard41d.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-regular.woff') format('woff'),
         url('../fonts/lato-regular.ttf') format('truetype'),
         url('../fonts/lato-regular.svg#LatRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'p22_corinthia';
    src: url('../fonts/p22_corinthia.eot');
    src: url('../fonts/p22_corinthiad41d.eot?#iefix') format('embedded-opentype'),
         url('../fonts/p22_corinthia.woff') format('woff'),
         url('../fonts/p22_corinthia.ttf') format('truetype'),
         url('../fonts/p22_corinthia.svg#P22Corinthia') format('svg');
    font-weight: normal;
    font-style: normal;
}











/*  General CSS  */
body{
    background:#BDC;
}

.wrapper{
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

h1, h2, h3, h4, h5 ,h6{
    color: #626262;
    font-family: "lato-regular", Helvetica, Arial, sans-serif;
    letter-spacing: 1px;
}

h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6          { font-weight: bolder }

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
 
.clearfix {  
    *zoom: 1;  
}










/*  Header Section  */

header{
    width: 100%;
    height: 100px;
    background: rgba(28, 54, 85, .2);
}

header .logo{
    margin-top: 40px;
    float: left;
}

header a.hamburger{
    text-decoration: none;
    display: none;
    float: right;
    margin-top: 41px;
    width: 24px;
    height: 19px;
    background: url('../img/hamburger_icon.png') no-repeat;
}

header a.hamburger.opned{
    width: 19px;
    background: url('../img/close_menu_icon.png') no-repeat;
}


header nav{
    float: right;
    opacity: 10;
}


header nav ul{
    margin-top: 40px;
    list-style: none;
    overflow: hidden;
    float: left;
}

header nav ul li{
    float: left;
    margin-left: 50px;
}

header nav ul li a,
header nav .login_btn{
    text-decoration: none;
    color: #fff;
    font-family: "lato-regular", Helvetica, Arial, sans-serif;
    font-size: 16px;
    letter-spacing: 1px;

}

header nav .login_btn{
    float: right;
    margin: 30px 0 0 50px;
    padding: 10px 30px 11px 30px;
    border: 2px solid #ffffff;
    background: transparent;

    transition: background .1s linear;
    -webkit-transition: background .1s linear;
    -moz-transition: background .1s linear;
    -o-transition: background .1s linear;
}

header nav .login_btn:hover{
    background: #ffffff;
    color: #1c3655;
}










/*  Hero Section  */

.hero{
    width: 100%;
    height: 900px;
    position: relative;
    background: url('../img/hero.jpg') no-repeat bottom center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.hero .caption{
    width: 100%;
    position: absolute;
    text-align: center;
    top: 50%;
    margin-top: -105px;
    z-index: 10;
}

.hero .caption h2{
    color: #fff;
    font-family: "p22_corinthia", Helvetica, Arial, sans-serif;
    font-size: 100px;
    font-weight: lighter;
    margin: 0;
    position: relative;
    display: block;
}

.hero .caption h3{
    color: #fff;
    font-family: "lato-regular", Helvetica, Arial, sans-serif;
    font-size: 14px;
    margin: -15px 0 0 25px;
    left: 1px;
}










/*  Search Section  */
.search{
    width: 100%;
    height: 100px;
    background: #bfd9f2;
    position: relative;
}

.search #search{
    display: block;
    width: 90.90909090909091%;
    height: 100px;
    float: left;
    border: 0;
    outline: none;
    margin: 0;
    padding: 0;
    background: #bfd9f2;
    color: #ffffff;
    font-family: "lato-regular", Helvetica, Arial, sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 22px;
}

.search #search::-webkit-input-placeholder{
   color: #95badf;
}

.search #search:-moz-placeholder{ 
   color: #95badf;  
}

.search #search::-moz-placeholder{ 
   color: #95badf;  
}

.search #search:-ms-input-placeholder{  
   color: #95badf;  
} 

.search #submit_search{
    display: none;
}

.search .advanced_search_icon{
    display: block;
    width: 26px;
    height: 26px;
    float: right;
    background: url('../img/advanced_search_inactive.html') no-repeat;
    margin-top: 37px;

    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
}

.search .advanced_search_icon:hover{
    background: url('../img/advanced_search_hover.html') no-repeat;
}

.search .advanced_search_icon.active{
    background: url('../img/advanced_search_active.html') no-repeat;
}







.search .advanced_search{
    width: 100%;
    position: absolute;
    top: 100px;
    left: 0;
    background: #cbe0f4;
    border-top: 1px solid #aac8e4;
    border-bottom: 1px solid #aac8e4;
    z-index: 9999;
    display: none;
}

.search .advanced_search .arrow{
    display: block;
    width: 14px;
    height: 9px;
    background: url('../img/search_arrow.png') no-repeat;
    position: absolute;
    top: -8px;
    right: 6px;
}

.search .advanced_search #check_in_date,
.search .advanced_search #check_out_date,
.search .advanced_search #min_price,
.search .advanced_search #max_price{
    display: block;
    width: 509px;
    height: 100px;
    border: 0;
    margin: 0;
    padding: 0 20px;
    outline: none;
    background: #cbe0f4;
}

.search .advanced_search #check_in_date,
.search .advanced_search #check_out_date{
    background: url('../img/calendar_icon.html') no-repeat;
    background-position: 484px 50%;
    padding: 0 100px 0 20px;
    width: 429px;
}

.search .advanced_search .float{
    float: left;
}

.search .advanced_search .search_fields{
    overflow: hidden;
    border-bottom: 1px solid #aac8e4;
}

.search .advanced_search .field_sep{
    display: inline-block;
    width: 1px;
    height: 60px;
    border: 0;
    background: #aac8e4;
    margin: 20px 0 0 0;
    padding: 0;
}

.search .advanced_search #keywords{
    display: block;
    width: 1060px;
    height: 100px;
    border: 0;
    margin: 0;
    padding: 0 20px;
    outline: none;
    background: #cbe0f4;
}

.search .advanced_search #check_in_date,
.search .advanced_search #check_out_date,
.search .advanced_search #min_price,
.search .advanced_search #max_price,
.search .advanced_search #keywords{    
    color: #ffffff;
    font-family: "lato-regular", Helvetica, Arial, sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 22px;
} 


.search .advanced_search #check_in_date::-webkit-input-placeholder,
.search .advanced_search #check_out_date::-webkit-input-placeholder,
.search .advanced_search #min_price::-webkit-input-placeholder,
.search .advanced_search #max_price::-webkit-input-placeholder,
.search .advanced_search #keywords::-webkit-input-placeholder{
   color: #95badf;
}

.search .advanced_search #check_in_date:-moz-placeholder, 
.search .advanced_search #check_out_date:-moz-placeholder, 
.search .advanced_search #min_price:-moz-placeholder, 
.search .advanced_search #max_price:-moz-placeholder, 
.search .advanced_search #keywords:-moz-placeholder{ 
   color: #95badf;  
}

.search .advanced_search #check_in_date::-moz-placeholder, 
.search .advanced_search #check_out_date::-moz-placeholder, 
.search .advanced_search #min_price::-moz-placeholder, 
.search .advanced_search #max_price::-moz-placeholder, 
.search .advanced_search #keywords::-moz-placeholder{ 
   color: #95badf;  
}

.search .advanced_search #check_in_date:-ms-input-placeholder,  
.search .advanced_search #check_out_date:-ms-input-placeholder,  
.search .advanced_search #min_price:-ms-input-placeholder,  
.search .advanced_search #max_price:-ms-input-placeholder,  
.search .advanced_search #keywords:-ms-input-placeholder{  
   color: #95badf;  
} 











/*  listings section  */
.listings{
    padding: 100px 0;
}

.listings ul.properties_list{
    list-style: none;
    overflow: hidden;
}

.listings ul.properties_list li{
    display: block;
    width: 30.90909090909091%;
    height: auto;
    position: relative;
    float: left;
    margin: 0 3.636363636363636% 3.636363636363636% 0;
}

.listings ul.properties_list li img.property_img{
    width: 100%;
    height: auto!important;
    vertical-align: top;
}


.listings ul.properties_list li .price{
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 15px 20px;
    background: #ffffff;
    color: #514d4d;
    font-family: "lato-bold", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;

    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
}


.listings ul.properties_list li:nth-child(3n+0){
    margin-right: 0;
}

.listings ul li .property_details{
    width: 87.64705882352941%;
    padding: 2.941176470588235% 5.882352941176471% 4.117647058823529% 5.882352941176471%;
    border-bottom: 1px solid #f2f1f1;
    border-left: 1px solid #f2f1f1;
    border-right: 1px solid #f2f1f1;

    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
}

.listings ul li:hover .property_details{
    border-bottom: 1px solid #808080;
    border-left: 1px solid #808080;
    border-right: 1px solid #808080;
}

.listings ul li .property_details h1{
    color: #666464;
    font-family: "lato-bold", Helvetica, Arial, sans-serif;
    font-size: 16px!important;
    font-weight: bold;
    margin-bottom: 5px;
    line-height: 28px;
}

.listings ul li .property_details h1 a{
    text-decoration: none;
    color: #666464;
}

.listings ul li .property_details h2{
    color: #9d9d9d;
    font-family: "lato-regular", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 26px;
    font-weight: normal;
}

.listings ul li .property_details .property_size{
    color: #676767;
}

.listings .more_listing{
    display: block;
    width: 100%;
    text-align: center;
    margin: 84px 0 22px 0;
}

.listings .more_listing_btn{
    text-decoration: none;
    padding: 20px 40px;
    border: 2px solid #bfd9f1;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -o-border-radius: 30px;
    color: #afcbe6;
    font-family: "lato-regular", Helvetica, Arial, sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;

    transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
}

.listings .more_listing_btn:hover{
    color: #a0c3e5;
    border: 2px solid #a0c3e5;    
}










/*  footer  */
footer{
    padding-top: 20px;
    background: #000;
}

footer .footer > ul{
    overflow: hidden;
}

footer .footer > ul > li{
    display: block;
    float: left;
    list-style: none;
    margin-right: 60px;
}

footer .footer > ul > li:last-child{
    margin-right: 0;
}


footer .footer > ul > li.links{
    width: 197px;
}

footer ul li.links > ul > li{
    display: block;
    width: 100%;
    list-style: none;
    margin-bottom: 27px;
}

footer ul li.links > ul > li:last-child{
    margin-bottom: 0;
}

footer .footer > ul > li.links li a{
    text-decoration: none;
    display: block;
    color: #fff;
    font-family: "lato-regular", Helvetica, Arial, sans-serif;
    font-size: 16px;
    letter-spacing: .5px;
    text-align: left;
}

footer .footer > ul > li.about{
    width: 327px;
}

footer ul li.about p{
    color: #fff;
    font-family: "lato-regular", Helvetica, Arial, sans-serif;
    font-size: 16px;
    letter-spacing: .5px;
    line-height: 34px;
    margin-top: -9px;
}

footer ul li.about > ul > li{
    display: inline-block;
    margin-right: 20px;
    margin-top: 30px;
}

footer ul li.about > ul > li:last-child{
    margin-right: 0;
}

footer ul li.about > ul > li a{
    background: url('../img/social_media.png') no-repeat;
}

footer ul li.about > ul > li a.facebook{
    display: block;
    width: 10px;
    height: 18px;
    background-position: 0 0;
}
footer ul li.about > ul > li a.twitter{
    display: block;
    width: 19px;
    height: 18px;
    background-position: -11px 0px;
}
footer ul li.about > ul > li a.google{
    display: block;
    width: 10px;
    height: 18px;
    background-position: -31px 0px;
}
footer ul li.about > ul > li a.skype{
    display: block;
    width: 17px;
    height: 18px;
    background-position: -43px 0px;
}

footer .copyrights{
    display: block;
    text-align: center;
    padding: 40px 0;
    margin-top: 60px;
    color: #fff;
    font-family: "lato-regular", Helvetica, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: .5px;
    border-top: 1px solid #D3D3D3;
}

footer .copyrights a.ph_link{
    font-family: "lato-bold", Helvetica, Arial, sans-serif;
    font-weight: bold;
    text-decoration: none;
}









/*  responsive css */


@media (max-width:1500px){
    .hero{
        height: 800px;
    }
}


@media (max-width: 1150px){
    .wrapper{
        padding: 0 40px;
        max-width: 1020px;
    }
    .search .advanced_search .arrow{
        top: -8px;
        right: 46px;
    }

    .search .advanced_search #check_in_date,
    .search .advanced_search #check_out_date,
    .search .advanced_search #min_price,
    .search .advanced_search #max_price{
        width: 46.27272727272727%;
        padding: 0 1.818181818181818%;
    }

    .search .advanced_search #check_in_date,
    .search .advanced_search #check_out_date{
        background: url('../img/calendar_icon.html') no-repeat;
        background-position: 95.08840864440079% 50%;
    }

    .search .advanced_search #keywords{
        width: 96.36363636363636%;
        padding: 0 1.818181818181818%;
    }

    footer .footer > ul > li{
        margin-right: 5.454545454545455%;
    }

    footer .footer > ul > li.links{
        width: 17.90909090909091%;
    }

    footer .footer > ul > li.about{
        width: 29.72727272727273%;
    }
}


@media (max-width:800px){
    .hero{
        height: 600px;
    }

    .hero .caption{
        width: 92.72727272727273%;
        padding: 0 3.636363636363636%; 
    }

    .hero .caption h3{
        margin: 0;
        left: 0;
    }

    header a.hamburger{
        display: block;
    }

    header nav{
        position: absolute;
        display: none;
        width: 92.72727272727273%;
        top: 95px;
        left: 3.636363636363636%;
        float: none;
        z-index: 20;
        overflow: hidden;
        background: #fff;
        border-top: 5px solid #bfd9f2;
    }

    header nav.active{
        display: block;
    }

    header nav .login_btn{
        float: none;
        display: inline-block;
        width: 100%;
        border: 0;
        margin: 0;
        padding: 20px 0;
        text-align: center;
        background: #f2f3f3;
    }

    header nav ul{
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 0;
    }

    header nav ul li{
        display: block;
        width: 100%;
        float: none;
        margin-left: 0;
    }

    header nav ul li a{
        display: block;
        padding: 25px 0;
        border-bottom: 1px solid #f2f3f3;

        transition: background .2s linear;
        -webkit-transition: background .2s linear;
        -moz-transition: background .2s linear;
        -o-transition: background .2s linear;
    }

    header nav ul li a:active{
        background: #f2f3f3;
    }

    header nav ul li a,
    header nav .login_btn{
        color: #1c3655;
    }

    header nav .login_btn:hover{
        background: #eaebeb;
    }

    header nav ul li:last-child{
        border: 0;
    }

    .listings ul.properties_list li{
        width: 46.36363636363636%;
        margin: 0 7.272727272727273% 7.272727272727273% 0;
    }

    .listings ul.properties_list li:nth-child(3n+0){
        margin: 0 7.272727272727273% 7.272727272727273% 0;
    }

    .listings ul.properties_list li:nth-child(2n+0){
        margin-right: 0;
    }

    footer .footer > ul > li{
        width: 29.6969696969697%!important;
        margin-right: 5.454545454545455%;
        margin-bottom: 100px;
    }

    footer .footer > ul > li:nth-child(3){
        margin-right: 0;
    }

    footer .footer > ul > li.links li a{
        text-align: center;
    }

    footer .footer > ul > li.about{
        text-align: center;
        float: none;
        display: inline;
        margin-right: 100%;
        overflow: hidden;
        border-top: 1px solid #000;
    }
}


@media (max-width:700px){

    .search .advanced_search #check_in_date,
    .search .advanced_search #check_out_date,
    .search .advanced_search #min_price,
    .search .advanced_search #max_price{
        width: 96.36363636363636%;
        padding: 0 1.818181818181818%;
        border-bottom: 1px solid #aac8e4;
    }

    .search .advanced_search #check_in_date,
    .search .advanced_search #check_out_date{
        background: url('../img/calendar_icon.html') no-repeat;
        background-position: 95.08840864440079% 50%;
    }

    .search .advanced_search #keywords{
        width: 96.36363636363636%;
        padding: 0 1.818181818181818%;
    }

    .search .advanced_search .search_fields{
        border-bottom: 0;
    }

    .search .advanced_search .field_sep{
        display: none;
    }
}


@media (max-width:500px){
    .hero .caption h2{
        font-size: 85px;
    }

    .hero .caption h3{
        font-size: 16px;
    }

    .search #search{
        width: 83%;
    }

    .listings ul.properties_list li{
        width: 100%;
        margin-bottom: 60px!important;
    }

    .listings ul.properties_list li:last-child{
        margin-bottom: 0!important;
    }


    .listings ul.properties_list li:nth-child(3n+0),
    .listings ul.properties_list li:nth-child(2n+0){
        margin:0;
    }

    .listings .more_listing_btn{
        display: block;
        width: 100%; 
        padding-left: 0!important;
        padding-right: 0!important;
    }

    footer .footer > ul > li.links,
    footer .footer > ul > li.about{
        float: none;
        width: 100%!important;
        margin-right: 0;
        margin-bottom: 0px;
        padding-bottom: 0px;
    }

    footer .footer > ul > li:last-child{
        padding-bottom: 0;
    }
}

}


div#content1 div{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
  width: 32%;
  height: 42%;
  margin: 1em;
  background-color: white;
}

.rightbox{
    height: 100px;
    width: 100%;
    text-align: center;
    border-radius: 5px
    vertical-align:top;
}

input, textarea, select {
 padding:3px;
 border:1px solid #333;
 border-radius:5px;
 width:200px;
 box-shadow:1px 1px 2px #333 inset;
 }


  input[type=submit]:hover, input[type=reset]:hover {
 background-color:green;
 }
input[type=submit]:active, input[type=reset]:active {
 background-color:green;
 box-shadow:1px 1px 1px #333 inset;
}
        • Partager sur Facebook
        • Partager sur Twitter
        AbcAbc6
          13 octobre 2017 à 4:38:24

          Bonjour, il est important d'avoir un code valide, tu peux regarder tes erreurs en utilisant le validateur https://validator.w3.org/

          Dans un premier temps on vas s'occuper de rendre ton html plus propre. Commence par supprimer TOUTES les balises <font> et <center>. En effet elles était déjà obsolète en HTML4 qui date de 1999.

          Ensuite on n'utilise pas les tableaux pour la mise en page -> à supprimer également.

          Pour styliser ton formulaire tu pourrais donner un largeur à tes label, ce serait plus sémantique et surtout tu pourras plus facilement adapté l'ensemble au responsive.

          L’attribut for des label n'est pas la pour décorer : il lie celui ci à l'input qui lui correspond, cet input est unique dans le document c'est pourquoi il lui faut l'attribut id avec la valeur correspondante à la valeur de l'attribut for. Ajoute un id aux input.

          Il est plus que vivement recommandé de modifier les valeurs de la meta author et description.

          Ta page est en français alors pourquoi déclarer la langue anglaise dans l'attribut lang de la balise html ? -> à changer.

          Ligne 51 la balise <br> sert à créer un retour ligne, point. Cela ne sert pas à créer des espacements entre les éléments, pour ce faire utilise les margin et padding des éléments. De plus tel qu'ils sont écrit à la ligne 51 il ne sont pas à la bonne place, un <br> ce place la où il y a du texte c'est à dire dans un paragraphe (ou dans un <td> dans ce cas ci).

          Ligne 53 tu utilises la balises <strong> j'espère que ce n'est pas pour mettre en gras ! Je ne vois pas l'utilité de cet balise à cet emplacement, surtout pour ce qui devrais être un sous titre. Utilise les balises h2 à h6 pour ce faire.

          Tant que l'on parle de titre ton <h1> est en fin de page, c'est en début qu'il doit ce trouver.

          Ligne 40 à 42 qu'as tu voulus faire la ??? Tu ouvres une section pour un simple titre de niveau 2 sans contenu ? Soit il n'y a pas de contenu et la section n'a pas lieu d'être (et de facto le titre non plus) soit tu à voulu donner un sous-titre de page, et la balise <section> n'a pas sa place à cet endroit.

          Pour l'input mail, il existe le type « email » (voir lien en fin de message) en l'utilisant tu bénéficieras du paterne inclut dans les navigateurs.

          Pour le contenu, la phrase « Au bout de 5envoies d'affilés vos messages partiront en spam. Veuillez faire un formulaire correct avec votre présentation et votre demande. » n'a pour moi aucun sens. C'est quoi un formulaire correct ? Il faut donner à vos visiteurs les informations dont il à besoin pour remplir le formulaire et ce dès la première saisie. L’attribut placeholder de la balise input est la pour ça. Il peut également être fait usage d'une zone information complémentaire obtenue au passage de la souris sur une image icône info par exemple. En tout cas cette phrase ne fait pas professionnel. Toutes les informations entrée par l'utilisateur sont à vérifier coté serveur. Le serveur devra renvoyer un message d'erreur pour informer l'utilisateur d'une mauvaise saisie.

          Ligne 101 ce n'est pas un titre de niveau 1 qui doit ce trouver là. Au pire un simple paragraphe.

          Un petit mot sur les liens, aireschasse.html Google ne comprend pas le terme aireschasse mais il analyse bien les mots clés dans le termes aires-chasse, de ce constat il est préférable de séparer les mots clés de votre page par un trais d'union dans l'url, donc aires-chasse.html .

          Outre le fait qu'il me parait important de (re)lire le cours HTML5/CSS3 de ce site, partie formulaire notamment, je vous recommande quelques lectures :

          Revient nous avec un HTML correctement écrit et nous regarderons ensemble le CSS et ce qu'il ne vas pas dans ce que tu souhaites faire.

          PS : pas besoin de « Besoin d'aide » dans le titre de ton sujet, si tu postes on ce doute que tu as besoin d'aide.

          -
          Edité par AbcAbc6 13 octobre 2017 à 4:42:07

          • Partager sur Facebook
          • Partager sur Twitter
          JCGAMELaChaine
            13 octobre 2017 à 7:35:49

            Waw super professionnelle comme réponse, merci beaucoup ça va beaucoup m'aider, je vais mettre tout au propre, lire les cours et je reviendrais. 

            Je ne saurais pas répondre a toute les question le code s'est fais au fur a mesure en fonction de ce que je trouvais sur le net et que j'arrivais a "modifier" pour intégrer sur le site. J'ai pas fais attention a tout ça, merci encore :D

            • Partager sur Facebook
            • Partager sur Twitter

            positionnement formulaire CSS/HTML

            × 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