Utilisateur:RockyRoad/Brouillons/Infoboites

Titre de la boîte
th infoboxsoustitre
	td infoboxsoustitre
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	<img alt="un petit exemple" src="//upload.wikimedia.org/wikipedia/commons/d/d9/Exemple1.jpg" decoding="async" width="60" height="69" class="mw-file-element" data-file-width="60" data-file-height="69">
	<img src="//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Hemerocallis-Taglilie.jpg/180px-Hemerocallis-Taglilie.jpg" decoding="async" width="180" height="120" class="mw-file-element" data-file-width="3008" data-file-height="2000"> l'image du jour, version thumb 180px.

Titre de la boîte
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

Cliquez ici pour purger le cache

Une Infofox, de classe infobox modifier

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

Une Infobox, avec ses styles associés modifier

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;
}

Notes et références modifier

↑ 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 ?

Une Infobox, de class infoboite modifier

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

Titre de la boîte
sectionnement de la boite
infobox incluse	RockyRoad/Brouillons/Infoboites modifier - modifier le code

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, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

Exemples tirés de la Charte Graphique modifier

Footballeur modifier

Modèle:Infobox Footballeur

Biographie
RockyRoad/Brouillons/Infoboites
Avec Lionel Jospin, le 25 novembre 1997.
Taille	1,79 m
Poste	Meneur de jeu
Parcours junior
Années	Club

1966-1972	AS Joeuf
Parcours professionnel¹
Années	Club	0M.0(B.)

1972-1979	Modèle:Foot-Nancy	? (127)
1979-1982	Modèle:AS Saint-Étienne	? (82)
1982-1987	Modèle:Juventus	? (103)
Sélections en équipe nationale²
Années	Équipe	0M.0(B.)

1976-1987	France A	72 (41)
1975-1976	France Olympique	7 (4)
1975-1976	France Espoirs	3 (0)
¹ Compétitions officielles nationales et internationales. ² Matchs officiels (amicaux validés par la FIFA compris). Tout ou partie de ces informations sont extraites de Wikidata. Cliquer ici pour les compléter.
modifier

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

Version infoboite

Société modifier

Modèle:Infobox Société

BNP Paribas
logo de RockyRoad/Brouillons/Infoboites

Dates clés	23 mai 2000 : Création
Personnages clés	Michel Pébereau (Président), Baudouin Prot (Administrateur, Directeur Général)
Forme juridique	Société anonyme
Slogan	La banque d'un monde qui change
Siège social	Paris (16 bld des Italiens)
Activité	Banque
Filiales	Cetelem, Banque de Bretagne, BancWest, BPLG, Banca Nazionale del Lavoro
Effectif	120 000
Site web	www.bnpparibas.com

Chiffre d'affaires	85 milliards USD ^{[réf. nécessaire]}
modifier - modifier le code - voir Wikidata

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

Exemple importé de en: Infobox Hospital modifier

Cliquez ici pour purger le cache

Présentation
Modèle:Spécimen d'Hôpital

Norfolk & Norwich University Hospital (Katy Appleton) Aug 2005
Coordonnées	51° 47′ 00″ nord, 0° 47′ 00″ ouest
Pays	UK
Site web	http://www.buckshospitals.nhs.uk/ Trust
Organisation
Type	Specialist
Assurance maladie	NHS
Affiliation	Medical School and University affiliations
Services
Standards	national tandards
Service d’urgences	Yes
Nombre de lits	100

modifier

Suite modifier

[1] Ne pas la définir ici permettrait de la laisser souple par défaut. L'usager peut sinon rajouter width:auto

[2] 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 ?

[3] Il semble que beaucoup suppriment cette bordure Projet:Charte graphique/Apparence des InfoBox. Personnellement je préfère.

[4] L'inverse n'est pas plus classique ?

[1]

[2]

[3]

[4]

Utilisateur:RockyRoad/Brouillons/Infoboites

Une Infofox, de classe infobox modifier

un th h4 (entête de section 2)

un th h5 (entête de section 3)

un td h4 (entête de section 2)

un td h5 (entête de section 3)