Impossible de décaler texte dans bordures

Impossible de décaler texte dans bordures - HTML/CSS - Programmation

Marsh Posté le 28-01-2018 à 16:19:51    

Bonjour à tous,

 

Je suis débutante avec le langage HTML/ CSS et j'ai beaucoup de mal avec le CSS en particulier. j'ai donc décidé de m'entrainer sauf que je rencontre plusieurs problèmes:
1. Mon texte tout en haut est décalé sur la droite, or je veux qu'il soit plaqué sur la gauche, comme sur une page normal, comme pour la ligne "né le..". Il s'agissait d'une liste à puce initialement.

 

2. Enfin, dans mes titres/bordures, je voudrais que mon texte soit décalé à la fois à droite et à gauche, pour ne pas le coller aux bordures, je n'ai réussis que la droite.

 

Je suis perdu, j'ai essayé plusieurs manipulations, me suis renseignée sur plusieurs sites spécialisées, mais rien à faire... Je vous serais très reconnaissante si vous pouviez m'aider, je perds espoir. Je suis sûre que ce ne soit pas être si compliqué que ça pourtant... Je joins mon code CSS.

 
Code :
  1. body {
  2. background: #BBCFDD;
  3. font-size: 14px;
  4. font-family: 'Old Standard TT', serif;
  5. }
  6. h1, h2 {
  7. color: white;
  8. display: inline-block;
  9. border-right : 0.2em;
  10. background: #357AB7;
  11. font-family: 'Oswald', sans-serif;
  12. padding: 0.2em;
  13. text-indent: 10px;
  14. }
  15. h1 {
  16. font-size: 60px;
  17. }
  18. h2 {
  19. font-size: 18px;
  20. }
  21. a {
  22. color: #915327;
  23. text-decoration: none;
  24. }
  25. #top li {
  26. list-style-type: none;
  27. display: inline-block;
  28. padding: 3px;
  29. }
  30. #trait_dessus {
  31. border-top: 3px solid #915327;
  32.  width : 100%;
  33. }
  34. footer
  35. {
  36. text-align: center;
  37. }
 

Merci beaucoup,
Elo21000


Message édité par elo21000 le 01-02-2018 à 12:55:12
Reply

Marsh Posté le 28-01-2018 à 16:19:51   

Reply

Marsh Posté le 29-01-2018 à 08:40:49    

Tu dois appliquer un reset des CSS du navigateur je pense.
Essayes avec * {margin: 0; padding: 0}
Si cela fonctionne, applique un reset plus élaboré

Reply

Marsh Posté le 29-01-2018 à 13:46:11    

Bonjour,
 
Cela serait vraiment plus simple avec le code HTML.
 
Pour le point #3 je ne suis pas certain de comprendre ce qui est à droite ou à gauche, mais si le texte n'est pas centré par rapport à l'élément c'est à cause de l'utilisation de text-indent qui ajoute à décalage à gauche du texte. Tout ça devrait pouvoir se gérer uniquement avec les différentes composantes du padding (haut, droite, bas et gauche).
 
Pour les titres h1 et h2 je ne vois pas l'intérêt d'utiliser un display inline-block. Pourquoi mélanger dans le document les unités em et px ? Mieux vaut rester cohérent quand c'est possible. Les écarts verticaux sont causés par la valeur CSS par défaut du margin des titres h1 et h2, il suffit de l'ajuster.
 
Pour le premier point, cela est possiblement aussi causé par la valeur CSS par défaut du padding des listes.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 01-02-2018 à 12:58:31    

Bonjour,
Merci pour vos réponses, j'ai finalement trouvé. Il fallait que j'utilise la balise padding et margin et de changer inline block en inline;
 
Bonne journée.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed