un problème avec HR

atheo · Message par **atheo** » 09 déc. 2013, 13:07

Dans une page un peu longuette et touffue je voulais mettre un petit trait par la balise hr

Donc je bricole ma feuille CSS de cette manière :

hr {
height: 2px;
width: 50%;
background-color: #339999;
}

Et plutôt que me coller un petit trait je me tape pratiquement toute la largeur de la page...

Quand je vais dans notepad++ ci-dessous et que je mets 50% à la place de 100 % là c'est correct...

<hr style="width: 100%; height: 2px;" /><br />

Mais qu'alors y faire ?
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:25.0) Gecko/20100101 Firefox/25.0

atheo · Message par **atheo** » 17 déc. 2013, 13:46

Ben voilà tout est dans le titre.
A priori je dois être le seul à l'avoir essayé ?

Sans réponse je me noie dans la Chimay !
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:25.0) Gecko/20100101 Firefox/25.0

chriss.. · Message par **chriss..** » 17 déc. 2013, 18:54

Bonjour,
parce que le message est incompréhensible (enfin pour moi). Je vais essayé de démêler cela.

tu as dans le Html ceci <hr style="width: 100%; height: 2px;" /> donc avec une largeur de 100%, il seras prioritaire sur le fichier CSS.
Et ensuite sans avoir tout le code est-ce que le contenaire <body> ou autre à une grandeur? parce que sinon sur quoi veut tu te baser, 50% de quoi ?
Votre Navigateur : Mozilla/5.0 (Windows NT 6.0; rv:26.0) Gecko/20100101 Firefox/26.0

atheo · Message par **atheo** » 18 déc. 2013, 07:55

bonjour et merci pour ta réponse.

Je tente d'être plus clair.

Et bien dans Kompozer, on peut insérer une ligne horizontal (Insertion/Ligne horizontale)
Ce que j'ai fait. d'où une ligne qui fait la largeur de ma "Div Contenu" Contenu c'est là où je mets mon laïus et qui a une largeur de 100%

Sous Notepad++ je suis allé voir ce qu'il m'avait généré et ai trouvé cela :

<hr style="width: 100%; height: 2px;" /><br />

Les 100% sont mis automatiquement par Kompozer.

J'ai donc réduit à 50 % et ma ligne horizontale s'est donc raccourcie d'autant et toujours bien centrée.

Je me suis donc dit, autant créer une règle CSS et j'ai donc créé celle-ci :
hr {
height: 2px;
width: 50%;
background-color: #339999;
}

Mais Kompozer n'en tient pas compte... d'où mon désarroi !

Mais ce n'est pas grave et normalement j'en survivrai
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:25.0) Gecko/20100101 Firefox/25.0

chriss.. · Message par **chriss..** » 18 déc. 2013, 12:55

Bon matin,
ok, je comprends mieux.... Mais je ne peux te répondre n'utilisant pas Komposer, Juste Notepad++.
Désolé.
Ps: à moins que Komposer te rajoute à chaque fois le style

Votre Navigateur : Mozilla/5.0 (Windows NT 6.0; rv:26.0) Gecko/20100101 Firefox/26.0

atheo · Message par **atheo** » 18 déc. 2013, 13:09

Bon ce n'est pas grave.

Je fais une correction en rafale par notepad++ et c'est rectifié.
C'est juste que j'aime bien comprendre...

Je n'avais pas vu que tu étais du Québec.
Mon gamin travaille à Montréal à l'école de technologie supérieure (ETS) comme chercheur
J'y vais de temps à autres.
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:25.0) Gecko/20100101 Firefox/25.0

Message par **chinon37** » 18 déc. 2013, 17:11

Bonjour,

Oui, par défaut, il est appliqué un style interne à la balise <hr> lors de l'insertion, avec une longueur de 100% et une épaisseur de 2px.
Si des règles différentes sont définies dans une feuille de style, les règles de la feuille de style ne s'appliqueront pas en raison de ces styles internes. En effet, les styles internes étant lus en dernier lors de l'ouverture de la page, ce sont eux qui seront appliqués.
Il faut donc supprimer ces styles internes.
Pour cela, on peut passer par l'onglet mixte ou l'onglet source et supprimer

Code : Tout sélectionner

style="width: 100%; height: 2px;"

.
On peut aussi le faire par l'éditeur css. Il suffit de faire un clic droit sur la balise hr dans la barre de taches en bas de l'écran, puis clic droit> styles internes > boite > supprimer 100% dans "largeur".
Si <hr> n'apparait pas dans la barre de tâches, on peut le faire apparaitre en ouvrant l'explorateur DOM à gauche de l'écran, puis en développant body. La balise <hr> apparaitra alors en bas de l'écran.
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0

atheo · Message par **atheo** » 19 déc. 2013, 07:22

Merci Chinon pour cette explication...

Tu dis :

"Pour cela, on peut passer par l'onglet mixte ou l'onglet source et supprimer "
Mais je ne sais pas si ce conseil est judicieux, car c'est ce qui foutait la pagaille dans les feuille CSS les trop fameux "*|"
Je viens de refaire l’essai... Ça marche à tous les coups.

La solution notepad me plait beaucoup plus.
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:25.0) Gecko/20100101 Firefox/25.0

Message par **chinon37** » 19 déc. 2013, 10:25

Au temps pour moi, j'avais oublié ce "fameux" bogue!!
Pour qui ne veut pas passer par Notepad++ (ou tout autre éditeur de texte), il reste la la méthode 2.

Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0

Geckozone

un problème avec HR

un problème avec HR

et mon hr... ça ne branche personne ?

Re: un problème avec HR

Re: un problème avec HR

Re: un problème avec HR

Re: un problème avec HR

Re: un problème avec HR

Re: un problème avec HR

Re: un problème avec HR

Qui est en ligne ?