Votre question

Probleme html/css sur une decoupe photoshop Message

Tags :
  • CSS
  • Programmation
Dernière réponse : dans Programmation
18 Août 2009 16:59:25

Rapporter le message Répondre en citant le message Editer le message Supprimer le message
Ben voila mon probleme est dans le titre voici l'image du site tel que je le voudrai (le menu continue jusqu'au footer, le corp de la page aussie)


Et voici le site tel quel une fois en ligne :


je vais vous donnez mon code source si sa peut vous aidez :

index.php:


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Titre</title>
  6. <link rel="stylesheet" href="./style.css" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10.  
  11. <div id="contenu">
  12.  
  13. <img src="./images/header.jpg" alt="Header" />
  14.  
  15. <div class="menu_gauche">
  16. <div class="menu_gauche">
  17. <img src="./images/menu_haut5.jpg" alt="" />
  18.  
  19. <center><ul class="menus">
  20. <li> <a href="#">Menu1</a> </li>
  21. <li> <a href="#">Menu2</a> </li>
  22. <li> <a href="#">Menu3</a> </li>
  23. <li> <a href="#">Menu4</a> </li>
  24. <li> <a href="#">Menu5</a> </li>
  25. </ul>
  26. </center>
  27.  
  28. <img src="./images/menu_bas.jpg" alt="" />
  29.  
  30. <img src="./images/menu_haut5.jpg" alt="" />
  31.  
  32. <center>
  33. <ul class="menus">
  34. <li> <a href="#">Menu1</a> </li>
  35. <li> <a href="#">Menu2</a> </li>
  36. <li> <a href="#">Menu3</a> </li>
  37. <li> <a href="#">Menu4</a> </li>
  38. <li> <a href="#">Menu5</a> </li>
  39. </ul>
  40.  
  41.  
  42.  
  43.  
  44.  
  45. </center>
  46.  
  47.  
  48.  
  49. <img src="./images/menu_bas.jpg" alt="" />
  50.  
  51. </div>
  52. </div>
  53.  
  54.  
  55.  
  56.  
  57.  
  58.  
  59. <div id="texte">
  60. <img src="./images/texte_haut.png" alt="" />
  61.  
  62.  
  63. <center>
  64.  
  65. <div class="contentBox">
  66. Why do I call them "CSS Scrollbars"? The <i>CSS Overflow</i>
  67. property tells the browser what to do if the box's contents is larger
  68. than the box itself. It behaves similar to inline frames and creates
  69. scrollbars if required. That is why I call them CSS Scrollbars!
  70. </div>
  71.  
  72.  
  73. </center>
  74.  
  75. <img src="./images/texte_bas.png" alt="" />
  76. </div>
  77. <div class="clear"></div>
  78. <div id="footer">
  79. <img src="./images/footer.jpg" alt="" />
  80. </div>
  81.  
  82.  
  83.  
  84. </div>
  85.  
  86. </body>
  87. </html>



et le CSS:

  1. body {
  2. background-color:#cfcfcf; /*Couleur de fond de la page Web*/
  3. color:#ADABAC; /*Couleur du texte*/
  4. font-family:Verdana, Arial, Helvetica, sans-serif; /*Polices d’écriture*/
  5. font-size:11px; /*Taille d’écriture*/
  6. padding:0; /*Pour que la page n’ai aucune marge*/
  7. margin:0; /*Pour que la page n’ai aucune marge*/
  8. border:0px
  9. }
  10.  
  11. div#contenu {
  12.  
  13. width:877px; /*Largeur du design*/
  14. margin:0 auto 0 -438px; /*Marges du design ( la 4eme marge représente la moitié de la largeur du div*/
  15. position:absolute;
  16. top:10px; /*25px entre le coin supérieur de l’écran et le design*/
  17. left:50%;/*50% de marge ( cela centrera le design )*/
  18. background-image:url('./images/background.png'); /*Motif si il y’en a un*/
  19.  
  20. border:0px solid #000000; /* Bordure encadrant le design */
  21.  
  22. }
  23.  
  24. div.menusuite {
  25. background-repeat:repeat-y;
  26. background-image:url('./images/menu_suite.jpg') ;
  27. width:XXpx;
  28. margin-top:XXpx;
  29. margin-left:XXpx !important;
  30. margin-left:XXpx;
  31. }
  32.  
  33. div.menu_gauche {
  34. background-image:url('./images/menu_font.jpg') ;
  35. background-repeat:repeat-y;
  36.  
  37. width:XXpx;
  38. float:left;
  39. margin-top:XXpx;
  40. margin-left:XXpx !important;
  41. margin-left:XXpx;}
  42.  
  43. div.separateur {
  44. height :6px ;
  45. }
  46. .contentBox {
  47. display:block;
  48. border-width: 1px;
  49. border-style: solid;
  50. border-color: 000;
  51. padding:5px;
  52. margin-top:5px;
  53. width:600px;
  54. height:480px;
  55. overflow:scroll
  56. }
  57.  
  58. img {
  59.  
  60. margin:0;
  61.  
  62. padding:0;}
  63.  
  64.  
  65. div#texte p {
  66. padding :5px ;
  67. }
  68.  
  69.  
  70.  
  71.  
  72.  
  73. div#texte {
  74. background-image:url('./images/texte_font.jpg') ;
  75. background-repeat:repeat-y ;
  76. width :XXpx ;
  77. float :right ;
  78. margin-top :XXpx ;
  79. margin-right: XXpx !important;
  80. margin-right:XXpx;
  81. }
  82.  
  83. div#footer {
  84. background-image:url('./images/footer.jpg');
  85. width:XXpx;
  86. height:XXpx;
  87. }
  88.  
  89. /* Reglages personnels : */
  90. ul , li { margin:0; padding:0; list-style-type:none; } /* Pas de marges automatique dans les listes, ni de puces */
  91.  
  92. a { color:#2375BF; text-decoration:none; }/*Paramètres des liens*/
  93. a:hover { color:#64A2EC; }/*Paramètres des liens quand le pointeur est sur ceux-ci*/
  94.  
  95. h1 { text-align:center; margin:0; }/*Le texte des balises h1 est centré ( car il est souvent utilisé pour les titres), et cette balise n’a plus de marge automatique */
  96. p { margin:0; padding:0; }/*Pas de marges automatiques sur les <p> */
  97.  
  98. div.clear { clear:both; }/*Nous verrons ceci un peu plus tard. */
  99. img { display:block ; border:0; }/*Aucune bordure sur les <img>*/


Je remercie d'avance ceux qui pourront m'aider

cordialement aikaze

Autres pages sur : probleme html css decoupe photoshop message

18 Août 2009 21:19:56

Tu as mixé un peux partout du css, afin de te facilité la tâche je te conseil de suivre se plan :

Ton fichier CSS :

  1. body {
  2. background:url(TonImagesDeFond) ;
  3.  
  4. }
  5.  
  6. /* Centre est définis la largeur max de ton site */
  7.  
  8. #global {
  9. margin: auto;
  10. width:80%;}
  11.  
  12. /* L'entête de ton site */
  13.  
  14. #header {
  15. margin-top:20px;
  16. background:transparent url(TaBanniere) no-repeat ;
  17. height:180px; /* Hauteur de ta bannière */
  18. width:80%; /* Largeur de ta bannière en concordance avec la largeur de ton site */ }
  19.  
  20. /* La "marge" contenant tes menus */
  21.  
  22. #Menu{
  23. float: left; /* Le menu flottera à gauche */
  24. width: 224px; /* Très important : donner une taille au menu */ }
  25.  
  26. /* Ton premier menu */
  27.  
  28. .menu_1 {
  29. background:url(TonImagesDuMenu1);
  30. background-repeat: no-repeat;
  31. width:224px; /* largeur de ton menu */
  32.  
  33. }
  34.  
  35. /* Ton deuxième menu */
  36.  
  37. .menu_2 {
  38. background:url(TonImagesDuMenu2);
  39. background-repeat: no-repeat;
  40. width:224px; /* largeur de ton menu */
  41.  
  42. }
  43.  
  44. #corps {
  45. background:url(TonImagesDuCorps);
  46. width: 80%; /* largeur du corps, si tu met la même largeur que la largeur global,
  47. les menus seront intégrés au corps*/
  48.  
  49. }
  50.  
  51. #footer {
  52. background:url(TonImagesDupiedDePage);
  53.  
  54. }


Et ta page html/php :

  1. <div id="global "> <!-- Encadrer qui englobe tous la page -->
  2.  
  3. <div id="Header"> <!-- Image de la bannière --> </div>
  4.  
  5. <div id="Menu"> <!-- Encadrer qui englobe les menus -->
  6.  
  7. <div class="menu_1"><!-- Premier menu à gauche de la page -->
  8. <ul>
  9. <li> <a href="#">Menu1</a> </li>
  10. <li> <a href="#">Menu2</a> </li>
  11. <li> <a href="#">Menu3</a> </li>
  12. <li> <a href="#">Menu4</a> </li>
  13. <li> <a href="#">Menu5</a> </li>
  14. </ul>
  15. </div> <!-- Fermeture du premier menu -->
  16.  
  17. <div class="menu_2"><!-- Deuxième menu à gauche de la page -->
  18. <ul>
  19. <li> <a href="#">Menu1</a> </li>
  20. <li> <a href="#">Menu2</a> </li>
  21. <li> <a href="#">Menu3</a> </li>
  22. <li> <a href="#">Menu4</a> </li>
  23. <li> <a href="#">Menu5</a> </li>
  24. </ul>
  25. </div> <!-- Fermeture du deuxième menu -->
  26.  
  27.  
  28. </div> <!-- Fermeture de l'ensemble de tous les menus -->
  29.  
  30. <div id="Corps"> <!-- Ouverture du corps pour intégrer du text/image -->
  31.  
  32. </div> <!-- Fermeture du corps -->
  33.  
  34. <div id="footer"> </div> <!-- Bas de page -->
  35.  
  36. </div> <!-- Fermeture global -->



Dans le css j'ai mis le principale, ensuite à toi de définir la taille de ton text , les couleurs etc...
Il y a peut être des erreurs dans mes codes...
18 Août 2009 21:23:57

(à supprimer double poste désolé.)
Contenus similaires
19 Août 2009 13:49:08

merci de ta réponse je comté de toutes façon nettoyer mon code donc ton post va m'aider, mais la je pense que une balise css suffirai pour que le corps et le menus se suivent .....non?
enfin si quelqu'un a une idée merciiiiiiiiii
19 Août 2009 14:19:05

Citation :
une balise css suffirai pour que le corps et le menus se suivent .....non?


Il y a toujours une possibilité, mais le code que je t'ai proposé est utilisé sur la plupart des sites voir tous.
Ce code permet de placer à volonter à l'endroit voulu ses menus, sa bannière, sont pied de page, sont corp, tous ça en faisant que quelques modifications.

Car si tu as un soucis sur un menu, ou si tu veux le changer, le mettre à droite par exemple, tu as juste à aller sur ton fichier css et à changer quelque lignes, au lieu de tous refaire.

C'est vrai de mettre à chaque page html/php tous ces DIV c'est un peux embêtant, mais j'ai dévier ce problème en utilisant des includes; voici à quoi ressemble une de mes pages de mon site avec tous le design :

  1. <?php include("../Includes/Entete.php"); ?>
  2.  
  3. <?php include("../Includes/Codepremier.php"); ?>
  4.  
  5. <div id="corps_top"><h1>Bienvenue</h1></div>
  6. <div id="corps_contenu">
  7.  
  8. <p>TEXT/IMAGES/CONTENU DE MA PAGE</p>
  9.  
  10. <?php include("../Includes/Codefin.php"); ?>


Et voci un l'exemple de ce que contient mon include "entete" :

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <head>
  7. <title>GamerZ</title>
  8. <link rel="stylesheet" type="text/css" href="../style.css" />
  9. <link rel="shortcut icon" href="../Images/favicon.png" />
  10.  
  11. </head>
  12.  
  13. <body>


Mon design tiens sur 5 lignes à chaque pages.
19 Août 2009 15:52:37

non tinkiete notre site na qu'une seule page tout est appelé en php donc pas trop de souci a ce niveau la mais moi je veu juste arriver a les faire ce suivrent
19 Août 2009 15:54:38

Double post sorry
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