probleme mise en page

probleme mise en page - HTML/CSS - Programmation

Marsh Posté le 10-12-2005 à 19:46:48    

Bonjour j'ai un souci de mis en page.  
 
je doit inserer ca:  
 
http://www.meteo-world.com/11/tab.php  
(pour css voir code source)  
 
dans cette page  
http://www.meteo-world.com/11/index.php
(css de index.php voir http://www.meteo-world.com/11/css.css )  
 
dans le corps du milieu entre le texte L'Actualité Météo en continu sur Internet et l'encart Actualités (ca doit donner comme ici http://www.meteo-world.com )
 
j'ai tout tester, et j'arrive pas a l'inserer.


---------------
Toute l'actualité météo en continu http://www.meteo-world.com
Reply

Marsh Posté le 10-12-2005 à 19:46:48   

Reply

Marsh Posté le 10-12-2005 à 23:19:33    

Tu as pas du tester bien longtemps....
Aller essaye, désolé, on va pas te donné la soluce direct, surtout que là pas de grande difficulté...enfin c'est bien, le code est propre au moins...

Reply

Marsh Posté le 11-12-2005 à 09:42:34    

Bien  sur que oui j'ai essayer. Sinon je voit pas a quoi ca me servirait de poser la question, surtout que ca me retarde. J'ai déjà bien avancer, mais il se trouve que la ca ne s'affiche pas du tout comme je veut, et je ne trouve pas la solution  :??:   (je vais surement faire un tableau si je trouve pas)


Message édité par wydook le 11-12-2005 à 09:43:11

---------------
Toute l'actualité météo en continu http://www.meteo-world.com
Reply

Marsh Posté le 12-12-2005 à 12:27:29    

:pfff: J'ai toujours pas reussi
 
ca me donne ca:  
http://www.meteo-world.com/11/12/index2.php  
 
et moi je le veut comme ca http://www.meteo-world.com/  
 
 
J'ai ca en moment:  
 
code xhtml voir code source ici http://www.meteo-world.com/11/12/index2.php  
 


Message édité par wydook le 13-12-2005 à 08:29:59

---------------
Toute l'actualité météo en continu http://www.meteo-world.com
Reply

Marsh Posté le 13-12-2005 à 08:32:03    

Petit à petit ca avance, mais j'ai toujours un souci.
 
le bas du tableau s'arrête trop bas. Je n'arrive pas 'l'arreter sous la vignette meteo france
 
http://www.meteo-world.com/11/12/index2.php
 
 
code css:
 
 

Code :
  1. #entete {
  2. CLEAR: both;  BORDER-BOTTOM: #000000 1px solid;
  3. }
  4. #pied {
  5. CLEAR: both; 
  6. }
  7. #conteneur {
  8.   margin-left: 0px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
  9.     margin-right: 0px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
  10.    margin-bottom: 0px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
  11.    padding: 0px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
  12.  
  13.    color: #000000;
  14.    background-color: #ECECFF; /* Une couleur de fond pour le corps */
  16.  
  17.   border: 1px dotted #003366
  18. WIDTH: 100%;
  21. }
  22. #menu {
  23.   FLOAT: left;   
  24. }
  25. .element_menu h2
  26. { 
  27. margin-top: 0px;
  28. color: #ffffff;
  29.    font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
  30.     font-size: 0.8em;
  31.    text-align: left;
  32.    background: #003366;
  34.  
  36. }
  37. #centre {
  38. MARGIN-LEFT: 0px;
  39. }
  40. #col1 {
  41.  FLOAT: left;  WIDTH: 216px;  BORDER-LEFT: #FFFFFF 1px solid; BORDER-RIGHT: #FFFFFF 1px solid
  42. }
  43. .element_col1 h2
  44. { 
  45. margin-top: 0px;
  46. color: #ffffff;
  47.    font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
  48.     font-size: 0.8em;
  49.    text-align: left;
  50.    background: #003366;
  51. width: 216px;
  52.  
  54. }
  56. #col2 {
  57.  FLOAT: left;  WIDTH: 92px;
  58. }
  60. .element_col2 h2
  61. { 
  62. margin-top: 0px;
  63. color: #ffffff;
  64.    font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
  65.     font-size: 0.8em;
  66.    text-align: left;
  67.    background: #003366;
  68. width: 92px ;
  69.  
  71. }
  72. #page {
  73.  BORDER-TOP: #000000 1px solid; border: 1px dotted #003366;  background: #ECECFF;
  74.   margin-left: 163px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
  75.     margin-right: 123px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
  78. }


Message édité par wydook le 13-12-2005 à 08:33:46

---------------
Toute l'actualité météo en continu http://www.meteo-world.com
Reply

Marsh Posté le 13-12-2005 à 10:06:42    

Euh, c'est vrai que je ne suis pas encore un vétéran du web programming mais... pourquoi t'as plusieurs blocs <html> dans ta page ? o_O

Reply

Marsh Posté le 13-12-2005 à 10:53:18    

Si tu fais des includes PHP, les pages incluses ne doivent pas être des pages html à part entière.
 

Reply

Marsh Posté le 13-12-2005 à 12:38:46    

je doit mettre quoi alors ?
 
Voici par exemple la page que j'inclue . La il s'agit de entete.php :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3.  
  4. <head>
  5.        <title>Bienvenue sur mon site !</title>
  6.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.   <link rel="stylesheet" media="screen" type="text/css" title="Essai" href="css.css" /> </head>
  9. <body>
  10. <font size="5"><a href="http://www.meteo-world.com/"><img src="http://www.meteo-world.com/header_noel.jpg" width="1000" height="90" border="0" /></a></font>
  13. </body>
  14. </html>


---------------
Toute l'actualité météo en continu http://www.meteo-world.com
Reply

Marsh Posté le 13-12-2005 à 13:45:21    

Si la page que tu veux obtenir au final est :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  4. <head>
  5.        <title>Bienvenue sur mon site !</title>
  6.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.   <link rel="stylesheet" media="screen" type="text/css" title="Essai" href="css.css" /> </head>
  8. <body>
  10. <div>Plein de chose</div>
  12. </body>
  13. </html>


 
La page php faisant l'include :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  4. <head>
  5.        <title>Bienvenue sur mon site !</title>
  6.        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.   <link rel="stylesheet" media="screen" type="text/css" title="Essai" href="css.css" /> </head>
  8. <body>
  10. <?php include "contenu.php";?>
  12. </body>
  13. </html>


 
Et la page contenu.php sera juste :
 

Code :
  1. <div>Plein de chose</div>

Reply

Marsh Posté le 13-12-2005 à 14:25:00    

j'ai rien compris.
 
 
moi j'ai une page nommé entete.php
 
et dans mon fichier ou cette page est inclus
j'ai ecrit ceci
 
<?php  
  include('entete.php');  // Nous appelons notre menu
?>
 
voilà


---------------
Toute l'actualité météo en continu http://www.meteo-world.com
Reply

Marsh Posté le 13-12-2005 à 14:25:00   

Reply

Marsh Posté le 13-12-2005 à 14:29:40    

quest ce que tu n'as pas compris, l'exmple de Bidem est on ne peu plus simple...
 
en gros tu enleve toutes les balises qui risque de faire doublon de ton fichier inclus


---------------
D3
Reply

Marsh Posté le 13-12-2005 à 14:42:50    

ah ok, j'ai compris .  Merci
 
 
 
bon par contre j'ai un souci avec mon tableau:
 
je voudrais que le texte :  
Image satellite animée  
et  
Vigilance Météo France  
 
soit uniquemebnt sur une seule ligne, sans retour auto à la ligne.  
 
Ensuite je voudrais que pour ceux qui ont des resolution 800x600, seulement la colonne "Temps à venir" se retressice, ou s'agrandisse.  
 
Comment faire ceci ?  
 
Merci  
 
Voici ma page http://www.meteo-world.com/11/index2.php  
 
 
et le code css du tableau:  

Code :
  1. #tableau
  2. {
  3.    margin-left: 165px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
  4.     margin-right: 125px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
  5.    margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
  6.    padding: 0px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
  7.  
  8.    color: #000000;
  9.    background-color: #ECECFF; /* Une couleur de fond pour le corps */
  11.  
  12.   border: 1px solid #003366
  13. }
  14. .element_table
  16. {
  17.    border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
  18.      margin-top: 3px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
  19. }
  20. td
  21. {
  22.  
  23.     width: 100%;
  24. }
  25. th
  26. {
  27.    color: white;
  28.     width: 100%;
  29.         background-color: #003366;
  30.         height: 50px;
  32. }


---------------
Toute l'actualité météo en continu http://www.meteo-world.com
Reply

Sujets relatifs:

Leave a Replay

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