Problème de construction en CSS

Problème de construction en CSS - HTML/CSS - Programmation

Marsh Posté le 13-05-2007 à 20:17:59    

Salut.
 
Je suis novice et j'essaie de me mettre au CSS.
Je pense avoir compris le principe, mais je bloque sur certaines choses.
En effet, je suis en train de créer un site où les boutons du menu seraient inscrits (avec une écriture spéciale) sur une image qui serait mise en background. Il me faut alors un moyen précis pour faire correspondre des boutons "transparents" à l'image background. Ces boutons doivent quand même être placés verticalement et à intervales réguliers.  
Pour ca, j'avais commencé à mettre l'image de la partie du menu (qui superposerait donc le background) et d'utiliser des zones réactives. De ce côté-là, je peux dire que c'est ok, tant sur Mozilla et IE, mais est-ce que j'utilise le meilleur moyen pour créer ces boutons-menu?
 
Maintenant, voici le vrai problème. J'ai eu beau chercher dans les forums, mais je n'ai pas trouvé solution à mon problème...
Lorsque que l'on clique sur un bouton du menu, son contenu doit s'afficher dans une autre div. J'utilise donc include php. Cela fonctionne. Mais cette div (ainsi que 3 autres) ne gardent pas leur place. Ils sont complètement décalé. Où est mon erreur SVP?
Je m'y prends peut-être très mal, mais j'ai vraiment besoin qu'on m'éclaire...
 
Voici le code:

Code :
  1. <body>
  2. <div id="container">
  3. <div id="menu">
  4.  <img src="../../images/fond/menu.jpg" align="top" width="260" height="485" border="0" usemap="#Map">
  5. </div>
  7. <div id="visiteurs">...Compteur...</div>
  9. <div id="connectes">...Compteur2...</div>
  11. <div id="main">
  12.  <?php
  13.   if (!isset($_GET['page'])) $page= 'accueil';
  14.   switch($page)
  15.   {
  16.   case 'page1': include ('accueil.txt');break;
  17.   case 'page2': include ('village.htm');break;
  18.   }
  19.  ?>
  20. </div>
  22. <div id="date">...date et heure...</div>
  23. </div>
  24. </body>
  25.       <map name="Map">
  26.         <area shape="rect" coords="48,455,149,482" href="http://www.test.be">
  27.         <area shape="rect" coords="55,415,144,445" href="http://www.test.be/fichiers/page1.php">
  28.         <area shape="rect" coords="57,372,254,405" href="http://www.test.be/fichiers/page2.php">
  29.         <area shape="rect" coords="55,332,220,363" href="http://www.test.be/fichiers/page3.php">
  30.         <area shape="rect" coords="54,290,204,320" href="http://www.test.be/fichiers/page4.php">
  31.         <area shape="rect" coords="52,247,184,279" href="http://www.test.be/fichiers/page5.php">
  32.         <area shape="rect" coords="47,207,150,239" href="http://www.test.be/fichiers/page6.php">
  33.         <area shape="rect" coords="43,165,125,198" href="http://www.test.be/fichiers/page7.php">
  34.         <area shape="rect" coords="36,121,203,155" href="http://www.test.be/fichiers/page8.php">
  35.         <area shape="rect" coords="14,19,94,51" href="http://www.test.be/fichiers/page9.php">
  36. </map>


 
Et voici le CSS:

Code :
  1. body, html {
  2. margin: 10;
  3. padding: 0;
  4. }
  5. body * {
  6. margin: 0;
  7. padding: 0;
  8. text-align: left;
  9. }
  10. #container {
  11. position: relative;
  12. width: 895px;
  13. height: 595px;
  14. margin-left: auto;
  15.     margin-right: auto;
  16. border: 1px solid #0E419A;
  17. background-image:url(../../images/fond/adresses.jpg)}
  18. #menu {
  19. width: 260px;
  20. height: 485px;
  21. float: left;
  22. margin-top:0;
  23. padding:0;
  24. }
  25. #menu ul {
  26. margin: 0 0 0 50px;
  27. }
  28. #menu ul li {
  29. list-style-type: none;
  30. padding: 0.35em 0.2em;
  31. }
  32. #menu ul li a {
  33. font-size:25px;
  34. color: #D1D9EC;
  35. text-decoration: none;
  36. padding: 0;
  37. }
  38. #main {
  39. width: 563px;
  40. height: 358px;
  41. float: right;
  42. margin: 38px 18px 0 0;
  43. }
  44. #connectes {
  45. width: 80px;
  46. height: 50px;
  47. float: right;
  48. margin: 125px 0 0 0;
  49. }
  50. #visiteurs {
  51. width: 148px;
  52. height: 50px;
  53. clear: both;
  54. float:left;
  55. margin: 0 0 0 38px;
  56. }
  57. #date {
  58. width: 148px;
  59. height: 50px;
  60. float:left;
  61. margin: 0 0 0 38px;
  62. }

Reply

Marsh Posté le 13-05-2007 à 20:17:59   

Reply

Marsh Posté le 13-05-2007 à 21:53:50    

t'as un lien pour qu'on voit de quoi ça a l'air ? ça sera plus facile de comprendre le contexte.

Message cité 1 fois

---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 13-05-2007 à 22:00:27    

dartyduck a écrit :

t'as un lien pour qu'on voit de quoi ça a l'air ? ça sera plus facile de comprendre le contexte.


 
Tout d'abord, merci pour le coup de main!!!
Voici un lien test mais avec les div remplis pour mieux voir le positionnement...
+/- correct sous IE (mais pas suffisant) et pas du tout avec Mozilla.
Voici:

Spoiler :

http://www.fisenne.be/fichiers/CSS/index3.php

Reply

Marsh Posté le 13-05-2007 à 22:22:39    

tout d'abord, je ne comprends pas pourquoi tu utilises des ul li dans ton css et pas dans ton code html. ça sert à rien d'en mettre dans le css dans ce cas.
Ensuite, plutot que d'utiliser une map, tu devrais justement utiliser les ul li avec des classes (une par bouton) pour ensuite fignoler les positionnement.
Enfin, effectivement, ton main est décalé. peut-etre parce que ton #connectes est en float:right;. Tu devrais regrouper #connectes et #visiteurs dans un div, et le mettre en float:left;
Je regarde avec mon pc pro avec IE6 et main est décalé. tu devrais préciser dans ton css le positionnement absolu ou relatif pour chaque div.


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 14-05-2007 à 21:09:30    

Après conseils, j'ai évité la map. La situation a l'air de s'arranger.
Je dirais même qu'elle est ok avec IE mais pas avec Mozilla.
On en est pas loin, alors voilà...
C'est mon div #right qui pose problème. Je n'arrive pas à le placer à droite pour Mozilla. Je pense que je dois jouer avec les positions relative ou absolute, mais je dois avouer que je ne les différencie pas très bien (si toutefois c'est bien ca que je dois utiliser pour arranger ma situation?).
 
Voici mon CSS code actuel:
NB: j'ai placé des background de couleur pour mieux voir le résultat.

Code :
  1. body, html {
  2. margin: 10 0 0 0;
  3. padding: 0;
  4. }
  5. body * {
  6. margin: 10 0 0 0;
  7. padding: 0;
  8. text-align: left;
  9. }
  10. #container {
  11. position: relative;
  12. width: 895px;
  13. height: 595px;
  14. margin-left: auto;
  15.     margin-right: auto;
  16. border: 1px solid #0E419A;
  17. background-image:url(../../images/fond/adresses.jpg)
  18. }
  19. #menu {
  20. width: 260px;
  21. height: 365px;
  22. float: left;
  23. margin:0;
  24. background-color:#336600;
  25. }
  26. #menu ul {
  27. margin: 0 0 0 50px;
  28. }
  29. #menu ul li {
  30. list-style-type: none;
  31. padding: 0.35em 0.2em;
  32. }
  33. #menu ul li a {
  34. font-size:25px;
  35. color: #D1D9EC;
  36. text-decoration: none;
  37. padding: 0;
  38. }
  39. #accueil {
  40. width: 895px;
  41. height: 120px;
  42. clear: both;
  43. margin:0;
  44. }
  45. #accueil ul {
  46. margin: 20px 0 0 15px;
  47. }
  48. #accueil ul li {
  49. list-style-type: none;
  50. display: inline;
  51. }
  52. #accueil ul li a {
  53. font-size:25px;
  54. color: #D1D9EC;
  55. text-decoration: none;
  56. padding: 0;
  57. }
  58. #right {
  59. width: 633px;
  60. height: 473px;
  61. margin:0 1px 0 1px;
  62. float: right;
  63. background-color:#99FF00;
  64. position:absolute;
  65. }
  66. #main {
  67. width: 563px;
  68. height: 358px;
  69. background-color:#FFCC99;
  70. margin:0;
  71. float:right
  72. }
  73. #connectes {
  74. width: 80px;
  75. height: 50px;
  76. background-color:#0033FF;
  77. margin:0;
  78. float:right;
  79. }
  80. #live {
  81. width: 260px;
  82. height: 100px;
  83. float:left;
  84. margin: 0;
  85. clear: both;
  86. }
  87. #visiteurs {
  88. width: 200px;
  89. height: 50px;
  90. clear: both;
  91. float:left;
  92. margin: 0;
  93. background-color:#99FF00;
  94. }
  95. #date {
  96. width: 200px;
  97. height: 50px;
  98. float:left;
  99. margin: 0;
  100. clear: both;
  101. background-color:#663399;
  102. }


Et voici le html:

Code :
  1. <div id="container">
  2. <div id="accueil">
  3.  <ul>
  4.   <li><a href="#" title="Accueil">Accueil</a></li>
  5.  </ul>
  6. </div>
  8. <div id="menu">
  9.  <ul>
  10.   <li><a href="#" title="Accueil">Les membres</a></li>
  11.   <li><a href="#" title="Accueil">Village</a></li>
  12.   <li><a href="#" title="Accueil">Les dates</a></li>
  13.   <li><a href="#" title="Accueil">Les Photos</a></li>
  14.   <li><a href="#" title="Accueil">Divertissements</a></li>
  15.  </ul>
  16. </div>
  17. <div id="live">
  18. <div id="visiteurs">visteurs</div>
  19. <div id="date">date</div>
  20. </div>
  21. <div id="right">
  22. <div id="connectes">hhsdf</div>
  23. <div id="main">jhd</div>
  24. </div>
  25. </div>

Reply

Marsh Posté le 15-05-2007 à 22:52:39    

alors premiere chose : je ne suis pas sous FF sur ce pc, mais ton site il déchire grave sa mère ! :D
Deuxieme chose : ton div right est une petite boite sans grande importance pour ton site, tu peux donc la positionner où tu veux sur ta page. Je te propose donc de la mettre en position absolute (explications : une boite en position relative se place par rapport à la boite qui la précède (suivant le code html). Une boite en position absolute se positionne par rapport au pixel supérieur gauche de son parent (la boite dans laquelle elle est imbriquée). On determine alors sa position soit en coordonnées (px, em, %...) soit en right, top, bottom, left = qqch.
Ainsi, elle sera positionnée de la meme facon sous IE et sous FF. Mais attention, il faut toujours privilégier les positions relative pour standardiser la mise en page d'un site. Mais pour ce qui est des petites boites indépendantes, ou des logos,... on peut exceptionnellement utiliser l'absolute.
Fin du cours de css.
et encore bravo pour ton site !


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Sujets relatifs:

Leave a Replay

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