Discussion :

[sisssi_1]

Bonjour,
SVP j'ai un probleme avec mon menu creer en html et css sous IE il est bien et sous FireFox et se deforme je sais pas koi faire svp si vous savez comment faire aidez moi

voila le code il est simple et pratique
dans une region modifiable il y a ca

voila le site http://www.ms-novaxis.com/fr/ms-novaxis.htm

Merci d'avance de vote aide

Code :

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

1
2
3
4
5
<td width="460" height="100" valign="bottom" class="td-menu"><!-- InstanceBeginEditable name="menu" --><span><a href="machines-speciales.htm" class="lien-menu">MACHINES
              SPECIALES</a></span><span><a href="etudes-mecaniques.htm" class="lien-menu">ETUDES
              MECANIQUES</a></span><span><a href="etudes-automatismes.htm" class="lien-menu">ETUDES
              AUTOMATISMES</a></span><span class="lien-menu-on">DEMARCHE
            QUALITE</span><span><a href="ms-novaxis.htm" class="lien-menu">MS NOVAXIS</a></span><!-- InstanceEndEditable --></td>

[Kerod]

Effectivement terrible...Il faudrait le code html complet ainsi que le css

[10-nice]

mets peut être des sauts de ligne entre les deux mots d'un meme onglet (<br />)

[sisssi_1]

Bonjour,
oui tu vois c terrible, je sais plus koi faire voila le css et le code html si vous pouvez faire klkchose svp aidez moi

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
a.lien-menu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
	color: #E0D287;
	padding-top: 63px;
	padding-right: 15px;
	padding-bottom: 13px;
	padding-left: 15px;
	text-decoration:none;
	background-image: url(medias/filet-menu.gif);
	height: 21px;
	background-repeat: repeat-y;
	background-position: right;
	background-color: #264286;
	width: 70px;
}
a:hover.lien-menu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
	color: #264286;
	padding-top: 63px;
	padding-right: 15px;
	padding-bottom: 13px;
	padding-left: 15px;
	text-decoration:none;
	background-image: url(medias/filet-menu.gif);
	height: 21px;
	background-repeat: repeat-y;
	background-position: right;
	background-color: #F1DC6F;
}
.lien-menu-on {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: bold;
	color: #264286;
	padding-top: 63px;
	padding-right: 15px;
	padding-bottom: 13px;
	padding-left: 15px;
	text-decoration:none;
	background-color: #f1dc6f;
	height: 21px;
	width: 70px;
	background-image: url(medias/filet-menu.gif);
	background-repeat: no-repeat;
	background-position: right;
}

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
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr align="left" valign="top">
    <td width="50%">&nbsp;</td>
    <td width="800"><table width="800" height="100" border="0" cellpadding="0" cellspacing="0">
      <tr align="left" valign="top">
        <td width="66" height="100" bgcolor="#FFFFFF">&nbsp;</td>
        <td width="87" height="100" valign="bottom" class="td-bloc-logo-sscourbe"><a href="../index.htm"><img src="../medias/logo.gif" alt="ms-novaxis" width="87" height="65" border="0"></a></td>
        <td width="119" align="right" valign="bottom" bgcolor="#FFFFFF"><img src="../medias/filet-menu.gif" width="1" height="100"></td>
        <td width="68" align="right" valign="bottom" bgcolor="#FFFFFF"><a href="../index.htm" class="lien-accueil">ACCUEIL</a></td>
        <td width="460" height="100" valign="bottom" class="td-menu"><!-- InstanceBeginEditable name="menu" --><span><a href="machines-speciales.htm" class="lien-menu">MACHINES
              SPECIALES</a></span><span><a href="etudes-mecaniques.htm" class="lien-menu">ETUDES
              MECANIQUES</a></span><span><a href="etudes-automatismes.htm" class="lien-menu">ETUDES
              AUTOMATISMES</a></span><span class="lien-menu-on">DEMARCHE
            QUALITE</span><span><a href="ms-novaxis.htm" class="lien-menu">MS NOVAXIS</a></span><!-- InstanceEndEditable --></td>
      </tr>
    </table></td>

[sisssi_1]

salut
pour les sauts de ligne il le rend plus terrible qu'avant

ca marche pas

[_Mac_]

Essaie en rajoutant un float: left; dans tes styles lien-menu et lien-menu-on. Ca corrige en partie le pb.

[sisssi_1]

oui float: left; a corigé une partie mais mnt mon menu est sur deux ligne je px pas avoir une commande ki keep le menu en une seule ligne svp

[spirou]

Salut !!!

En regardant ton code source, j'ai constaté qu'il n'y a pas d'espace entre tes mots, cela donne :

MACHINESSPECIALES
ETUDESMECANIQUES

etc...

Le problème vient à mon avis de là.
IE doit interprété le retour à la ligne, tandis que les autres navigateurs non.

[sisssi_1]

salut

merci pour toi spirou mais le probleme n'est pas des espaces parceque je l'ai deja essayé mais ca n'a rien donné c encore terrible qu'avant
je vx terminer ce site pour passer a autre chose mais je suis bloquée

[spirou]

Comme le disais _Mac_ mets un float: left pour tes balises <a> ensuite fixe des largeurs à ces balises et mets un text-align center, car en mettant des padding left & right, les navigateurs agrandissent le bloc, ce qui fait qu'il ne fait pas 70px de large, mais 100px.

(il est inutile de répéter toutes les propriétés pour le a:hover, mets juste les changements, cela suffit).

[sisssi_1]

oui spirou j'ai fait ce que t'as dit ca arche mais y a encore un petit probleme
j'ai un grande espace en haut j'ai enlever le height pour qu'il soit par defaut mais ca marche pas

[spirou]

Sur ta page il n'y a rien de changer.

Si tu as un espace au dessus de tes balises <a> c'est que forcément il y a quelquechose qui agrandi la ligne de ton tableau.

Mets des margin: 0; partout.

Ta ligne doit faire 100px de hauteur, donc la hauteur de ta balise <a> (21px) + le padding-top (63px) + le padding-bottom(13px) donne un total de 97px de hauteur, peut-être que le problème vient de là.

Regardes aussi si autre chose sur cette ligne ne dépasse pas cette hauteur, (margin et padding compris).

[vg33]

Il vaudrait mieux que tu utilises les balises <ul> pour tes onglets, ce serait beaucoup plus correct sémantiquement parlant qu'un tableau (qui ne devrait pas être utilisé pour faire de la mise en forme).

[sisssi_1]

Merci bcq pour votre aide
vraiment j'ai appris bcq de choses que je savais pas
merci mille fois