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 :

Décalage menu CSS


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Février 2009
    Messages
    8
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2009
    Messages : 8
    Par défaut Décalage menu CSS
    Bonjour a tous,

    Je fait appelle a vous afin d'essayer de résoudre mon problème que je traine depuis deux jours ... Voilà, je développe un site internet dont j'ai créé le design/maquette si vous-voulez a l'aide de Photoshop que voici un rapide screen.

    Après avoir réaliser ceci, j'ai commencer la mise en page dans DW tout va bien jusqu'au moment ou la construction des sous-menu doit se faire. Et la pas moyen quelque soit la technique utilisé d'arriver a faire les sous-menu correctement ... J'ai essayer le Spry menu horizontale avec du CSS mais je le change tellement qu'il bug a la fin :/, j'ai essayer manuellement mais je ne sais pas du tout comment élaborer un "comportement" en cas de survole etc ... J'ai même essayer sous Fireworks mais je ne suis pas arriver du tout a un bon résultat :/

    Il y a surement quelque chose que je fait mal ou autre je ne sais pas mais la je désespère :/ alors j'aimerais bien que quelqu'un ait la bonté de me trouver une solution efficace a mon problème de sous-menu.

    De plus, j'ai prévue un hover qui permute les image de base en la mm image avec d'autre effet Photoshop et sa sous DW je sais pas faire :/ mais c'est la seul chose que j'ai réussi a faire fonctionner sous FW ^^.

    Donc voila ma requête finale :

    J'aimerais qu'on me trouve une solution afin que je puisse installer mon menu et sous-menu correctement (le sous-menu doit s'afficher sous l'onglet qui set survoler et rester afficher tant qu'on ne quitte pas le sous-menu avec sa souris) et un effet de permutation d'image pour chacun des bouton (menu et sous-menu compris).

    Merci d'avoir lu.
    D'avance merci pour une/les solution(s) apportées future.

    Cordialement, NicoGT3.

  2. #2
    Membre Expert
    Avatar de Jumano
    Profil pro
    Inscrit en
    Février 2007
    Messages
    1 163
    Détails du profil
    Informations personnelles :
    Âge : 57
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Février 2007
    Messages : 1 163
    Par défaut
    Bonjour,
    Le lien que tu donnes ne fonctionne pas.
    Peux tu poster le code correspondant à ton menu et sous-menu que l'on puisse mieux comprendre ton problème.

    Tu peux déjà également regardé du côté de la Galerie CSS ici, peut être que tu trouveras par toi même ta solution.

    un effet de permutation d'image pour chacun des bouton
    Pour ceci tu peux utiliser le survol d'image : Insertion > Objets Image > Image survolée.

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    Février 2009
    Messages
    8
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2009
    Messages : 8
    Par défaut
    Bah euh pour moi le lien quand je clic dessus fonctionne très bien perso :/ j'arrive a la page avec mon screen dedans ... Sinon Mon menu/sous-menu est une simple liste que je veux transformé en se fichu menu dynamique ^^.

    (Je vais regarder votre lien CSS)

    Après avoir regarder ce lien, effectivement le type de menu qu'il me faut c'est le premier de cette page mais en revanche j'en est essayer plusieurs des menu de ce type mais dès que j'y insère mes image ça foire :/

    Je vais tout de même réessaye celui la et je vous tiens au courant, je pense que je doit faire une erreur de configuration tout bêtement mais je ne voit pas laquelle ...

    Merci d'avoir répondu.
    Cordialement, NicoGT3

    J'essaye de mettre en forme se menu, j'ai pour cela retirer les texte et remplacer par un espace insécable (temporairement) puis j'ai mis mes 5 première (enfin dernière puisque le menu est inversé a cause de float je croit ou une autre propriété CSS je sais plus) cependant je ne sais pas comment rajouter des onglet de Menu principale :/ (fonctionnelle bien entendu) Pouvez vous m'expliquez s'il vous plait ?

    De plus, j'ai bien entendu modifier la taille des blocs des li afin de les ajuster a la taille de mes image mais du coup cela créé une erreur pour les sous-menu qui ne s'affiche pas correctement (une espèce de gros carré blanc apparait a coté d'eux) et également une faute de placement de ceux-ci.

    Merci

  4. #4
    Membre Expert
    Avatar de Jumano
    Profil pro
    Inscrit en
    Février 2007
    Messages
    1 163
    Détails du profil
    Informations personnelles :
    Âge : 57
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Février 2007
    Messages : 1 163
    Par défaut
    Le mieux serait de poster ton code pour pouvoir le tester et voir le rendu ...

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    Février 2009
    Messages
    8
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2009
    Messages : 8
    Par défaut
    Je test le menu sur une page appart afin de voir si j'y arrive donc voici les élément :
    Page html :
    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
    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
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    <!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" lang="fr">
    <head>
    	<title>Menu horizontal déroulant</title>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<link rel="stylesheet" href="style.css" type="text/css" />
    	<script type="text/javascript" src="menu.js"></script>
    </head>
    <body>
    <div id="centrer">
     
     
    <div id="menu">
    	<ul>		
    		<li onmouseover="montre('smenu5',true);" onmouseout="montre('smenu5',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/liens.png" width="74" height="52" alt="liens" />
    			<ul id="smenu5">
    				<li onmouseover="montre('smenu51',true);" onmouseout="montre('smenu51',false);"><a href="#">&nbsp;</a>
    					<ul class="dernier" id="smenu51">
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
     
    					</ul>
    				</li>
    				<li onmouseover="montre('smenu52',true);" onmouseout="montre('smenu52',false);"><a href="#">&nbsp;</a>
    					<ul class="dernier" id="smenu52">
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
     
    					</ul>
    				</li>
    				<li onmouseover="montre('smenu53',true);" onmouseout="montre('smenu53',false);"><a href="#">&nbsp;</a>
    					<ul class="dernier" id="smenu53">
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
     
    					</ul>
    				</li>
    			</ul>
    		</li>
    		<li onmouseover="montre('smenu4',true);" onmouseout="montre('smenu4',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/forum.png" width="74" height="52" alt="forum" />
    			<ul id="smenu4">
    				<li onmouseover="montre('smenu41',true);" onmouseout="montre('smenu41',false);"><a href="#">&nbsp;</a>
    					<ul id="smenu41">
    						<li><a href="#">&nbsp;</a></li>
     
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    					</ul>
    				</li>
    				<li onmouseover="montre('smenu42',true);" onmouseout="montre('smenu42',false);"><a href="#">&nbsp;</a>
    					<ul id="smenu42">
    						<li><a href="#">&nbsp;</a></li>
     
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    					</ul>
    				</li>
    				<li><a href="#">&nbsp;</a></li>
    				<li><a href="#">&nbsp;</a></li>
    			</ul>
     
    		</li>	
    		<li onmouseover="montre('smenu3',true);" onmouseout="montre('smenu3',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/tutos.png" width="74" height="52" alt="tutoriaux" />
    			<ul id="smenu3">
    				<li onmouseover="montre('smenu31',true);" onmouseout="montre('smenu31',false);"><a href="#">&nbsp;</a>
    					<ul id="smenu31">
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
     
    					</ul>
    				</li>
    				<li><a href="#">&nbsp;</a></li>
    				<li><a href="#">&nbsp;</a></li>
    				<li><a href="#">&nbsp;</a></li>
    				<li onmouseover="montre('smenu35',true);" onmouseout="montre('smenu35',false);"><a href="#">&nbsp;</a>
    					<ul id="smenu35">
     
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    					</ul>
    				</li>
    				<li onmouseover="montre('smenu36',true);" onmouseout="montre('smenu36',false);"><a href="#">&nbsp;</a>
    					<ul id="smenu36">
    						<li><a href="#">&nbsp;</a></li>
     
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    					</ul>
    				</li>
    			</ul>			
    		</li>
    		<li onmouseover="montre('smenu2',true);" onmouseout="montre('smenu2',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/tools.png" width="74" height="52" alt="tools" />
    			<ul id="smenu2">
    				<li><a href="#">&nbsp;</a></li>
     
    				<li><a href="#">&nbsp;</a></li>
    				<li><a href="#">&nbsp;</a></li>
    				<li onmouseover="montre('smenu24',true);" onmouseout="montre('smenu24',false);"><a href="#">&nbsp;</a>
    					<ul id="smenu24">
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
     
    						<li><a href="#">&nbsp;</a></li>
    					</ul>
    				</li>
    			</ul>			
    		</li>	
    		<li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/fof.png" width="74" height="52" alt="style frets on fire" />
    			<ul id="smenu1">
    				<li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a href="#">&nbsp;</a>
    					<ul id="smenu11">
     
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    					</ul>
    				</li>
    				<li><a href="#">&nbsp;</a></li>
    				<li onmouseover="montre('smenu13',true);" onmouseout="montre('smenu13',false);"><a href="#">&nbsp;</a>
    					<ul id="smenu13">
     
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    					</ul>
    				</li>
    			</ul>
    		</li>
            <li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/musiques.png" width="74" height="52" alt="musiques" />
    			<ul id="smenu1">
    				<li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a href="#">&nbsp;</a>
    					<ul id="smenu11">
     
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    					</ul>
    				</li>
    				<li><a href="#">&nbsp;</a></li>
    				<li onmouseover="montre('smenu13',true);" onmouseout="montre('smenu13',false);"><a href="#">&nbsp;</a>
    					<ul id="smenu13">
     
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    					</ul>
    				</li>
    			</ul>
    		</li>
            <li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/jeux.png" width="74" height="52" alt="jeux" />
    			<ul id="smenu1">
    				<li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a href="#">&nbsp;</a>
    					<ul id="smenu11">
     
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    					</ul>
    				</li>
    				<li><a href="#">&nbsp;</a></li>
    				<li onmouseover="montre('smenu13',true);" onmouseout="montre('smenu13',false);"><a href="#">&nbsp;</a>
    					<ul id="smenu13">
     
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    					</ul>
    				</li>
    			</ul>
    		</li>
            <li onmouseover="montre('smenu1',true);" onmouseout="montre('smenu1',false);"><img src="../../Dreamweaver Sites/Frets on Fire/image/menu/accueil.png" width="74" height="52" alt="accueil" />
    			<ul id="smenu1">
    				<li onmouseover="montre('smenu11',true);" onmouseout="montre('smenu11',false);"><a href="#">&nbsp;</a>
    					<ul id="smenu11">
     
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    					</ul>
    				</li>
    				<li><a href="#">&nbsp;</a></li>
    				<li onmouseover="montre('smenu13',true);" onmouseout="montre('smenu13',false);"><a href="#">&nbsp;</a>
    					<ul id="smenu13">
     
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    						<li><a href="#">&nbsp;</a></li>
    					</ul>
    				</li>
    			</ul>
    		</li>
     
    	</ul>	
    </div>	
    </div>	
    </body>
    </html>
    CSS :
    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
    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
    * {
    margin:0px;
    padding:0px;
    background:#ffffff;
    text-align:center;
    }
     
    body{
    font-family:Arial, Helvetica, sans-serif;
    }
     
    img {
    border:none;
    }
     
    a {  
    color:#000000;
    text-decoration:none;
    text-transform:none;
    }
     
    /*centre la page et donne la largeur pour une basse résolution*/
    #centrer {
    margin-left:auto;
    margin-right:auto;
    width:776px;
    }
     
    /****************************/
    /* 	début menu	déroulant	*/
    /****************************/
    ul, li {
    list-style-type:none;
    }
     
    /*chaque sous-menu*/
    #menu ul li {
    	position:relative;
    	float:right;
    	width:74px;
    	cursor:pointer;
    	display:block;
    	background:none;
    	height:52px;
    }
     
    /*carré déroulant sous un sous-menu niveau 1*/
    #menu ul li ul {
    display:none;
    position:absolute;
    width:125px;
    border:1px solid #dddddd;
    border-top:none;
    top:22px;
    left:0;
    }
     
    #menu ul li ul li {
    height:100%;
    }
     
    #menu ul li ul li a {
    color:#3399ff;
    font-size:11px;
    font-weight:normal;
    display:block;
    height:100%;
    border-top:1px solid #dddddd;
    }
     
    /*au passage de la souris on inverse les couleurs de la case*/
    #menu ul li ul li a:hover {
    color:#ffffff;
    background:#3399ff;
    }
     
    /*décalage des sous-menu niveau 2 vers la droite*/
    #menu ul li ul li ul {
    top:0px;
    left:125px;
    }
     
    /*décalage du sous-menu niveau 2 le plus à droite vers la gauche*/
    #menu ul li ul li ul.dernier {
    left:-127px;
    }
    le JS ne change pas de l'original

    Merci

  6. #6
    Membre Expert
    Avatar de Jumano
    Profil pro
    Inscrit en
    Février 2007
    Messages
    1 163
    Détails du profil
    Informations personnelles :
    Âge : 57
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Février 2007
    Messages : 1 163
    Par défaut
    Le problème est que ce script est fait pour 5 blocs, il te faut modifier les diverses dimensions pour l'adapter.
    Si tu veux rajouter des blocs, il te faut les ajouter en haut du code et non à la suite.
    De plus fait attention un "id" doit être unique sur une même page.

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

Discussions similaires

  1. Décalage dans Menu CSS
    Par NicoGT3 dans le forum Dreamweaver
    Réponses: 4
    Dernier message: 18/02/2009, 13h00
  2. Menu CSS vertical, petit espace entre les images sous IE
    Par Death83 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 24/10/2005, 09h52
  3. Menu+CSS+page aspx
    Par vincentj dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 13/10/2005, 12h20
  4. Problème Menu CSS
    Par Kerod dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 28/04/2005, 20h32
  5. Menu CSS avec bordures - fonctionne firefox, pas ie
    Par Romalafrite dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 21/11/2004, 15h40

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