Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • PHP5 avancé
  • Memento MySQL
  • Memento CSS 3
  • WordPress 3 100% pratique
  • Memento HTML5
Auteur
jeanmarc
#
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.

^
Ohmygoodweb
#
19 Posts
Avec l'attribut size="x" (où x est égal à une valeur en pixels) ça devrait être possible Smiley smile

^
Igor
#
Modérateur
6072 Posts
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.

^
Hermann
#
4519 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)

^
thewebmachine
#
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>


Smiley biggrin 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

^
Ten
#
553 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

^
thewebmachine
#
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> !
Smiley smile

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

^
joska
#
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)

^
jeanmarc
#
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. 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)

C'est pas avec un ticket de zoo que l'on se promène dans la jungle.

^