Tutorial CSS

Mes bordures

Mardi 20 Mars 2007 à 9h42

Dans mon visuel je les trouve :

Autour du Bloc Menu (Forum, S'abonner et les Archives)
Autour de l'introduction du Journal
Sous le titre des écrits
Dans le visuel par défaut les bordures sont pointillées et de couleur orangé (#EF991E)

Voyons la balise qui défini les bordures en CSS :
border Pour spécifier que mes bordures sont :

Pointillées : dashed

Couleur : ici #EF991E pour orangé.

L'épaisseur de ma bordure en px ou em.

Emplacement de la bordure il s'agit en rajoutant top, left, right, et bottom.
Ce qui me donnera quelquechose ressemblant à :

border-right: 0.2em dashed #EF991E;

Bordure de droite pointillée orangée et de 0.2em d'épaisseur.

Etudions un peu notre feuille CSS et particulièrement la partie concernant le Bloc Menu:

#blocmenu {
  background: url(fond07.png) no-repeat bottom right;
  width: 10em; float: left;
  border-right: 0.2em dashed #EF991E;
  border-top: 0.2em dashed #EF991E;
  border-bottom: 0.2em dashed #EF991E;
  padding-right: 1em; margin-right: 1em;
  padding-left: 1.5em; padding-bottom: 5em;
  padding-top: 1em;
  margin-top: 2em;}

Nous retrouvons nos trois bordures, haut, bas et droite.
La premiere ligne background concerne un éventuel fond que l'on pourrait lui rajouter, mais j'y reviendrais une autre fois.
Les margin qui permettent de placer le bloc, et les padding qui permettent de placer le texte à l'intérieur du bloc.
Et nous découvrons la balise width qui permet de fixer la largeur du bloc.

Je peux donc facilement changer l'épaisseur et la couleur de la bordure.
Je veux par exemple la bordure de droite gris clair et de 2pixels (px) d'épaisseur:

border-right: 2px dashed silver;

Nous avons vu dashed pour une bordure pointillée, mais nous pouvons aussi utiliser:

dotted: pointillée fin
dashed: pointillée grossier
solid : pleine
double : double
groove; ridge; inset; outset : les bordures 3D qui passent très bien sous Fire Fox, mais qui ne passe sous Internet Explorer que pour des épaisseurs de bordure supérieur à 5px (à vérifier).

Je veux ma bordure de droite pleine, grise, et de 2px d'épaisseur:

border-right: 2px solid silver;

Je peux maintenant modifier la couleur, le style et l'épaisseur des bordures du bloc menu.
Voyons les autres bordures que l'on trouve dans notre feuille CSS.

Les bordures autour de l'Intro du Journal :
texte_journal

#texte_journal {
  border: 2px dashed #EF991E;
  margin-bottom: 2em;
  padding: 0.5em;
  font-family: Georgia, "Times New Roman", Times, serif;
  background: url(fond00.gif) no-repeat bottom right;
  min-height: 5em;
  margin-top: 0.8em;}

On peut configurer notre bordure:

border: 2px dashed #EF991E;Que je transforme pour obtenir une bordure pleine, gris claire et de 2px d'épaisseur:

border: 2px solid silver;

Je remarque que je peux donner aussi une police particuliere, et meme mettre une image de fond à mon Intro.

La bordure sous le Titre des Ecrits: h2

h2 { border-bottom: 0.1em dashed #EF991E; margin-bottom: 1em; }

Une seule bordure, vers le bas (bottom) de 0.1em d'épaisseur, pointillée, de couleur orange, et avec un espace de 1em entre la bordure et le titre h2. Je voudrais une bordure pleine, grise claire, de 2px d'épaisseur :

h2 { border-bottom: 2px solid silver; margin-bottom: 1em; }

Et Voilà!

Si j'avais oublié ou mal expliqué quelque chose, merci d'avance de me le signaler dans le forum.

• Forum
• S'abonner