Boîtes et bordures

• Boîtes
• Supprimer les bordures d'une boîte
• Boîtes de notes
• Bordures
• Bordures et grilles

Boîtes

• Utilisez des boîtes pour circonscrire du texte ou d'autres éléments.
• Quatre couleurs sont disponibles pour les bordures de vos boîtes : noir, bleu moyen, gris pâle et blanc.
• Les bordures peuvent être minces (1 pixel) ou épaisses (3 pixels).

Note : Pour rendre plus visibles ces exemples de boîtes à bordures blanches, un arrière-plan noir a été ajouté.

Supprimer les bordures d'une boîte

• Vous pouvez supprimer une, deux, trois ou quatre bordures d'une boîte.
• Utilisez l'une ou l'autre des classes suivantes pour supprimer des bordures :
  
  
  • noBorder (aucune bordure)
  • borderBottomNone (pas de bordure inférieure)
  • borderLeftNone (pas de bordure à gauche)
  • borderRightNone (pas de bordure à droite)
  • borderTopNone (pas de bordure supérieure)

Boîte de notes (.noteBoxB)

• Utilisez les boîtes de notes pour insérer du texte ou d'autres éléments.
• Les boîtes de notes doivent avoir un arrière-plan bleu pâle dégradé, des bordures bleu pâle de 1 pixel et des coins arrondis.
• La couleur utilisée pour l'arrière-plan et les marges internes ne peut être changée. Ne modifiez pas l'épaisseur ni la couleur des bordures.

Exemple

Code :

<div class="noteBoxB margin12 width40 alignTopRight floatLeft">
<p>Cette boîte de notes a des marges externes de 12&nbsp;pixels et une largeur à 40&nbsp;%. La boîte de notes est positionnée à gauche du texte qui lui, est justifié en haut à droite. L'arrière-plan par défaut est bleu pâle dégradé.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="clear"></div>

Résultat :

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Bordures

• Quatre couleurs de bordures sont disponibles : noire, bleu moyen (B), gris pâle (I) et blanc.
• Les bordures peuvent être minces (1 pixel) ou épaisses (3 pixels).
• Les classes de bordure sont les suivantes :
  
  

  Bordures supérieures Toutes les couleurs, minces ou épaisses	Bordures inférieures Toutes les couleurs, minces ou épaisses
  .borderTopBlackthin .borderTopBlackthick .borderTopBthin .borderTopBthick .borderTopIthin .borderTopIthick .borderTopWhitethin .borderTopWhitethick	.borderBottomBlackthin .borderBottomBlackthick .borderBottomBthin .borderBottomBthick .borderBottomIthin .borderBottomIthick .borderBottomWhitethin .borderBottomWhitethick
  Bordure de gauche Toutes les couleurs, mince ou épaisse	Bordure de droite Toutes les couleurs, mince ou épaisse
  .borderLeftBlackthin .borderLeftBlackthick .borderLeftBthin .borderLeftBthick .borderLeftIthin .borderLeftIthick .borderLeftWhitethin .borderLeftWhitethick	.borderRightBlackthin .borderRightBlackthick .borderRightBthin .borderRightBthick .borderRightIthin .borderRightIthick .borderRightWhitethin .borderRightWhitethick

Exemple

Boîte à quatre bordures

Code :

<div class="borderTopBlackthin borderRightIthick borderBottomBthick borderLeftBthin">Cette boîte a une bordure supérieure mince noire, une bordure de droite épaisse gris pâle, une bordure inférieure épaisse bleu moyen et une bordure de gauche mince bleu moyen.</div>

Résultat :

Boîte à deux bordures

Code :

<div class="borderBottomBthick borderLeftBthin">Ce texte a une bordure inférieure épaisse bleu moyen et une bordure de gauche mince bleu moyen.</div>

Résultat :

Bordure sur un côté

Code :

<div class="borderBottomBthick">Ce texte a une bordure inférieure épaisse bleu moyen.</div>

Résultat :

Bordures et grilles

• Vous pouvez aussi appliquer des bordures aux cellules des grilles CSS
• Les classes CSS suivantes sont disponibles :
  border-span-1
border-span-2
border-span-3
border-span-4
border-span-5
border-span-6
border-span-7
border-span-8
border-span-9
border-span-10
border-span-11
border-span-12
border-bottom
border-left
border-right
border-top
• La classe de la grille doit s'apparenter à la classe de la bordure. Par exemple, span-2 va avec border-span-2.

Exemples

Bordure de base

Code :

<div class="span-3 border-span-3">
<p>Insérez le texte ici.</p>
</div>
<div class="clear"></div>

Résultat :

Bordure et arrière-plan

<div class="span-3 background-light border-span-3">
<p>Insérez le texte ici.</p>
</div>
<div class="clear"></div>

Résultat :

Bordure et en-tête avec arrière-plan

<div class="span-3 border-span-3">
<h2 class="background-light">Heading</h2>
<p>Insérez le texte ici.</p>
</div>
<div class="clear"></div>

Résultat :

Bordure sur un côté

Code :

<div class="border-right">
<div class="span-3 background-light">
<h2 class="background-accent">Heading</h2>
<p>Insérez le texte ici.</p>
</div>
</div>
<div class="clear"></div>

Résultat :

Évaluez cette page

Le contenu de cette page m'a été utile.

Pas utile 1

2

3

4

Très utile 5

x Fermer