5542 sujets

Sémantique web et HTML

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)
Bonjour,
Ohmygoodweb a écrit :
Avec l'attribut size=&quot;x&quot; (où x est égal à une valeur en pixels) ça devrait être possible Smiley smile


C'est un petit peu plus complexe que cela Smiley cligne :

Styler la balise <hr />

ps: de plus utiliser size c'est un peu old school.
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)
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>


Smiley biggrin Et voilà !

Modifié par thewebmachine (17 Feb 2011 - 15:55)
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..
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> !
Smiley smile

Modifié par thewebmachine (17 Feb 2011 - 21:25)
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)
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. Smiley ravi

En fait je me posais la question quand à styler une div en <hr/> mais je n'osais pas, va savoir pourquoi?


Big big Smiley smile

jean-marc
Modifié par jeanmarc (18 Feb 2011 - 15:15)