Problème de css sur menu
Résolu
tiran58
Messages postés
59
Date d'inscription
Statut
Membre
Dernière intervention
-
tiran58 Messages postés 59 Date d'inscription Statut Membre Dernière intervention -
tiran58 Messages postés 59 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
j'ai un petit problème de css avec mon menu que je doit doubler pour cause de texte trop long
voici mon Menu.php :
________________________________________________________
_________________________________________________
et le css qui va avec :
_________________________________________________
________________________________________________
comme vous pouvez le constater si vous tester ma page l'ombrage du menu droite
ne s'applique pas quand le menu et séparer en 2 alors que si vous modifier le code pour l'unifier les bordure d'ombrage s'applique d'ou vient le problème
j'ai un petit problème de css avec mon menu que je doit doubler pour cause de texte trop long
voici mon Menu.php :
________________________________________________________
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript">
</script>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<div class="menujava">
<dl>
<dt>
<a href="index.php"><img src="image/home.png">!!!
</a>
</dt>
<dt onclick="javascript:montre('smenu1');"><a>Resources Humaine</a>
</dt>
<nav id="smenu1">
<ul>
<li>
<a href="#.php">
lien1
</a>
</li>
<li>
<a href="#.php">
lien2
</a>
</li>
<li>
<a href="#.php">
lien3
</a>
</li>
</ul>
</nav>
<dt onclick="javascript:montre('smenu2');"><a>Service Juridique</a>
</dt>
<nav id="smenu2">
<ul>
<li>
<a href="#.php">
lien3
</a>
</li>
<li>
<a href="#.php">
lien4
</a>
</li>
<li>
<a href="#.php">
lien5
</a>
</li>
</ul>
</nav>
<dt onclick="javascript:montre('smenu3');"><a>Direction service d'information</a>
</dt>
<nav id="smenu3">
<ul>
<li>
<a href="#.php">
lien6
</a>
</li>
<li>
<a href="#.php">
lien7
</a>
</li>
<li>
<a href="#.php">
lien8
</a>
</li>
</ul>
</nav>
<dt onclick="javascript:montre('smenu4');"><a>Service Com</a>
</dt>
<nav id="smenu4">
<ul>
<li>
<a href="#.php">
lien9
</a>
</li>
<li>
<a href="#.php">
lien10
</a>
</li>
<li>
<a href="#.php">
lien11
</a>
</li>
</ul>
</nav>
<dt onclick="javascript:montre('smenu5');"><a>Direction des Finance</a>
</dt>
<nav id="smenu5">
<ul>
<li>
<a href="#.php">
lien9
</a>
</li>
<li>
<a href="#.php">
lien10
</a>
</li>
<li>
<a href="#.php">
lien11
</a>
</li>
</ul>
</nav>
</dl>
<br/>
</br>
</br>
</br>
</br>
</br>
<dl id="2">
<dt onclick="javascript:montre('smenu6');"><a>Comité des oevres Social</a>
</dt>
<nav id="smenu6">
<ul>
<li>
<a href="#.php">
lien12
</a>
</li>
<li>
<a href="#.php">
lien13
</a>
</li>
<li>
<a href="#.php">
lien14
</a>
</li>
</ul>
</nav>
<dt onclick="javascript:montre('smenu7');"><a>Comité des Oevre</a>
</dt>
<nav id="smenu7">
<ul>
<li>
<a href="#.php">
lien15
</a>
</li>
<li>
<a href="#.php">
lien16
</a>
</li>
<li>
<a href="#.php">
lien17
</a>
</li>
</ul>
</nav>
<dt onclick="javascript:montre('smenu8');"><a>Archive</a>
</dt>
<nav id="smenu8">
<ul>
<li>
<a href="#.php">
lien18
</a>
</li>
<li>
<a href="#.php">
lien19
</a>
</li>
<li>
<a href="#.php">
lien20
</a>
</li>
</ul>
</nav>
<dt onclick="javascript:montre('smenu9');"><a>Trombinoscopes</a>
</dt>
<nav id="smenu9">
<ul>
<li>
<a href="#.php">
lien21
</a>
</li>
<li>
<a href="#.php">
lien22
</a>
</li>
<li>
<a href="#.php">
lien23
</a>
</li>
</ul>
</nav>
</dl>
</div>
_________________________________________________
et le css qui va avec :
_________________________________________________
dl{ /*menu*/
display: table;
width: 1200px;
height: 30px;
margin: -60px auto;
margin-left: -5px;
padding: 0;
background: linear-gradient(deepskyblue, dodgerblue);
background: -webkit-linear-gradient(deepskyblue, dodgerblue);
background: -moz-linear-gradient(deepskyblue, dodgerblue);
background: -ms-linear-gradient(deepskyblue, dodgerblue);
background: -o-linear-gradient(deepskyblue, dodgerblue);
background: linear-gradient(deepskyblue, dodgerblue);
background: dodgerblue;
border-radius: 150px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
0 3px 5px rgba(0, 0, 0, .2),
0 5px 10px rgba(0, 0, 0, .2),
0 20px 20px rgba(0, 0, 0, .15);
}
dl dt{
display: table-cell;
}
dl dt a{
display: block;
text-align: center;
color: rgba(0, 0, 0, .7);
text-decoration: none;
padding: 8px 8px 17px 8px;
text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
0 -1px 0 hsl(210, 100%, 32%) inset,
0 -2px 0 hsl(210, 100%, 38%) inset,
0 -3px 0 hsl(210, 100%, 44%) inset,
0 -4px 0 hsl(210, 100%, 50%) inset,
0 -5px 0 hsl(210, 100%, 60%) inset;
transition: all .3s .1s;
position: relative;
}
dl dt:first-child a{
border-radius: 3px 0 0 20px;
}
dl dt:last-child a{
border-radius: 0 3px 20px 0;
}
dl dt a:hover,
dl dt a:focus{
background: rgba(255,255,255,.2);
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
0 -1px 0 hsl(210, 100%, 42%) inset,
0 -2px 0 hsl(210, 100%, 48%) inset,
0 -3px 0 hsl(210, 100%, 54%) inset,
0 -4px 0 hsl(210, 100%, 60%) inset,
0 -5px 0 hsl(210, 100%, 70%) inset;
padding: 8px 25px 17px 25px;
transition: all .3s 0s;
}
dl dt a:active{
background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
box-shadow: 0 0 2px rgba(0,0,0,.3) inset;
}
}
dl dt a::before{
content: '';
position: absolute;
left: 50%;
bottom: 9px;
margin-left: -2px;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(0, 0, 0, .5);
}
dl dt a:hover::before,
dl dt a:focus::before{
background: white;
box-shadow: 0 0 2px white,
0 -1px 0 rgba(0, 0, 0, .4);
}
dl dt a img{
position: absolute;
left: 50%;
bottom: 10px;
margin-left: -15px;
width: 30px;
height: 30px;
border-radius: 100%;
}
nav {
display: inline-block;
width: 250px;
border: 1px solid black;
text-align:center;
height: -50px;
margin: 100px auto;
vertical-align: top;
position: fixed;
right: 1000px;
bottom: 100px;
}
#li a{
display: inline-block;
width: 250px;
border: 1px solid black;
text-align:center;
height: -50px;
margin: 150px auto;
vertical-align: top;
position: fixed;
right: 1000px;
bottom: 300px;
}
________________________________________________
comme vous pouvez le constater si vous tester ma page l'ombrage du menu droite
dl dt:last-child a{
border-radius: 0 3px 20px 0;
}
ne s'applique pas quand le menu et séparer en 2 alors que si vous modifier le code pour l'unifier les bordure d'ombrage s'applique d'ou vient le problème
A voir également:
- Problème de css sur menu
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
- Réinitialiser menu démarrer windows 10 - Guide