IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Comment empêcher un menu CSS de chevaucher un tableau?


Sujet :

CSS

  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    44
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2008
    Messages : 44
    Par défaut Comment empêcher un menu CSS de chevaucher un tableau?
    Bonjour à tous,

    Je vous soumets un problème de chevauchement sous IE7 que je n’arrive pas à résoudre. J’ai déjà reçu beaucoup d’aide afin de mettre en ligne un site perso sur la Varappe.
    Sous FF3 tout est parfait et sous IE6 c’est bon.

    Lorsque la page, un menu vertical CSS et un tableau, s’affiche avec IE7 le menu, chevauche le tableau et ne se trouve pas à la gauche de ce même tableau comme ce code le précise
    #tab1 { margin-left:225px; }

    Il n’y a pas d’erreur dans les codes afin de forcer le menu à gauche.

    Voici les codes :

    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
    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
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    body { margin:0; padding:0; }
     
    #tab1 { margin-left:225px; }
     
    #menu {
    width:225px; /*100px*/
    text-align:center; /*center*/
    position:fixed; /*le menu ne bouge pas */
    left:0; top:0;
    float:left; }
     
    .box { position:relative; /*relative*/ }
    #menu a, #menu a:visited { /*configuration des blocks menu*/
    /*text-decoration:none;*/
    background-color:#E8312D;
    color:#FFFFFF; /*ffff*/
    display:block;
    width:200px; /*88px*/
    height:28px; /*16px*/
    font-weight: bold; /*test gras*/
    font-size:16px; /*14px*/
    border:0px solid #fff; /*1px solid #fff (espacement vertical entre les blocks)*/
    padding: 12px; /*5px*/ }
    * html #menu a, * html #menu a:visited {
    width: 225px; /*200px*/
     
    height:28px; /*28px*/
    width:88px; /*88px*/
    height:28px; /*16px*/ }
    #menu a span { display:none; }
    #menu a:hover { /*encadrement des block au survol*/
    border:1px solid #ccc; /*000*/ }
    #menu a:hover span.left, /* boutons de'encarement de texte*/
    #menu a:hover span.right { /* boutons de'encarement de texte*/
    display:block; /*block*/
    position:absolute; /*absolute*/
    height:0; /*0*/
    width:0; /*0*/
    /*overflow:hidden; /*hidden*/
    border-top:8px solid #fff; /*#fff */
    border-bottom:8px solid #fff; /*#fff */ }
    #menu a:hover span.left { /* espacement horizontal de la gauche desboutons d'encarement du texte*/
    left:13px; /*5px*/
    top:15px; /*5px*/
    border-left:8px solid #c00; }
    #menu a:hover span.right { /* espacement horizontal de la droite des boutons d'encarement du texte*/
    left:210px; /*87px*/
    top:15px; /*5px*/
    border-right:8px solid #c00; }
    * html #menu a:hover span.left,
    * html #menu a:hover span.right {
    width:8px; /*8px*/
    height:20px; /*16px*/
    width:0; /*0px*/
    h\eight:0; /*opx*/
    }
    #menu a:hover span.lk { /*définition des blocks explication*/
    display:block;
    position:absolute;
    left:225px; /*120px*/
    top:0; /*0px*/
    padding:10px; /* 5px*/
    width:250px; /*100px*/
    background-color:#CCFFFF; /*définition couleur de fond blocks explication*/
    /*background-color:#fff; /*fff*/
    color:#000; /*000*/
    border:1px solid #E8312D; /*1px solid #234*/
    }
    et voici le code HTML :
    Code HTML : 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
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ma page</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="stylesheet" type="text/css" href="menu.css" /> 
    </head>
     
     
    <body>
     	<div id="menu">
    		<div class="box">
    			<a href="#nogo">Ma page
    				<span class="left"></span><span class="right"></span><span class="lk"></span>
    			</a>
    		</div>
    		<div class="box">
    			<a href="#nogo">Nous connaître
    				<span class="left"></span><span class="right"></span><span class="lk"></span>    
    			</a>  
    		</div>
    		<div class="box">
    			<a href="#nogo">Ton itinéraire
    				<span class="left"></span><span class="right"></span><span class="lk"></span>   
    			</a>  
    		</div>
    		<div class="box">
    			<a href="#nogo">Equipements<span class="lk"></span></a>  
    		</div>
    		<div class="box">
    		    <a href="#nogo">Difficultés
    		      <span class="left"></span><span class="right"></span><span class="lk"></span>
    			</a>  
    		</div>
    		<div class="box">
    			<a href="#nogo">Précautions<span class="lk"></span></a>  
    		</div>
    	    <div class="box">
    		    <a href="#nogo">Terrains
    		      <span class="left"></span><span class="right"></span><span class="lk"></span>    
    			  <span style="font-family:Wingdings; font-size:14.0pt; color:black; "></span> 
    			</a>  
    		</div>
    	    <div class="box">
    			<a href="#nogo">
    				<span class="left"></span><span class="right"></span><span class="lk"></span>    
    			</a>  
    		</div>
    	    <div class="box">
    			<a href="#nogo">Notre service de conseils</a>  
    		</div>
    		<div class="box">
    			<a href="#nogo">Nous contacter
    				<span class="left"></span><span class="right"></span><span class="lk"></span>    
    			</a> 
    		</div>
    		<div class="box">
    		    <a href="#nogo">Item 11
    		      <span class="left"></span><span class="right"></span><span class="lk">Description of link 11</span>
    			</a>  
    		</div>
    		<div class="box">
    		    <a href="#nogo">Item 12
    		      <span class="left"></span><span class="right"></span><span class="lk">Description of link 12</span>
    			</a> 
    		</div>
    		<div class="box">
    		    <a href="#nogo">Item 13
    		      <span class="left"></span><span class="right"></span><span class="lk">Description of link 13</span>
    			</a>
    		</div>
    		<div class="box">
    		    <a href="#nogo">Item 14
    		      <span class="left"></span><span class="right"></span><span class="lk">Description of link 14</span>
    			</a>  
    		</div>
    		<div class="box">
    		    <a href="#nogo">Item 15
    		      <span class="left"></span><span class="right"></span><span class="lk">Description of link 15</span>
    			</a>  
    		</div>
    		<div class="box">
    		    <a href="#nogo">Item 16
    		      <span class="left"></span><span class="right"></span><span class="lk">Description of link 16</span>
    			</a> 
    		</div>
    	</div>
     
    	<div id="tab1">
     
    		<table width="775"height="44" border="1" cellpadding="1" cellspacing="0" bordercolorlight="#996600" bordercolordark="#3333FF" bgcolor="#CCFFFF">
    		<tr>
    		<td width="100%" align="center" height="35"><div align="center"><b><font color="#ff3333" face="Georgia, Times New Roman, Times, serif" size="3">Les pistes, les  équipements et les conseils nécessaires à l'escalade de haut niveau.</font></b></div></td>
    		</tr>
    		</table>
    		<table width="775"height="773" border="1" cellspacing="1" cellpadding="0" bordercolorlight="#FFFFFF" bordercolordark="#666600">
    		<tr bgcolor="#66FFFF">
    		<td width="156" height="65" align="center"><div align="center"><span class="Style36"><font color="#0000FF" size="+1">Montagne</font></span></div></td>
    		<td width="64" height="65" align="center"><div align="center"><span class="Style36"><font color="#0000FF" size="+1">itinér.</font></span></div></td>
    		<td width="396" height="65" align="center"><blockquote class="Style36"><blockquote>
    		<div align="center"><font color="#0000FF" size="+1">Descriptif</font></div>
    		</blockquote>
    		</blockquote></td>
    		<td width="81" height="65"><div align="center" class="Style36"><font color="#0000FF" size="+1">cote</font></div></td>
    		<td width="139" height="65" align="center"><p align="center" class="Style36"><font color="#0000FF" size="+1">dénivelé</font></p>        </td>
    		<td width="129" height="65" align="center"><div align="center"><span class="Style36"><font color="#0000FF">R&eacute;f.</font></span></div></td>
    		</tr>
    		<tr bgcolor="#00FFFF">
    		<td 
    		height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
    		<td 
    		height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
    		<td height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
    		<td height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
    		<td height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
    		<td 
    		height="35" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
    		</tr>
    		<tr bgcolor="#00FFFF">
    		<td 
    		height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
    		<td 
    		height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
    		<td height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
    		<td height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
    		<td height="34" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
    		<td 
    		height="35" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
    		</tr>
    		<tr bgcolor="#00FFFF">
    		<td height="37" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
    		<td 
    		height="37" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
    		<td height="32" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
    		<td height="32" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
    		<td height="32" nowrap="nowrap" bgcolor="#CCFFFF">&nbsp;</td>
    		</tr>
    		</table>
    	</div>
     
    </body>
    </html>
    Je pense que ce type de souci est récurrent sous IE7, mais…Pourriez-vous m’aider à le résoudre?

  2. #2
    Membre émérite Avatar de c_s_s
    Profil pro
    Inscrit en
    Juillet 2008
    Messages
    619
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juillet 2008
    Messages : 619
    Par défaut
    Bonjour,

    Je ne vois aucune différence entre FF2, FF3, ou IE7.

    Tu peux être plus clair sur le problème que tu rencontres, j'avoue ne pas avoir bien compris cette phrase :

    Lorsque la page, un menu vertical CSS et un tableau, s’affiche avec IE7 le menu, chevauche le tableau et ne se trouve pas à la gauche de ce même tableau

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    44
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2008
    Messages : 44
    Par défaut
    Trés rapide ton intervention

    Voici en screenshot ce qui s'affiche sous IE7 (Vista).

    Le menu chevauche le tableau et seulement avec IE7.

    Merci de ton aide.
    Images attachées Images attachées  

  4. #4
    Membre émérite Avatar de c_s_s
    Profil pro
    Inscrit en
    Juillet 2008
    Messages
    619
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juillet 2008
    Messages : 619
    Par défaut
    Sous IE7 (XP), la tableau s'affiche correctement.
    Le problème est donc spécifique à Vista.

    Essaie avec ça pour #tab1 :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #tab1 { 	
    	position:absolute;
    	left:225px;
    }

  5. #5
    Membre Expert
    Profil pro
    Inscrit en
    Mars 2002
    Messages
    1 132
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France

    Informations forums :
    Inscription : Mars 2002
    Messages : 1 132
    Par défaut
    Avec un lien je pourrais jeter un oeil avec IE7 sous Vista

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    44
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2008
    Messages : 44
    Par défaut
    Bonjour devyan,

    Je n'ai pas de lien vers ma machine, mais le screenshot de mon précédent message est pris sous Vista et IE7.
    Je l'ai mis pour imager ma demande d'aide

  7. #7
    Membre émérite Avatar de c_s_s
    Profil pro
    Inscrit en
    Juillet 2008
    Messages
    619
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juillet 2008
    Messages : 619
    Par défaut
    La proposition avec position:absolute ne fonctionne pas sous IE7 Vista ?

  8. #8
    Membre averti
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    44
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2008
    Messages : 44
    Par défaut
    Tu as trouvé la solution tout fonctionne parfaitement sous IE7 avec l'ajout du code ci-dessous.

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #tab1 { 	
    	position:absolute;
    	left:225px;
    }
    [/QUOTE]

    Merci encore

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 5
    Dernier message: 09/10/2009, 23h41
  2. Réponses: 12
    Dernier message: 23/05/2008, 15h16
  3. Comment maîtriser mon menu css correctement ?
    Par Velkan.nexus dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 01/12/2007, 20h32
  4. Comment empêcher que les textout se chevauchent ?
    Par kidpaddle2 dans le forum Windows
    Réponses: 52
    Dernier message: 29/06/2006, 23h12

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo