Exemples : bouton, lien associé à un bouton, innerHTML

Centrer une image et un champ sur l'image
Boutons ouvrant des pages Web

Ce texte est centré
et sur deux lignes, avec un bouton qui suit.

Le bord gauche de ce texte se trouve à 25% du bord gauche avec
une deuxième ligne.

Le centre de ce texte se trouve à 25% du bord gauche sur plusieurs lignes.

Le centre de ce texte se trouve à 75% du bord gauche sur plusieurs lignes.

Le centre de ce texte se
trouve à 25% du bord
gauche sur plusieurs
lignes.

Le centre de ce texte se
trouve à 75% du bord
gauche sur plusieurs
lignes.

Code :

<!-- en -tête -->
<h3 style="text-align:center;">Exemples : bouton, lien associé à un bouton, innerHTML</h3>

<!-- Centrer du texte -->
<div style="text-align:center;">
  <b>Centrer une image et un champ sur l'image</b><br>
  <b>Boutons ouvrant des pages Web</b><br>
</div>

<!-- Centrer tout le contenu du "div", avec une image de fond -->
<div style="text-align:center;">
  <div style="display:inline-block; background-image:url('../images/photo_mur.jpg'); width:1000px; height:750px;">
    <br>
    
    <!-- Un texte centré dans un "inline-block, avec des boutons ouvrant de nouvelles pages -->
    <div style="display:inline-block; background-color:#ffc0c0; border:solid 5px #ffc000; padding:8px;">
      Ce texte est centré<br>
      et sur deux lignes, avec un bouton qui suit.<br>
      <input type="button"  value="Ouvre une page dans une nouvelle fenêtre" title="Exemples de styles CSS"
             onclick="window.open('../a2css1090_liste_exemples_styles.html');"><br>
      <input type="button"  value="Remplace la page par une nouvelle page" title="Exemples de code javascript"
             onclick="window.location = '../a3js1090_javascript_exemples.html';"><br>
    </div>
    <br>
    <br>
    
    <!-- Positionnement du bord gauche d'une boite -->
    <div style="text-align:left; background-color:#808080; border:dashed 4px #ffff00;">      
      <div style="display:inline-block; position:relative; left:25%; background-color:#c0c0ff; border:solid 5px #ffffff; padding:8px;">
        Le bord gauche de ce texte se trouve à 25% du bord gauche avec<br>
        une deuxième ligne.<br>
      </div>
    </div>
    <br>
    <br>

    <!-- Positionnement du milieu de deux boites -->
    <div style="position:relative; text-align:left; background-color:#c0c0c0; border:dashed 4px #ffff00;">      
      <div style="display:inline-block; position:relative; left:calc(25% - 100px); width:200px;
                  background-color:#c0ffff; border:solid 5px #ffffff; padding:8px;">
        Le centre de ce texte se trouve à 25% du bord gauche sur plusieurs lignes.<br>
      </div>
      <div style="display:inline-block; position:absolute; left:calc(75% - 100px); width:200px;
                  background-color:#c0e0ff; border:solid 5px #ffffff; padding:8px;">
        Le centre de ce texte se trouve à 75% du bord gauche sur plusieurs lignes.<br>
      </div>
    </div>

    <!-- Trois marques, pour voir le 25%, 50% et 75% de la largeur de l'image de fond -->
    <div style="position:relative; text-align:left;"> 
      <img src="../images/BouleNoire.png" alt="noire" width="10" height="30" 
           style="position:absolute; left:25%; top:0px;">
      <img src="../images/BouleNoire.png" alt="noire" width="10" height="30" 
           style="position:absolute; left:50%; top:0px;">
      <img src="../images/BouleNoire.png" alt="noire" width="10" height="30" 
           style="position:absolute; left:75%; top:0px;">
    </div>
    <br>
    <br>
   
    <!-- Positionnement du milieu de deux boites -->
    <div style="position:relative; text-align:center;">      
      
      <div style="position:absolute; left:0px; top:0px; width:100%; background-color:#707070; border:dashed 4px #ff8000;">      
        <div style="display:inline-block; position:relative; left:-25%; text-align:left;
                    background-color:#c0ffff; border:solid 5px #ffffff; padding:8px;">
          Le centre de ce texte se<br>
          trouve à 25% du bord<br>
          gauche sur plusieurs<br>
          lignes.<br>
        </div>
      </div>
      
      <div style="position:absolute; left:0px; top:0px; width:100%;">
        <div style="display:inline-block; position:relative; left:25%; text-align:left;
                    background-color:#c0e0ff; border:solid 5px #ffffff; padding:8px;">
          Le centre de ce texte se<br>
          trouve à 75% du bord<br>
          gauche sur plusieurs<br>
          lignes.<br>
        </div>
      </div>
    </div>

  </div>
</div>

Rotation d'une image et
Création de code HTML en javascript

Regardez le code HTML, pour voir également le code javascript.

Plan du Site : Home bgweb.html exemples.html aprod2000_perso.html centre_button_innerhtml.html

Page mise à jour le 2 mars 2020 par Bernard Gisin
Hébergement par : www.infomaniak.ch