Utilisateur:RockyRoad/Brouillons/Infoboites

Un article de Wikipédia, l'encyclopédie libre.

Sommaire

1 Une Infofox, de classe infobox
2 Une Infobox, de class infoboite
- 2.1 sectionnement de la boite
3 Exemples tirés de la Charte Graphique
- 3.1 Footballeur
- 3.2 Société
4 Exemple importé de en: Infobox Hospital
5 Suite

[modifier] Une Infofox, de classe infobox

Titre de la boîte
entête colonne	entête colonne
un texte long	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.
un nom	une valeur
un th h4 (entête de section 2)
un nom	une valeur
un th h5 (entête de section 3)
un nom	une valeur
un td h4 (entête de section 2)
un nom	une valeur
un td h5 (entête de section 3)
un nom	une valeur

Aucun style supplémentaire n'a été appliqué.

Les sections marquées par des marquages de titre html génèrent des entrées de sommaire et l'apparition des liens "Modifier".

[modifier] Une Infobox, avec ses styles associés

Titre de la boîte
th infoboxsoustitre
td infoboxsoustitre
th	th
un texte long	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.
tr.infoboxsoustitre th
un nom	une valeur
label pour image
l'image du jour, version thumb 180px

la table est de classe infobox

.infobox {
  background-color: #eeeeee; /* couleur correspondant aux titres / colonne de gauche, th */
  color: black;
  float: right;
  clear: right;
  font-size: 95%;
  border-collapse: collapse;
  margin: 0 0 0.5em 1em;
  width:250px;
}

La largeur est souvent redéfinie par les usagers. ^[1]

Le titre de la boîte

est un élément caption sans classe particulière, qui répond à la règle .infobox caption .

.infobox caption {
  background-color: #c0c0c0;
  border-left: 1px solid #aaaaaa;
  border-top: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  padding: 0.2em;
  margin-left: 0.57em;
  font-weight: bolder;
  text-align: center;
  color: white;
  font-size: 160%;
}

La classe .infoboxsoustitre ^[2]

N'a d'effet qu'à l'intérieur d'une infobox.

Je l'ai appliquée à des cellules fusionnées sur la largeur du tableau.

.infobox .infoboxsoustitre { /* sous-titre */
  color: black;
  font-weight: bold;
  font-size: 115%;
  line-height: 2;
  text-align: center;
}

les cellules

Elles sont entourées d'une fine bordure grise ^[3]. Leur contenu en est séparé 0.2em et 0.5em à gauche, et est centré verticalement.

Horizontalement, une cellule ordinaire (td) est centrée, alors qu'une cellule titre (th) est alignée à gauche. ^[4]

La couleur d'arrière-plan est spécifiée pour les cellules ordinaires, alors que les cellules titres héritent de la couleur définie par l'infobox.

.infobox th, .infobox td {
  vertical-align: middle;
  border: 1px solid #aaaaaa;
  padding: 0.2em 0.2em 0.2em 0.5em;
}
 
.infobox td {
  text-align: center;
  background: #f9f9f9;
}
 
.infobox th {
  font-weight: normal;
  text-align: left;
}

Un autre inconvénient : j'aurais tendance à appliquer la classe infoboxsoustitre à la rangée (tr). Dans ce cas, l'attribut gras est annulé par la définition .infobox th ci-dessus.

Les images

.infobox .infoboximage { /* emplacement pour les photos et une description */
  background: #ffffff;
  padding:0;
  margin-top:0;
  color: black;
  text-align: center;
}

[modifier] Notes et références

↑ Ne pas la définir ici permettrait de la laisser souple par défaut. L'usager peut sinon rajouter width:auto
↑ en voilà du joli franglais ! S'il existe l'équivalent (sémantique) dans en:WP, je garderais le même nom.
Sinon pourquoi pas "infobox-subtitle", pour être portable ?
↑ Il semble que beaucoup suppriment cette bordure Projet:Charte graphique/Apparence des InfoBox. Personnellement je préfère.
↑ L'inverse n'est pas plus classique ?

[modifier] Une Infobox, de class infoboite

L'alignement à droite est laissé à la charge de l'usager.

Titre de la boîte
sectionnement de la boite
infobox incluse	Modèle:Infobox

Liste	item1 item2 item3

Les styles inclus sont

h2	invisible
h3	sectionnement de la boite
table	sous-table déconseillée
image	normal
.imageInfoboite .thumb	pas de flottement
.imageInfoboite .thumb .thumbinner	pas de bordure
.infoboite .imageInfoboite .thumb .thumbcaption	centré
.infoboite ul	liste sans marge

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[modifier] Exemples tirés de la Charte Graphique

[modifier] Footballeur

Modèle:Infobox Footballeur

Michel Platini

© Service photographique du Premier ministre

Avec Lionel Jospin, le 25 novembre 1997.

Club actuel

Joueur retraité

Numéro

Fiche d’identité

Nationalité

France

Naissance

21 juin 1955
à Jœuf (Meurthe-et-Moselle)

Taille

1,79 m

Poste

Meneur de jeu

Surnom(s)

Platoche

Parcours junior

Saison

Club

1966-1972

AS Joeuf

Parcours professionnel*

Saison

Club

Matchs
(Buts)

? (127)

? (82)

? (103)

Sélection en équipe nationale**

Année(s)

Équipe

Matchs
(Buts)

1976-1987

France A

72 (41)

1975-1976

France Olympique

7 (4)

1975-1976

France Espoirs

3 (0)

* Matchs joués et buts marqués dans chaque club
comptant pour le championnat national
et les compétitions nationales et continentales.
** Matchs joués et buts marqués pour l'équipe
nationale en match officiel.

Mettre à jour

Version infoboite

[modifier] Société

Modèle:Infobox Société

mettre à jour
Image:BNP Paribas logo.png Logo de BNP Paribas
Repères historiques
Dates clés :	23 mai 2000 : Création
Personnages clés :	Michel Pébereau (Président), Baudouin Prot (Administrateur, Directeur Général)
Fiche d’identité
Forme juridique :	Société anonyme
Slogan(s) :	« La banque d'un monde qui change »
Siège social :	Paris (16 bld des Italiens)
Activité(s) :	Banque
Filiale(s) :	Cetelem, Banque de Bretagne, BancWest, BPLG, Banca Nazionale del Lavoro
Effectif :	120 000
Site corporatif :	www.bnpparibas.com
Données financières
Chiffre d’affaires :	▲ 85 milliards USD ^{[réf. nécessaire]}