28112 sujets

CSS et mise en forme, CSS3

Positionnement de 2 images

Bonjour j'aimerai positionner mes 2 images une en bas à droite et l'autre en bas à gauche.
juste au dessus du footer
mais lorsque le fait les images s’alignent a gauche voici mon code
<!DOCTYPE html>
<html lang="en" dir="ltr">
     <head>
          <meta charset="utf-8">
          <title>liste</title>
          <link rel="stylesheet" href="style.css">
     </head>
     <body style="background-image: url('mam.png');">
        <div id="main-container">
		
            <form>
                <div class="mon-menu">
                   
                    <span align="center">Nouvelle demande</span>
                    <span>Ajouter un medecin</span>
                    <span>Historique des naissances</span>
                     </div>
                     <div class="im">
                        <img src="parametre.png">
                     </div>
                     <div class="aid">
                        <img src="aide.png">
                     </div>

            </form>
            
            <footer id="footer">
                <div id="footer" align="center">
                Made by Tymas-CSG
            </div>
                        
            </footer>
        </div>
     </body>

</html>
#im {
position: absolute;
bottom: 0;
left: 0;
width: 100%;}

#footer {
	
	color: #fff;
	background-color: rgb(121, 121, 121);
	padding: 30px 0px 0px 0px;
	border-radius:2px;
	border-top: 2px solid rgb(22, 166, 214);
	position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 2rem;
  box-shadow: 1px 1px 12px rgb(22, 166, 214);
 
    
	}


body {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	font-weight: 100;
	font-size: 12px;
	line-height: 30px;
	color: rgb(8, 8, 8);
	background: rgb(241, 240, 240);
	background-repeat: no-repeat;
	
	
  }

  label {
	width: 250px;
	display : inline-block;
}


#aid {
	float: right;
	margin: 0;
	color: #636360;
	width: 100%;
	padding: 0;
	bottom: 0;
	right: 0;
	position: absolute;

}


.mon-menu span
{
	background-color:rgb(209, 209, 209);
	padding:6px;
	display:block;
	width:20%;
	margin:10px;
	border-radius:5px;
	
}

.mon-menu span:hover
{
	
		box-shadow: 1px 1px 12px rgb(22, 166, 214);
}

Merci pour votre aide
Bonjour,
Déjà, une id est unique, ce qui n'est pas le cas :

<footer id="footer">
      <div id="footer" align="center">
            Made by Tymas-CSG
      </div>
</footer>

Ensuite, tu as :

<div class="aid">
<div class="im">

que tu essaie de sélectionner avec :

#aid {
#im {

Comment peux-tu sélectionner une class avec un id ???
Merci js, une inattention de ma part.Mais malgré que j'ai resolu tout ça ,cela ne change rien
Modérateur
Salut,

Apres avoir pris en compte les corrections de js_html et avoir un peu rangé ton code (indentation, ordre des selecteurs, propriétés comme float:right; inutiles etc.) Smiley sweatdrop ton soucis viens du fait que tes div im et aim prennent 100% de la largeur. Donc y'ne a bien une a droite et une a gauche mais elles font 100% toutes les deux et le texte est aligné a gauche donc les images sont superposées.

Soit tu laisses ca comme ça et tu met un text-align:right; sur un des deux, soit tu donnes une width a tes div, soit tu places directement les images plutôt que du les mettre dans des div (c'est pas utile ici).

Bonne journée Smiley smile
Modifié par _laurent (17 Dec 2020 - 11:03)
Merci laurent, j'ai enlevé les Div et placé les images directement et j'ai aussi réduit les width
mais toujours pareil Smiley decu
Modérateur
Bonjour,

Sans toucher au html intial (mis à part les id qui sont en doublons pour le footer), on peut remplacer :

#im {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;}

et

#aid {
	float: right;
	margin: 0;
	color: #636360;
	width: 100%;
	padding: 0;
	bottom: 0;
	right: 0;
	position: absolute;
}

par

form {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.mon-menu
{
	grid-column: 1 / 3;
}
.im {
	grid-column: 1;
	text-align: left;
}
.aid {
	grid-column: 2;
	text-align: right;
}

Amicalement,
Merci parsimonhi, le code est super j'ai enfin pu les mettre l'un a l’extrême droite et l'autre a gauche mais ne descendent pas jusqu'au footer. upload/1608210716-81318-sanstitre.png j'aimerai qu'ils se trouvent juste au dessus du footer
Modérateur
Bonjour,

Tout ça dépend beaucoup de la taille du contenu dans wrapper, et de la manière dont il s'affiche si ça dépasse.

Eventuellement, tu peux utiliser le code suivant (on retire complètement ma proposition précédente) :

.im {
	position: absolute;
	left: 0;
	bottom: 2rem;
}
.aid {
	position: absolute;
	right: 0;
	bottom: 2rem;
}


EDIT: il faudra sans doute mettre plus que 2rem pour bottom. À toi de voir ce qui sera nécessaire.

Amicalement,
Modifié par parsimonhi (17 Dec 2020 - 16:18)
Meilleure solution
Sujet clos
Aller à