[HTML/CSS] -> balise <HR>

-> balise <HR> [HTML/CSS] - Programmation

Marsh Posté le 25-01-2002 à 17:57:08    

salut,
 
j'arrive pas a trouver une propriété/attribut qui me permettrait de définir une image quelconque a la place de la ligne dessiné par la balise <HR> .
je sais qu'il est possible de le faire avec les pustules des <ul> mais avec <HR> je trouve pas .
 
quelqu'un a une idée ?
 
merci

Reply

Marsh Posté le 25-01-2002 à 17:57:08   

Reply

Marsh Posté le 25-01-2002 à 17:59:56    

:lol: T trop fort... <IMG SRC=""> tu connais ? :D


---------------
A+++ Bruce - http://www.bheller.com
Reply

Marsh Posté le 25-01-2002 à 18:00:28    

les balise HR ne prennent en compte que les parametre NOSHADE, WIDTH, HEIGHT, COLOR
 
c'est ce qu'il me semble, a vérifier.

Reply

Marsh Posté le 25-01-2002 à 18:00:56    

Bruce a écrit a écrit :

:lol: T trop fort... <IMG SRC=""> tu connais ? :D  




 
je pense qu'il veu eviter de faire un <br><img src=...><br>

Reply

Marsh Posté le 25-01-2002 à 18:04:10    

skylight a écrit a écrit :

 
 
je pense qu'il veu eviter de faire un <br><img src=...><br>  




 
C pas faisable autrement...


---------------
A+++ Bruce - http://www.bheller.com
Reply

Marsh Posté le 25-01-2002 à 18:31:07    

ok, merci skylight : les attributs HTML je les ai vu et c'est bien maigre, je pensais qu'avec les CSS il aurait été possible de définir une image  ... en clair j'esperais trouver une propriétés CSS genre list-style-image mais pour les <hr> -> tout ce que j'ai essayé ne donne rien ..   :crazy:  
 
bruce non seulement tu es tres fort pour te moquer mais en plus tu sors un bon paquet d'anneries a la minute en parlant sans savoir sans compter qu'en plus le texte de mon 1er message n'est pas une affirmation mais plus une question .
 
-> le <hr> sans parametres permet d'automatiquement séparer la largeur de la page ... un <img> ne le fait pas ou alors faut donner une largeur en % (100%) mais ca merde sur certain navigateurs + versions   :sarcastic:

Reply

Marsh Posté le 25-01-2002 à 18:44:06    

potiron a écrit a écrit :

ok, merci skylight : les attributs HTML je les ai vu et c'est bien maigre, je pensais qu'avec les CSS il aurait été possible de définir une image  ... en clair j'esperais trouver une propriétés CSS genre list-style-image mais pour les <hr> -> tout ce que j'ai essayé ne donne rien ..   :crazy:  
 
bruce non seulement tu es tres fort pour te moquer mais en plus tu sors un bon paquet d'anneries a la minute en parlant sans savoir sans compter qu'en plus le texte de mon 1er message n'est pas une affirmation mais plus une question .
 
-> le <hr> sans parametres permet d'automatiquement séparer la largeur de la page ... un <img> ne le fait pas ou alors faut donner une largeur en % (100%) mais ca merde sur certain navigateurs + versions   :sarcastic:  




 
Ecoute, si je me moque un peu c que je te trouve très marrant, je te donne la solution et tu critique en plus ! J'ai bien vus que ton premier message était une question, je suis pas polio non plus...
Pour forcer un retour à la ligne je te rapelle qu'il y as un moyen simple : <BR>.
Si tu veux une séparation de paragraphe, ajoute <p> </p>
Et si tu veux une barre horizontale ayant une texture, le seul moyen existant est d'utiliser une image... Donc <IMG SRC="">... Ya pas de secrets.


---------------
A+++ Bruce - http://www.bheller.com
Reply

Marsh Posté le 25-01-2002 à 19:44:52    

skylight a écrit a écrit :

les balise HR ne prennent en compte que les parametre NOSHADE, WIDTH, HEIGHT, COLOR
 
c'est ce qu'il me semble, a vérifier.  




 
color ca marche que dans IE déjà...
y a le CSS sinon pour la couleur compatible avec les autres
mais on sait pas faire plus que ça je pense

 

[edtdd]--Message édité par antp--[/edtdd]


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 25-01-2002 à 19:46:07    

antp a écrit a écrit :

 
 
color ca marche que dans IE déjà...
y a le CSS sinon pour la couleur compatible avec les autres
mais on sait pas faire plus que je pense  




bah IE respecte le W3C au moins ;)

Reply

Marsh Posté le 25-01-2002 à 19:48:13    

ok, merci a ... tous  :D  
 
pas grave, j'ai trouvé une super solution pour faire ce que je voulais -> je decoupe un bout de papier en rectangle sur lequel je dessine ma separation et je le ballade sur l'ecran a l'endroit voulu .. l'effet est genial ... maintenant va falloir convaincre les visiteurs du site de faire pareil  :D  :lol:

Reply

Marsh Posté le 25-01-2002 à 19:48:13   

Reply

Marsh Posté le 25-01-2002 à 19:50:17    

potiron a écrit a écrit :

ok, merci a ... tous  :D  
 
pas grave, j'ai trouvé une super solution pour faire ce que je voulais -> je decoupe un bout de papier en rectangle sur lequel je dessine ma separation et je le ballade sur l'ecran a l'endroit voulu .. l'effet est genial ... maintenant va falloir convaincre les visiteurs du site de faire pareil  :D  :lol:  




 
 :??:  :??:

Reply

Marsh Posté le 25-01-2002 à 20:53:24    

skylight a écrit a écrit :

 
bah IE respecte le W3C au moins ;)  




 
:heink:
:??:
:lol:
t'en as d'autres comme ça ?
 
http://www.w3.org/TR/html4/present [...] tml#h-15.3
 
je vois pas de "COLOR" :p


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 25-01-2002 à 21:23:24    

ouaip, le navi qui ce rapproche le + est NS6 ou Opera 6 sauf erreur mais alors surtout pas IE !
 
la W3C a envoyé une note a M$ pour leur dire que leur navigateur derivait du standart qu'il essayait de mettre en place, M$ a repondu (a peu pres) qu'ils pouvaient aller ce faire foutre avec leur norme !   :o

Reply

Marsh Posté le 25-01-2002 à 22:09:57    

pkoi mettre un tableau de 100% de largeur avec ton image en background ???


---------------
ma vie, mon oeuvre - HomePlayer
Reply

Marsh Posté le 26-01-2002 à 05:22:53    

un truc possible est de définir la couleur de <hr> comme transparente et de lui assigner une image de fond. il faut alors spécifier la hauteur :
 
hr
{
  height: 40px;
  color: transparent;
  background-image: url('image.jpg';);
}
 
si tu veux avoir juste une copie de l'image, tu la centres et tu spécifies 'aucune répétition' pour le fond :
 
hr
{
  ...
  background-position: center center;
  background-repeat: no-repeat;
}
 
problème : ie6 et mozilla dessinent un cadre autour de la balise.
 
solution mozilla : rajouter  
  border: solid 0px;
 
solution ie6 : je cherche toujours ... c'est typiquement le genre de petit truc qui agaaaaace. grrr ...

Reply

Marsh Posté le 26-01-2002 à 05:51:20    

en suivant ton idée d'utiliser les listes, en voici un qui marche sous ie6 :
 
hr
{
  height: 0px;
  width: 0px;
  display: list-item;
  list-style-image: url('image.jpeg';);
  list-style-position: inside;
}
 
et évidemment (:D) ça ne marche pas sous mozilla ... mais je n'ai pas la toute dernière build. à tester ...

Reply

Marsh Posté le 26-01-2002 à 06:36:03    

pour rester simple :D ...
 
la propriété qui contrôle le type d'affichage est 'display'. sa valeur 'block' est le mode d'affichage de <div> : le rectangle formé par l'élément prend toute la largeur du document. par défaut, <img> est 'inline', ie elle s'affiche à la suite du texte, et du texte juste derrière sera affiché juste après. <span> marche de la même façon qu'une image.
 
maintenant, tu te fais ta classe :
 
.myHR
{
  display: block;
  height: 40px;
  background-image: url('image.jpg';);
  background-repeat: no-repeat;
  background-position: center center;  
}
 
tu peux l'utiliser un peu partout, ça produira le même résultat avec des balises différentes - balises qu'il FAUT fermer.
 
<p class='myHR'></p>
<span class='myHR'></span>
<div class='myHR'></div>
 
etc ... (c'est une histoire de goût - perso j'utilise <span> pour ce genre de trucs)
 
pour être le plus compatible possible, je pense que tu devrais utiliser le tag image, avec une classe spécifique pour spécifier le 'retour à la ligne' et l'alignement. ça te permettra aussi d'utiliser plusieurs types d'images dans ton document pour faire l'équivalent de <hr>.
 
.myHR2
{
  display: block;
  text-align: center;
}
 
<img src='image.jpg' class='myHR2'>
 
et voilà ... t'as plus qu'à choisir :D

Reply

Marsh Posté le 26-01-2002 à 11:07:44    

youdontcare :  
ah bon sang alors la BRAVO http://complet1.free.fr/i/c/biggthumpup.gif http://complet1.free.fr/i/c/biggthumpup.gif
 
j'avais fait des tests mais les miens ont rien donné .. comme quoi j'aurai du plus insister au lieu de laisser tomber !
 
j'en connais un qui doit etre entrain de cherche un trou de souris pour s'y cacher ...  :lol:
 
---------------
 
je viens de tester ta 1ere soluce et re-BRAVO http://complet1.free.fr/i/c/biggthumpup.gif, ca fonctionne partout (IE/NS/Opera) et je suis presque sur que ca fonctionnera jusqu'au 4.x  :D  
 
 
j'en profite pour te poser une question , la je suis sur d'avoir une reponse intelligente  :D  
 
tu preferes utiliser <span> .. pourquoi ?
je sais que <span> ne fonctionne qu'avec 1 type d'element mais je les utilise jamais (div/span) .. surement a tort .
quand j'ai besoin d'appliquer un CSS a un element je definie juste un class= ou au pire un style= ...

 

[edtdd]--Message édité par potiron--[/edtdd]

Reply

Marsh Posté le 26-01-2002 à 11:30:09    

potiron a écrit a écrit :

youdontcare :  
ah bon sang alors la BRAVO http://complet1.free.fr/i/c/biggthumpup.gif http://complet1.free.fr/i/c/biggthumpup.gif
 
j'avais fait des tests mais les miens ont rien donné .. comme quoi j'aurai du plus insister au lieu de laisser tomber !
 
j'en connais un qui doit etre entrain de cherche un trou de souris pour s'y cacher ...  :lol:  
 
 




 
un certain Br... ? :D

Reply

Marsh Posté le 26-01-2002 à 11:47:41    

>> je viens de tester ta 1ere soluce et re-BRAVO http://complet1.free.fr/i/c/biggthumpup.gif, ca fonctionne partout (IE/NS/Opera) et je suis presque sur que ca fonctionnera jusqu'au 4.x  :D  
 
:) j'ai quand même un cadre sous ie6 qui entoure l'image ... ça ne se voit pas si tu utilises une image carrée. mais pour un truc un peu spécial / transparent / etc., c'est pas très beau.
 
>> tu preferes utiliser <span> .. pourquoi ?
je sais que <span> ne fonctionne qu'avec 1 type d'element mais je les utilise jamais (div/span) .. surement a tort .
quand j'ai besoin d'appliquer un CSS a un element je definie juste un class= ou au pire un style= ...  
 
comme je le disais plus haut, c'est juste une histoire de goût. j'ai appris l'html et les css complètement sur le tas (et j'en ai encore appris avec ces messages :D) et la première manière que j'ai vue d'appliquer un style sur un texte était de passer par <span>. c'est tout.  
 
ne te focalise pas sur le type de balise que tu utilises, tu peux de toute façon redéfinir la majorité des comportements d'une balise avec les css (ie faire se comporter un <span> comme un <blockquote>, un <p> comme un <li>, etc. tu trouves que c'est le merdier ? moi aussi :D)

Reply

Marsh Posté le 26-01-2002 à 12:02:22    

bon ben si ce n'est qu'une question de gout je vais continuer avec mes class  :D  
 
merci

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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