Tom's Guide > Forum > Programmation > design site web

design site web

Forum Programmation : design site web

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
jonathanbedard22   06-10-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

Code :
  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="http://www.tinkerbellthepinklady.piczo.com/?cr=5&rfm=y">
  52. <img src="images/tinker.jpg" height="100" width="100" align="left"></a>
  53. </td>
  54. <td>
  55. <a href="http://www.josyanelauzon.piczo.com/?cr=6&rfm=y">
  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="http://pic1.piczo.com/vintageworld/?nsrc=picfl">
  64. <img src="images/danika.jpg" height="100" width="100" align="left"></a>
  65. </td>
  66. <td>
  67. <a href="http://pic6.piczo.com/jud01269/?nsrc=picfl">
  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="http://www.melocharlo.piczo.com">
  76. <img src="images/melo.jpg" width="100" height="100" align="left"></a>
  77. </td>
  78. <td>
  79. <a href="http://pic6.piczo.com/alexcocoetpousinette/?nsrc=picfl">
  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="http://www.BuzzyGurlzzlovee.piczo.com/?cr=5&rfm=y">
  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>
  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

Code :
  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. }
  11. /* Header */
  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. }
  23. /* Le menu de gauche */
  25. #menu_de_gauche
  26. {
  27. float: left;
  28. width: 120px;
  29. background-color: #3340ff;
  30. border: 2px solid #3300ff;
  31. }
  33. /* Corps de texte */
  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. }
  46. /* Le menu de droite */
  48. #menu_de_droite
  49. {
  50. float: right;
  51. width: 120px;
  52. background-color: #3340ff;
  53. border: 2px solid #3300ff;
  54. }
  56. /* Pied de page */
  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. }
  69. /* Les tableaux */
  71. table
  72. {
  73. width: 100%;
  74. border: 0px;
  75. cellpadding: 2px;
  76. cellspacing: 2px;
  77. }
  79. /* Le nom des amis pour les piczos */
  81. .piczo_nom
  82. {
  83. text-align: right;
  84. }
  86. /* Rajouter des amis dans la liste du piczo */
  88. .piczo_rajouter
  89. {
  90. text-align: center;
  91. }
  93. /* stopper les flottants */
  95. .stopper_flotant
  96. {
  97. clear: both;
  98. }



Merci de votre aide

------------------------------ BEDJ
La grande différence entre l’amour et l’amitié, c’est qu’il ne peut y avoir d’amitié sans réciprocité.
Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
OmaR   08-10-2007 à 11:19:28
- 0 +

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


Exemple :

Code :
  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>

------------------------------ Les dessins des seins ou les desseins des saints ?
 Répondre à OmaR
jonathanbedard22   08-10-2007 à 21:38:09
- 0 +

Ok merci sa fonctionne très bien maintenant

------------------------------ BEDJ
La grande différence entre l’amour et l’amitié, c’est qu’il ne peut y avoir d’amitié sans réciprocité.
 Répondre à jonathanbedard22
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > design site web
Aller à :

Il y a 1357 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,343 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens