28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je vous soumets une demande un peu spéciale qui me laisse perplexe. Je dois faire un site avec un bloc principal d'une largeur spécifique qui doit rester centré quelle que soit la résolution de l'écran. J'ai lu pas mal de doc sur le sujet et jusqu'ici pas de problème. Là où ça se complique, c'est que sur une des pages, je dois afficher un slider avec des images qui lui, doit prendre toute la largeur de l'écran et même plus, puisque si la résolution est vraiment énorme, les images doivent disparaitre sur les côtés.

Un exemple en image vous aidera sûrement à mieux comprendre :

upload/19625-exemple.jpg

En gros, la partie grise avec le texte aura une largeur fixe et doivra rester centrée. La partie blanche aura une grande image de fond et quand on cliquera sur une des deux flèches, les carrés de couleur devront glisser vers la droite ou vers la gauche et sortir de l'écran.

J'ai du mal à trouver la bonne logique en css pour faire en sorte que mes carrés puissent dépasser de la largeur de la page... margin négative, overflow, etc... ?

Je remercie d'avance pour votre aide !
Modifié par hchtot (14 Dec 2010 - 12:42)
Personnellement j'essayerais d'entourer tout ça avec un div (width: 100%; et un height défini - très important), et de mettre toutes les images en float à l'intérieur de ce div, avec un overflow:hidden; (ce qui cachera les images dépassant).

Ensuite, ce sera de gérer le JS pour les faire défiler.
Merci pour ta réponse Vaxilart.
En fait j'ai résolu le problème en mettant le div qui contient les carrés en position: fixed. De cette manière, même si la largeur de mon div est énorme, mes carrés ne reviennent pas à la ligne. Je sais pas si je vais pas avoir des surprises avec certains navigateurs mais ça, on verra plus tard...