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;
}
A voir également:

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

écrire un rapport de travail
asi -
REGINALD -

Bonjour,
je veux bien que vous m'aidiez d'écrire un rapport de travail merci pour votre attentionConfiguration: Windows XP
Firefox 3.0.3

3 réponses
Durée d'une diapositive animée
bibibibi99 -
bibibibi99 -

Bonjour,

Je souhaite créer un diaporama entièrement automatisé (sans clic) sous PowerPoint 2010. J'ai donc établi les différent paramètres d'animation (durée, effet d'apparition, de disparition...) pour les titres, photos dans chacune de mes diapos (onglet animation). J'ai également choisi mes transitions entre chaque diapo (onglet transition). Jusqu'ici tout va bien.

Mon souci est la durée de chacune des diapositives. Je souhaiterai que le changement de diapo se fasse directement après la dernière animation de la diapo sans laps de temps.
Voici le problème :

Dans l'onglet transition, j'ai indiqué "passer à la diapositive suivante après ...

2 réponses
aidez-moi à m'amuser sur mon P.C!
Manola -
Screuscreu -

Bonjour,
Qui connait un site ou on creer son cheval et ou on peut s'en occupé et ou aussi on peut parler à des gens conectés qui jouent et qui on eux aussi un équidé?

2 réponses
Accés au cloud
Dadou1968 -
loisou17 -

Bonjour,
Je souhaite savoir si je peux accéder à mon cloud depuis le pc d'un ami? (si je ne suis pas chez moi)
Merci par avance.


3 réponses