Placer un bouton CSS

Jujudufoot

Jujudufoot Le 23 juin 2016 à 18:14 (Édité le 25 janvier 2019 à 17:51)


Bonjour,

J'aimerai placer mon bouton "Envoyer" sur mon image à droite, comment faire ?

Merci !

Jujudufoot.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>ProgTuto - Programmation & Design</title>
      <link rel="stylesheet" type="text/css" href="css/style.css">
   </head>
   <body>
      <div class="accueil-haut">
         <img src="img/fond-accueil.jpg" width="100%" height="700px" />
      </div>
      <div class="accueil-bouton">
         <input type="submit" name="Je m'incris">
      </div>
   </body>
</html>

/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/CSS/

.accueil-haut
{
   margin: -10px;
    display: inline-block;
}
.accueil-bouton
{
   position: relative;
}

Jujudufoot

Jujudufoot Le 23 juin 2016 à 18:15

Balatharas

Balatharas Le 23 juin 2016 à 19:25

Tu veux superposer le bouton sur l'image ?
TheOldNoob

TheOldNoob Le 23 juin 2016 à 19:28

Salut l'ami,

Plusieur possibilité s'offre a toi 😀


tu peu lui mettre un float: right;
tu peu lui mettre un margin-left: 97%; (mais tu va avoir une petite marge)

Dans les deux cas, ça va bouger ton bouton a droite 😉
TheOldNoob

TheOldNoob Le 23 juin 2016 à 19:29

ah j'avais pas vu que tu la voulais dans l'image !
Laisse moi 3 minutes le temps de m'occupé d'un monstre  de 3,5ans et j'arrive
TheOldNoob

TheOldNoob Le 23 juin 2016 à 19:46

Tiens, tu peu essayé ça 😀

         <style> // remplacer la balise style dans ton fichier style.css 😀
            body {
                background-size: 100%; // va prendre la totalité de ton body
                background-image: url(img/fond-accueil.jpg); // cherche la source de l'image
                background-repeat:no-repeat; // Ne va pas répété l'image
            }
            .accueil-bouton {
                position: absolute;
                right: 0; // va se coller a 0 pixel du bord de droit
                bottom: 0; // va se coller a O pixxel du bas de page
            }
          </style>
    </head>
    <body>
        <div class="accueil-haut">
           <div class="accueil-bouton">
               <input type="submit" name="inscription" value="je m'inscris" >
            </div>
      </div>  
    </body>
Jujudufoot

Jujudufoot Le 24 juin 2016 à 11:44

Merci, mais le bouton n'est pas superposé, il est en bas à droite de l'image, je voudrais aussi que mon image s'agrandisse et rétrécisse quand j'étire la fenêtre, pour le moment elle ne fais que grandir !
Ades03

Ades03 Le 24 juin 2016 à 15:35

Je peux te conseiller d'utiliser la fonction css "z-index" je ne m'y connais pas trop mais je peux peut être te donner un code je ne sais pass si il marchera mais bon, on a rien sans rien: 

<!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>test Vignette Charles</title>
<style>
   div {height: 100px; width: 100px;}
div#test1 {position: absolute; z-index: 4;}
div#test2 {position: absolute; z-index: 2;}
div#test3 {z-index: 10;}
div#test4 {position: relative; z-index: 8;}
</style>
</head>    
    
   <div id="test1"><img src="data:image/jpeg;base64,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" /></div>
<div id="test2"><img src="data:image/jpeg;base64,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" /></div>
<div id="test3"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH0AAAB7CAMAAABuB38KAAAAq1BMVEVMTEzZ2dkmJib/gQCZmZnf39////87Ozurq6uzs7MhISFERESvr68qKir/gwAAAABDSk49SU/Pz883SFBRTUuhoaHHx8eRkZGsaCk1NTUvLy/y8vJsVENmU0S+vr4cHBypZi5fUEiAWj/Ucx3lehXzfgCRXzXp6elYT0jtexGOXjqDWzudYjGqZTTZdhi5bCXJcCGEhIRgYGBvb2+2aS3FbypWVlZvVj5bUUI0JYpmAAAEXklEQVRoge3b63aiOhQA4ESkiLYxIGoVL4jglQJ1tJ33f7IDdlQSdSaEsjldy/3Lrq72c+e6EwU9ncM2+ztUdnz80tULic6veu9aq3QcoZb20bjWTQRhf/k6r5tA9DG0CavbfajM02i924yu7iB19IEZ3QTFUctk9N4AVB/0WH0Iqg9ZfaKB6loDq/Yf3V6qDWhdxamf6Hbyogodq4m+xFXp2EY2rk5fomWFOkb4oT/0n6RTaqRBKbhOqTVzF4HjOMHCHVs530ExnRrjIPZ8XyGEKIrvxc6nYQDpiR2vFTbW822O/AvodBQR5TqIt7FEfXm943o37DT8eNwpWacb/w6ehLcV631ZnQb37bT591aJOh39JfMjPxbpe1n9Xp+fYi/0b+R0+sanepzwlzgINbykvpoztB/G0WHuKac3QLzfYnNOSufGuzNbJTPcmo2c9ZdPRoITXk7fZ5p57Z4nt2Fsw3TF3ZS72swz+lt2ahszx1deBW1J3cqMeJ/v4s+DMC6pZzrd539JBVdZeT076D7zFxUF9exac4DWmVGnxCtpX27GsRt7uLDyFDSF9QW3znqBZcg0gFzLj/lNhvixeEVTVKeOwgfx52+/8zaApL7iq8ljePt8Ja3s/m64t/Rkow2DPDNAurJy7hQ3JFyIl9TyNe3+tp5ELFRVFdM7d4ta4guWtIVOE258L/v1tsTa5sRbi0s1xY1+sb2n2CnSSPK/2f4kFPr7widoy3W8G/mTjUjXF789oHQWhOTqDXglnibYMAw3XvO+yMD7pnsbikZ7bvF14PS0A7jjfCxwnPnGOyvaYbb9cAaqJ/4hO+xK1W/s5XThw+h0FgfXvrsGyj1Kzuj8XsbkPl+VpncCcryd6jA+0++RwL+RrKw2f9bT+WZ1bn9qMHc5QVnznWb6N3zbfk1saxtlcV+kxJDRafYkRdIL0iiKYs9nFpu5yGFSKveQX9PJ1S5DhO5OJHQrUv4dUVnVhXW/nryMhrEILtXyxuIfNvEEq1q5Mb8N/6p7pd5ZJSep1zvlZJr5XBSXXmk7Y76aOMU6ADjLUGO8D6/qWeK9CideRE+rmdU2CtfkHIp3WMxyfS5U8FOhjrEaucFrEk76kVQn5w3Kd1TU58j9tz//s8iH/tAf+kN/6D9HB/5mI6cDf7OR06egepPT26Df5m3zeg2QH17rL1DDvjWsXeu12stAa5Ue2rBZu6nXas3y4+jc1qHiof9f9CmoPmV0PGk1AfGmpuOsjn9BJj/dmYyuTjS45JunLe6cO+5Owfj2+wk962p/2obwm9P2Dl/pWDXfW4OXsmM42J2andETv6c/lx26ji84RmaWh4iMh5HO/AgbJupWh6sT1J1Up+toUu9VpZs6UvuVtf1ER3aj/2xWM/IaPfS07NbrlfS93l+ipyfcr9f1ngky2S+z3tT7DTt9SktP+G5XB43npMV7X0+o4eQlePT10/Nxy2d4vGFfnglVe7D562b6dN5/JAeU/Sf0k74AAAAASUVORK5CYII=" /></div>
<div id="test4"><img src="data:image/jpeg;base64,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" /></div>
</body>
</html>
Voilà pour toi peut être un exemple plus concret explication: J'ai juste superposé 4 images les unes au dessus des autres tu peux peut être changer le css et creer un bouton avec une classe en utilisant z-index...

Dis moi si cette reponse te convient ou pas !! 
Vous devez être connecté pour poster une réponse. Se connecter ou Créer un compte