Discussion :

[psycoma]

salut a tous

je suis en train de faire un template pour joomla et je bute sur un problème qui commence a m'agacer

le soucis viens du CSS, et n'étant pas expert je viens solliciter votre aide :

je vous met mon code CSS, c'est un theme que je modifie donc je met pas tout, mais je pense que le soucis viens de cette partie

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#leftcolumn ul.menu {
	margin: 0px;
	padding:0px 0px 0px 0px;
	text-transform: uppercase;
	font-variant: small-caps;
	color: #FFFFFF;
	text-align: left;
	text-indent: 20px;
	line-height: 64px;
	font-size: 14px;
}
 
#leftcolumn ul.menu li {
width: 180px;
height:60px;
background: #000000 url(../images/h3.jpg) top left no-repeat;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
 
#leftcolumn ul.menu li:hover  {
width: 180px;
height:60px;
background: #000000 url(../images/h3_hover.jpg) top left no-repeat;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
text-decoration:none;
}

et voila les resultats

pour firefox, c'est comme je veux :



pour IE le texte est décallé vers le haut



merci d'avance, et bonne année à tous

[GihefBey]

Bonjour,

Essaye en déplaçant le line-height de ul.menu { dans ul.menu li {

Tu fais le :hover sur les li.
Il n'y a pas de liens dans ton menu ?

Donne aussi le code HTML du menu.


++
Pour rester dans la logique CSS, pense et utilise plutôt

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

background : ... no-repeat left top;

left d'abord.

-

[psycoma]

j'ai deplacé le line-height c'est toujours pareil

en fait c'est un template pour joomla et je ne sais pas ou trouver le html qui va pour ce module (noobitude quand tu nous tient)

je fais le rollover sur le li car c'est l'image qui change quand on passe le curseur, le texte reste identique. je sais pas si c'est le mieux mais ca fonctionne en tout cas.

voila un appercu du rollover sur biographie :


je peux faire un code source, je sais pas si c'est vraiment ce que tu souhaites

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
          <div class="module_menu">
            <div>
              <div>
                <div>
                  <ul class="menu">
                    <li id="current" class="active item1"><a href="http://127.0.0.1/"><span>Home</span></a></li>
                    <li class="item2"><a href="/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=2"><span>Biographie</span></a></li>
                    <li class="item3"><a href="http://*******.com" target="_blank"><span>Official Website</span></a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

[12monkeys]

Bonsoir

je ne sais pas ou trouver le html qui va pour ce module (noobitude quand tu nous tient)

Tu affiches simplement ta page dans un navigateur, tu affiches le code source (clic droit et Code source de la page ou afficher la source...), tu trouves la partie concernée, et un copié collé ici et hop c'est fait...

Le code que tu présente et le bon code ? Je doute... et puis pourquoi alors autant de divs ?

[GihefBey]

La version de Joomla dont je dispose utilise systématiquement des tableaux (ce que ne fait pas joomla.org).
Le menu est constitué de <td>.
Si tu les utilises, un simple vertical-align devrait suffire.

Sinon, essaye

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#leftcolumn ul.menu li {
  width: 180px;
  height: 60px;
  background: #000 url(../images/h3.jpg) no-repeat left top;
  margin: 0;
  padding: 0;
  }
 
#leftcolumn ul.menu li a {
display: block;
width: 180px;
height: 60px;
line-height: 60px;
  }
#leftcolumn ul.menu li a:hover {
background: #000 url(../images/h3_hover.jpg) no-repeat left top;
text-decoration: none;
  }

Mais, est-ce que IE n'a pas un soucis avec line-height ?

-

[psycoma]

Bonsoir



Tu affiches simplement ta page dans un navigateur, tu affiches le code source (clic droit et Code source de la page ou afficher la source...), tu trouves la partie concernée, et un copié collé ici et hop c'est fait...

Le code que tu présente et le bon code ? Je doute... et puis pourquoi alors autant de divs ?

le code est le bon

et pour les <div> désolé mais ce n'est pas moi qui aie développé ce module pour joomla ^^


j'ai essayé le code c'est toujours pareil. et ca bug meme sous Firefox maintenant. ca vient peut etre d'ailleurs ... mais y'a tellement de trucs dans le CSS je m'en sors pas =_='

[GihefBey]

Mets tout ça en ligne.
Donne-nous l'adresse.
Au cas où...

-

[12monkeys]

Ok

Alors comment faire pour déboguer : tu te crée 1 fichier .html sur ton ordi (sans passer par joomla je veux dire) tu y colle le code html d'une des pages ainsi que le code css (dans le même fichier ou dans un autre, peu importe).

Tu simplifie ton code html (genre la structure et le menu), et tu mets les différentes parties du css entre commentaire au fur et à mesure pour voir ce qui pose problème, ça te permet de délimiter le code problématique. D'ailleurs tu peut aussi montrer ce code ici, ce sera plus simple pour nous de voir...

Sinon fais comme le demande GihefBey, ça peut aussi aider.

D'ailleurs je pense qu'il a mis le doigt sur le problème : le line-height. Essaye voir de mettre un css spécifique à IE où tu remplacera le line-height par des margin (attention il faudra éventuellement aussi revoir le height, à voir)...

Dernière idée : transfère le line-height sur le li au lieu de le mettre sur le a (dans l'exemple de GihefBey).

[psycoma]

Ok

Alors comment faire pour déboguer : tu te crée 1 fichier .html sur ton ordi (sans passer par joomla je veux dire) tu y colle le code html d'une des pages ainsi que le code css (dans le même fichier ou dans un autre, peu importe).

je travaille comme ca avec dreamwaver, j'utilise le code source de l'index de joomla ca evite d'avoir les modules incomplets
j'ai deja essayé de faire le CSS pas a pas, mais comme dit plus haut y'a plus de 30 trucs qui concernent mon menu (de pres ou de loin)

je vais refaire le tout pas a pas en suivant vos conseils
merci

je pire c'est que j'avais reussi et j'ai tout perdu dans un format =_='

[psycoma]

bon ben j'ai effacé et refais et ca fonctionne \o/

voici mon code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#leftcolumn ul.menu {
	margin: 0 auto;
	padding: 0; 
	list-style: none;
	width: 164px;
}
 
#leftcolumn ul.menu li {
	margin: 0;
	padding-top: 25px;
	padding-left:20px;
	background:url(../images/h3.jpg) left top no-repeat;
	height:60px;
	width:180px;
	font-variant:small-caps;
	text-transform:uppercase;
}
#leftcolumn ul.menu li:hover {
background:url(../images/h3_hover.jpg) left top no-repeat;
}

merci a tous