Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
726 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Impossible de décaler texte dans bordures

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Impossible de décaler texte dans bordures

n°2310508
elo21000
Posté le 28-01-2018 à 16:19:51  profilanswer
 

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
mood
Publicité
Posté le 28-01-2018 à 16:19:51  profilanswer
 

n°2310516
David Bori​ng
Posté le 29-01-2018 à 08:40:49  profilanswer
 

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é

n°2310525
MaybeEijOr​Not
but someone at least
Posté le 29-01-2018 à 13:46:11  profilanswer
 

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.
n°2310661
elo21000
Posté le 01-02-2018 à 12:58:31  profilanswer
 

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.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Impossible de décaler texte dans bordures

 

Sujets relatifs
[VBA] Lecture fichier texteimpossible de liberer la mémoire
impossible de rentrer dans le whileConnexion à la base impossible sur 1 PC
suppression de fichier impossible[HTML/CSS]Centrer un texte sur tous les navigateurs
[pgsql] ☑ impossible de se connecter avec nouvel utilisateurrécupérer texte d'un formulaire pour une fonction javascript
texte decalé dans div en float 
Plus de sujets relatifs à : Impossible de décaler texte dans bordures


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR