Bonjour à tous,
Je réalise actuellement un design qui repose sur la technique des colonnes factices pour avoir deux colonnes de hauteur similaires. Je souhaite rajouter en arrière plan une bande horizontale.
Pour que vous puissez imaginer ce que je souhaite :
- Un bloc centré avec un contour formé d'une image (comme sur alsacreation). Ce bloc contient deux autres blocs en float de couleur différentes et de même taille grâce à la technique des colonnes factices.
- Une bande hotizontale d'environ 100px de haut qui s'affiche sur toute la page sauf sur le bloc de contenu. On peut voir ça sur plusieurs sites comme par exemple ici avec la bande marron ou encore ici avec la bande bleue.
Pour créer la bande horinzontale, j'utilise une image qui sert de background à mon élément body (avec un repeat-x).
Mon problème est le suivant : Le contour de mon bloc central est comme je l'ai dit précédemment une image. Celle-ci est un dégradé qui permet de faire la transition du bloc central à la couleur du fond. Au niveau de la bande horizontale, le degradé de couleur n'est pas le même.
Je cherche donc pour un même bloc à mettre deux background différents ou à simuler cet effet. J'ai essayé plusieurs solutions mais aucune n'est propre/ne me convient :
- diviser mon bloc central en deux sous blocs => Fonctionne mais coupe un bloc de contenu en deux => Mauvaise solution.
- imbriquer trois divs pour supperposer les background => Pas très propore, j'ose pas imaginer la compatibilité entre navigateurs ni même l'accessibilité finale.
Je suis preneur de toute idée pouvant faire avancer le problème
Merci.
Modifié par LoK (26 Oct 2010 - 11:45)
Je réalise actuellement un design qui repose sur la technique des colonnes factices pour avoir deux colonnes de hauteur similaires. Je souhaite rajouter en arrière plan une bande horizontale.
Pour que vous puissez imaginer ce que je souhaite :
- Un bloc centré avec un contour formé d'une image (comme sur alsacreation). Ce bloc contient deux autres blocs en float de couleur différentes et de même taille grâce à la technique des colonnes factices.
- Une bande hotizontale d'environ 100px de haut qui s'affiche sur toute la page sauf sur le bloc de contenu. On peut voir ça sur plusieurs sites comme par exemple ici avec la bande marron ou encore ici avec la bande bleue.
Pour créer la bande horinzontale, j'utilise une image qui sert de background à mon élément body (avec un repeat-x).
Mon problème est le suivant : Le contour de mon bloc central est comme je l'ai dit précédemment une image. Celle-ci est un dégradé qui permet de faire la transition du bloc central à la couleur du fond. Au niveau de la bande horizontale, le degradé de couleur n'est pas le même.
Je cherche donc pour un même bloc à mettre deux background différents ou à simuler cet effet. J'ai essayé plusieurs solutions mais aucune n'est propre/ne me convient :
- diviser mon bloc central en deux sous blocs => Fonctionne mais coupe un bloc de contenu en deux => Mauvaise solution.
- imbriquer trois divs pour supperposer les background => Pas très propore, j'ose pas imaginer la compatibilité entre navigateurs ni même l'accessibilité finale.
Je suis preneur de toute idée pouvant faire avancer le problème
Merci.
Modifié par LoK (26 Oct 2010 - 11:45)
