Disposer des images cliquables en colonne

**Media20** · 31/08/2021, 16h08

Bonjour a toutes et a tous,

Je voudrais intégrer une image cliquable de 40px sur 40px dans la première colonne et des textes centrés verticalement dans les 5 autres.
Si vous avez la soluce..
Peut-être me suis je plante.
Merci d'avance
joins le code html et css

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="tab_haut">
<div id="column1"><td><img src="../Images/Icones/Home_01.png" alt="titre" /></td></div>
<div id="column2">Acceuil</div>
<div id="column3">c</div>
<div id="column4">d</div>
<div id="column5">e</div>
<div id="column6">f</div>	
<div class="spacer"></div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#tab_haut{width:300 ; display : block; margin-left: 300px; height: 40px}
#column1{width:50px; float:left ; height: 40px; }
#column2{width:50px; float:left ; height: 40px; }
#column3{width:50px; float:left ; height: 40px; }
#column4{width:50px; float:left ; height: 40px; }
#column5{width:50px; float:left ; height: 40px; }
#column6{width:50px; float:left ; height: 40px; }
div.spacer{clear:both; height:30px; display:block;}

Invité · 31/08/2021, 17h03

Bonjour,

-Si tu veux une redirection en cliquant sur l'image, voici un exemple pour la 1ere ligne (remplace le # par le lien (https://www....) ):

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="column1"><a href="#"><img src="../Images/Icones/Home_01.png" alt="titre" /></a></div>

-Une petite remarque, puisque toutes les #column ont les même propriétés css, il serait préférable de créer une classe:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="column">...</div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

.column{width:50px; float:left ; height: 40px; }

-Je remarque également dans ton code html la présence de balise <td> et </td>, qui n'ont rien a faire là toute seule.
Ceci dit, si tu as besoin d'un tableau, il serait plus simple d'utiliser la balise <table> (https://www.w3schools.com/html/html_tables.asp), ça dépend ce que tu souhaite faire.

Cordialement.

**Media20** · 01/09/2021, 15h50

Rebonjour

Merci pour ta prompte réponse.
Serait-ce ce que tu voulais me dire?

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<table id="navigation">
  <tr>
    <th style="width=5%">11</th>
    <th style="width=5%">Acceuil</th>
    <th style="width=5%">2</th>
	<th style="width=5%">3</th>
    <th style="width=5%">4</th>
    <th style="width=5%">5</th> 
  </tr>
</table>

Merci encore

Invité · 01/09/2021, 16h39

Non, inutile d'utiliser un tableau si c'est pour créer un menu, pour cela, il y a des balise HTML5 prévus pour cela comme <nav>.

Tu aurais plutôt donc pour le code HTML:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<nav>
 <a href="lien du titre 1">titre1</a>
 <a href="lien du titre 2">titre2</a>
</nav>

Et tu stylise tes éléments du menu en CSS par :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
nav a{
    display: inline-block;
    width: 5%;
    }

( dans l'exemple, display: inline-block; permet de pouvoir gérer la largueur d'un élément inline)

Est-ce bien un menu que vous souhaitez faire?

Cordialement.

**Media20** · 02/09/2021, 08h55

Bonjour
Merci c'est cela.
Mais puis je raccourcir la longeur totale de cette navbar, et gerer les proprietes de ces celulles individuellement.

Cordialement

Invité · 02/09/2021, 16h50

Bonjour,

Oui, vous pouvez choisir les dimensions de la navbar, avec ces propriétés width et height.

Pour les cellules individuellement, vous pouvez ajouter un ID #column1 ou une classe .column1 comme vous avez fait dans votre 1er message.

Cordialement

**Media20** · 02/09/2021, 19h05

Rebonjour

Puis je renomer une navbar, si oui comment..

Merci encore

Invité · 02/09/2021, 21h01

Envoyé par Media20

Puis je renomer une navbar

Que voulez-vous renommez? Pourquoi? Dans quel but? <nav> est le nom de la balise pour les éléments de navigation dans les spécifications HTML5.

**Media20** · 04/09/2021, 10h21

Bonjour,
Desole je me suis plante.
Une petite question, je voudrais creer un moteur de recherche interne meme avec bdd.
Connaitriez vous des scriopts ou tutos la dessus..
Bonne journee et merci d'avance
Cordialement

Pour info voila le sire que je develloppe :
https://sos-chiens-dordogne.fr/

**Media20** · 04/09/2021, 10h51

Re
j'ai un petit soucis je voudrais que les dernières rubriques :
Perdus
Trouvés
A adopter
Partenaires
Bénévoles
Contact

soient pareille a :
Vivre avec son chien
Santé

La je rame je joins le html
merci d'avance

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
<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8">	
<title>Index</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="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/donnees_perso.css" rel="stylesheet" type="text/css">	
	</head>
<body class="no-js">
  <!-- Emplacement 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>
              <a href="#" title="">aa</a>
            </li>
          </ul>
        </li>
<li class="last">
          <a href="index.html" title="">Perdus</a>
          <li class="last">
          <a href="../Trouves.html" title="Trouvés">Trouvés</a>
         <li class="last">
          <a href="../Adopter.html" title="A adopter">A adopter</a>
	     <li class="last">
          <a href="../Partenaires.html" title="Partenaires">Partenaires</a>
		<li class="last">
          <a href="../Benevoles.html" title="Bénevoles">Bénevoles</a>
		<li class="last">
          <a href="../contact.html" title="">Contact</a>	
		</li>	
	</li>		
	</li>
	</li>
      </li>  
     </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>
<script src="../assets/dist/js/bootstrap.bundle.min.js">
</script>
</body>
<picture>
  <img src="Images/communes/fond1.png" alt="" class="image_responsive" width="1575" height="325">
</picture>
<div id="conteneur">
    <div class="element1"><img src="enconstruction.png" alt="" class="image_responsive" width="307" height="164"></div>
    <div class="element2">2</div>
</div>
<div>aaaaaa</div>	
<!--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">Find us</h5>
<!--headin5_amrc-->
<p class="mb10">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<p><i class="fa fa-location-arrow"></i> 9878/25 sec 9 rohini 35 </p>
<p><i class="fa fa-phone"></i>  +91-9999878398  </p>
<p><i class="fa fa fa-envelope"></i> info@example.com  </p>
</div>
<div class=" col-sm-4 col-md  col-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Quick links</h5>
<!--headin5_amrc-->
<ul class="footer_ul_amrc">
<li><a href="http://webenlance.com">Image Rectoucing</a></li>
<li><a href="http://webenlance.com">Clipping Path</a></li>
<li><a href="http://webenlance.com">Hollow Man Montage</a></li>
<li><a href="http://webenlance.com">Ebay & Amazon</a></li>
<li><a href="http://webenlance.com">Hair Masking/Clipping</a></li>
<li><a href="http://webenlance.com">Image Cropping</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">Quick links</h5>
<!--headin5_amrc-->
<ul class="footer_ul_amrc">
<li><a href="http://webenlance.com">Remove Background</a></li>
<li><a href="http://webenlance.com">Shadows & Mirror Reflection</a></li>
<li><a href="http://webenlance.com">Logo Design</a></li>
<li><a href="http://webenlance.com">Vectorization</a></li>
<li><a href="http://webenlance.com">Hair Masking/Clipping</a></li>
<li><a href="http://webenlance.com">Image Cropping</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">Follow us</h5>
<!--headin5_amrc ends here-->
<ul class="footer_ul2_amrc">
<li><a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a><p>Lorem Ipsum is simply dummy text of the printing...<a href="#">https://www.lipsum.com/</a></p></li>
<li><a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a><p>Lorem Ipsum is simply dummy text of the printing...<a href="#">https://www.lipsum.com/</a></p></li>
<li><a href="#"><i class="fab fa-twitter fleft padding-right"></i> </a><p>Lorem Ipsum is simply dummy text of the printing...<a href="#">https://www.lipsum.com/</a></p></li>
</ul>
<!--footer_ul2_amrc ends here-->
</div>
</div>
</div>
<div class="container">
<ul class="foote_bottom_ul_amrc">
<li><a href="http://webenlance.com"><a>Acceuil</a></a></li>
<li><a href="http://webenlance.com"><a href="a_propos.html">A propos</a></a></li>
<li><a href="http://webenlance.com"><a href="https://1-place-michel-monta.forumactif.com/">Forum</a></a></li>
<li><a href="http://webenlance.com"><a href="mentions_legales.html">Mentions légales</a></a></li>
<li><a href="http://webenlance.com"><a href="Données_personnelles.html">Données personnelles</a></a></li>
<li><a href="http://webenlance.com"><a href="contact.html">Contact</a></a></li>
</ul>
<!--foote_bottom_ul_amrc ends here-->
<p class="text-center">Copyright @2021 | Designed by <a href="#">MediAssistance with Bootstrap</a></p>
 
<ul class="social_footer_ul">
<li><a href="http://webenlance.com"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="http://webenlance.com"><i class="fab fa-twitter"></i></a></li>
<li><a href="http://webenlance.com"><i class="fab fa-linkedin"></i></a></li>
<li><a href="http://webenlance.com"><i class="fab fa-instagram"></i></a></li>
</ul>
<!--social_footer_ul ends here-->
</div>
</footer>
 
 
 
</html>

Invité · 04/09/2021, 12h14

Re-bonjours,

Dans votre feuille de style se situant dans "css/style.css" (ligne 18 du code html), les dernières rubriques sont géré par le code suivant:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
a:link { color: #959392;
         font-weight: bold;
         text-decoration:none; 
}

#959392 est bien la couleur grise des dernières rubriques et elles sont bien en gras, si vous voulez qu'elle soient identique avec le reste du menu vous pouvez supprimer les propriétés color et font-weigh du code CSS.

Cordialement.

**Media20** · 04/09/2021, 14h44

Re,
je me suis mal explique.

je voulais que les onglets

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<li class="last">
          <a href="index.html" title="">Perdus</a>
          <li class="last">
          <a href="../Trouves.html" title="Trouvés">Trouvés</a>
         <li class="last">
          <a href="../Adopter.html" title="A adopter">A adopter</a>
	     <li class="last">
          <a href="../Partenaires.html" title="Partenaires">Partenaires</a>
		<li class="last">
          <a href="../Benevoles.html" title="Bénevoles">Bénevoles</a>
		<li class="last">
          <a href="../contact.html" title="">Contact</a>	
		</li>

soient de ce style :

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

j'entends par la que les onglets puissent avoir des enfants en dessous d'eux comme l'onglet 2

désolè mais quoiqu il en soit merci cela m'a servi

Merci
cordialement

Invité · 04/09/2021, 17h40

Si je comprend bien, il suffit de rajouter une balise ul (ligne 3 à 13 de l'exemple) à un élément dans sa balise liste li (d’ailleurs vos balises <li> ne sont pas fermé).

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
	<li class="last">
		<a href="../Trouves.html" title="Trouvés">Trouvés</a>
		<ul>
			<li class="last">
				<a href="#" title="Trouvés1">Trouvés1</a>
			</li>
			<li class="last">
				<a href="#" title="Trouvés2">Trouvés2</a>
			</li>
			<li class="last">
				<a href="#" title="Trouvés3">Trouvés3</a>
			</li>
		</ul>
	</li>

Principe à appliquer pour tous les onglets que vous souhaitez.

Est-ce bien cela?

**Media20** · 04/09/2021, 17h55

Re,

oui merci bcp c'est recupere...
je suis a la recherche de tutos pour un moteur de recherche interne avec bdd.
Si vous connaissez un site ou je pourrais piocher des infos..
Cordialement

Disposer des images cliquables en colonne

Tableau en CSS

Discussions similaires

Partager

Partager