Problème de mis en forme (css)

Résolu

penati17 Messages postés 33 Date d'inscription Statut Membre Dernière intervention -
penati17 Messages postés 33 Date d'inscription Statut Membre Dernière intervention - 20 févr. 2014 à 09:42

Bonjour,

Excusez moi si ma question n'est pas plus explicite qu'elle doit l'être, suis un débutant.
j'ai créer un menu déroulant avec html/css.
Mon code html :

<div id="menu">
<ul>
    
	    <li><a href="index.php?rubrique=8">Accueil</a></li>        
		<li><a href="index.php?rubrique=9">Entreprise</a></li>
 
	    <li><a href="index.php?rubrique=10">Prodiuts & Solutions</a>
            <ul class= "sousmenu">
                <li><a href="page2a.html">virtualisation de SI</a></li>
                     <ul class="sous_sousmenu">
					     <li><a href="page2a.html">Citrix</a></li>
					 </ul>
                <li><a href="page2b.html">IT Service Managment ITIL v3</a></li>
             
                <li><a href="page2c.html">   Securite du SI </a></li>

                <li><a href="page2d.html"> Audit et optimisation </a></li>
	  
                <li><a href="page2d.html"> Infrastructure reseau </a></li>
	         </ul>     
          </li>

          <li><a href="index.php?rubrique=11"> Réference</a> </li>
          <li><a href="index.php?rubrique=15">Partenaires</a></li>
          
		  <li><a href="index.php?rubrique=16">News & Agenda</a>
            <ul class="sousmenu">
	         <li><a href="index.php?rubrique=20">News (Evénement)</a></li>
	         <li><a href="index.php?rubrique=23">Agenda</a></li>
	        </ul>
          </li>      
     
	     <li><a href="index.php?rubrique=12">Support Techniques</a></li>
         <li><a href="index.php?rubrique=13">Contact</a></li> 

</ul>  
</div>

la mis en forme css:

 #men{line-height:30px; width:990px;
font-weight:bold;
font-size:13px;
}
#menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu li {
 float:left;
 margin:auto;
 padding:0;
 background-color:black;
 }
#menu li a {
 display:block;
 width:100%;
 color:white;
 text-decoration:none;
 padding:5px;
 }
#menu li a:hover {
 color:#FFD700;
 }

#menu ul li ul {
 display:none;
 }

#menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 }

#menu li ul {
 position:absolute;
 }

Problème, la ligne du tableau réservé a mon menu a une largeur de 990 px mais le menu n'en utilise que 600 à 700px...
j'arrive pas à corriger cela, aidez moi svp !
Merci.

Afficher la suite

A voir également:

Problème de mis en forme (css)
Mise en forme conditionnelle excel - Guide
Mise en forme tableau word - Guide
Mise en forme tableau croisé dynamique - Guide
Mise en forme whatsapp - Guide
Pourquoi mon téléphone s'est mis en mode sécurisé ? - Guide

2 réponses

Réponse 1 / 2

jjaco Messages postés 534 Date d'inscription Statut Membre Dernière intervention 45

il manque peut-être un "u" quelque part, du moins si tes codes sont en copier coller... à toi de chercher ... bonne chance, c'est pas compliqué!

Réponse 2 / 2

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

Oui a #menu mais il n'y a pas que ca
ca viens tout droit de css mammouthland ca !

voici la solution (faire un copier coller)

#menu {
width:990px;
font-weight:bold;
font-size:13px;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
height:50px;

}
#menu li {
float:left;
margin:auto;
padding:0;
width:12.5%; /**100% / 8 = 12.5%**/
}
#menu li a {
display:block;
color:white;
text-decoration:none;
padding: 15px 0;
background-color:black;
}
#menu li a:hover {
color:#FFD700;
background-color:grey; /**optionnel**/
}

#menu ul li ul {
display:none;
}

#menu ul li:hover ul {
display:block;
height:auto;
}
#menu li:hover ul li {
float:none;
width:100%;
}
#menu li:hover ul li a {
padding: 10px 5px; /aération du sous menu**/
}

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.

penati17 Messages postés 33 Date d'inscription Statut Membre Dernière intervention

bonjour et merci pour ton aide, ta solution m'a beaucoup fait avancer mais tous mes rubriques n'ont pas les mêmes noms du coup : toute la largeur n'est pas couverte..
si c'est possible de faire une partition selon la taille de chaque rubrique stp, dit moi comment le faire pour améliorer mon affichage..
Merci d'avance.

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

Le menu fait bien 990px de large
ce que tu demande n'est pas possible a faire par contre tu peux donner un style de boutons

#menu {
width:990px;
font-weight:bold;
font-size:13px;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
height:30px;
}
#menu li {
float:left;
margin:auto;
padding:0;
width:12.5%; /**100% / 8 = 12.5%**/
}
#menu li a {
display:block;
color:white;
text-decoration:none;
padding: 8px 0;
background:black;
border:2px solid white;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
#menu li a:hover {
color:#FFD700;
background-color:grey; /**optionnel**/
}

#menu ul li ul {
display:none;
}
#menu ul li ul li a{
border:2px solid black;
}

#menu ul li:hover ul {
display:block;
height:auto;
background:black;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
}
#menu li:hover ul li {
float:none;
width:100%;
border:0;
}
#menu li:hover ul li a {
display:block;
padding: 10px 5px; /aération du sous menu**/
}

penati17 Messages postés 33 Date d'inscription Statut Membre Dernière intervention

Merci encore pour ta disponibilité.

Discussions similaires

Table des matières dont les titres n'apparaissent pas..

Colis remis en livraison

Mise en forme Conditionnelle sous Powerpoint

Boucle sur la première diapositive d'une présentation

Votre colis ne peut pas être livré

Votre réponse

Discussions similaires