[RESOLU] L'élément <li> ne prend pas la même largeur que son co

Bonjour tous

C'est la rentrée, pour moi en tout cas et avec elle vient son lot de questions.
Celle qui me préoccupe maintenant est un Menu composé de la manière suivante :

<div class="menueila">
<div id="menu"> 
<ul class="niveau1">
...<li class="sousmenu"></li>
...<li class="sousmenu">
......<a href="http://www.monsite.fr/formations-pro/">Formation professionnelle et continue</a>
......<ul class="niveau2">
........<li></li>
........etc.
......</ul>
...</li>
</ul>
</div>
</div>

et le CSS

div.menueila {
    background: none repeat scroll 0 0 #33CCCC;
    height: 272px;
    position: inherit;
    width: 100%;
    margin-left: 0;
    margin-top: 0;
    z-index: 1;
}
div.menueila div#menu {
    float: none;
    margin: 0;
    width: 100%;
    color: #BBBBBB;
    font-family: Optima,Helvetica,sans-serif;
    font-style: normal;
}
div.menueila div#menu ul.niveau1 {
    background-color: #3C3A3A;
    bottom: -51px;
    display: table;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}
div.menueila div#menu ul.niveau1 li.sousmenu {
    display: table-cell;
    padding-right: 0;
    text-align: center;
    line-height: normal;
    border-bottom: 1px solid #CCCCCC;
    color: #777777;
    list-style: none outside none;
    margin: 0;
    position: relative;
}
div.menueila div#menu ul.niveau1 ul,
div.menueila div#menu > ul.niveau1 ul {
    left: auto;
    top: 74px;
    border: 1px solid #CCCCCC;
    display: none;
    position: absolute;
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0;
    padding: 0;
}

Les <li> du niveau1 prennent une largeur variable car elles sont disposées en table-cell. Voir l'image en pièce jointe svp.


Mon problème est que le sous-menu (UL class="niveau2") devrait prendre la même largeur que son conteneur (LI class="sousmenu")
Comment faire ? J'ai essayé plusieurs méthodes (overflow, width, display) sans succès.

Merci d'avance
Modifié par cevichero (26 Aug 2013 - 16:56)

Salut,


Fait voir un peu plus en détail avec http://jsfiddle.net/, qu'on puisse t'aider et tester en même temps.

Salut JuseN,

Merci pour ta réponse mais JSfiddle permet de tester le code JS dans une page non ?
Malheureusement, je recherche une solution en pour CSS car c'est tout ce à quoi j'ai droit de modifier.
Puis ça a l'air complexe d'utilisation... ^^

Si JSFIDDLE te parait compliquer OK,

dans ce cas met ici http://cssdesk.com/

Cela m'évite de me faire un menu, avec du css pour tester, tu met ton code html + css qu'il faut, tu fait "share" (en haut a droite) et tu envoie l'url. comme ça on peut tester directement sur le code que tu as mis.

Merci pour tes efforts mais je me suis mal exprimé, ce n'est pas une création mais un site qui existe déjà depuis longtemps auquel je dois apporter un petit rafraichissement temporaire en utilisant que du CSS.
Sur cette page il y a bien trop de feuilles de styles qui sont appelées (et générées), ce serait trop complexe de tout mettre dans l'outil que tu proposes.

Est-ce que je peux t'envoyer l'url inbox ?

* En tout cas je note CSSdesk

Ta tenté avec un width 100% sur le LI sachant que l'ul est en position relative ?

PS : jsFiddle permet aussi pour débuguer le CSS.

cevichero a écrit :

Sur cette page il y a bien trop de feuilles de styles qui sont appelées (et générées), ce serait trop complexe de tout mettre dans l'outil que tu proposes.

Est-ce que je peux t'envoyer l'url inbox ?

Je préfère cette réponse

Envoie l'url par MP, je peux toujours essayer de tester via FireBug.

Artsx, merci mais j'ai déjà essayé (c'est la première chose que j'ai faite), sans succès hélas.

JuseN, je te l'envoie par MP ^^

envoi l'url en mp aussi je suis preneur

Bonjour,

Les outils que l'on te propose permettent un debug super rapide, ou alors il faut que tu fournisses plus de code.
En l'état on ne peut pas t'aider, même si j'ai ma petite idée...

Il te suffit de coller ton code HTML dans le champ HTML, la partie du CSS dans le champ CSS, laisser JS vide, enregistrer et nous donner le lien du pen ou du fiddle.

Merci

pour pouvoir maitriser les espacements entre les <li> il est important de coller les balises.

<li></li><li></li>

tu n'auras plus de problèmes d'espacements involontaires.

Le fait de faire un return
<li></li>
<li></li>
sur plusieurs lignes différentes, le navigateur considère dans ce cas le passage à la ligne comme un espace, donc un écart.

colle tes balises dans le html et tout devrais retourner dans l'ordre.

edit: je crois que je suis hors sujet...
Modifié par basilemadien (27 Aug 2013 - 23:58)

salut,
un élément en "display:table-cell" ne peut être en position relative. C'est pour cela que "width:100%" (que tu aurais d'ailleurs dû appliquer sur ton <ul> en position absolue) ne servira à rien.
Il faut dans ton cas ajouter un <div>, enfant du <li>, puis mettre ton <ul> de "niveau 2" comme enfant du <div> et mettre ce dernier en "position:relative".

Geoffrey C. a écrit :
Il te suffit de coller ton code HTML dans le champ HTML, la partie du CSS dans le champ CSS, laisser JS vide, enregistrer et nous donner le lien du pen ou du fiddle.

Merci

Geoffrey,
Merci mais sur cette page il y a déjà pas mal de css et scripts appelés, je ne peux pas toutes les mettre sinon l'outil ne les prend pas.
Malheureusement, je n'ai le droit que de toucher aux CSS, d'où ma demande un peu "restreinte"

Zelalsan a écrit :
un élément en &quot;display:table-cell&quot; ne peut être en position relative. C'est pour cela que &quot;width:100%&quot; (que tu aurais d'ailleurs dû appliquer sur ton &lt;ul&gt; en position absolue) ne servira à rien.
Il faut dans ton cas ajouter un &lt;div&gt;, enfant du &lt;li&gt;, puis mettre ton &lt;ul&gt; de &quot;niveau 2&quot; comme enfant du &lt;div&gt; et mettre ce dernier en &quot;position:relative&quot;.

Merci Zelalsan,
J'ai essayé mais ça ne change pas, si ce n'est la position du menu qui est meilleure en effet en absolute qu'en relative

Mais ma question subsiste...
COmment faire pour que le sous-menu (UL class="niveau2") prenne la même largeur que son conteneur (LI class="sousmenu") ?

Merci
Modifié par cevichero (29 Aug 2013 - 15:55)

@cevichero> ok je vais faire plus simple pour toi. Ton <ul> qui doit prendre tout l'espace de son <li> parent est en position absolue. Dans un cas concret, pour qu'un élément en position absolue occupe toute la largeur de son conteneur, on doit ajouter un "width:100%" et un "left:0;top:0". On sait qu'une position absolue se réfère au premier parent positionné hors static (i.e relative/absolute). Dans ton cas, elle s'applique au <li> parent de ton <ul> en question. Hors, ce même <li> a un "display:table-cell" et un élément avec un "display:table-cell" ne peut être en position relative. Donc ton <ul> ne se réfère pas à son parent mais à un autre ancêtre. Tu ne peux donc pas lui appliquer un simple "width:100%" car cela ne marchera pas.
Pour faire ce que tu souhaites, tu dois mettre un <div> enfant de ce <li>, lui ajouter "width:100%" et le positionner en relatif. Ton <ul>, ensuite, sera enfant de ce <div> et à partir de là, tu pourras avoir un comportement "normal".
Au passage ton code contient beaucoup d'aberrations et des sélecteurs beaucoup trop lourds inutilement

Zelalsan,

Merci, ça fonctionne ! Tu as tout vu du premier coup !
Tout ce qu'il reste c'est convaincre les gens du site d'ajouter une div autour de chaque <li> pour que ça prenne effet. ça ne devrait pas poser de souci.

Zelalsan a écrit :
Au passage ton code contient beaucoup d'aberrations et des sélecteurs beaucoup trop lourds inutilement

Dernière question, pourrais-je avoir quelques exemples stp ?

* et merci à tous les autres pour avoir voulu m'aider, j'apprécie ^^
Modifié par cevichero (02 Sep 2013 - 12:33)