[HTML] Barre de séparation en dégradé

Bonjour à tous,

Je précise tout d'abord que je suis débutant en HTML, mais mon client me demande de m'y interresser alors je m'y met un peu. Merci de votre compréhension.

Maintenant que ceci est dit voici mon problème.

J'aimerai ajouter à ma page une barre ayant l'apparence de la piece jointe, c'est à dire une barre Orange en degradé de même couleur qui servirait donc de séparateur et ce sur toute la ligne.

Le problème c'est que je ne peux pas ajouter cette image puisque le but est que la barre prenne toute la ligne même en cas d'agrandissement de la page. Un peu comme les balises <HR>.

J'aimerai donc savoir comment créer un style (ou même sans style peut être, enfin je pense que c'est ca, ca ne fait que deux jours que je fais du HTML :oops: ) qui me permettrait d'unir deux à trois balises <HR> de couleurs différentes et de taille 1 qui me permettrait ainsi de donner l'apparence d'un degradé.

Il y aurait peut être une autre solution qui consisterait a reduire mon image a un Pixel de large et de la répéter sur la longueure de la ligne, mais si possible cette solution ne doit pas être utilisée.

Merci de votre attention et merci pour les futures réponses, meme si c'est pour dire que ce n'est pas possible.

PS : Je cherche également ou trouver un index des couleurs utilisables en HTML. Merci encore et pardon pour mon ignorance :?

Pourquoi tu ne peux pas utiliser la technique avec une image de 1px de large ?


sinon voici quelques couleurs web

Bonjour cedsun,

Merci tout d'abord pour la palette de couleur.

Ensuite pour répondre a votre question, il est préférable de ne pas utiliser d'insertion d'image pour une question de portabilité de la page. En effet moins il y à d'objet a transferer et plus c'est simple pour l'utilisateur. Voilà pourquoi je recherche une solution avec plusieurs borne <HR>.

Mais je ne met pas cette solution au rebus, je ne l'utiliserai qu'en dernier recours. Cela fonctionne en effet très bien.

<img src="Separation.gif" height="4" width="100%" />

Mais j'aimerai une autre solution :) si c'est possible biensur.

Merci encore.

Ce n'est donc pas possible, si tu ne veux pas d'image...

Si tu n'as que 3 couleurs, tu peux jouer avec les bordures et la couleur de fond. Le problème est que la balise hr ne réagit pas de manière standard sur les différents navigateurs. En général on fait quelque chose du genre dans ce cas:

Code:

---

<div class="sep"><hr /></div>

---

Code:

---

1 2 3 4 5 6 7 8 9 10

.sep{ background-color:#FF8C40; border-top:2px solid #FF7010; border-bottom:2px solid #FFC6A0; height:2px; }   .sep hr{ display:none; }

---

Bonjour a tous,

Merci pour vos réponses, et merci pour la solution des trois couleurs en bordures, j'ai passé l'après midi a essayer ça, mais le résultat n'etait pas satisfaisant. Avec votre méthode ca fonctionne mieux, mais ce n'est pas encore ça. Donc je vais garder la solution de l'image même si ce n'est pas celle que j'aurais préférée.

Je vais donc fermer ce post, mais c'est domage de ne pas pouvoir utiliser une solution autre que par l'insertion d'une image.

Merci à tous et j'espère qu'un jour c'est moi qui pourrait vous aider :D

Au revoir.

Il ne faut pas insérer une image, mais placer cette image en background du <hr /> en CSS.