Tableau dans container fluid

Version imprimable

Voir 40 message(s) de cette discussion en une page

12/08/2021, 12h02
Media20

Tableau dans container fluid

Bonjour a tous
J'ai un tabeau de 27 colonnes et une ligne a integrer sur une page web.
Faut il utiliser un container, container-fluid?
Quelle est la meilleur solution.
Merci d'avance
12/08/2021, 13h23
darkstar123456

Bonjour,

Il vaudrait mieux préciser avec quoi vous travaillez.
Les termes container et container-fluid ne sont pas quelque chose de natif à un navigateur.
J'imagine qu'il s'agit de Bootstrap ou d'un autre framework proche de celui-ci.

Quoi qu'il en soit, cette réponse à propre à votre projet et de ce que vous souhaitez en faire.
D'ailleurs, 27 colonnes c'est très vague. Il pourrait y avoir une lettre par cellule comme des paragraphes entiers.

De plus, vous indiquez 27 colonnes et une seule ligne ? Pourquoi ne pas alors inverser la table et faire une ou deux colonnes et 27 lignes ?
Ca serait beaucoup plus lisible.

En conclusion et personnellement, si j'avais 27 colonnes à afficher et que la taille du container n'avait pas d'importance, je partirais sur un container-fluid
Attention de ne pas oublier la classe .table-responsive si vous utilisez Boostrap ;) Source : https://getbootstrap.com/docs/5.1/co...ponsive-tables
12/08/2021, 15h15
Media20

tableau dans container fluid

Rebonjour
Je fonctionne avec boostrap.
voila l'exemple :
1 lettre par cellule comme cet exemple :
https://www.woopets.fr/chien/races/

Merci pour la reponse
12/08/2021, 15h21
darkstar123456
Bonjour,

Justement, dans cet exemple c'est très bien fait car ça n'utilise pas de <table>.
Les <table> sont destinées à afficher un listing de données selon des clés (titre de colonne & de ligne).

Afficher l'alphabet ne correspond pas a cet usage; et si on regarde le site d'exemple; ils ont utilisé une liste.
Ce qui est bien mieux à tous points de vue (même SEO) et surtout pour pouvoir faire facilement du responsive.

Combiné à flexbox; il est très facile de faire passer une liste de l'aspect horizontal à vertical
Code:

1 2 3 4 5 6 7 8 9 10 .ma-liste { display: flex; flex-direction: column; align-items: center; } @media (min-width: 600px) { flex-direction: row; }
12/08/2021, 15h50
Media20

tableau dans container fluid

Rebonjour,
la cela depasse un peu mes competences.
Ouille ouille
Merci pour la reponse

bonjour,

1- ce serait aimable que tu répondes à tes autres discussions ouvertes.

2- il faut préciser QUELLE VERSION de Bootstrap tu utilises,
car d'une version à l'autre, certaines syntaxes ont été modifiées

Bootstrap 5 :

Grid system : https://getbootstrap.com/docs/5.0/layout/grid/
système de flex box : https://getbootstrap.com/docs/5.0/utilities/flex//
cards : https://getbootstrap.com/docs/5.0/components/card/

L'affichage des chiens que tu montres dans le lien précédent fonctionne sur le même principe.
Avec Bootstrap, il suffit d'ajouter des classes CSS pour obtenir le résultat voulu.

Ça donne ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <div class="container-fluid"> <div class="row d-flex flex-row"> <div class="card col-6 col-sm-4 col-md-2"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="card col-6 col-sm-4 col-md-2"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> ... </div> </div>
<div class="d-flex"> : on a ici une flexbox
class="card ..." : on définit le block sous forme de "card"
class="... col-6 col-sm-4 col-md-2" : permet de définir le nombre d'élements par ligne, en fonction de la largeur de la fenêtre (voir le grid system)

12/08/2021, 16h45
Media20

tableau dans container fluid

Rebonjour,
J'utilise la version 5

Merci, desole je n'ai pas fait gaffe
12/08/2021, 16h51
jreaux62
j'ai mis à jour mon message précédent avec Bootstrap 5.

A voir aussi :
- navbar : https://getbootstrap.com/docs/5.0/components/navbar/
- Buttons : https://getbootstrap.com/docs/5.0/components/buttons/
Bref : la doc est très complète, et bien faite.
12/08/2021, 16h55
Media20

tableau dans container fluid

Rebonjour,
Je te remercie, je vais essayer de comprendre cela
Merci pour la reponse.
Je terminerai la discussion des que j'aurai assimile
12/08/2021, 17h13
Media20

Re
Pour moi incomprehensible pour le moment mais merci tout de meme.

Re
j'ai cree une flexbox avec 2 element interieur.
Comment faire pour avoir le premier element a 70%
le 2eme a 20%
un espace de 50 px entre les 2
une marge de 50 px de chaque cote?????
Merci d'avance
je joins html et css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="fr">
	<title>Affenpinscher</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<head>
<!-- chargement des feuilles de style -->
		<!-- chargement des scripts -->
		<script src="../scr/jquery.js"></script>
		<script src="../scr/modernizr.js"></script>
		<link href="../css/style.css" rel="stylesheet" type="text/css">
		<link href="../css/styleindex.css" rel="stylesheet" type="text/css">
	<link href="../css/styleraces.css" rel="stylesheet" type="text/css">
	</head>
	<body class="no-js">
		<!-- Emplacement du menu -->
		<nav id="topNav">
			<ul>
				<li><a href="#" title="">Accueil</a></li>
				<li>
					<a href="#" title="">Libre</a>
					<li>
						<a href="../chiens.html" title="">Chiens</a>
						<ul>
							<li><a href="../listing_races/a.html" title="">Races</a></li>
							<li><a href="../alimentation.html" title="">Alimentation</a></li>
							<li><a href="../veterinaires.html" title="Veterinaires">Vétérinaires</a></li>
							<li><a href="../education.html" title="Education">Education</a></li>
							<li><a href="#" title="V">Libre</a></li>
						</ul>
					</li>
					<li><a href="#" title="">Libre</a></li>
					<li>
						<a href="#" title="">Libre</a>
						<ul>
							<li><a href="#" title="">Javascript</a></li>
							<li><a href="#" title="">jQuery</a></li>
						</ul>
					</li>
					<li class="last"><a href="#" title="">Contact</a></li>
				</ul>
			</nav>
			<!-- Emplacement du contenu -->
			<!-- Initialisation de la fonction -->
			<script>
                                var el = document.getElementsByTagName("body")[0];
                                el.className = "";
                                (function($){
                                        var nav = $("#topNav");
                                        nav.find("li").each(function() {
                                                if ($(this).find("ul").length > 0) {
                                                        $("<span>").text("^").appendTo($(this).children(":first"));
                                                        $(this).mouseenter(function() {
                                                                $(this).find("ul").stop(true, true).slideDown();
                                                        });
                                                        $(this).mouseleave(function() {
                                                                $(this).find("ul").stop(true, true).slideUp();
                                                        });
                                                }
                                        });
                                }
                                )(jQuery);
                        </script>
		</body>
		<picture>
			<img src="../Images/communes/fond1.png" alt="" class="image_responsive" width="1575" height="325">
		</picture>
<div id="conteneur">
    <div class="element1">1</div>
    <div class="element2">2</div>
</div>
	<section></section>
	</html>

Code:

1
2
3
4
5
6
7
8
9
10
@charset "utf-8";
@media ( min-width : 320px ) AND (max-width : 1221px ){}
@media (min-width: 800px) AND (max-width: 960px)
{}
#conteneur
{
    display: flex;
	width: auto;
	justify-content: center;
}

Hello,

Je pense qu'il faudrait peut-être songer à lire des documentations ou suivre des cours

Tu mets ton code après la fermeture de body :aie:
Pourquoi créer des div alors qu'il existe déjà une grille intégrée à Bootstrap ?
Pourquoi 70% + 20% ? Ca fait 90%; pas 100%. Je trouve ça étrange.

Bref, pour essayer d'aider, je te conseille de lire la documentation de Bootstrap au moins à partir de Layout > Grid (lien direct : https://getbootstrap.com/docs/5.1/layout/grid/)
Tu verras alors que la grille est composée de 12 colonnes et donc suivant ce que tu souhaites, tu dois essayer d'arriver à 12.
Admettons qu'on corrige ta demande et que tu souhaites une colonne à 25% + une colonne à 75% :
Code:

1 2 3 4 5 6 7 8 9 10 <div class="container"> <div class="row"> <div class="col-md-3">  </div> <div class="col-md-9">  </div> </div> </div>
Pour ce qui est de l'espace entre 2 colonnes, ça s’appelle un gutter (une gouttière en Français).
Tu as de la chance, depuis BS 5, il existe des classes pour les changer facilement : https://getbootstrap.com/docs/5.1/la...zontal-gutters
Néanmoins, si tu souhaites changer cette valeur toi-même c'est très facile :
Code:

1 2 3 4 5 6 7 8 9 10 .row.mon-gutter-special { margin-left: -25px; margin-right: -25px; } .row.mon-gutter-special > .col, .row.mon-gutter-special > [class*=col-] { padding-left: 25px; padding-right: 25px; }

14/08/2021, 10h18
Media20

Bonjour,
Desole je n'avais pas fait gaffe...
Merci pour ta reponse
14/08/2021, 10h51
Media20

Rebonjour,
je voudrais creer une barre avec les lettres comme ceci :
https://www.woopets.fr/chien/races
Dois-je creer un conteneur et y integrer un tableau ou existe t'il une autre solution?

Bonjour,

Une <table> convient (ou bloc en display:table; ),
Sauf si tu veux que ça puisse passer sur 2 ou 3 lignes sur petits écrans, auquel cas une flexbox fera mieux l'affaire.

Ici, on a une liste <ul><li> :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="myTab" class="alphabetical list--unstyled mb0" role="tablist">
            <li role="presentation" class="text-center active">
                <a href="#all" aria-controls="all" role="tab" data-toggle="tab">#</a>
            </li>
            <li role="presentation" class="text-center ">
                <a href="#letter_A" aria-controls="letter_A" role="tab" data-toggle="tab">A</a>
            </li>
            <li role="presentation" class="text-center ">
                <a href="#letter_B" aria-controls="letter_B" role="tab" data-toggle="tab">B</a>
            </li>
...
</ul>

ASTUCE :

positionner le curseur sur l'élément à inspecter
"clic droit" -> "Inspecter"
tu verras alors les codes utilisés : HTML (onglet Inspecteur) - CSS (onglet Règles) - ...

Rebonjour,
Merci pour la reponse...
Tant que j'y suis
j'ai un assez grand texte, ou il faudrait que je mette en gras certaines parties, et une div a changer de couleur...
Faut il que je cree le texte d'un bloc et retoucher apres les proprietes des parties, ou traiter par div comme j'ai fait..

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="fr">
	<title>Affenpinscher</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<head>
		<style>
                        a
                        {
                                text-decoration:none;
                                color: #A4A2A1;
                        }
                </style>
		<!-- chargement des feuilles de style -->
		<!-- chargement des scripts -->
		<script src="../scr/jquery.js"></script>
		<script src="../scr/modernizr.js"></script>
		<link href="../css/style.css" rel="stylesheet" type="text/css">
		<link href="../css/styleindex.css" rel="stylesheet" type="text/css">
		<link href="../css/styleraces.css" rel="stylesheet" type="text/css">
	</head>
	<body class="no-js">
		<!-- Emplacement du menu -->
		<nav id="topNav">
			<ul>
				<li><a href="#" title="">Accueil</a></li>
				<li>
					<a href="#" title="">Libre</a>
					<li>
						<a href="../chiens.html" title="">Chiens</a>
						<ul>
							<li><a href="../listing_races/a.html" title="">Races</a></li>
							<li><a href="../alimentation.html" title="">Alimentation</a></li>
							<li><a href="../veterinaires.html" title="Veterinaires">Vétérinaires</a></li>
							<li><a href="../education.html" title="Education">Education</a></li>
							<li><a href="#" title="V">Libre</a></li>
						</ul>
					</li>
					<li><a href="#" title="">Libre</a></li>
					<li>
						<a href="#" title="">Libre</a>
						<ul>
							<li><a href="#" title="">Javascript</a></li>
							<li><a href="#" title="">jQuery</a></li>
						</ul>
					</li>
					<li class="last"><a href="#" title="">Contact</a></li>
				</ul>
			</nav>
			<!-- Emplacement du contenu -->
			<!-- Initialisation de la fonction -->
			<script>
                                var el = document.getElementsByTagName("body")[0];
                                el.className = "";
                                (function($){
                                        var nav = $("#topNav");
                                        nav.find("li").each(function() {
                                                if ($(this).find("ul").length > 0) {
                                                        $("<span>").text("^").appendTo($(this).children(":first"));
                                                        $(this).mouseenter(function() {
                                                                $(this).find("ul").stop(true, true).slideDown();
                                                        });
                                                        $(this).mouseleave(function() {
                                                                $(this).find("ul").stop(true, true).slideUp();
                                                        });
                                                }
                                        });
                                }
                                )(jQuery);
                        </script>
		</body>
		<picture>
			<img src="../Images/communes/fond1.png" alt="" class="image_responsive" width="1575" height="325">
		</picture>
		<div>
			<h2>
				<a href="../index.html">SOS Chiens Dordogne</a>
				 >
				<a href="../listing_races/a.html">Races</a>
				 >
				 Affenpinscher
			</h2>
		</div>
		<div class="grid-container">
			<div class="grid-item1"></div>
			<div class="grid-item2">
				<h1>
					Affenpinscher
					<h1>
						<h3>Autres noms : Griffon singe, Zwergaffen</h3>
						<h4>L'Affenpinscher est un petit chien compact, reconnaissable à son pelage dur et entièrement noir, ainsi qu'à sa face évoquant celle du singe. Son nom en allemand signifie d'ailleurs "griffon-singe".</h4>
						<picture>
							<img src="../Images/races_big/affenpinscher.jpg" alt="" class="image_responsive" width="780" height="544">
						</picture>
						<h1>Historique de la race</h1>
						<h3>L'Affenpinscher correspond à une race très ancienne. Il descend des chiens représentés dès le 16e siècle par l'artiste allemand Albrecht Dürer sur ses gravures en bois. Les premiers enregistrements d'Affenpinschers datent de l'année 1879. A partir du début du 20e siècle, ces chiens développés sur la base de Pinschers à poil dur rencontrent un très grand succès. Au fil des sélections, la robe noire a été privilégiée par rapport aux autres couleurs, dont le jaunâtre, le rougeâtre, le blanc grisâtre et le gris foncé. La race de l'Affenpinscher a été reconnue à titre définitif par la Fédération Cynologique Internationale (FCI) le 15 juillet 1955.</h3>
						<h1>Particularités physiques</h1>
						<h3>Son poil : dur, dense, formant une parure caractéristique sur la tête (sourcils broussailleux, yeux encadrés en couronne, barbe fournie, toupet et favoris). Le poil de couverture est associé à un sous-poil.Sa couleur : entièrement noir.Sa tête : ronde, d'expression simiesque. Le crâne est bombé, le front bien dessiné, le stop accentué, la truffe ronde et noire, les narines bien ouvertes, le museau et le chanfrein droits, les lèvres bien appliquées et noires.Ses oreilles : en forme de V, de petites dimensions, droites, bien dressées, attachées haut et pointant vers l'avant.Ses yeux : arrondis, en boule, de couleur foncée.Son corps : robuste, compact, s'inscrivant dans un carré. Le dos est fort, court et ferme, le rein est court et solide, la croupe s'arrondit légèrement vers l'attache de la queue, la poitrine légèrement aplatie sur les côtés, le vendre modérément relevé.Sa queue : portée en sabre ou en faucille.</h3>
						<section></section>
						<h1>Comportement avec les autres</h1>
						<h3>L'Affenpinscher est un chien éveillé, courageux, loyal, déterminé et vigilant. Il apprécie la vie de famille et est un agréable compagnon pour tous ses membres, même si une certaine prudence doit être gardée avec les enfants. Ces derniers peuvent, en effet, le brusquer. Il peut parfois se montrer têtu.</h3>
						<h1>Education</h1>
						<h3>L'Affenpinscher nécessite une éducation assez ferme pour atténuer ce côté forte tête qu'il peut parfois afficher, ainsi que sa fougue. Mis à part cela, son éducation n'est pas bien difficile. Ce chien doit également être socialisé suffisamment tôt pour qu'il puisse s'entendre avec ses congénères et les autres animaux qu'il est appelé à rencontrer.</h3>
						<h1>Conditions de vie</h1>
						<h3>L'Affenpinscher présente l'avantage de pouvoir s'adapter à tous les modes de vie que peut lui proposer son maître. Il peut tout à fait vivre en appartement s'il est suffisamment promené et stimulé. Il apprécie également le fait de bénéficier d'un grand jardin clôturé dans lequel il peut courir librement. Il convient à la plupart des situations familiales, avec une attention particulière à lui accorder en présence d'enfants. Il s'adresse à tout type de maître capable d'en prendre soin, car son éducation n'est pas particulièrement compliquée.</h3>
						<h1>Santé</h1>
						<h3>Grâce à son poil double, l'Affenpinscher supporte plutôt bien le froid et l'humidité, mais pas les conditions climatiques extrêmes. La race présente des prédisposions à certaines maladies : persistance du canal artériel (malformation cardiaque), luxation de la rotule, maladie de Legg-Perthes-Calvé (nécrose de la tête et du col du fémur).</h3>
						<h1>Entretien et hygiène</h1>
						<h3>L'Affenpinscher est un chien assez facile à entretenir. Il ne demande pas beaucoup d'effort à ce niveau, mais l'entretien doit demeurer régulier. Pendant la mue, il connaît des pertes de poils modérées, mais il est recommandé de lui donner une alimentation plus riche en sels durant cette période. Il est recommandé de brosser le chien une fois par semaine pour bien entretenir son poil. Durant la mue, le brossage est à effectuer 2 à 3 fois par semaine.</h3>
						<h1>Activité physique</h1>
						<h3>L'Affenpinscher adore courir et se dépenser, même si ce n'est pas un grand sportif. Une bonne promenade quotidienne agrémentée de jeux stimulants suffit à préserver son équilibre sur le double plan physique et psychique.</h3>
					</html>

Der question
peut on generer un tableau avec des photos et des titres a partir d'un script php et bdd?
Merci d'avance

14/08/2021, 15h43
jreaux62

Il existe des tutos et des cours.

Tu ne t'en sortiras pas si tu fais l'impasse sur l'APPRENTISSAGE.
14/08/2021, 15h44
Media20

Merci je vais essayer

Donc ceci ?

Code:

1
2
3
4
5
<div id="conteneur2">
    <div class="element 1">Element </div>
    <div class="element 2">Element </div>
    <div class="element 3">Element </div>
</div>

Code:

1
2
3
4
5
#conteneur2
{
    display: flex;
	margin-left: 100px;
}

14/08/2021, 16h11
Media20

1 pièce(s) jointe(s)

Bon je viens de prendre ton systeme, et cela marche, sauf que j'ai des points noirs avant l'#

Voir 40 message(s) de cette discussion en une page