Des "pavés" dans le footer qui ne se suivent pas

**dhillig** · 04/04/2016, 20h34

Nom : Capture d’écran 2016-04-04 à 19.18.26.png
Affichages : 84
Taille : 101,2 Ko

Bonsoir à tous,
Le 6e pavé (coming soon) de mon footer reste en "3e position" en mode @media only screen and (min-width : 481px) and (max-width : 768px).
Impossible de savoir pourquoi

Comment faire pour qu'il ne reste pas fixé en bas à gauche ?

Les CSS :

Code :

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

1
2
3
4
5
6
7
@media only screen and (min-width : 320px) and (max-width : 480px) {
.footerFloat {
	width: 90%;
	padding-left: 4%;
	padding-right: 6%;
}
}

Le html :

Code :

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
  <div class="footerFloat">
    <h2><a href="../dessins-de-presse.html">DESSINS DE PRESSE</a></h2>
    <ul>
      <li><a href="../dessins-de-presse.html"><i class="fa fa-star"></i> Angelo Di Marco</a></li>
      <li><a href="../presse.html"><i class="fa fa-star"></i> Hoviv</a></li>
      <li><a href="../presse.html"><i class="fa fa-star"></i> Laville</a></li>
      <li><a href="../presse.html"><i class="fa fa-star"></i> Luis Ruiz</a></li>
      <li><a href="../presse.html"><i class="fa fa-star"></i> Trez</a></li>
    </ul>
  </div>
  <div class="footerFloat">
    <h2><a href="../europeens.html">EUROPEENS</a></h2>
    <ul>
      <li> <a href="../europeens.html"> <i class="fa fa-star-4"></i>Carali </a> </li>
      <li> <a href="../europeens.html"> <i class="fa fa-star"></i> Giorgio Cavazzano </a> </li>
      <li> <a href="../europeens.html"> <i class="fa fa-star"></i> Angelo Di Marco</a></li>
      <li> <a href="../europeens.html"> <i class="fa fa-star"></i> Henri Dufranne </a> </li>
      <li> <a href="../europeens.html"> <i class="fa fa-star"></i> Leone Frollo </a> </li>
      <li> <a href="../europeens.html"> <i class="fa fa-star"></i> Marcel Gotlib </a> </li>
      <li> <a href="../europeens.html"> <i class="fa fa-star"></i> Lacroix </a> </li>
      <li> <a href="../europeens.html"> <i class="fa fa-star"></i> Tanino Liberatore </a> </li>
      <li> <a href="../europeens.html"> <i class="fa fa-star"></i> Claude Marin </a> </li>
    </ul>
  </div>
  <div class="footerFloat">
    <h2><a href="../americains.html">AMERICAINS</a></h2>
    <ul>
      <li> <a href="../americains.html"> <i class="fa fa-star"></i> Neal Adams </a> </li>
      <li> <a href="../americains.html"> <i class="fa fa-star"></i> Kyle Baker </a> </li>
      <li> <a href="../americains.html"> <i class="fa fa-star"></i> John Buscema </a> </li>
      <li> <a href="../americains.html"> <i class="fa fa-star"></i> Gene Colan </a> </li>
      <li> <a href="../americains.html"> <i class="fa fa-star"></i> Scott Hampton </a> </li>
      <li> <a href="../americains.html"> <i class="fa fa-star"></i> Bill Sienkiewicz </a> </li>
      <li> <a href="../americains.html"> <i class="fa fa-star"></i> Ashley Wood </a> </li>
    </ul>
  </div>
  <div class="footerFloat">
    <h2><a href="../divers.html">BRIC A BRAC</a></h2>
    <ul>
      <li><a href="../divers.html"><i class="fa fa-star"></i> Germaine Bouret</a></li>
      <li><a href="../divers.html"><i class="fa fa-star"></i> Alfred Dehodencq</a></li>
      <li><a href="../divers.html"><i class="fa fa-star"></i> Poulbot</a></li>
      <li><a href="../divers.html"><i class="fa fa-star"></i> Publicités</a></li>
    </ul>
  </div>
  <div class="footerFloat">
    <h2><a href="dedicaces.html">DEDICACES & FAIRE-PART</a></h2>
    <ul>
      <li><a href="dedicaces.html"><i class="fa fa-star"></i> Neal Adams </a></li>
      <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Dany </a></li>
      <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Will Eisner </a></li>
      <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Jean Giraud </a></li>
      <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Marcel Gotlib </a></li>
      <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Scott Hampton </a></li>
      <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Lob </a></li>
      <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Jean-Claude Mézières </a></li>
      <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Mœbius </a></li>
      <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Bill Sienkiewicz </a></li>
      <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Jean Solé </a></li>
      <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Denis Verlaine </a></li>
    </ul>
  </div>
  <div class="footerFloat">
    <h2><a href="">Coming soon</a></h2>
    <ul>
      <li><a href=""><i class="fa fa-exclamation-triangle"></i> En travaux </a></li>
    </ul>
  </div>
  ****
  <div style="clear:both;"></div>
</div>

Merci pour votre aide,
dh

Invité · 04/04/2016, 23h06

Bonjour,

Et si tu montrais le bon CSS ?

Je suppose que les box sont en float:left;

La 3e est plus haute que la 4e, et donc la 5e butte dessus.

On peur regler le pb en jQuery, en égalisant les hauteurs des box.

**dhillig** · 04/04/2016, 23h51

Bonsoir Jérôme,
Effectivement, me suis trompé de ligne

Voici les CSS du footer au complet (obligé de passer par du JQuery ?)

Code :

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
/* bas de page */
#auteurs {
	width: 100%;
	height: auto;
	margin-bottom: 0px;
	position: relative;
	bottom: 0px;
	z-index: 99;
	padding-top: 2em;
	padding-bottom: 1em;
	background-color: #033;
	background-image: url(../img/fond.jpg);
	background-repeat: repeat;
}
.footerFloat {
	width: 16.5%;
	float: left;
	padding-left: 2%;
	padding-right: 1%;
	height: auto;
 
}
 
.footerFloat h2 {
	color: #FFB000;
	font-family: "amatic bold";
	font-size: 40px;
	text-align: left;
	line-height: 40px;
	text-decoration: none;
 
}
 
.footerFloat ul {
	list-style: none;
	text-align: left;
	padding: 0;
	margin-top: -20px;
}
.footerFloat li {
	display: inline;
}
.footerFloat li a {
	color: #FFFFFF;
	font-family: "OpenSans Regular";
	font-size: 14px;
	line-height: 24px;
	text-decoration: none;
 
}
.footerFloat li a:hover {
	color: #FFB000;
	border: none;
}
 
.footerFloat li:not(:last-child) {
	margin-right: 5px;
}
 
@media only screen and (min-width : 481px) and (max-width : 768px) {
.footerFloat {
	width: 47%;
}
}
 
@media only screen and (min-width : 320px) and (max-width : 480px) {
.footerFloat {
	width: 90%;
	padding-left: 4%;
	padding-right: 6%;
}
}

Merci pour ton aide,
dh

**dhillig** · 05/04/2016, 13h55

Bonjour,
J'ai bien tenté avec jquery :

Code :

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

<script>$('#auteurs').equalize('height');</script>

mais cela ne change rien

Bonne journée,
dh

Invité · 05/04/2016, 14h09

Bonjour,

à moins d'utiliser un plugin, equalize() n'est pas une fonction native de jQuery.

Tu pourrais aussi écrire toi-même la fonction "qui va bien".

**dhillig** · 05/04/2016, 16h52

Bonjour Jérôme,
tu me prêtes des connaissances que je ne possède malheureusement pas encore

Invité · 05/04/2016, 18h35

Envoyé par jreaux62

...à moins d'utiliser un plugin, ....

Quand c'est écrit en bleu et souligné, c'est (souvent) un LIEN

Des "pavés" dans le footer qui ne se suivent pas

CSS

Vue hybride

Discussions similaires

Partager

Partager