{HTML} Une <hr> inline

{HTML} Une <hr> inline - HTML/CSS - Programmation

Marsh Posté le 14-11-2008 à 10:40:51    

Sur une page web, j'aimerais avoir une ligne horizontale accolée à du texte comme suit :

Citation :

------------------- Blabla


J'ai pensé au <hr> avec une width :

Code :
  1. <hr style="width: 450px; height: 3px;" />Blabla

Mais j'ai du mal à le rendre inline (par défaut le <hr> est block et donc mon texte est sur la ligne suivante) car dès que je rajoute "display: inline;" le <hr> prends une largeur nulle (enfin j'en ai l'impression).

Reply

Marsh Posté le 14-11-2008 à 10:40:51   

Reply

Marsh Posté le 14-11-2008 à 11:23:38    

http://www.zonecss.fr/style_css/fe [...] splay.html

Citation :

- inline, le bloc sera considéré comme étant un seule ligne (sauf nets version <6)
- block, spécifie un bloc.
- inline-block correspond à un élément inline avec un comportement bloc (non w3c). Compatible avec Internet Explorer, Opéra et Safari pour FireFox < 2 utiliser
- ...


essaye celui là ;)

Reply

Marsh Posté le 14-11-2008 à 11:23:55    

Une solution parmi d'autres :

<html>
<head>
<style type="text/css">
.left_hr {
   width: 180px;
   text-align: left;
}
</style>
</head>
<body>
<span class="left_hr"><hr></span>Bla bla
</body>
</html>


Message édité par olivthill le 14-11-2008 à 11:24:43
Reply

Marsh Posté le 14-11-2008 à 12:30:00    

omega2 > Dommage mais que ça ne soit pas W3C :(
 
olivthill > Ca ne change rien, j'ai toujours le <hr> sur toute la ligne (toute la largeur) et le texte la ligne du dessous.

Reply

Marsh Posté le 14-11-2008 à 13:04:31    

C'est étrange (de melon) parce que j'ai testé mon exemple et il marche chez moi (du capitole).

Reply

Marsh Posté le 14-11-2008 à 13:21:32    

Ca marche sous IE, mais pas sous FF...
A+,


---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --  AngularJS c'est un framework d'engulé!  --
Reply

Marsh Posté le 14-11-2008 à 14:40:32    

_Raynor_ a écrit :

omega2 > Dommage mais que ça ne soit pas W3C :(

 

mais si c ets juste sa source qui est moisie
http://www.w3.org/TR/CSS21/visuren.html#display-prop

 

edit:
@gilou: le -moz-inline-block marchait bien lui
mais je crois que ca a été corrigé sur ff3 si je ne m abuse
au pire float:left marchera partout :P


Message édité par mIRROR le 14-11-2008 à 14:42:09

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 14-11-2008 à 15:02:14    

Ah oui effectivement : inline-block est donc la solution :)
 
Merci :jap:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed