28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

je travaille actuellement sur mon site et j'aimerai m'inspirer de la nouvelle interface du site Amazon US, Amazon.com. Je souhaite reprendre cette même structure en largeur fluide (un bloc à gauche en largeur fixe, et le bloc de contenu ainsi que le header en largeur fluide).

Je le trouve particulièrement efficace pour un usage multi plateformes et j'aime le fait qu'un visiteur avec grand écran d'au moins 1680x1050px ne se retrouve pas systématiquement avec deux grands espaces vides autour du bloc principal.

Néanmoins, je ne conserverai pas l'affichage des articles par grille (comme ici: Articles Amazon par grille) car ça fait trop vite fouillis et plus l'écran est grand et plus ça sera rempli de blocs indigestes. Je préfère donc l'affichage par liste (comme ici: Articles Amazon par liste).

Cependant parce qu'il y a un MAIS Smiley smile . Cette affichage par liste générera inévitablement un espace blanc important à droite dans le bloc contenu, pour les hautes résolutions. Je souhaiterai donc afficher une DIV (contenant des bannières pub par exemple) dans cet espace blanc mais une DIV qui s'afficherait uniquement à partir de 1680x1050 (quand l'espace blanc devient trop présent).

Une astuce CSS ou autre pour cela?

Merci Smiley cligne
Bonjour,

Tu peux utiliser les media queries pour cela :


@media only screen and (min-width:1680px) {
    #mydiv {
        display:block;
    }
}


@+

Sam