Div, Problème de superposition

Répondre
zOy
le 22/01/2008 à 15:36
zOy
Déconnecté
www.zoytorrent.com, www.xtrem-scripts.fr, www.goomba.fr
Bonjour à tous, quelle est la ligne de code qui fait que le div doit etre au premier plan par rapport au contenu de la page ?

C'est à dire que j'ai fait une menu horizontal-déroulant et il y a un formulair juste en dessou du menu deroulan ...

Le problème, c'est que l'orsque que le menu se déroule, il se place en dessou du formulair, et du coup, on ne peut pas cliquer.

Voiçi le menu (CSS) :

menu.css
  1. #menuDeroulant
  2. {
  3.    float: right;
  4.    background: #F23000;
  5.    width: 600px;
  6.    height: 21px;
  7.    list-style-type: none;
  8.    margin: 0px;
  9.    padding: 10px;
  10.    border: 0;
  11.    position: inherit;
  12.    top: 0;
  13.    left: 0;
  14. }
  15. #menuDeroulant li
  16. {
  17.    float: right;
  18.    width: 150px;
  19.    margin: 0;
  20.    padding: 0;
  21.    border: 0;
  22. }
  23. #menuDeroulant li a:link, #menuDeroulant li a:visited
  24. {
  25.    display: block;
  26.    height: 1%;
  27.    color:#FFF;
  28.    background: #F23000;
  29.    margin: 0;
  30.    padding: 4px 8px;
  31.    border-right: 0px solid #fff;
  32.    text-decoration: none;
  33. }
  34. #menuDeroulant li a:hover { background-color: #F23000; }
  35. #menuDeroulant li a:active { background-color: #F23000; }
  36.  
  37. #menuDeroulant .sousMenu
  38. {
  39.    display: none;
  40.    list-style-type: none;
  41.    margin: 0;
  42.    padding: 0;
  43.    border: 0;
  44. }
  45. #menuDeroulant .sousMenu li
  46. {
  47.    float: right;
  48.    margin: 0;
  49.    padding: 0;
  50.    border: 0;
  51.    width: 149px;
  52.    border-top: 1px solid transparent;
  53.    border-right: 1px solid transparent;
  54. }
  55. #menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
  56. {
  57.    display: block;
  58.    color: #FFF;
  59.    margin: 0;
  60.    border: 0;
  61.    text-decoration: none;
  62.    background: transparent url("fondTR.png") repeat;
  63. }
  64. #menuDeroulant .sousMenu li a:hover
  65. {
  66.    display: block;
  67.    color: #FFF;
  68.    margin: 0;
  69.    border: 0;
  70.    text-decoration: none;
  71.    background: transparent url("fondTR2.png") repeat;
  72. }
  73.  
  74. #menuDeroulant li:hover > .sousMenu { display: block; } 


Et le menu (HTML) :

mapage.html
  1. <ul id="menuDeroulant">
  2. <li>
  3. <a href="#">Menu</a>
  4. <ul class="subMenu">
  5. <li><a href="#">castor</a></li>
  6. <li><a href="#">aligator</a></li>
  7. <li><a href="#">musclor</a></li>
  8. </ul>
  9. </li>
  10. <li>
  11. <a href="#">Menu 2</a>
  12. <ul class="subMenu">
  13. <li><a href="#">whisky</a></li>
  14. <li><a href="#">vodka</a></li>
  15. <li><a href="#">gin</a></li>
  16. <li><a href="#">vin</a></li>
  17. <li><a href="#">champagne</a></li>
  18. </ul>
  19. </li>
  20. </ul> 
LupusMic
le 22/01/2008 à 18:38
LupusMic
Déconnecté
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Regarde du côté de la propriété z-index.
zOy
le 23/01/2008 à 11:11
zOy
Déconnecté
www.zoytorrent.com, www.xtrem-scripts.fr, www.goomba.fr
J'ai mi

  1. z-index:inherit; 


C'est bien çà ?
LupusMic
le 23/01/2008 à 16:22
LupusMic
Déconnecté
Développeur récurrent, procédural et relationnel. Caustique soupe-au-lait.
Je ne sais pas, mais ça m'étonnerais. Puisqu'avec inherit tu hérites du comportement du père, et donc te retrouve sur le même z-index que le père. Ce qui n'est pas, je crois, ce que tu veux.

Liste des propriétés CSS.
zOy
le 24/01/2008 à 09:21
zOy
Déconnecté
www.zoytorrent.com, www.xtrem-scripts.fr, www.goomba.fr
Je n'est toujours pas réussi à faire aparaitre les sous-menus au premier plan.
zOy
le 24/01/2008 à 09:24
zOy
Déconnecté
www.zoytorrent.com, www.xtrem-scripts.fr, www.goomba.fr
La feuille CSS du menu


  1. #menuDeroulant
  2. {
  3.    float: right;
  4.    background: #F23000;
  5.    width: 800px;
  6.    height: 21px;
  7.    list-style-type: none;
  8.    margin: 0px;
  9.    padding: 10px;
  10.    border: 0;
  11.    position: inherit;
  12.    top: 0;
  13.    left: 0;
  14.    z-index:1000;
  15.    background: #FFFFFF url(images/img01.gif) repeat-x;
  16.  
  17. }
  18. #menuDeroulant li
  19. {
  20.    float: right;
  21.    width: 75px;
  22.    margin: 0;
  23.    padding: 0;
  24.    border: 0;
  25.    z-index:1000;
  26. }
  27. #menuDeroulant li a:link, #menuDeroulant li a:visited
  28. {
  29.    display: block;
  30.    height: 1%;
  31.    color: #FFF;
  32.    background: #F23000;
  33.    margin: 0;
  34.    padding: 4px 8px;
  35.    border-right: 0px solid #fff;
  36.    text-decoration: none;
  37.    z-index:1000;
  38. }
  39. #menuDeroulant li a:hover { background-color: #F23000; }
  40. #menuDeroulant li a:active { background-color: #F23000; }
  41.  
  42. #menuDeroulant .sousMenu
  43. {
  44.    display: none;
  45.    list-style-type: none;
  46.    margin: 0;
  47.    padding: 0;
  48.    border: 0;
  49.    z-index:1000;
  50.    }
  51. #menuDeroulant .sousMenu li
  52. {
  53.    float: right;
  54.    margin: 0;
  55.    padding: 0;
  56.    border: 0;
  57.    width: 149px;
  58.    border-top: 1px solid transparent;
  59.    border-right: 1px solid transparent;
  60.    z-index:1000;
  61. }
  62. #menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
  63. {
  64.    display: block;
  65.    color: #FFF;
  66.    margin: 0;
  67.    border: 0;
  68.    text-decoration: none;
  69.    background: transparent url("fondTR.png") repeat;
  70.    z-index:1000;
  71. }
  72. #menuDeroulant .sousMenu li a:hover
  73. {
  74.    display: block;
  75.    color: #FFF;
  76.    margin: 0;
  77.    border: 0;
  78.    text-decoration: none;
  79.    background: transparent url("fondTR2.png") repeat;
  80.    z-index:1000;
  81. }
  82.  
  83. #menuDeroulant li:hover > .sousMenu { display: block; } 


La feuille CSS du design

  1. body {
  2.    margin: 0;
  3.    padding: 0;
  4.    background: #FFFFFF url(images/img01.gif) repeat-x;
  5.    font: 13px Arial, Helvetica, sans-serif;
  6.    color: #626262;
  7. }
  8.  
  9. form {
  10.    margin: 0;
  11.    padding: 0;
  12. }
  13.  
  14. input {
  15.    padding: 5px;
  16.    background: #FEFEFE url(images/img13.gif) repeat-x;
  17.    border: 1px solid #626262;
  18.    font: normal 1em Arial, Helvetica, sans-serif;
  19.    z-index:500;
  20. }
  21.  
  22. h1, h1 a, h2, h2 a, h3, h3 a{
  23.    margin: 0;
  24.    text-decoration: none;
  25.    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  26.    color: #444444;
  27. }
  28.  
  29. h1 {
  30.    letter-spacing: -3px;
  31.    font-size: 2.6em;
  32. }
  33.  
  34. h2 {
  35.    letter-spacing: -2px;
  36.    font-size: 2em;
  37.    z-index:500;
  38. }
  39.  
  40. h3 {
  41.    font-size: 1em;
  42. }
  43.  
  44. p, ol, ul {
  45.    margin-bottom: 2em;
  46.    line-height: 200%;
  47. }
  48.  
  49. blockquote {
  50.    margin: 0 0 0 1.5em;
  51.    padding-left: 1em;
  52.    border-left: 5px solid #DDDDDD;
  53. }
  54.  
  55. a {
  56.    color: #EB1400;
  57. }
  58.  
  59. a:hover {
  60.    text-decoration: none;
  61. }
  62.  
  63. /* Header */
  64.  
  65. #header {
  66.    height: 82px;
  67.    z-index:1000;
  68.  
  69. }
  70.  
  71. #logo h1, #logo p {
  72.    float: left;
  73. }
  74.  
  75. #logo h1 {
  76.    padding: 13px 0 0 25px;
  77. }
  78.  
  79. #logo p {
  80.    margin: 0;
  81.    padding: 20px 0 0 4px;
  82.    line-height: normal;
  83.    text-transform: lowercase;
  84.    font-weight: bold;
  85. }
  86.  
  87. #logo a {
  88.    text-decoration: none;
  89.    color: #FFFFFF;
  90. }
  91.  
  92. #menu {
  93.    float: right;
  94. }
  95.  
  96. #menu ul {
  97.    margin: 0;
  98.    padding: 0;
  99.    list-style: none;
  100. }
  101.  
  102. #menu li {
  103.    display: block;
  104.    float: left;
  105.    height: 82px;
  106. }
  107.  
  108. #menu a {
  109.    display: block;
  110.    width: 110px;
  111.    height: 46px;
  112.    padding: 24px 0 0 0;
  113.    text-decoration: none;
  114.    text-align: center;
  115.    letter-spacing: -1px;
  116.    font: bold 1.6em "Trebuchet MS", Arial, Helvetica, sans-serif;
  117.    color: #FABEB3;
  118. }
  119.  
  120. #menu a:hover {
  121.    width: 108px;
  122.    background: url(images/img03.gif) repeat-x;
  123.    border-left: 1px solid #FFFFFF;
  124.    border-right: 1px solid #FFFFFF;
  125.    color: #EB1400;
  126. }
  127.  
  128. #menu .current_page_item {
  129.    background: url(images/img02.gif) no-repeat center bottom;
  130. }
  131.  
  132. #menu .current_page_item a {
  133.    width: 108px;
  134.    background: #FFEC70 url(images/img03.gif) repeat-x;
  135.    border-left: 1px solid #FFFFFF;
  136.    border-right: 1px solid #FFFFFF;
  137.    color: #EB1400;
  138. }
  139.  
  140. /* Page */
  141.  
  142. #page {
  143.    padding: 40px 60px 0 60px;
  144.    z-index:500
  145. }
  146.  
  147. /* Content */
  148.  
  149. #content {
  150.    margin-right: 340px;
  151. }
  152.  
  153. .post {
  154.    margin-bottom: 10px;
  155.    background: url(images/img05.gif) repeat-x;
  156. }
  157.  
  158. .post .title {
  159.    background: url(images/img07.gif) no-repeat right top;
  160. }
  161.  
  162. .post .title h2 {
  163.    padding: 30px 30px 0 30px;
  164.    background: url(images/img06.gif) no-repeat;
  165.    font-size: 2.2em;
  166. }
  167.  
  168. .post .title p {
  169.    margin: 0;
  170.    padding: 0 0 0 30px;
  171.    line-height: normal;
  172.    color: #BABABA;
  173. }
  174.  
  175. .post .title p a {
  176.    color: #BABABA;
  177. }
  178.  
  179. .post .entry {
  180.    padding: 20px 40px 20px 30px;
  181. }
  182.  
  183. .post .links {
  184.    margin: 0;
  185.    padding: 0 30px 30px 30px;
  186.    background: url(images/img15.gif) no-repeat left bottom;
  187. }
  188.  
  189. .post .links a {
  190.    padding: 0 23px;
  191.    text-decoration: none;
  192.    font-weight: bold;
  193. }
  194.  
  195. .post .links a:hover {
  196.    text-decoration: underline;
  197. }
  198.  
  199. .post .links .more {
  200.    background: url(images/img16.gif) no-repeat left center;
  201. }
  202.  
  203. .post .links .comments {
  204.    background: url(images/img17.gif) no-repeat left center;
  205. }
  206.  
  207. /* Sidebar */
  208.  
  209. #sidebar {
  210.    float: right;
  211.    width: 300px;
  212. }
  213.  
  214. #sidebar ul {
  215.    margin: 0;
  216.    padding: 0;
  217.    list-style: none;
  218. }
  219.  
  220. #sidebar li {
  221.    margin-bottom: 10px;
  222.    background: url(images/img10.gif) no-repeat left bottom;
  223. }
  224.  
  225. #sidebar li ul {
  226.    padding: 0 30px 40px 30px;
  227. }
  228.  
  229. #sidebar li li {
  230.    margin: 0;
  231.    padding-left: 20px;
  232.    background: url(images/img11.gif) no-repeat 5px 50%;
  233. }
  234.  
  235. #sidebar h2 {
  236.    padding: 30px 30px 20px 30px;
  237.    background: url(images/img09.gif) no-repeat;
  238.    font-weight: normal;
  239.    color: #EB1400;
  240. }
  241.  
  242. /* Search */
  243.  
  244. #search {
  245.    padding: 20px 30px 40px 30px;
  246. }
  247.  
  248. #search input {
  249.    padding: 0;
  250.    width: 70px;
  251.    height: 29px;
  252.    background: #DFDFDF url(images/img14.gif) repeat-x;
  253.    font-weight: bold;
  254. }
  255.  
  256. #search #s {
  257.    padding: 5px;
  258.    width: 150px;
  259.    height: auto;
  260.    background: #FEFEFE url(images/img13.gif) repeat-x;
  261.    border: 1px solid #626262;
  262.    font: normal 1em Arial, Helvetica, sans-serif;
  263. }
  264.  
  265. #search br {
  266.    display: none;
  267. }
  268.  
  269. /* Categories */
  270.  
  271. #sidebar #categories li {
  272.    background: url(images/img12.gif) no-repeat left center;
  273. }
  274.  
  275. /* Calendar */
  276.  
  277. #calendar_wrap {
  278.    padding: 0 30px 40px 30px;
  279. }
  280.  
  281. #calendar table {
  282.    width: 100%;
  283.    text-align: center;
  284. }
  285.  
  286. #calendar thead {
  287.    background: #F1F1F1;
  288. }
  289.  
  290. #calendar tbody td {
  291.    border: 1px solid #F1F1F1;
  292. }
  293.  
  294. #calendar #prev {
  295.    text-align: left;
  296. }
  297.  
  298. #calendar #next {
  299.    text-align: right;
  300. }
  301.  
  302. #calendar tfoot a {
  303.    text-decoration: none;
  304.    font-weight: bold;
  305. }
  306.  
  307. #calendar #today {
  308.    background: #FFF3A7;
  309.    border: 1px solid #EB1400;
  310.    font-weight: bold;
  311.    color: #EB1400
  312. }
  313.  
  314. /* Footer */
  315.  
  316. #footer {
  317.    padding: 70px 0 50px 0;
  318.    background: #757575 url(images/img08.gif) repeat-x;
  319. }
  320.  
  321. #footer p {
  322.    margin-bottom: 1em;
  323.    text-align: center;
  324.    line-height: normal;
  325.    font-size: .9em;
  326.    color: #BABABA;
  327. }
  328.  
  329. #footer a {
  330.    padding: 0 20px;
  331.    text-decoration: none;
  332.    color: #DDDDDD;
  333. }
  334.  
  335. #footer a:hover {
  336.    color: #FFFFFF;
  337. }
  338.  
  339. #footer .rss {
  340.    background: url(images/img18.gif) no-repeat left center;
  341. }
  342.  
  343. #footer .xhtml {
  344.    background: url(images/img19.gif) no-repeat left center;
  345. }
  346.  
  347. #footer .css {
  348.    background: url(images/img20.gif) no-repeat left center;
  349. }
  350.  
  351. #footer .legal a {
  352.    padding: 0;
  353. }
  354.  
  355. .gallery{
  356. margin:0; padding:0;
  357. overflow:hidden; /* Clears the floats */
  358. width:600px; /* IE and older Opera fix for clearing, they need a dimension */
  359. list-style:none; 
  360. }
  361. .gallery li{
  362. float:left;
  363. display:inline; /* For IE so it doesn't double the 1% left margin */
  364. width:23.8%;
  365. margin:0 0 10px 1%; padding:10px 0;
  366. height:83px; /* Height of img (75) + 2 times 3px padding + 2 times 1px border = 83px */
  367. position:relative; /* This is the key */
  368. background:url(45degree.png);
  369. }
  370. .gallery a,
  371. .gallery img{
  372. display:block;
  373. width:100%;
  374. }
  375.  
  376. a img{ border:none; } /* A small fix */
  377.  
  378. .gallery a:link,
  379. .gallery a:visited,
  380. .gallery a:focus,
  381. .gallery a:hover,
  382. .gallery a:active{
  383. padding:3px;
  384. background:#eeefef;
  385. width:75px; height:75px;
  386. border:1px solid #eeefef; /* We blend the border with the bg, as if it isn't there */
  387. position:absolute; top:50%; left:50%; /* position it so that image's top left corner is in the center of the list item */
  388. margin:-41px 0 0 -41px; /* Pull the image into position with negative margins(margins value is half of the width of the image) */
  389. }
  390. .gallery a:hover{
  391. border-color:#dfdfdf;
  392. }
  393.  
  394. /* These are all optional, for decoration purpouses only */
  395. .gallery{
  396. padding-bottom:10px;
  397. margin-top:10px;
  398. } 
burnedsoul
le 13/03/2008 à 18:27
burnedsoul
Déconnecté
Webmaster de Clikmag http://www.clikmag.fr
Je ne sais pas si cela résoudra ton problème, mais perso pour mon menu, j'utilise ce code là. Tu pourras l'adapter en fonction je pense ;)
  1.  
  2. <?php
  3. // Le css  
  4.  
  5. a.menu_item em {  
  6. display:none; 
  7.    font-size:11px;  
  8. }  
  9.  
  10. a.menu_item:hover {  
  11. position: relative;  
  12. z-index: 500;  
  13. text-decoration:none; 
  14.    color:#fff;  
  15. }  
  16. a.menu_item:hover em {  
  17. font-style: normal;  
  18. display: block;  
  19. position: absolute;  
  20. top: 20px;  
  21. left: 0px;  
  22. padding: 5px;  
  23. color: #000;  
  24. border: 1px solid #cccccc;  
  25. background: #ffffff; 
  26.    overflow:hidden;  
  27. width:220px; 
  28.    height:auto;  
  29. }  
  30.  
  31. // Tu l'appelles en HTML comme ceci :  
  32. <a class='menu_item' href='#' >Texte du menu  
  33.  
  34. <em>  
  35. Item 1 <br />  
  36. Item 2 <br />  
  37. </em>  
  38.  
  39. </a>  
  40.  
  41. ?>
  42.  


En fait la seule faiblesse de ce code, c'est que les <em> n'acceptent pas les <ul>, les <div>, etc du coup il faut se débrouiller autrement (via des <br /> par exemple ...)
Ensuite pour activer un lien, tu peux via javascript gérer un onclick sur un élément <input> ou <span>.

En espérant t'avoir aidé ;=)
Répondre
Accès rapide :

Remonter Remonter
L'éditeur javascript - CSS - Gentoo - Tutoriaux PHP - Tutoriels PHP - Php - Breizh Blog