Donner une taille à la balise <hr/>[résolu]

Auteur
jeanmarc	# 16 Feb 2011, 19:56:08
7 Posts	Bonjour, est-il possible de donner une taille à <hr/>? cad augmenter l'epaisseur je viens de faire plusieurs essais, mais rien de bon Merci Modifié par jeanmarc (18 Feb 2011 - 00:36) C'est pas avec un ticket de zoo que l'on se promène dans la jungle.
7 Posts
Ohmygoodweb	# 16 Feb 2011, 20:00:06
11 Posts	Avec l'attribut size="x" (où x est égal à une valeur en pixels) ça devrait être possible
11 Posts
Igor	# 16 Feb 2011, 20:12:10
Modérateur 6072 Posts	Bonjour, Ohmygoodweb a écrit : Avec l'attribut size="x" (où x est égal à une valeur en pixels) ça devrait être possible C'est un petit peu plus complexe que cela : Styler la balise <hr /> ps: de plus utiliser size c'est un peu old school.
Modérateur 6072 Posts
Hermann	# 16 Feb 2011, 20:18:42
4418 Posts	Bonsoir, le moteur de rendu d'IE (jusqu'à sa version 7 au moins) fait du HR un élément inline (non dimensionnable donc) et non block comme les autres navigateurs. D'après mes souvenirs il est nécessaire de supprimer les marges verticales pour IE : `hr {display:block; margin : -7px 0;}` Modifié par Hermann (16 Feb 2011 - 20:19)
4418 Posts
thewebmachine	# 17 Feb 2011, 15:55:03
2 Posts	Bonjour, Il est possible d'ajouter à la balise <hr/> un style via la feuille de styles CSS associée, par exemple: `hr { color:red; width:200px; }` Malheureusement, IE supporte mal ce style, puiqu'il considère <hr/> comme une balise de type inline. Donc, le mieux est de procéder de la manière suivante : 1)Entourez votre <hr/> d'un <div> et donnez-lui le style css suivant: `hr { display:none; }` 2)Mettez le style désiré sur la balise <div> directement ! ------------- Récapitulatif ------------- Côté css, ça nous donne ça : `hr { display:none; } div#firsthr{ width:50px; color:blue; }` Et côté html, nous avons : `<div id="firsthr"> <hr/> </div>` Et voilà ! Modifié par thewebmachine (17 Feb 2011 - 15:55) Roxane Anquetil Formatrice Indépendante (Bureautique, Informatique, Pao et Dao) Tèl : 06 22 72 86 93
2 Posts
Ten	# 17 Feb 2011, 16:38:52
372 Posts	Le <hr /> perd un peu son intérêt dans ce cas, non? Il semblerait plus simple de créer une div avec un classe="hr" par exemple, et d'appliquer les styles en questions.. Je vois la vie en #ffoodd
372 Posts
thewebmachine	# 17 Feb 2011, 17:03:51
2 Posts	Oui il est vrai que finalement dans ce cas, le <hr/> n'est plus important ... Il vaut mieux carrément l'éliminer je suis tout à fait d'accord, puisque sa mise en forme css apparaît très différente selon le navigateur : http://www.sitepoint.com/examples/hr/ ! Dans mon exemple, il est en mode display:none, mais autant l'enlever directement du Html et le remplacer par une <div> ! Modifié par thewebmachine (17 Feb 2011 - 21:25) Roxane Anquetil Formatrice Indépendante (Bureautique, Informatique, Pao et Dao) Tèl : 06 22 72 86 93
2 Posts
joska	# 18 Feb 2011, 00:00:32
95 Posts	Si tu veux vraiment inclure ta ligne dans le html tu peux peut etre utiliser <br class="line" /> Et le styliser en css. Je pense que c'est l'élément html qui se rapproche le plus de <hr />. Modifié par joska (18 Feb 2011 - 00:01)
95 Posts
jeanmarc	# 18 Feb 2011, 00:34:49
7 Posts	Bon ben c'est super, encore merci à tous, si avec toutes ces conseils je n'arrive pas à styler mon <hr/>, il va me falloir une sérieuse remise en question. En fait je me posais la question quand à styler une div en <hr/> mais je n'osais pas, va savoir pourquoi? Big big jean-marc Modifié par jeanmarc (18 Feb 2011 - 15:15) C'est pas avec un ticket de zoo que l'on se promène dans la jungle.
7 Posts

Sujet clos