28173 sujets

CSS et mise en forme, CSS3

Bien le bonjour à tous !

Une erreur ma foi bien étrange me pompe tout mon temps depuis hier.
En utilisant le tutoriel sur le menu horizontal, j'ai fait un bien joli menu qui marche nickel.
En-dessous, je voulais créer une autre sorte de menu horizontal qui consiste en trois boutons qui, au clic, changent le contenu de la div en-dessous d'eux. Pas de problème concernant le code pour changer le contenu, tout le problème est au niveau des boutons.
Si je ne les mets pas en forme, donc je laisse juste le texte du lien, sans aucune modif, évidemment les liens s'affichent les uns en dessous des autres, mais au moins ils marchent.
Par contre, si je les mets en forme dans le même genre que le premier menu qui marche nickel, toujours en suivant le tutoriel, il n'y a que le premier bouton qui fonctionne. Les autres, même ils apparaissent, avec le lien correspondant, dans le code, on ne peux pas les cliquer !
Et encore plus étrange, cette erreur n'arrive que sur FF, pas sur IE !

Donc je ne sais plus quoi faire... Si quelqu'un a une idée, merci d'avance !!
Bonjour,

a écrit :
Si quelqu'un a une idée, merci d'avance !!


Peut-être qu'avec le code (X)HTML/CSS/JS ou mieux une page en ligne, nous serions en mesure de t'aider Smiley rolleyes . A moins que ce projet ne soit classé "secret défense" ? Smiley cligne
Bien sûr, mes excuses... Smiley biggrin

Voilà pour le code, sachant qu'il est compris dans une sidebar alignée à droite. Cela me sert, dans une même div, à afficher pour un club soit le match précédent, soit le match suivant, soit le classement, en fonction du bouton sur lequel on clique.


<div id="listeOnglets">
  <dl>
    <dt class="normalOnglet"><a href="#" onclick="changeTab('lastg','nextg','classement');">DERNIER MATCH</a></dt>
  </dl>

  <dl>
    <dt class="currentOnglet"><a href="#" onclick="changeTab('nextg','lastg','classement');">PROCHAIN MATCH</a></dt>
  </dl>
  
  <dl>
     <dt class="normalOnglet"><a href="#" onclick="changeTab('classement','lastg','nextg');">CLASSEMENT</a></dt>
  </dl>

</div>


Niveau CSS, ça donne ça si je ne touche à rien :


dt, dl, dd, ul, li {
	list-style-type: none;
	margin:0 10px 0 0;
	padding:0;
}

#listeOnglets {
	width:260px;
	height:19px;
	background-color:none;
	position:relative;
	margin:0;
	padding:0;
}


Là, les liens marchent. Par contre, si je rajoute quelque chose du genre :

#listeOnglets dt a{
	text-align:center;
	color:#e60005;
	text-decoration:none;
	display:block;
	width:85px;
}

#listeOnglets dl {
	float:left;
	margin:0;
	padding:0;
	background-color:none;
}


Là, ça ne marche plus... Et pourtant, j'aurais pas ajouté grand-chose...

Merci d'avance en tout cas !