Menu déroulant horizontal

Menu déroulant horizontal - HTML/CSS - Programmation

Marsh Posté le 16-06-2008 à 23:46:01    

Hello tout le monde,
J'ai trouvé un script qui fonctionne très bien: http://css.alsacreations.com/xmedi [...] zontal.htm
mais j'aimerais l'insérer dans un tableau à un endroit choisit sur ma page, j'ai mis relative à la place de absolute, et le menu dans une case et la partie site dans celle d'en dessous.
Le problème est que quand ça se déroule, ça décale la partie site au lieu de s'afficher par dessus.
 
Comment faire ?
 
Je ne maitrise pas du tout CSS.

Reply

Marsh Posté le 16-06-2008 à 23:46:01   

Reply

Marsh Posté le 17-06-2008 à 08:12:17    

bah oui t as mis relative a la place d absolute [:spamafote]


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 17-06-2008 à 14:32:38    

alors comment faire pour place ce menu à l'endroit souhaité, par exemple centré en gardant absolute ?

Reply

Marsh Posté le 17-06-2008 à 16:28:23    

je commence à comprendre 2 ou 3 truc, j'ai fait un div pour tout le site:

Code :
  1. #global_center {
  2. width: 1024px;
  3. height: 768px;
  4. margin-left: auto;
  5. margin-right: auto;
  6. }


puis dedans

Code :
  1. #global{
  2. position: absolute;
  3. width: 1024px;
  4. height: 768px;
  5. border: 1px solid #000;
  6. }


et enfin le menu en absolute et le site en relative.

Reply

Marsh Posté le 18-06-2008 à 15:06:35    

olala beurk [:alph-one]
il te manque de nombreuses bases j en ai bien peur
http://openweb.eu.org/articles/initiation_flux/
lis les trois articles
 
sortir un element de ton flux doit etre un evenement rare
tout ton site en absolute c est n importe quoi
 
pour positionner un element en absolute il faut que son parent soit en relative
ensuite tu le positionnes grace aux propriétés top et left
si ton menu "pousse" vers le bas c est parce qu il ets dans le flux et c est aussi pour ca que son auteur a choisi de le positionner en absolute
 
bonne lecture et si t as des questions hesite pas
mais il faut eviter les solutions de sorcier au petit bonheur la chance ca va t attirer plus de problemes que de solutions


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 18-06-2008 à 23:39:49    

merci pour l'info, en effet, je teste des trucs dans tous les sens sans être sûr de ce que je fait, je vais étudier clairement.

Reply

Marsh Posté le 19-06-2008 à 01:23:34    

maintenant ça fonctionne presque, je créé 4 colonnes et juste en dessous le footer que j'ai sorti du flux container et mis en relative.
Le truc est que mes 4 colonnes ne sont pas alignées  sur la même ligne horizontale, il  doit y avoir qqe chose qui m'échappe.

Code :
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. <!--
  6. #block1 {
  7. position: relative;
  8. width: 160px;
  9. z-index: 10;
  10. top : 50px;
  11. left: 0px;
  12. color: #000;
  13. background-color: #EEEDDD;
  14. padding: 2px;
  15. }
  17. #block2 {
  18. position: relative;
  19. width: 338px;
  20. z-index: 11;
  21. top : 0px;
  22. left: 168px;
  23. color: #000;
  24. background-color: #E77DDD;
  25. padding: 2px;
  26. }
  28. #block3{
  29. position: relative;
  30. width: 338px;
  31. z-index: 12;
  32. top : 0px;
  33. left: 514px;
  34. color: #000;
  35. background-color: #007DDD;
  36. padding: 2px;
  37. }
  39. #block4{
  40. position: relative;
  41. width: 160px;
  42. z-index: 13;
  43. top : 0px;
  44. left: 860px;
  45. color: #000;
  46. background-color: #997DFF;
  47. padding: 2px;
  48. }
  50. #global{
  51. width: 1024px;
  52. text-align: left; /* on rétablit l'alignement normal du texte  corrigé à cause de IE<5*/
  53. margin-left: auto;
  54. margin-right: auto;
  55. }
  57. #container{
  58. position: relative;
  59. top: 0px;
  60. left: 0px;
  61. background-color: green;
  62. }
  64. #header {
  65. position: relative;
  66. top : 0px;
  67. left : 0px;
  68. height: 60px;
  69. width: 100%;
  70. color: #000;
  71. background-color: yellow;
  72. }
  74. #footer {
  75. position: relative;
  76. top: 10px;
  77. height: 60px;
  78. width: 100%;
  79. color: #000;
  80. background-color: #99CC99;
  81. }
  83. -->
  84. </style>
  85. </head>
  87. <body>
  88. <div id="global">
  90. <div id="container">
  92. <div id="header">
  93. hello header
  94. </div>
  96. <div id="block1">
  97.  block1
  98. </div>
  99. <div id="block2">
  100.  block2
  101. </div>
  102. <div id="block3">
  103.  block3
  104. </div>
  105. <div id="block4">
  106.  block4
  107. </div>
  109. </div>
  111. <div id="footer">
  112. hello footer
  113. </div>
  115. </div>
  116. </body>
  117. </html>

Reply

Marsh Posté le 19-06-2008 à 02:23:53    

le fait que tous tes blocks soient en relative montre que tu n as absolument rien compris a l article
relis le


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 19-06-2008 à 22:00:06    

rien, non, mais pas tout, maintenant il me semble que oui, en effet, le relative décale par rapport au flux et là ce sont des block qui sont à la suite donc l'un en dessous de l'autre, je vais utiliser float.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed