Bonjour,

J'effectue le cours de HTML5, CSS3 et je veux entourer mes titres h1 et h2 en border: 2px black solid;

sauf que comme vous le constatez mon contour les contours remplissent l'écran à gauche et à droite, comment puis-je faire pour que mes border ne se fasse que sur le texte .

Au passage j'aimerai savoir comment faire pour que les numérotation 1,2,3,4 et les boules se centre avec leurs textes associés

je vous joint mon code html et css

Bonjour,

C'est tout à fait normal. Une balise <h1>, <h2>... etc. est une balise de type block. Ce qui veut dire que par défaut elle prendra 100% de la largeur de ta page. Il existe plein d'autres balise de type block, telles que <p>.

Donc tu peux tout simplement éditer ton CSS pour indiquer la largeur maximal que prendra une balise <h1>

h1, h2 {

  width: 150px;
  border: 2px solid black;

}

Et pour ta liste, c'est le même problème, <ul> est une balise de type bloc, tout comme <li> il me semble ...

-
Edité par GrandGTO 16 août 2017 à 15:58:33

Au passage je te conseille fortement d'enlever l'adresse mail de ton pseudo, sinon tu es bon pour te faire hameçonner par le moindre bot  ou personnage malveillant qui passeraient par là.

Bonjour,

la bonne méthode n'est pas de fixer une largeur à H1, car on ne sait pas ce que sera la largeur du texte chez l'utilisateur lambda, et d'autre part le texte est susceptible de changer, de même que la police utilisée. De plus on ne gère pas l'espace à droite et à gauche du texte.

Utiliser <span></span> :

<h1><span class="h1-contenu">Mon Titre</span></h1>

CSS :

h1 {
  text-align:center;	
  padding:5px;
}

.h1-contenu {
  border:1px solid darkorange;
  padding:5px 10px;
}

le padding sur le h1 pour prendre en compte le padding sur le span.

ChrisLebure a écrit:

Bonjour,

la bonne méthode n'est pas de fixer une largeur à H1, car on ne sait pas ce que sera la largeur du texte chez l'utilisateur lambda, et d'autre part le texte est susceptible de changer, de même que la police utilisée. De plus on ne gère pas l'espace à droite et à gauche du texte.

Utiliser <span></span> :

<h1><span class="h1-contenu">Mon Titre</span></h1>

CSS :

h1 {
  text-align:center;	
  padding:5px;
}

.h1-contenu {
  border:1px solid darkorange;
  padding:5px 10px;
}

le padding sur le h1 pour prendre en compte le padding sur le span.

Merci, j'essaie ça et je reviens pour vous confirmer si sa marche.

EDIT: sa ne marche absolument pas rien ne se passe...

-L0Lock- a écrit:

Au passage je te conseille fortement d'enlever l'adresse mail de ton pseudo, sinon tu es bon pour te faire hameçonner par le moindre bot  ou personnage malveillant qui passeraient par là.

Je voudrais bien mais en tentant de changer mon pseudo il me dit que je l'ai déjà changer une fois, j'avais l'intention d'aller demander au support s'il y en a un. 

Si tu as les droits je veux bien que tu me le modifie pour : Exochasse

Merci

-
Edité par exochasse 17 août 2017 à 23:04:55

exochasse a écrit:

ChrisLebure a écrit:

EDIT: sa ne marche absolument pas rien ne se passe...

-
Edité par exochasse 17 août 2017 à 23:04:55

Hello,

Bien sûr que ça marche, c'est juste que tu n'as pas bien appliqué/compris la méthode...

Bonjour,

que veux-tu dire par "rien ne se passe" ?
poste ton code HTML et CSS qu'on regarde le problème

J'ai réussi en utilisant en partie les méthodes proposées :

T'as mal du comprendre comment fonctionne la balise <p> à mon avis. Tu ne peux pas fermer des balises sans les avoir ouvertes avant, ça n'a aucun sens. J'ai entouré en rouge là où c'est le cas :