Se connecter avec
S'enregistrer | Connectez-vous

design site web

Dernière réponse : dans Programmation

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" 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" 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" 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" 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" 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" 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" 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

Lassé par la pub ? Créez un compte
Expert Programmation

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>
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde