Discussion :

[mademoizel]

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.

[cedsun]

oui c'est possible.

Tu peux faire des tests avec <hr/>.

[mademoizel]

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?

[mLk92]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
hr{
 color: black;
}

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

[mademoizel]

Merci beaucoup. Je vais essayer

[tigunn]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[mademoizel]

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

Merci d'avance pour vos réponses

[mLk92]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[mademoizel]

OK, merci beaucoup. Je vais essayer.

[mademoizel]

c'est bizar ça marche pas

[mLk92]

Fais voir ton code html et css

[mademoizel]

Code CSS

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

</style>

Code html

<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.

[mLk92]

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