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ù...

-