28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Problème FF et IE avec menu à onglets

Salut. J'ai un problème avec Firefox et Internet Explorer 9 lors de l'affichage de mon menu. Par contre ça marche bien et j'ai le résultat que je souhaite avec Chrome, Opera et Safari.

Code HTML

<body>
<table width="660" border="0" cellpadding="0" cellspacing="0">
  
  <tr>
    <td height="60" colspan="2">
		<div id="menu">
        	<ul>
        	  <li><a href="#"><span>Lien 1</span></a></li>
       		  <li><a href="#" class="current"><span>Lien 2</span></a></li>
       		  <li><a href="#"><span>Lien 3</span></a></li>                                
       		</ul>
        </div>    
        </td>
  </tr>
  <tr style="background-color:#999">
    <td height="100" width="500" style="border-left:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9;">Contenu</td>
    <td height="100" width="160" align="center" style="border-right:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9;">image</td>
  </tr>
  
</table>
</body>


Code CSS

body {
	background:#CCC;
}

#menu
{
	margin:0;
	padding:0px 0px;
	height:60px;
	float:left;
	width:660px;
	border-bottom:1px solid #e9e9e9;
}

#menu ul
{
	list-style-type:none;
	margin-bottom:0px;
	padding:0px 0px 0px 20px;
	height:60px;
}

#menu ul li
{
	display:inline;
	float:left;
	margin-left:3px;
	margin-right:3px;	
	margin-bottom:0px;
	margin-top:7px;
	padding:0px;
	border-top:1px solid #e9e9e9;
	border-left:1px solid #e9e9e9;
	border-right:1px solid #e9e9e9;
}

#menu li a
{
	display:block;
	color:#333333;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:20px;
	font-weight:bold;
	text-decoration:none;
	margin-bottom:0px;
	padding:5px;
}

#menu li a:hover
{
	color:#ffffff;
}

#menu li a.current
{
	border-bottom:1px solid #999;
	margin-bottom:0px;
	background:#999999;
	color:#FFFFFF;
}

Modifié par Elias (01 Nov 2011 - 22:31)
Bonsoir,

D'un point de vue sémantique les tableaux, sauf peut-être cas très spécifiques, doivent uniquement être employés pour l'affichage de données. Si vous voulez un tant soit peu respecter les standards, mieux vaut opter pour l'utilisation de balises neutres div pour structurer votre menu. C'est d'autant plus simple à réaliser et on évite ainsi plus facilement ce genre de problème d'affichage. Ci-dessous un exemple de code qui permet le même type de rendu que celui recherché, mais sans passer par un tableau :

HTML :
<div id="container">
	<ul>
		<li><a href="#">Lien 1</a></li>
		<li><a href="#" class="current">Lien 2</a></li>
		<li><a href="#">Lien 3</a></li>
	</ul>
	<div id="content">
		<img src="image.jpg" alt="" />
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum molestie scelerisque. Morbi ligula ante, pretium tincidunt luctus vel, vestibulum a justo. Vivamus interdum est eget nibh posuere aliquet. Vivamus.</p>
		<div class="clear"></div>
	</div>
</div>


CSS :
body, ul, p {
	margin: 0;
	padding: 0;
}

body {
	background: #ccc;
	font-family: "trebuchet ms", arial, helvetica, sans-serif;
	font-size: 12px;
	color: #333;
}

#container {
	width: 660px;
	margin: 7px;
}

#container ul {
	height: 31px;
	margin-left: 20px;
	list-style-type: none;
}

#container li {
	float: left;
}

#container li + li {
	margin-left: 3px;
}

#container li a {
	line-height: 30px;
	padding: 0 5px;
	display: block;
	border-style: solid;
	border-width: 1px 1px 0 1px;
	border-color: #e9e9e9;
	text-decoration: none;
	font-size: 20px;
	font-weight: bold;
	color: #333;
}

#container li a:hover {
	color: #fff;
}

#container li a.current {
	height: 31px;
	background-color: #999;
	color: #fff;
}

#content {
	padding: 20px 20px 0 20px;
	background-color: #999;
	border: solid 1px #e9e9e9;
	text-align: justify;
	color: #fff;
}

#content img {
	margin-left: 20px;
	margin-bottom: 20px;
	float: right;
}

#content p {
	margin-bottom: 20px;
}

div.clear {
	clear: both;
}


Voici l'image pour tester le bout de code ci-dessus :
upload/41040-image.jpg
Bonjour,

jeremy-p a écrit :
Bonsoir,
D'un point de vue sémantique les tableaux, sauf peut-être cas très spécifiques, doivent uniquement être employés pour l'affichage de données. Si vous voulez un tant soit peu respecter les standards, mieux vaut opter pour l'utilisation de balises neutres div pour structurer votre menu. C'est d'autant plus simple à réaliser et on évite ainsi plus facilement ce genre de problème d'affichage.


Argumentation imparable Smiley listen
Modifié par Igor (31 Oct 2011 - 03:16)
Bonjour,

Elias a écrit :
J'ai un problème avec Firefox et Internet Explorer 9 lors de l'affichage de mon menu. Par contre ça marche bien et j'ai le résultat que je souhaite avec Chrome, Opera et Safari.

Donc l'idée c'est que tu ne prends pas la peine de décrire le problème rencontré, et nous on recrée une page de test à partir de ton code (sans garantie d'arriver au même résultat si jamais il nous manque des éléments tels que des images), on test dans les 5 navigateurs mentionnés, et on examine les différences de rendu entre les navigateurs pour repérer la nature du problème que tu n'as pas daigné décrire?

Une petite phrase décrivant le problème aurait été pas mal. Smiley cligne
Par ailleurs, pour pouvoir tester facilement ton problème le plus efficace c'est d'avoir une page de test en ligne (plutôt que du code à copier-coller dans une page qu'il faut donc qu'on crée nous-mêmes).
Modifié par fvsch (31 Oct 2011 - 10:08)
Merci Jeremy-p pour la solution (j'en ai trouvé une autre mais en utilisant deux div superposés et pas de tableaux Smiley cligne , et je crois que je garderai la tienne).
A fvsch : désolé si j'étais pas assez clair, je croyais que le test des pages donnerait une idée plus que claire sur le problème. Je prendrai tes suggestions en considération.
Sujet clos
Aller à