Se connecter / S'enregistrer
Votre question

design site web

Tags :
  • Design
  • Programmation
Dernière réponse : dans Programmation
6 Octobre 2007 03:55:27

Bonjours atous, je suis entrain de crée le design de mon site internet.

Sur mon site j'ai:
-->header
-->menu de gauche
-->corps de texte
-->menu de droite
-->footer

Mon probleme est que je voulait
que mes deux meu et mon corps de texte comme juste en dessous de mon header.
-->le menu de gauche
-->corps de texte
sont correcte
Mais le menu de droite commence endessous du corps de texte au lieu de commencer juste en dessous du header.

Je vous donne le code de ma page html

  1. <?php
  2. session_start();
  3. include('user_verif.php');
  4. $action['get'] = isset ( $_GET['action'] ) ? $_GET['action'] : '';
  5. $action['post'] = isset ( $_POST['action'] ) ? $_POST['action'] : '';
  6. if( !empty( $id ) and $action['get'] != 'logout' )
  7. {
  8. header('frame.php');
  9. exit;
  10. }
  11. if ( $action['get'] == 'login' or ( empty( $action['get'] ) and empty( $action['post'] ) ) )
  12. {
  13. ?>
  14. <html>
  15. <head>
  16. <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
  17. <link href="css/modified.css" rel="stylesheet" type="text/css">
  18. <style type="text/css">
  19. .news p
  20. {
  21. background-color:#CCCCCC;
  22. margin-top:0px;
  23. }
  24. .news
  25. {
  26. width:70%;
  27. margin:auto;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <center>
  33. <div id="header">
  34. <!-- C'est ici que je vais mettre les infomations pour crée mon header -->
  35. </div>
  36. </center>
  37. <center>
  38. <div id="menu_de_gauche">
  39. <!-- C'est ici que je vais mettre les infomations pour le menu de gauche -->
  40. </div>
  41. </center>
  42. <center>
  43. <div id="corp_de_texte">
  44. <!-- C'est ici que je vais mettre les infomations pour le corps de texte -->
  45. <table>
  46. <caption>Voici les liens pour aller au piczo de mes amies!</caption>
  47. <tbody>
  48. <tr>
  49. <td>Geneviève</td>
  50. <td>
  51. <a href="<a href="http://www.tinkerbellthepinklady.piczo.com/?cr=5&rfm=y" rel="nofollow" target="_blank">http://www.tinkerbellthepinklady.piczo.com/?cr=5&rfm=y</a>">
  52. <img src="images/tinker.jpg" height="100" width="100" align="left"></a>
  53. </td>
  54. <td>
  55. <a href="<a href="http://www.josyanelauzon.piczo.com/?cr=6&rfm=y" rel="nofollow" target="_blank">http://www.josyanelauzon.piczo.com/?cr=6&rfm=y</a>">
  56. <img src="images/jo.jpg" height="100" width="100" align="right"></a>
  57. </td>
  58. <td class="piczo_nom">Josyane</td>
  59. </tr>
  60. <tr>
  61. <td>Danika</td>
  62. <td>
  63. <a href="<a href="http://pic1.piczo.com/vintageworld/?nsrc=picfl" rel="nofollow" target="_blank">http://pic1.piczo.com/vintageworld/?nsrc=picfl</a>">
  64. <img src="images/danika.jpg" height="100" width="100" align="left"></a>
  65. </td>
  66. <td>
  67. <a href="<a href="http://pic6.piczo.com/jud01269/?nsrc=picfl" rel="nofollow" target="_blank">http://pic6.piczo.com/jud01269/?nsrc=picfl</a>">
  68. <img src="images/judy.jpg" height="100" width="100" align="right"></a>
  69. </td>
  70. <td class="piczo_nom">Judy</td>
  71. </tr>
  72. <tr>
  73. <td>Mélodie</td>
  74. <td>
  75. <a href="<a href="http://www.melocharlo.piczo.com" rel="nofollow" target="_blank">http://www.melocharlo.piczo.com</a>">
  76. <img src="images/melo.jpg" width="100" height="100" align="left"></a>
  77. </td>
  78. <td>
  79. <a href="<a href="http://pic6.piczo.com/alexcocoetpousinette/?nsrc=picfl" rel="nofollow" target="_blank">http://pic6.piczo.com/alexcocoetpousinette/?nsrc=picfl</a>">
  80. <img src="images/alexandra.jpg" height="100" width="100" align="right"></a>
  81. </td>
  82. <td class="piczo_nom">Alexandra</td>
  83. </tr>
  84. <tr>
  85. <td>Stéphanie</td>
  86. <td>
  87. <a href="<a href="http://www.BuzzyGurlzzlovee.piczo.com/?cr=5&rfm=y" rel="nofollow" target="_blank">http://www.BuzzyGurlzzlovee.piczo.com/?cr=5&rfm=y</a>">
  88. <img src="images/stef.jpg" width="100" height="100" align="left"></a>
  89. </td>
  90. </tr>
  91. <tr>
  92. <td colspan="4" class="piczo_rajouter">
  93. <div>Pour rajouter votre piczo dans ma liste d'amis, vous n'avez qu'à m'envoyer par <a href="mailto:jonathanbedard.22@gmail.com">émail </a>le lien de celui-ci. Avec une photo en pièce jointe.</div>
  94. </td>
  95. </tr>
  96. </tbody>
  97. </table>
  98. <!-- C'est ici la fin du corps de texte -->
  99. </div>
  100. </center>
  101. <center>
  102. <div id="menu_de_droite" class="stopper_flotant">
  103. <!-- C'est ici que je vais mettre les infomations pour le menu de droite -->
  104. <p class="stopper_flotant"><?php report_disp(); ?>
  105. <form action="user_login.php?action=verif" method="POST" id="formulaire">
  106. <p>Pseudo: <input type="text" name="pseudo"></p>
  107. <p>Password: <input type="password" name="password"></p>
  108.  
  109. <p><a href="javascript:document.getElementById('formulaire').submit()">Connection</a></p>
  110. <p><a href="pass.htm">Mot de passe perdu</a></p>
  111. <p><a href="<?php echo $url_create; ?>">Inscription</a></p>
  112. </form></p>
  113. <!-- C'est ici la fin du menu de droite -->
  114. </div>
  115. </center>
  116. <center>
  117. <div id="footer">
  118. <!-- C'est ici que je vais mettre les infomations pour crée mon footer-->
  119. <p> Site crée par Jonathan Bédard.<br>Copyright, Corporation 2007, Tout droit réservé<br>Webmaster [Bedj]</p>
  120. <!-- C'est ici la fin du footer-->
  121. </div>
  122. </center>



Je vous donne le code CSS de ma page

  1. body
  2. {
  3. width: 760px;
  4. margin: auto;
  5. margin-top: 20px;
  6. margin-bottom: 20px;
  7. background-color:#33acff;
  8. border: 4px solid #3300ff;
  9. }
  10.  
  11. /* Header */
  12.  
  13. #header
  14. {
  15. width: 760px;
  16. height: 100px;
  17. background-color: #3340ff;
  18. background-repeat: repeat;
  19. margin-bottom: 0px;
  20. border: 0px solid #3300ff;
  21. }
  22.  
  23. /* Le menu de gauche */
  24.  
  25. #menu_de_gauche
  26. {
  27. float: left;
  28. width: 120px;
  29. background-color: #3340ff;
  30. border: 2px solid #3300ff;
  31. }
  32.  
  33. /* Corps de texte */
  34.  
  35. #corp_de_texte
  36. {
  37. width: 506px;
  38. margin-left: 125px;
  39. margin-right: 125px;
  40. margin-bottom: 0px;
  41. padding: 0px;
  42. background-color: #3340ff;
  43. border: 2px solid #3300ff;
  44. }
  45.  
  46. /* Le menu de droite */
  47.  
  48. #menu_de_droite
  49. {
  50. float: right;
  51. width: 120px;
  52. background-color: #3340ff;
  53. border: 2px solid #3300ff;
  54. }
  55.  
  56. /* Pied de page */
  57.  
  58. #footer
  59. {
  60. width: 760px;
  61. padding: 0px;
  62. text-align: center;
  63. background-color: #3340ff;
  64. background-repeat: none;
  65. border: 0px solid #3300ff;
  66. font-size: 11px;
  67. }
  68.  
  69. /* Les tableaux */
  70.  
  71. table
  72. {
  73. width: 100%;
  74. border: 0px;
  75. cellpadding: 2px;
  76. cellspacing: 2px;
  77. }
  78.  
  79. /* Le nom des amis pour les piczos */
  80.  
  81. .piczo_nom
  82. {
  83. text-align: right;
  84. }
  85.  
  86. /* Rajouter des amis dans la liste du piczo */
  87.  
  88. .piczo_rajouter
  89. {
  90. text-align: center;
  91. }
  92.  
  93. /* stopper les flottants */
  94.  
  95. .stopper_flotant
  96. {
  97. clear: both;
  98. }


Merci de votre aide

Autres pages sur : design site web

a c 232 L Programmation
8 Octobre 2007 11:19:28

Pour aligner des div sur la même verticale, il faut mettre des float.


Exemple :
  1. <div style="float:left; width:100px;">menu de 100 px à gauche<div>
  2. <div style="float:left; width:500px;">espace milieu</div>
  3. <div style="float:left; width:100px;">menu de 100 px à droite</div>
8 Octobre 2007 21:38:09

Ok merci sa fonctionne très bien maintenant
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS