[Résolu] Css et images de fond

Je voudrais créer un menu avec trois images de fond (une au top, au milieu et une en bas), j'ai repris ce morceau de css d'un autre fichier qui fonctionne, puis ai fait les modif pour qu'il corresponde au nouveau css.
Est-ce que vous voyez qqch qui semblerait bizarre ?? je tourne en rond...

#leftmenu div.moduletable_menu {

width: 152px;

background: transparent url(../images/module_middle.jpg) left repeat-y;

margin-bottom: 10px;

}



#leftmenu div.moduletable_menu div {

width: 152px;

background: transparent url(../images/module_top.jpg) top left no-repeat;

}



#leftmenu div.moduletable_menu div div {

width: 152px;

background: transparent url(../images/module_bottom.jpg)  bottom left no-repeat;

}





#leftmenu div.moduletable_menu div div div{

width: 137px;

padding-left: 5px;

padding-right: 10px;

padding-top: 10px;

background: transparent;

padding-bottom: 10px;

font-size: 10px;

}



#leftmenu div.moduletable_menu div div div div{

padding: 0px;

margin: 0px;

}

Modifié par matthieuP (08 Feb 2012 - 22:10)

Bonjour,

Quelques questions:
1. Qu'est-ce qui ne marche pas au juste?
2. Est-ce qu'on peut voir la page directement, ou une page qui reproduit le problème? Avec juste le CSS ça va être compliqué.
3. Non je ne vois rien de bizarre, à part cette structure en DIVs imbriqués dans des DIVs dans des DIVs qui est très laide.

Merci de la réponse!
Oui, tu peux voir la page que je veux reproduire (les menus en l'occurrence) sur www.bazarouchy.com.
Je dosi reproduire ces menu sur une autre page, et je n'arrive pas à faire apparaitre les 3 images.
Seule la "middle" apparait répétée en Y, mais pas moyen de faire apparaitre le top et le bottom..
une idée?
Modifié par matthieuP (08 Feb 2012 - 22:09)

matthieuP a écrit :
une idée?

Oui:

fvsch a écrit :
Est-ce qu'on peut voir la page directement, ou une page qui reproduit le problème? Avec juste le CSS ça va être compliqué.

Modifié par fvsch (07 Feb 2012 - 20:23)

Malheureusement je suis en local pour ce site.. y'a un moyen pour que je t'envoie le css, l'index et le detail.xml ? ce sont les trois fichiers qui compose mon template...

Je suis sûr que c'est un tout petit truc.. mais je n'arrive pas à mettre la main dessus...

je t'en prie, ne me laisse pas tomber.. c'est con ce truc et je sais pas où trouver de l'aide...

je te donne si jamais le lien avec une archive contenant les trois fichiers.
www.bazarouchy.com/MATT/css-issue.zip

ou sinon t'as un moyen de faire sans div?!

matthieuP a écrit :
y'a un moyen pour que je t'envoie le css, l'index et le detail.xml ?

Ton index.php est apparemment un fichier de template Joomla. Je vais pas me faire une installation de Joomla, je n'ai pas tes contenus, je n'ai pas les images... je ne peux vraiment pas reconstituer la page! (Et même si je pouvais, du moment que le processus pour y arriver me demande plus de deux minutes de boulot c'est juste pas possible. Ce n'est pas moi qui demande de l'aide dans ce sujet, hein. )

matthieuP a écrit :
Je suis sûr que c'est un tout petit truc.. mais je n'arrive pas à mettre la main dessus...

Tu as utilisé Firebug ou Web Inspector en mode inspection pour voir quelles surfaces tes éléments occupent, quels styles sont appliqués exactement à un élément donné, et s'il y a des erreurs dans le chargement de certaines images?

Je comprends que ca prend du temps, et je te remercie profondément de m'avoir donné un peu de soutient.
J'ai trouvé une piste à mon soucis
ici
http://www.osignite.com/blog/item/77-basic-joomla-15-module-styling-rounded-modules.html

mais j'ai finalement opté pour cette solution :
http://www.teachmejoomla.net/code/misc/css-flexible-rounded-corners-box-with-one-single-background-image.html

faut que je teste encore cette dernière sur différent navigateurs, mais jusque là ca à l'air de pas trop mal marcher..

Merci encore !!

J'ai trouvé finalement..
Pour commencer (je l'avais effectivement pas dit) de suis sur Joomla (version 2.5)

Voilà ce que j'ai fait :

Dans mon index, j'ai dû changer le type de module
<jdoc:include type="modules" name="yourmodule" style="xhtml" />

par
<jdoc:include type="modules" name="yourmodule" style="rounded" />


Et le code correct était le suivant :
ATTENTION de bien mettre .module, et non .moduletable (le _left_max est le suffixe à rajouter dans le menu du module sous l'onglet déroulant "Options avancées", dans la case "Suffixe de classe CSS")


#leftmenu div.module_left_max {
background-image:url(../images/module_middle.jpg);
background-repeat:repeat-y;
width:200px;
}

#leftmenu div.module_left_max div{
background-image:url(../images/module_top.jpg);
background-repeat:no-repeat;
background-position:top left;
}

#leftmenu div.module_left_max div div {
background-image:url(../images/module_bottom.jpg);
background-repeat:no-repeat;
background-position:bottom left;
}


#leftmenu div.module_left_max div div div{
background: none;
padding: 20px;
}

Le template d'origine s'appelait madeyourweb