barre de séparation avec du CSS

Bonjour à tous,

Je réalise un site, et je souhaite séparer mon menu, mon en-tête ainsi que ma page centrale par des lignes de séparations.
Je souhaiterai personaliser ces lignes et je souhaite savoir s'il est possible de le faire avec CSS?

Merci d'avance pour vos réponses. :)

oui c'est possible.

Tu peux faire des tests avec <hr/>.

excuse moi, mais je vois pas trop comment faire.

Je sais bien qu'un hr constitue à faire une ligne de séparation, mais comment le personnalisé avec du css?

comme tout autre propriété se rapportant à une balise html

Code:

---

1 2 3 4

hr{ color: black; }

---

après si tu veux personalisé barre par barre tu peut y mettre une classe :)

Merci beaucoup. Je vais essayer

tu peux aussi utiliser une image (taille = just_les_pixel_qui_faut x 1px):
-tu definit une div avec cette image en fond répété horizontalement ou verticalement.
- position en absolute et un z-index pour peaufiner, là, ....

ma que c'est beau.
exemple:

Code:

---

1 2 3 4 5 6 7 8 9 10

div#page #bordure_externe_droite { position : absolute; margin: 0; width: 4px; height: 98%; right: 0px; background: url(images/container-bg.gif) repeat-y; z-index: 1; }

---

et puis dans ton code php, juste:

Code:

---

1 2 3

<div id="bordure_externe_droite"> <!-- bord droit de la page --> </div>

---

positionné dans div id="page".
bondev'

J'ai une autre question. Est-il possible de faire une de séparation mais en verticale?

Merci d'avance pour vos réponses

tu peux faire des séparations mais là ya pas de <hr/>, juste du css simple avec tes div.

Si t'a un bloc verticale, tu lui défini un bord à droite ou a gauche (selon ton sens) et tu peux écarté cette bordure du text avec une définition de l'espace internet de bloc.

ex: (séparation a droite)

Code:

---

1 2 3 4 5

#bloc{ border-right: taille couleur type; padding-right: taille; }

---

la taille peut etre 1 pixel ou plus (c la largeur de ta bordure) une couleur hexadécimal ou autre et un type (solide, dotted, etc.)

le padding-right c la distance entre ton text et ta bordure.

voila :)

OK, merci beaucoup. Je vais essayer.

c'est bizar ça marche pas

Fais voir ton code html et css :D

Code CSS

Citation:

---

<style type="text/css">
div
{
border-right: 750px magenta solid;
padding-right: 12px;
}

</style>

---

Code html

Citation:

---

<div></div>

---

Le résultat de ce code, n'est pas ce que j'attend. Autrement dit, il n'affiche pas une barre de séparation vérticale.

Logique ya rien dans ton div :)

Si tu ne mets rien dans ton div, défini lui au moins une taille ou bien mets y du text, met n'importe quel paragraphe :)

Petite précision (je sais pas si c'est ce que tu veux), la bordure verticale fera la même taille que ton div