Sujet Précédent Sujet Suivant

Css / afficher un element a un endroit fixe par rapport a l'element parent

Fermé
nomdezeus - 9 juin 2020 à 23:13
 Totox - 10 juin 2020 à 02:32
Bonjour,
J'affiche un bouton carre avec un texte.
Je souhaite ajouter un petit rond dans le carre, dans le coin superieur droit, sans que le texte ne bouge.
Dans mon code, le rond ne se positionne pas en haut mais en bas.
Si quelqu'un peut m'aider svp?

a.html 
<html>
  <head>
<link rel="stylesheet" type="text/css" href="a.css"> 
</head> 
<body>
<button class='carre' ><div class='texte'>TEXTE</div></button>
<button class='carre' > <div class='texte'>TEXTE</div><div class='rond'></div></button>
</body>
</html>


a.css 
.carre {
   width:6em;height:6em;
   color:black;
   background-color: blue;
}
.texte {
}

.rond {
   width:10px;height:10px;border-radius:5px;
   margin-left: 80%;   margin-top: 20%;
   background-color: red;
}

2 réponses

Réponse 1 / 2
abracadabra
10 juin 2020 à 01:42
Cette page devrait t'etre utile.
https://www.pierre-giraud.com/html-css-apprendre-coder-cours/position/
0
Réponse 2 / 2
Totox
10 juin 2020 à 02:32
Salut,
Si un élément doit être positionné avant un autre autant le mettre avant!

Exemple: 


<body>
<span id='container'><p class='rond'></p></span>
<button class='carre' >texte</button>
<button class='carre' >texte</button>
</body>
</html>

J'ai supprimé les div ils ne servent à rien et rajoutent un élément de type bloc.
Autant styler carrément la classe nommée 'carre' ou alors rajouter une ID si vous voulez différencier les 2.
J'ai aussi passé le div avec la classe "rond" en élément de paragraphe.
DIV ne doit être utilisé qu'en dernier recours si l'élément n'a aucune valeur indicative, sinon il y a de nombreuses autres balises selon le type du contenu. Cela permet aussi d'utiliser un élément de type inline par défaut(il se positionnera donc sur la même ligne que son contenu s'il a la place suffisante).

Voici une modification possible pour ce que vous voulez: 

#container{
width:100%;
text-align:right;/* aligne le texte contenu à droite, donc p.rond sera positionné à droite*/
}
.rond {
   width:0.5em;height:0.5em;border-radius:0.3em;
   background-color: red;
}


Comme cela prendra une ligne il faut faire autrement si vos voulez que cette ligne ne soit pas visible. Par exemple inclure(imbrication de balises) les boutons dans #container et pourquoi pas changer de span à nav qui semble plus approprié pour des éléments de navigation ou de menus et utiliser un positionnement relatif ou absolu pour la classe rond.

https://www.w3schools.com/TAgs/tag_nav.asp

https://www.w3schools.com/cssref/pr_class_position.asp
0

Discussions similaires

Comment "inspecter l'élément" sur Mac ?
enzo2501 -
Axymimi -

12 réponses
programme qui n'affiche pas le mot secret
EMy.chev -
yg_be -

3 réponses
Comment inspecter l'élément sur mobile ?
Sally -
Sally -

2 réponses
Free : mon FreePlug classic est bloqué sur le voyant rouge
spark09 -
cc -

16 réponses
écrire un rapport de travail
asi -
REGINALD -

3 réponses