Positionnement d'une liste avec effet hover jquery

Besoin d'aide pour obtenir la liste dans la div wrapper. Aussi les images que j'ai comme "articles" sont des largeurs légèrement différentes, de toute façon je pense qu'il y a une solution, cependant, je n'arrive pas à le trouver. Si quelqu'un connaît un code plus simple pour l'effet Hover Fane, c'est peut-être le plus facile. La jquery est assez bonne ici juste en ayant des problèmes de positionnement. Merci!Positionnement d'une liste avec effet hover jquery

Voici ce qu'il ressemble à ce jour - http://marisareviewsfilms.com/demo

Voici comment je veux regarder - http://marisareviewsfilms.com/lisa#

Mon CSS (les frontières sont juste pour me guider pour l'instant):

#wrapper { 
width: 827px; 
height: 577px; 
padding: 0px; 
margin-top: 50px; 
margin-right: auto; 
margin-left: auto; 
border: 1px solid blue; 
} 

.gallery li { 
float: left; 
margin-left: 0px; 
margin-right:0px; 
margin-top: 0px; 
margin-bottom: 0px; 
list-style-type: none; 
height: 577px; 
display: ; 
width: 129px; 
position: relative; 
border: 1px solid green; 
} 

img.grey { 
position: absolute; 
left: 0; 
top: 0; 
z-index: 10; 
} 

img.color { 
position: absolute; 
left: 0; 
top: 0; 
}

Source

2013-01-04 Marisa R

Pouvez-vous envoyer votre code http: // jsFiddle .net – KarSho

Votre code semble aller bien. Cependant, les paramètres par défaut du navigateur perturbent le positionnement.

Il suffit de modifier les paramètres suivants

Au début de la css appliquer une reset css.
Ajouter une classe clearfix au ul.gallery

Mise à jour

Les tranches d'image que vous utilisez sont 131px, à l'exception de la première, et la dernière (qui sont respectivement 148px, 151px).
changer donc ceci dans le CSS:

.gallery li { 
    width: 131px; 
} 
.gallery li:first-child { 
    width: 148px; 
} 
.gallery li:last-child { 
    width: 151px; 
}

Cependant, cela fonctionne sur tous les navigateurs modernes.
Si vous souhaitez prendre en charge IE7,8, , ajoutez des classes au premier et au dernier li, puis placez le CSS en conséquence (comme ci-dessus).

<li class="first"> 
... 
<li class="last">

NOTE: Ne retirez les frontières vert/bleu, car ils prendraient 1px largeur chacun.

Source

2013-01-04 10:52:43

C'est vraiment génial. Je vous remercie! Voici à quoi cela ressemble jusqu'à présent - http://marisareviewsfilms.com/demo. J'essaie de comprendre comment coder différentes largeurs dans la même liste, de sorte que cela ressemble à ceci - http://marisareviewsfilms.com/lisa#. Je ne suis pas sûr si c'est possible ... –

@MarisaR: J'ai mis à jour la réponse, voir si elle a résolu le problème –

Cela a fonctionné! http://marisareviewsfilms.com/demo. Je me demandais comment le préciser, maintenant je sais que pour le codage futur, merci beaucoup. J'ai voté, laissez-moi savoir s'il y a autre chose que je peux faire pour vous noter (encore apprendre les ficelles ici). En outre, j'aurais pu utiliser CSS pour coder le vérificateur de couleur, mais j'ai pensé que ce serait plus facile de cette façon puisque chaque colonne de couleur doit être un lien. Juste au cas où vous vous poseriez :) –

Voici quelques petites choses pour vous aider à aller:

Tout d'abord, si vous ajoutez margin: 0 et padding: 0 à .gallery, il y placer dans l'emballage. Deuxièmement, je changerais la manière dont vous exportez les images. Le fond sombre incurvé devrait faire partie du ul, et vous pouvez le créer dans css/avec une image. Ensuite, exportez chaque colonne de blocs colorés (avec un arrière-plan transparent) et placez-les de la même manière que vous l'avez fait maintenant.

Vous aurez beaucoup moins de problèmes à le faire de cette façon.

Source

2013-01-04 10:54:48 Toddish

Dans somes navigateurs <ul> (.gallery ici) ont une 40px padding-left,
vous pouvez corriger avec un css reset

ou en écrivant

ul.gallery{ 
    padding-left:0; 
}

Source

2013-01-04 10:55:55 nicolast

Positionnement d'une liste avec effet hover jquery

Répondre

Questions connexes