Fond dégradé avec bords arrondis

Bonjour,

Je crée un site sur Joomla, et il y a un léger détail que j'aimerais changer dans mon template, mais je bloque un peu dessus. Je n'ai des connaissances que très basiques en css.

J'ai un style qui permet de mettre des textes (ou autre) dans une "case" de couleur (désolé je vois pas quel terme employer)
(pour les utilisateurs de joomla, c'est juste un style de module quoi)

dont voici le code :

/* Module "S1" Text Style */
.moduleS1 {position:relative;margin:0 0 1em;padding:0;background: #427392 url(../images/style2/topright_S1.png) top right no-repeat;color: #FFFFFF;}
div.moduleS1 div {background: url(../images/style2/topleft_S1.png) top left no-repeat;}
div.moduleS1 div div {background: url(../images/style2/botleft_S1.png) bottom left no-repeat; height:1%;}
div.moduleS1 div div div {background: url(../images/style2/botright_S1.png) bottom right no-repeat;padding:10px;}
div.moduleS1 div div div div {background:none;}

Je voudrais remplacer le fond uni par un fond dégradé. J'ai donc créé une bande verticale en dégradé d'un pixel de largeur (et modifié la couleur de mes fichiers images de mes bords arrondis). Cependant, je ne sais pas ou intégrer cette bande :

url(../images/style2/moduleS1.jpg) repeat-x;

J'ai essayé à quelques endroits mais rien ne fonctionne...

J'espère avoir été assez clair... merci d'avance pour votre aide !

Hello,

Waouh... cinq niveaux de DIV imbriquées pour un conteneur? Super...
(Note pour moi-même: ne jamais toucher à Joomla. Voilà.)

Bon, ici le principe c'est que tu as cinq DIV imbriqués, déclinés comme ceci:
- le premier définit une couleur de fond unie, et ajoute une image en haut à gauche pour un coin arrondi;
- le deuxième, troisième et quatrième ajoutent les images pour les trois coins arrondis restant.

Si tu veux utiliser un fond dégradé, il faut le placer comme fond du premier niveau (sélecteur .moduleS1). Donc en remplacement du coin haut-gauche. Tu peux éventuellement reporter les images de coins arrondis sur les niveaux 2 à 5 au lieu de 1 à 4 actuellement. Attention: il faut que les images ne cassent pas l'effet graphique de ton dégradé. Il faudra peut-être ou surement les changer. Et pour que ça corresponde à un fond changeant (suivant la hauteur du conteneur, on n'a pas la même partie du dégradé en haut ou en bas), il faudra sans doute utiliser des coins en PNG transparent qui dessinent la partie extérieure des coins et laissent vide la partie intérieure. Et bien sûr ça ne sera pas compatible IE6.

Ça me semble très casse-gueule tout ça. Moi j'appliquerais juste le dégradé et utiliserais border-radius (CSS3, compatible Firefox et Safari/Chrome uniquement à l'heure actuelle) pour arrondir les angles dans les navigateurs qui le supportent.

Merci pour votre aide

En effet c'est casse gueule. J'ai donc essayé de remplacer le premier coin par mon image dégradée, et reporté les coins sur les niveaux suivants, comme ça :

/* Module "S1" Text Style */
.moduleS1 {position:relative;margin:0 0 1em;padding:0;background: url(../images/style2/moduleS1.jpg) repeat-x;padding:10px;color: #FFFFFF;}
div.moduleS1 div {background: url(../images/style2/topright_S1.png) top right no-repeat;}
div.moduleS1 div div {background: url(../images/style2/topleft_S1.png) top left no-repeat;}
div.moduleS1 div div div {background: url(../images/style2/botleft_S1.png) bottom left no-repeat; height:1%;}
div.moduleS1 div div div div {background: url(../images/style2/botright_S1.png) bottom right no-repeat;}


et ça donne ça : http://www.thebettrader.com

(le conteneur en haut a droite)

le coin en bas a droite a donc disparu, et les coins sont trop a l'intérieur. hmm

tu saurais eventuellement comment arranger ça??

NB : Pour l'instant la couleur des coins je m'en fous, je les remplacerai quand j'aurais la solution concernant le dégradé

NB2 : C'est pas parce que c'est joomla que le code est dégueu. c'est juste que j'ai telechargé un template gratuit, et le mec a fait son code comme ça

Alors pour l'essentiel:

1. Il te manque un niveau de DIV. Tu as des styles pour des DIV imbriqués sur cinq niveaux: conteneur avec image de fond en dégradé... -- qu'il faudrait doubler par une couleur de fond d'ailleurs pour les cas où le contenu dépasse les 120px de hauteur! -- et quatre div imbriquées pour dessiner les coins. Or, tu as quatre DIV imbriquées au lieu de cinq, donc il te manque la dernière.

2. Il ne faut pas appliquer de padding sur le conteneur, mais sur la toute dernière DIV (cinquième niveau).

Bon bah j'ai tenté ça mais sans grand succès... http://www.thebettrader.com

Désolé je comprends pas encore trop la logique des cascades et tout ça, dc je fais ce que tu me dis mais j'arrive pas a voir ou sont mes erreurs. Voilà ce que j'ai fait :



/* Module "S1" Text Style */
.moduleS1 {position:relative;margin:0 0 1em;padding:0;background: url(../images/style2/moduleS1.jpg) repeat-x;color: #234A62;}
div.moduleS1 div {background: url(../images/style2/topright_S1.png) top right no-repeat;}
div.moduleS1 div div {background: url(../images/style2/topleft_S1.png) top left no-repeat;}
div.moduleS1 div div div {background: url(../images/style2/botleft_S1.png) bottom left no-repeat; height:1%;}
div.moduleS1 div div div div {background: url(../images/style2/botright_S1.png) bottom right no-repeat;}
div.moduleS2 div div div div div {background:#234A62; padding:10px;}

Heu... dans ce code CSS tu vises un sixième DIV. Qui n'existe pas, pas plus que le cinquième DIV que tu n'as pas rajouté dans ton code HTML.

Dans mon précédent message je disais que tu avais besoin de CINQ éléments DIV, et que tu n'en as que QUATRE dans le code HTML. Il faut donc rajouter le cinquième, pas bidouiller le CSS inutilement. De plus, je pointains un problème très particulier dans ton code CSS (padding mal placé), et il suffisait à priori de corriger ce problème.

Je crois que tes difficultés illustrent parfaitement ce que je disais: une structure avec 5 éléments DIV imbriqués, c'est problématique, car même si techniquement ça peut marcher et ça peut permettre d'obtenir l'effet voulu, si la personne qui intervient sur le code HTML et CSS n'est pas un expert les risques d'erreurs sont trop importants...

Donc, mon conseil pour finir:
1. Se contenter d'un seul DIV dans le code HTML (virer tous les DIV internes, ne garder que le contenu réel).
2. Pour ce DIV unique, appliquer la couleur de fond (background-color), l'image de fond (background-image) et sa répétition (background-repeat). Appliquer la couleur du texte (color), le retrait interne (padding), et enfin arrondir les coins de la manière suivante:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

(et tant pis pour les navigateurs qui ne supportent pas ça).

Ou bien garder le modèle de départ si on n'a pas les compétences pour le modifier.

Merci Florent !

J'ai laché l'affaire et fait ta technique de border radius, tant pis pr les utilisateurs de IE. De tte façon je suis pas sur que ce soit déterminant!

Merci pr ton temps en tout cas

A+