Clip CSS et positionnement absolu

Question

J'utilise un clip pour créer des vignettes pour une galerie. Malheureusement, le clip ne peut être utilisé que lorsqu'un élément est positionné de manière absolue. Appliqué équitablement à chaque img, ceci les fait bien sûr s'asseoir les uns sur les autres tout en utilisant un style CSS, quelque chose comme ça.

.Thumbnails { 
    position: absolute; 
    height: 105px; 
    clip: rect(50px 218px 155px 82px); 
} 

Comment puis-je les positionner l'un par rapport à l'autre? Je veux juste des lignes de base.

Answer 1

Je ne recommanderais pas une solution css pure. Avez-vous considéré une bibliothèque telle que phpThumb? De là, vous venez d'utiliser le code CSS suivant:

.Thumbnails{float:left} 

et références aux miniatures finissent par ressembler à ceci:

<img src="path/to/phpThumb.php?src=image.jpg&h=100&w=100&zc=1" alt="some image" /> 

Cette ligne serait essentiellement créer une miniature 100x100, la ZC spécifie une culture de zoom (recadrage pour correspondre aspect rapport, et la bibliothèque des vignettes ne cache une assez astucieux pour réduire la charge du serveur

Answer 2

J'ai fait un peu de CSS, et je ne me souviens pas d'avoir jamais utilisé ou même vu un clip. Misunderstood CSS Clip suggère que je ne suis pas le seul: "La propriété du clip CSS doit être l'une des propriétés les moins utilisées en CSS, probablement parce que personne ne sait vraiment quand l'utiliser, il ne semble pas être supporté par Internet. Explorer, et certaines personnes l'utilisent incorrectement. "

Donc, ne le faites pas avec un clip. Cela vous permet de vous débarrasser de la position: absolue, ce que vous avez reconnu n'est pas ce que vous voulez. Si je comprends ce que vous essayez de faire, juste la largeur set: et hauteur: valeurs pour les images, ainsi que certains types de remplissage, peut-être comme ceci:

.Thumbnails { 
    width: 100px; 
    height: 100px; 
    padding-bottom: 10px; 
    padding-right: 10px; 
} 

(Eric Meyer "Feuilles Cascading Style: The Definitive Guide" "L'histoire longue et alambiquée de clip signifie que, dans les navigateurs actuels, il agit de manière incohérente et ne peut pas être invoqué dans un environnement multi-navigateur.")

Answer 3

Voici quelques options:.

1. Vous pouvez utiliser la propriété de clip pour éviter le chevauchement et créer des vignettes en même temps: http://www.cssplay.co.uk/menu/clip_gallery.html

2. Vous pouvez utiliser des marges négatives pour séparer les images les unes des autres, et trop-plein pour créer les vignettes: http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image