Bonjour a toutes et a tous

Pourrais ou serait il possible d'avoir des infos sur un flex-item fixe et un autre defilant?
Je trouve des reponses et ce n'est pas tres evident?
Si vous avez des idees?
Merci d'avance

HTML :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8">
<meta name="ROBOTS" content="all">
<meta name="keywords" content="mot clé 1,mot cle 2,Mot clé 3, Mots clefs">
<meta name="title" content="Affenpinscher">	
<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 -->
<link href="../css/style.css" rel="stylesheet" type="text/css">
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link href="../css/styleraces.css" rel="stylesheet" type="text/css">
<!-- chargement des scripts -->
  <script src="../scr/jquery.js"></script>
  <script src="../scr/modernizr.js"></script>
<!-- Fin des scripts -->	
	</head>
<body class="no-js">
  <!-- Début du menu -->
   <nav id="topNav">
    <ul>
      <li>
        <a href="../index.html" title="">Accueil</a>
      </li>
        <li>
          <a>Chiens</a>
          <ul>
			 <li>
              <a href="../Origines.html" title="Origines">Origines</a>
            </li>
			 <li>
              <a href="../chien-de-race.html" title="Le chien de race">Le chien de race</a>
            </li> 
            <li>
              <a href="../listing_races/a.html" title="Races">Races</a>
            </li>
            <li>
              <a href="../Groupes-catégories.html" title="Groupes et catégories">Groupes et catégories</a>
            </li>
            <li>
              <a href="../Documents.html" title="Les documents">Les documents</a>
            </li>
            <li>
              <a href="../confirmation.html" title="Confirmation">La confirmation</a>
            </li>
          </ul>
        </li>
        <li>
          <a>Vivre avec son chien</a>
			<ul>
			 <li>
              <a href="../commandemments.html" title="Les 10 commandements">Les 10 commandements</a>
            </li>
				<li>
              <a href="../Votre-chien-et-vous.html" title="Votre chien et vous">Votre chien et vous</a>
            </li>
			<li>
              <a href="../Mon-chien.html" title="Mon chien">Mon chien</a>
            </li>
				<li>
              <a href="../Education-Comportement.html" title="Education / Comportement">Education / Comportement</a>
            </li>
				<li>
              <a href="../Bien-vivre-avec-son-chien.html" title="Bien vivre avec son chien">Bien vivre avec son chien</a>
            </li>
				<li>
              <a href="../Alimentation.html" title="Alimentation">Alimentation</a>
            </li>
			</ul>
        </li>
        <li>
			 <a>Santé</a>
			 <ul>
            <li>
              <a href="../veterinaires/b.html" title="Vétérinaires">Vétérinaires</a>
            </li>
            <li>
            </li>
          </ul>
        </li>
          <li>
			 <a>Perdus</a>
			 <ul>
            <li>
              <a href="../Perdus.html" title="Perdus">Chiens perdus</a>
            </li>
          </ul>
        </li>
         <li>
			 <a>Trouvés</a>
			 <ul>
            <li>
              <a href="../Trouves.html" title="Trouvés">Chiens trouvés</a>
            </li>
          </ul>
        </li>
      <li>
			 <a>A adopter</a>
			 <ul>
            <li>
              <a href="../Adopter.html" title="A adopter">Chiens a adopter</a>
            </li>
          </ul>
        </li>
		<li>
			 <a>Bénevolat</a>
			 <ul>
            <li>
              <a href="../Benevolat.html" title="Bénevolat">Bénevolat</a>
            </li>
			<li>
              <a href="../Benevoles.html" title="Bénevoles">Bénevoles</a>
            </li>	 
          </ul>
        </li>
		<li>
			 <a>Partenaires</a>
			 <ul>
            <li>
              <a href="../Partenariat.html" title="Partenariat">Partenariat</a>
            </li>
			<li>
              <a href="../Partenaires.html" title="Partenaires">Partenaires</a>
            </li>	 
          </ul>
        </li>
		<li class="last">
          <a href="../contact.html" title="Contact">Contact</a>
		</li>	
 </ul>
  </nav>
<!-- Fin du menu -->	
  <!-- 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>
	<script src="../../assets/dist/js/bootstrap.bundle.min.js">
</script>
 <!-- Fin de la fonction -->	
</body>	
<img src="../Images/communes/fond1.png" alt="" class="image_responsive" width="1575" height="325">
<div class="flex-container">
  <div class="flex-item1">
	<table class="tablerecherche">
 
    <tr>
      <td><a href="#a1">Description générale</a></td>
    </tr>
    <tr>
      <td><a href="#a2">Historique de la race</a></td>
    </tr>
    <tr>
      <td><a href="#a3">Particularités physiques</a></td>
    </tr>
	 <tr>
      <td><a href="#a4">Comportement et caractère</a></td>
    </tr>
		 <tr>
      <td><a href="#a5">Comportement avec les autres</a></td>
    </tr>
	 <tr>
      <td><a href="#a6">Education</a></td>
    </tr>
	<tr>
      <td><a href="#a7">Conditions de vie</a></td>
    </tr>
		<tr>
      <td><a href="#a8">Entretien et hygiène</a></td>
    </tr>
	<tr>
      <td><a href="#a9">Santé</a></td>
    </tr>
	<tr>
      <td><a href="#a10">Activité physique</a></td>
    </tr>	
</table>
  </div>
  <div class="flex-item2">
	  <p class="h1">Affenpinscher</p>
	  <img src="../Images/races_big/affenpinscher.jpg" alt="" class="image_responsive" width="780" height="544">
		<h1 id="a1">Description générale</h1>
	<p>L'Affenpinscher est un chien de petit format, compact, à poil dur, sa face a une expression simiesque. Le rapport entre la longueur du corps et la hauteur au garrot doit autant que possible donner l'impression d'un chien inscriptible dans le carré. Intrépide, attentif, tenace et fidèle, parfois passionné et emporté. Dans son essence c'est un chien de famille agréable reconnaissable à sa petite démarche trottinante. Sa truffe est ronde, pleine et noire et son museau court et droit. Ses oreilles sont droites, petites et dressées symétriquement. Le corps de l'Affenpinscher est solide, carré, compact et sa queue est naturellement en sabre ou en faucille.<br>
		 Concernant la robe, sur le corps, le poil doit être dur et bien fourni. Sur la tête il forme la parure caractéristique composée de sourcils en piquants broussailleux, d'un encadrement en couronne des yeux, d'une barbe imposante, d'un toupet et de favoris. En tête, le poil doit être le plus raide possible, en mèches qui se dressent radialement. Ce sont ces particularités qui produisent l'expression simiesque. La seule couleur acceptée chez l'Affenpinscher est le noir pur avec sous-poil noir.</p>
	<h1 id="a2">Historique de la race</h1>
	<p>Anciennement chien de famille dans le sud de l'Allemagne. Albrecht Dürer (1471-1528) a représenté les ancêtres de ces chiens sur ses gravures en bois. Les premières inscriptions d'Affenpinschers remontent à l'année 1879. Ces chiens nains très appréciés au début du 20ème siècle ont été développés à partir des Pinschers à poil dur. La couronne de poil qui encadre la tête de l'Affenpinscher souligne son expression simiesque. La couleur allait d'unicolore jaunâtre, rougeâtre ou blanc-grisâtre à gris foncé, ou noir-grisâtre à noir pur.</p>
	<h1 id="a7">Conditions de vie</h1>
	<p>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.</p>
	<h1 id="a4">Comportement et caractère</h1>
	<p>Mélange d’exubérance et de sagesse, ce petit chien est vif, éveillé. Loyal et affectueux, c'est un gardien avertisseur, un chasseur de rongeurs.</p>
	<h1 id="a5">Comportement avec les autres</h1>
	 <p>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.</p>
	  <h1 id="a6">Education</h1>
	  <p>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.</p>
	  <h1 id="a9">Santé</h1>
	  <p>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).</p>
	<h1 id="a8">Entretien et hygiène</h1>
	<p>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.<br> 
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.</p>
	  <h1 id="a10">Activité physique</h1>
	  <p>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.</p>
	<h1 id="a3">Particularités physiques</h1>
	<ul style="list-style-type:none;">
		<li> <b>Son poil :</b> 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.</li>
		<li> <b>Sa couleur :</b> entièrement noir.</li>
		<li> <b>Sa tete : </b> 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.</li>
		<li> <b>Ses oreilles :</b> en forme de V, de petites dimensions, droites, bien dressées, attachées haut et pointant vers l'avant.</li>
		<li> <b>Ses yeux :</b> arrondis, en boule, de couleur foncée.</li>
		<li> <b>Son corps :</b> 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é.</li>
		<li> <b>Sa queue : </b> portée en sabre ou en faucille.</li>
	</ul>
	</div>
</div>
<!--Fin du contenu-->	
<!--Footer-->	
<footer class="footer">
<div class="container bottom_border">
<div class="row">
<div class=" col-sm-4 col-md col-sm-4  col-12 col">
<h5 class="headin5_amrc col_white_amrc pt2">Coordonnées</h5>
<!--headin5_amrc-->
<p class="mb10">Place Michel Montaigne</p>
<p><i class="fa fa-location-arrow"></i> Thenon </p>
<p><i class="fa fa-phone"></i>  07.86.52.32.10  </p>
<p><i class="fa fa fa-envelope"></i> webmaster.soschiens24@gmail.com  </p>
</div>
<div class=" col-sm-4 col-md  col-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Accés rapides</h5>
<!--headin5_amrc-->
<ul class="footer_ul_amrc">
<li><a href="../veterinaires/a.html">Vétérinaires</a></li>
<li><a href="../Perdus.html">Chiens perdus</a></li>
<li><a href="../Trouves.html">Chiens trouvés</a></li>
<li><a href="../Adopter.html">Chiens a adopter</a></li>
<li><a href="../Refuges-canins.html">Refuges canins</a></li>
<li><a href="../Documents.html">Documents</a></li>
</ul>
<!--footer_ul_amrc ends here-->
</div>
<div class=" col-sm-4 col-md  col-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Accés rapides</h5>
<!--headin5_amrc-->
<ul class="footer_ul_amrc">
<li><a href="../listing_races/a.html">Races</a></li>
<li><a href="../Education-Comportement.html">Education/Comportement</a></li>
<li><a href="../chien-de-race.html">Le chien de race</a></li>
<li><a href="../Eleveurs.html">Eleveurs recommandes SCC</a></li>
<li><a href="../Download.html">Téléchargement</a></li>
<li><a href="../Mon-chien.html">Mon chien</a></li>
</ul>
<!--footer_ul_amrc ends here-->
</div>
<div class=" col-sm-4 col-md  col-12 col">
<h5 class="headin5_amrc col_white_amrc pt2">Partenaires</h5>
<!--headin5_amrc ends here-->
<ul class="footer_ul2_amrc">
<li><a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a><p><a href="https://www.facebook.com/search/top?q=pattes%20en%20cavaale%2024" target="_blank">Pattes En Cavale 24</a></p></li>
<li><a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a><p><a href="https://www.centrale-canine.fr/" target="_blank">Société Centrale Canine</a></p></li>
<li><a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a><p><a href="https://spa-perigueux.org/fr" target="_blank">Société protectrice des animaux</a></p></li>	
</ul>
<!--footer_ul2_amrc ends here-->
</div>
</div>
</div>
<div class="container">
<ul class="foote_bottom_ul_amrc">
<li><a href="../index.html">Acceuil</a></li>
<li><a href="../a_propos.html">A propos</a></li>
<li><a href="https://1-place-michel-monta.forumactif.com/">Forum</a></li>
<li><a href="../mentions_legales.html">Mentions légales</a></li>
<li><a href="../conditions-generales-dutilisation.html">Conditions generales</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
<!--foote_bottom_ul_amrc ends here-->
		<p class="text-center"><b>Copyright @2021 | Designed by MediAssistance</b><a href="#"></a>
		</p>
		<ul class="social_footer_ul">
			<li><a href="https://www.facebook.com/soschiensdordogne.pascal" target="new"><img src="../Images/Logos/facebook_01.png" alt= "Facebook"></a></li>
			<li><a href="https://twitter.com/ChiensSos24" target="new"><img src="../Images/Logos/Twitter_1.jpg" alt= "Twitter"></a></li>
			<li><a href="#"><img src="../Images/Logos/Instagram.png" alt= "Instagram"></a></li>
			<li><a href="#"><img src="../Images/Logos/whatsapp.png" alt= "Whatsapp"></a></li>
		</ul>
<!--social_footer_ul ends here-->
</div>
</footer>
</html>

Css :
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@media ( min-width : 320px ) AND (max-width : 1221px ){}
@media (min-width: 800px) AND (max-width: 960px)
{}
.tablerecherche { width: 250px;
                  font-size: 16px; }
td	{ width: 250px; 
      height: 20px; }	 
.flex-container { display: flex;
                  background-color: white; }
.flex-item1 { background-color:#F9F9F9;
              width: 250px;
              margin: 50px;
              text-align: justify;
              line-height: 30px;
              font-size: 15px;
              margin-left: 100px;  
              height: 250px; }
.flex-item2 { background-color: white;
              width: 1050px;
              margin: 50px;
              text-align: justify;
              line-height: normal;
              font-size: 15px; }