espaces vides indésirables apear à la fin de la page
.article-image1 {
height: 256px;
width: 256px;
}
.article-image1:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-image: url(http://limootoys.com/wp-content/uploads/gentleman-e1508436248648.png);
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
transition: .4s ease-in-out;
}
.article-image1:hover:before {
-webkit-filter: grayscale(100%) blur(2px);
filter: grayscale(100%) blur(2px);
transition: .4s ease-in-out;
}
.ar-image1 {
position: relative;
width: 256px;
height: 256px;
top: 0;
right: 0;
}
.article-image1>p {
display: none;
}
.article-image1:hover>p {
position: absolute;
top: 50%;
display: block;
color: #fed700;
text-shadow: 3px 3px #000000;
font-size: 50px;
font-weight: bold;
z-index: 9999999;
width: 100%;
height: 100%;
text-align: center;
transition: .4s ease-in-out;
}
/*puzzle*/
.article-image2 {
height: 256px;
width: 256px;
}
.article-image2:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-image: url(http://limootoys.com/wp-content/uploads/puzzle.png);
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
transition: .4s ease-in-out;
}
.article-image2:hover:before {
-webkit-filter: grayscale(100%) blur(2px);
filter: grayscale(100%) blur(2px);
transition: .4s ease-in-out;
}
.ar-image2 {
position: relative;
width: 256px;
height: 256px;
top: -286px;
right: 306px;
}
.article-image2>p {
display: none;
}
.article-image2:hover>p {
position: absolute;
top: 50%;
display: block;
color: #fed700;
text-shadow: 3px 3px #000000;
font-size: 50px;
font-weight: bold;
z-index: 9999999;
width: 100%;
height: 100%;
text-align: center;
transition: .4s ease-in-out;
}
/*Maket*/
.article-image3 {
height: 256px;
width: 256px;
}
.article-image3:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-image: url(http://limootoys.com/wp-content/uploads/minivan.png);
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
transition: .4s ease-in-out;
}
.article-image3:hover:before {
-webkit-filter: grayscale(100%) blur(2px);
filter: grayscale(100%) blur(2px);
transition: .4s ease-in-out;
}
.ar-image3 {
position: relative;
width: 256px;
height: 256px;
top: -572px;
right: 662px;
}
.article-image3>p {
display: none;
}
.article-image3:hover>p {
position: absolute;
top: 50%;
display: block;
color: #fed700;
text-shadow: 3px 3px #000000;
font-size: 50px;
font-weight: bold;
z-index: 9999999;
width: 100%;
height: 100%;
text-align: center;
transition: .4s ease-in-out;
}
/*figure*/
.article-image4 {
height: 256px;
width: 256px;
}
.article-image4:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-image: url(http://limootoys.com/wp-content/uploads/batman.png);
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
transition: .4s ease-in-out;
}
.article-image4:hover:before {
-webkit-filter: grayscale(100%) blur(2px);
filter: grayscale(100%) blur(2px);
transition: .4s ease-in-out;
}
.ar-image4 {
position: relative;
width: 256px;
height: 256px;
top: -512px;
right: 0px;
}
.article-image4>p {
display: none;
}
.article-image4:hover>p {
position: absolute;
top: 50%;
display: block;
color: #fed700;
text-shadow: 3px 3px #000000;
font-size: 50px;
font-weight: bold;
z-index: 9999999;
width: 100%;
height: 100%;
text-align: center;
transition: .4s ease-in-out;
}
/*toys*/
.article-image5 {
height: 256px;
width: 256px;
}
.article-image5:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-image: url(http://limootoys.com/wp-content/uploads/robot.png);
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
transition: .4s ease-in-out;
}
.article-image5:hover:before {
-webkit-filter: grayscale(100%) blur(2px);
filter: grayscale(100%) blur(2px);
transition: .4s ease-in-out;
}
.ar-image5 {
position: relative;
width: 256px;
height: 256px;
top: -798px;
right: 306px;
}
.article-image5>p {
display: none;
}
.article-image5:hover>p {
position: absolute;
top: 50%;
display: block;
color: #fed700;
text-shadow: 3px 3px #000000;
font-size: 50px;
font-weight: bold;
z-index: 9999999;
width: 100%;
height: 100%;
text-align: center;
transition: .4s ease-in-out;
}
/*entertaimnt*/
.article-image6 {
height: 256px;
width: 256px;
}
.article-image6:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-image: url(http://limootoys.com/wp-content/uploads/magician.png);
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
transition: .4s ease-in-out;
}
.article-image6:hover:before {
-webkit-filter: grayscale(100%) blur(2px);
filter: grayscale(100%) blur(2px);
transition: .4s ease-in-out;
}
.ar-image6 {
position: relative;
width: 256px;
height: 256px;
top: -1084px;
right: 662px;
}
.article-image6>p {
display: none;
}
.article-image6:hover>p {
position: absolute;
top: 50%;
display: block;
color: #fed700;
text-shadow: 3px 3px #000000;
font-size: 50px;
font-weight: bold;
z-index: 9999999;
width: 100%;
height: 100%;
text-align: center;
transition: .4s ease-in-out;
}
<a style="display:block" href="http://limootoys.com/?product_cat=lego">
<div class="ar-image1">
<div class="article-image1">
<p>لگو</p>
</div>
</div>
</a>
<a style="display:block" href="http://limootoys.com/?product_cat=puzzle">
<div class="ar-image2">
<div class="article-image2">
<p>پازل</p>
</div>
</div>
</a>
<a style="display:block" href="http://limootoys.com/?product_cat=maket">
<div class="ar-image3">
<div class="article-image3">
<p>ماکت</p>
</div>
</div>
</a>
<a style="display:block" href="http://limootoys.com/?product_cat=figure">
<div class="ar-image4">
<div class="article-image4">
<p>فیگور</p>
</div>
</div>
</a>
<a style="display:block" href="http://limootoys.com/?product_cat=toys">
<div class="ar-image5">
<div class="article-image5">
<p>اسباب بازی</p>
</div>
</div>
</a>
<a style="display:block" href="http://limootoys.com/?product_cat=entertaiment">
<div class="ar-image6">
<div class="article-image6">
<p>سرگرمی</p>
</div>
</div>
</a>
Je veux créer un menu pour mon site avec quelques icônes cliquables mais certains espaces vides indésirables apparaissent lorsque j'utilise le code ci-dessus. Aussi quand j'accède à la page avec le téléphone les icônes apparaissent complètement de la grille. vous pouvez vérifier my site pour voir ce qui se passe réellement. toute aide pour éliminer ces espaces vides serait appréciée.
Merci James, vous aviez raison, il n'a pas évolué correctement sur mobile, mais avec votre code, il est corrigé! –
Pas de problème du tout Ali, toujours heureux d'aider. Découvrez la version éditée que je viens de mettre à jour ci-dessous l'original.Observez comment j'ai utilisé la classe et l'ID de l'article-image pour réduire la redondance lors de la déclaration des attributs identiques sur toutes vos icônes d'image. Aussi, évitez d'utiliser à tout prix les css en ligne, cela vous aidera dans le futur lorsque vous apportez des changements de style, de cette façon vous n'aurez pas à utiliser! Important ou à revenir à votre code HTML pour obtenir les changements souhaités. Heureux codage mon ami! – jstoobz
Quel beau morceau de code! Je vous remercie. Je suis un noob à coder donc votre explication a beaucoup aidé! Je vais les garder à l'esprit. –