Zone de recherche n'est pas aligné ?

saber01 -  
Bonjour,


<!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" />
<title>Document sans nom</title>
</head>

<body>
<form action="" method="post"><IMG src="medias/search_loupe.png" style="border:none; margin: 0px; outline:none; display:inline; text-align:center; background-position:center; height:24px;"><input name="cherche" type="text" class="zone_recherche" /><input name="chercher" type=image src="medias/btn_search.png"/></form>
</body>
</html>
<------------------ le probleme--------------------------->
je ne sais pas pour quoi l'image, la zone de texte et la bouton ne s'affiche pas alignement. cad dans le même ligne ?

5 réponses

  • Votes
  • Date
  • Date décroissante
  2. saber01
    Merci bq LaurentJ
    <-----voici ma css---->
    rq : il manque les images pour voir l'exemple clairement.

    @charset "utf-8";

    * {
    margin: 0;
    padding: 0;
    }
    body {
    margin: 10px;
    font: 0.8em "Trebuchet MS", Georgia, Arial;
    color: #565D79;
    background: #d70000 url(medias/bg.gif);
    }
    #content{
    background-color: #ffffff;
    width:892px;
    text-align:center;
    }

    #top_ban{
    width: 892px;
    height: 244px;
    background-image:url(medias/baniere.jpg);
    background-repeat: no-repeat;
    }
    #menu {
    font: 0.9em Tahoma, sans;
    text-align: center;
    list-style-type: none;
    margin: 0;
    height: 37px;
    line-height: 37px;
    background: url(medias/nav1.png) repeat-x;
    width:892px;
    }
    #menu li {
    display:inline;
    font-weight: bold;
    height: 24px;
    line-height: 24px;
    padding: 0px 0px 0 8px;
    text-decoration: none;
    font-size: 1.2em;
    text-align: center;
    color: #ffffff;
    font-variant: small-caps;
    font-weight: bold;

    }
    #menu li a {
    margin: 0 12px;
    color: #ffffff;
    text-decoration: none;
    }
    #menu a:hover {
    text-decoration: underline;
    }
    #menu2 {
    float: right;
    width: 180px;
    margin-right: 2px;
    padding-left: 2px;
    border-left: 0px solid #C0C0C0;
    }
    #menu2 li, #menu2 li a{
    display: block;
    color: #2A3976;
    height: 30px;
    line-height: 30px;
    background: url(medias/nav2.png) repeat-x left bottom;
    padding-left: 10px;
    }
    #menu2 li a:link, #menu2 li a:visited{
    background-color : #FFFFFF;
    border-top: 0px solid #000000;
    }
    #menu2 li a:hover{
    background-color : #B30000;
    color: #2A3976;
    border-left: 6px solid #BDC4E5;
    font-variant: small-caps;
    font-weight: bold;
    }
    #page{
    width: 570px;
    padding: 30px 10px 10px 20px;
    min-height: 400px;
    }
    #footer{
    width: 892px;
    height: 18px;
    padding: 2px;
    background-color: #990000;
    text-align: center;
    }
    #footer a{
    font-size: 0.8em;
    color: #ffffff;
    }
    a{
    text-decoration: none;
    color: #2E4FDD;
    }
    a:hover{
    text-decoration: underline;
    color: #6974C5;
    }
    img.img {
    border: 1px dashed #E1E2E8;
    padding: 6px;
    }
    #top_ban h1{
    color: #565D79;
    font: 1.4em Georgia, Arial;
    padding: 85px 0px 4px 10px;
    border: 0px solid #E1E2E8;
    font-weight: bold;
    font-variant: small-caps;
    }
    h1{
    color: #990000;
    font: 1.4em Georgia, Arial;
    border-bottom: 2px solid #B30000;
    border-left: 4px solid #B30000;
    text-align: left;
    font-variant: small-caps;
    margin: 10px 0px 10px 0px;
    padding: 0px 10px 0px 10px;
    }
    h2{
    width: 60%;
    color: #D60000;
    font: 1.2em Georgia, Arial;
    border-bottom: 1px solid #C0C0C0;
    margin: 10px 0 10px 0;
    padding-bottom: 3px;
    }

    ul {
    list-style-type: square;
    }
    ol{
    list-style-type: none;
    }
    li{
    list-style-type: none;
    margin-top: 12px;
    }
    p{
    width: 100%;
    margin: 12px 0px 30px 0px;
    }
    .class_haut {
    text-align:right;
    height: 15px;
    width: 892px;
    padding-right:6px;
    }
    .class_a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #990033;
    text-decoration: none;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 4px;
    margin-left: 4px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 4px;
    padding-left: 4px;
    }
    .formulaire_recherche_submit
    {
    font-family: "Trebuchet MS", serif;
    font-weight: bold;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    PADDING-TOP: 0px;
    margin: 0px;
    border:none;
    text-align:center;
    background-position: center;
    outline:none;
    display:inline;
    height:24px;
    }
    .zone_recherche
    {
    BORDER-RIGHT: #c3c3c3 1px solid;
    FONT-SIZE: 12px;
    BORDER-LEFT: #c3c3c3 1px solid;
    WIDTH: 200px;
    COLOR: #999999;
    PADDING-TOP: 3px;
    HEIGHT: 24px;
    text-align:center;
    background-position:top;

    }
    1. saber01
      merci boucuop LaurentJ
      <-----voici ma css------>
      Rq : il manque les images pour voir l'exp clairement.

      @charset "utf-8";

      * {
      margin: 0;
      padding: 0;
      }
      body {
      margin: 10px;
      font: 0.8em "Trebuchet MS", Georgia, Arial;
      color: #565D79;
      background: #d70000 url(medias/bg.gif);
      }
      #content{
      background-color: #ffffff;
      width:892px;
      text-align:center;
      }

      #top_ban{
      width: 892px;
      height: 244px;
      background-image:url(medias/baniere.jpg);
      background-repeat: no-repeat;
      }
      #menu {
      font: 0.9em Tahoma, sans;
      text-align: center;
      list-style-type: none;
      margin: 0;
      height: 37px;
      line-height: 37px;
      background: url(medias/nav1.png) repeat-x;
      width:892px;
      }
      #menu li {
      display:inline;
      font-weight: bold;
      height: 24px;
      line-height: 24px;
      padding: 0px 0px 0 8px;
      text-decoration: none;
      font-size: 1.2em;
      text-align: center;
      color: #ffffff;
      font-variant: small-caps;
      font-weight: bold;

      }
      #menu li a {
      margin: 0 12px;
      color: #ffffff;
      text-decoration: none;
      }
      #menu a:hover {
      text-decoration: underline;
      }
      #menu2 {
      float: right;
      width: 180px;
      margin-right: 2px;
      padding-left: 2px;
      border-left: 0px solid #C0C0C0;
      }
      #menu2 li, #menu2 li a{
      display: block;
      color: #2A3976;
      height: 30px;
      line-height: 30px;
      background: url(medias/nav2.png) repeat-x left bottom;
      padding-left: 10px;
      }
      #menu2 li a:link, #menu2 li a:visited{
      background-color : #FFFFFF;
      border-top: 0px solid #000000;
      }
      #menu2 li a:hover{
      background-color : #B30000;
      color: #2A3976;
      border-left: 6px solid #BDC4E5;
      font-variant: small-caps;
      font-weight: bold;
      }
      #page{
      width: 570px;
      padding: 30px 10px 10px 20px;
      min-height: 400px;
      }
      #footer{
      width: 892px;
      height: 18px;
      padding: 2px;
      background-color: #990000;
      text-align: center;
      }
      #footer a{
      font-size: 0.8em;
      color: #ffffff;
      }
      a{
      text-decoration: none;
      color: #2E4FDD;
      }
      a:hover{
      text-decoration: underline;
      color: #6974C5;
      }
      img.img {
      border: 1px dashed #E1E2E8;
      padding: 6px;
      }
      #top_ban h1{
      color: #565D79;
      font: 1.4em Georgia, Arial;
      padding: 85px 0px 4px 10px;
      border: 0px solid #E1E2E8;
      font-weight: bold;
      font-variant: small-caps;
      }
      h1{
      color: #990000;
      font: 1.4em Georgia, Arial;
      border-bottom: 2px solid #B30000;
      border-left: 4px solid #B30000;
      text-align: left;
      font-variant: small-caps;
      margin: 10px 0px 10px 0px;
      padding: 0px 10px 0px 10px;
      }
      h2{
      width: 60%;
      color: #D60000;
      font: 1.2em Georgia, Arial;
      border-bottom: 1px solid #C0C0C0;
      margin: 10px 0 10px 0;
      padding-bottom: 3px;
      }

      ul {
      list-style-type: square;
      }
      ol{
      list-style-type: none;
      }
      li{
      list-style-type: none;
      margin-top: 12px;
      }
      p{
      width: 100%;
      margin: 12px 0px 30px 0px;
      }
      .class_haut {
      text-align:right;
      height: 15px;
      width: 892px;
      padding-right:6px;
      }
      .class_a {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 10px;
      color: #990033;
      text-decoration: none;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 4px;
      margin-left: 4px;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 4px;
      padding-left: 4px;
      }
      .formulaire_recherche_submit
      {
      font-family: "Trebuchet MS", serif;
      font-weight: bold;
      PADDING-RIGHT: 0px;
      PADDING-LEFT: 0px;
      PADDING-BOTTOM: 0px;
      PADDING-TOP: 0px;
      margin: 0px;
      border:none;
      text-align:center;
      background-position: center;
      outline:none;
      display:inline;
      height:24px;
      }
      .zone_recherche
      {
      BORDER-RIGHT: #c3c3c3 1px solid;
      FONT-SIZE: 12px;
      BORDER-LEFT: #c3c3c3 1px solid;
      WIDTH: 200px;
      COLOR: #999999;
      PADDING-TOP: 3px;
      HEIGHT: 24px;
      text-align:center;
      background-position:top;

      }
      1. LaurentJ
        essaie cette mise en forme de ton code 
        
<body> 
<form action="" method="post">
  <table width="240" border="0">
    <tr>
      <td><img src="medias/search_loupe.png" /></td>
      <td><div align="center"><input name="cherche" type="text" class="zone_recherche"/></td>
      <td><img src="medias/btn_search.png"/></td>
    </tr>
  </table>
</form> 
</body> 
</html>


        inclure dans des cellules est plus facile pour tout aligner.
        2. saber01
          ca ne marche pas avec l'editeur dreamweaver c'est bon mais avec les browser ie et mozila le prob reste tjs

          Discussions similaires

          [référencement] Ne pas être référencé
          kij_82

          10 réponses
          Trouver le code source d'une page internet.
          Aline²

          9 réponses
          question Pix
          lcisse2

          4 réponses
          1fichier
          titi342

          1 réponse
          Impossible d'installer des chaînes (Thomson 32HE5606)
          Kone

          2 réponses