Sujet Précédent Sujet Suivant

Problème de mis en forme (css)

Résolu/Fermé
penati17 Messages postés 33 Date d'inscription mardi 14 janvier 2014 Statut Membre Dernière intervention 16 avril 2014 - 12 févr. 2014 à 17:43
penati17 Messages postés 33 Date d'inscription mardi 14 janvier 2014 Statut Membre Dernière intervention 16 avril 2014 - 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.


2 réponses

Réponse 1 / 2
jjaco Messages postés 531 Date d'inscription dimanche 20 janvier 2008 Statut Membre Dernière intervention 30 décembre 2024 45
12 févr. 2014 à 23:29
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é!
0
Réponse 2 / 2
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 13/02/2014 à 01:09
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.
0
penati17 Messages postés 33 Date d'inscription mardi 14 janvier 2014 Statut Membre Dernière intervention 16 avril 2014
13 févr. 2014 à 13:32
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.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 13/02/2014 à 15:50
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**/
}
0
penati17 Messages postés 33 Date d'inscription mardi 14 janvier 2014 Statut Membre Dernière intervention 16 avril 2014
20 févr. 2014 à 09:42
Merci encore pour ta disponibilité.
0

Discussions similaires

document html
Utilisateur anonyme -
brucine -

1 réponse
Encadrement d'un Titre intégré au cadre
Ced -
Ced -

2 réponses
Mise en forme Conditionnelle sous Powerpoint
TI2509 -
m@rina -

1 réponse
Mise en forme conditionnelle d'un tableau - word
Ducoduc -
Raymond PENTIER -

1 réponse
Tri les lettres d'un mot par ordre alphabétique
labejau37 -
DjiDji59430 -

9 réponses