Je veux écrire une petite page html qui contient une petite fonction de recherche. Je veux écrire une page comme ça:

entrez la description de l'image ici J'ai créé les boutons mais je ne sais pas comment les aligner et les décorer pour qu'ils ressemblent à l'image ci-dessus. Je ne veux pas utiliser bootstratp mais ne le faire qu'en utilisant css. Mais je ne connais pas bien le CSS ...

L'idée que j'ai eue est d'utiliser une balise, voici donc mon code html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table>
    <tr>
      <td>Invoice Number :</td>
      <td>
        <input name="invoiceNumber">
      </td>

      <td>Invoice Supplier Name :</td>
      <td>
        <input name="invoiceSupplier">
      </td>
    </tr>

    <tr>
      <td>Invoice Status :</td>
      <td>
        <select name="invoiceStatus">

          <option> </option>
          <option> Import error </option>
          <option> Invoice control required </option>
          <option> Other Document </option>
        </select>
      </td>

      <td>Invoice Category :</td>
      <td>

        <select name="invoiceCategory">
          <option></option>
          <option>Invoice with PO and GR</option>
          <option>Invoice with GR</option>
        </select>
      </td>
    </tr>

    <tr>
      <td>Order :</td>
      <td>
        <select name="order">

          <option> Number </option>
          <option> Supplier </option>
          <option> Date </option>
          <option> Net Amount </option>
        </select>
      </td>
    </tr>

    <tr>
      <td>
        <button type="button">Search</button>
      </td>
      <td>
        <div class="detail">
          <button type="reset">Cancel</button>
        </div>
      </td>
    </tr>
  </table>

Mais je ne suis pas vraiment sûr que ce soit une bonne idée. Pouvez-vous s'il vous plaît aider à résoudre ce problème:

  • Comment puis-je aligner le bouton comme dans l'image? (boutons sur la même ligne, bouton de recherche et d'annulation sur le côté droit).
  • Comment puis-je décorer les boutons pour qu'ils ressemblent à l'image? Je veux dire, comment puis-je utiliser le CSS pour avoir des boutons bleus plutôt que les boutons par défaut?

Merci !

0
salamanka44 25 janv. 2017 à 12:17

6 réponses

Meilleure réponse

Vous pouvez aligner en utilisant le code html ci-dessous, mais le meilleur moyen est d'utiliser une structure basée sur div

 button{ background:#33b5e5; border:none; padding:12px 35px;color:#fff;margin-right:60px; display:inline-block; margin-top:10px;
    	}
    	select,input{ padding:6px; min-height:20px; vertical-align:middle; }
    	.mr-30{margin-right:30px;}
    	td{line-height:40px;}
     <table>
        <tr>
          <td>Invoice Number :</td>
          <td>
            <input name="invoiceNumber" class="mr-30">
          </td>
    
          <td>Invoice Supplier Name :</td>
          <td>
            <input name="invoiceSupplier">
          </td>
        </tr>
    
        <tr>
          <td>Invoice Status :</td>
          <td>
            <select name="invoiceStatus" class="mr-30">
    
              <option> </option>
              <option> Import error </option>
              <option> Invoice control required </option>
              <option> Other Document </option>
            </select>
          </td>
    
          <td>Invoice Category :</td>
          <td>
    
            <select name="invoiceCategory">
              <option></option>
              <option>Invoice with PO and GR</option>
              <option>Invoice with GR</option>
            </select>
          </td>
        </tr>
    
        <tr>
        
          <td colspan="4" style="text-align:right">
            <div class="detail">
            <button type="button">Search</button>
              <button type="reset">Cancel</button>
            </div>
          </td>
        </tr>
      </table>
0
Tom 25 janv. 2017 à 10:04

Kahn Academy fait un bon cours (et gratuit!) Sur les bases du HTML et du CSS. Ils continuent également à enseigner l'interactivité sur les pages Web en utilisant javascript, ce qui sera essentiel pour savoir si vous voulez que vos boutons fassent quelque chose une fois que vous les avez mis en valeur.

https://www.khanacademy.org/computing/computer-programming/html-css

0
Ben Currer 25 janv. 2017 à 09:34

Votre principal problème ici est que vous utilisez des tableaux pour structurer votre mise en page.

C'est la manière la plus obsolète de faire les choses qui soit.

Ce que vous pouvez faire maintenant, c'est apprendre les dernières méthodes CSS pour créer votre mise en page, en vous concentrant sur Grilles CSS.

Ensuite, vous pouvez mettre la main sur un pré-processeur CSS comme SASS, puis apprendre un framework approprié pour celui-ci, comme Bourbon.

Le moyen le plus récent et le plus efficace d'aligner les choses comme vous le souhaitez consiste à utiliser le Modèle Flexbox.

Dans la dernière version de CSS, il existe même une propriété de format de grille ce qui rendra les choses encore plus faciles.

0
Tanasos 25 janv. 2017 à 09:29
  1. Utilisez plutôt que parce que la structure de la table posera un problème dans la conception réactive.
  2. Utilisez la propriété CSS "display: inline-block" où vous souhaitez aligner les champs sur la même ligne.
  3. Utilisez la propriété CSS background-color, color, etc. pour décorer vos boutons.
0
Pooja 25 janv. 2017 à 09:29

Essayez avec une démo fonctionnelle, exécutez l'extrait et changez-le en plein écran

* {
   box-sizing:border-box;
   -moz-box-sizing:border-box;
   -ms-box-sizing:border-box;
   -webkit-box-sizing:border-box;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}
input, select {
	width: 100%;
	padding: 10px 15px;
}
table td {
	padding: 15px;
}
button {
	background: #33b5e5;
	border: none;
	padding: 12px 35px;
	color: #fff;
	margin-right:14px;
	display: inline-block;
	margin-top: 10px;
}
<table>
  <tr>
    <td>Invoice Number :</td>
    <td><input name="invoiceNumber"></td>
    <td>Invoice Supplier Name :</td>
    <td><input name="invoiceSupplier"></td>
  </tr>
  <tr>
    <td>Invoice Status :</td>
    <td><select name="invoiceStatus">
        <option> </option>
        <option> Import error </option>
        <option> Invoice control required </option>
        <option> Other Document </option>
      </select></td>
    <td>Invoice Category :</td>
    <td><select name="invoiceCategory">
        <option></option>
        <option>Invoice with PO and GR</option>
        <option>Invoice with GR</option>
      </select></td>
  </tr>
  <tr>
    <td>Order :</td>
    <td><select name="order">
        <option> Number </option>
        <option> Supplier </option>
        <option> Date </option>
        <option> Net Amount </option>
      </select></td>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td><button type="button">Search</button> <button type="reset">Cancel</button></td>
  </tr>
</table>
0
Jishnu V S 25 janv. 2017 à 09:56

Je pense également qu'il serait logique d'élargir votre base de connaissances. Il est très ancien d'utiliser un tableau pour formater votre mise en page. Par exemple, vous pouvez placer les deux boutons en dehors du tableau et leur donner une «marge gauche» avec css.

Pour la décoration des boutons, vous recherchez les attributs css couleur (blanc), couleur d'arrière-plan (bleu), remplissage, largeur et hauteur.

0
Mr. K. O. Rolling 25 janv. 2017 à 09:29