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 :

Underline menu vertical et horizontal


Sujet :

CSS

  1. #1
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Juillet 2011
    Messages
    39
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juillet 2011
    Messages : 39
    Par défaut Underline menu vertical et horizontal
    Bonjour ,
    mon menu horizontal en 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
     
    ul#menu_horizontal { 
    width : 814px; 
    height : 120px;
    margin : 3em 0 2 10;
    padding : 0;
    background-color : #f1b764;
    border : none;
    list-style-type : none; 
    }
     
    ul#menu_horizontal li {
    padding : 0 0 5px ;  
    line-height : 30px;
    padding-left:0px;
     
    }
     
    ul#menu_horizontal li.bouton_gauche {
    float : left;
    border-right : none; 
    padding-left:65px;
    padding-right:30px;
    }
     
     
     
    ul#menu_horizontal li.bouton_droite {
    float : right;
    border-left : 1px solid black;
     
    }
     
    ul#menu_horizontal a {
    color : black;
    text-decoration : none;
    padding : 0 0 20px 10px; 
    font :  0.8em "Trebuchet MS";
     
    }
     
    ul#menu_horizontal a:hover { text-decoration : underline; }
     
    ul#menu_horizontal a img { 
    border : none;
    padding :  0 0 5px 5px;
    }
    le menu horizontal html :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
     
     
    <ul id="menu_horizontal">
    <li class="bouton_gauche"><a href="#"><img src="ecfr/m/image/10025_5_6.png"  alt="Retour en magasin"/><br /><br /><center>Retour en magasin</center></a></li>
    <li class="bouton_gauche"><a href="#"><img src="ecfr/m/image/10025_8_6.png"  alt="news" /><br /><br /><center>Paiement s&eacutecuris&eacute</center></a></li>
    <li class="bouton_gauche"><a href="#"><img src="ecfr/m/image/10025_11_6.png" alt="Livraison"/><br /><br /><center>Livraison</center></a></li>
    <li class="bouton_gauche"><a href="#"><img src="ecfr/m/image/10025_14_6.png" alt="Carte de fidélité"/><br /><br /><center>Carte de fid&eacutelit&eacute</center></a></li>
     
    </ul>
    Je l'inclus dans ma page php et j'ai également un autre menu vertical inclut dans la même page.
    J'ai un problème au niveau de text-decoration:underline sur le menu vertical.
    Non seulement cela ne fonctionne plus mais les liens semblent inéxistant sur le texte! !

    Le menu vertical 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
     
     
     #navGauche
     
     {
     
     margin-top:250px;
     margin-left:80px;
     width:238px; 
     background-image:url(../img/g_fd.gif);
     background-color:#8c5464;
     height:700px;
     }
     
     #navGauche li{padding:2px 0 2px 23px}
     #navGauche ul
     {
     list-style-type:none;margin:0;padding:0 0 0}
     
     
     #navGauche a.navOff3:active{color:#585858;font:12px Arial, Helvetica, sans-serif;font-weight:normal;letter-spacing:normal;padding:0 0 0;text-decoration:none}
     #navGauche .niv3 a:hover{background-image:none;color:#000;font:12px Arial, Helvetica, sans-serif;font-weight:normal;font-style:italic;letter-spacing:normal;padding:0 0 0;text-decoration:none}
     #navGauche a.navOn3:link,
     
     
     #navgauche a:hover { text-decoration : underline; }
     
     
     #navGauche a.navOn3:active{color:#000;font:12px Arial, Helvetica, sans-serif;font-weight:normal;font-style:italic;letter-spacing:normal;padding:0 0 0;text-decoration:none}

    le menu vertical 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
     
     
    		<div id="navGauche">
     
    				<table>
    						<tr>
    						<!--id définit pour la fleche sur chaque td-->
    							<td style="width: 25px; padding: 2px 0px 2px 0pt;" id="liI2"></td>
    							<td>
    								<div id="liG2">
    								<br/>
    								<div id="first-cat"><strong>NOUVEAUTES</strong></div>
     
    								<a style="color: white; font-size: 14px;"
    								 id="li2">Alsace</a>
    								</div></td>
    						</tr>
    						<tr>
    							<td style="width: 25px; padding: 2px 0px 2px 0pt;" id="liI3"></td>
    							<td>
    								<div id="liG3">
    									<a 
    									href='javascript:OuvrirPop("includes/aquitaine.html","fenetre popup",10,10,680,480,"menubar=no,scrollbars=no,statusbar=no")'
    									style="color: white; font-size: 14px;"
    									 id="li3">Aquitaine</a>	
    								</div></td>
    						</tr>
    						<tr>
    							<td style="width: 25px; padding: 2px 0px 2px 0pt;" id="liI4"></td>
    							<td>
    								<div id="liG4">
    								<br/>
    								<div id="first-cat"><strong>HABILLEMENT</strong></div>
     
    									<a 
    									href='javascript:OuvrirPop("includes/auvergne.html","fenetre popup",10,10,750,500,"menubar=no,scrollbars=no,statusbar=no")'
    									style="color: white; font-size: 14px;" 
    									 id="li4">Polaires - Softshells</a>
    								</div></td>
    						</tr>
                               </div>
    Auriez-vous une solution pour que l'underline fonctionne ? gourous du css :p
    Je vais partir sur un menu de Bisûnûrs je pense ,
    (Le underline est fonctionnel uniquement sur le horizontal ! !)

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    Bonsoir,
    bizarre... tu as dans ta partie style des classes qui ne sont pas utilisés dans ta page, notamment #navGauche .niv3 a:hover.

    il existe des balises A qui ne possèdent pas de href et ne sont donc pas pris, par certains, pour des liens.

Discussions similaires

  1. Menu vertical ou horizontal
    Par JOLIE MIMI dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 09/12/2013, 09h39
  2. menu horizontal et sous menu vertical
    Par diengkals dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 09/08/2012, 15h52
  3. Menu vertical avec sous menu horizontal
    Par sami_c dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 24/06/2010, 17h53
  4. [Joomla!] [Joomla 1.5.1] Menu horizontal et sous menu vertical
    Par jason69 dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 2
    Dernier message: 12/03/2008, 09h42
  5. Un menu vertical à la manière d'un menu horizontal
    Par Ravaka dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 21/01/2007, 12h25

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