Problèmes de placements et dimensions

Problèmes de placements et dimensions - HTML/CSS - Programmation

Marsh Posté le 24-06-2009 à 18:37:08    

Hello  :hello:  
 
Double problème ce soir.
 
D'une part je constate une différence entre IE et FF quand au rendu :
 
 
IE :
http://chocobo.island.free.fr/pb2.jpg
 
FF :
http://chocobo.island.free.fr/pb1.jpg
 
D'où peut venir cette différence ? Et aussi : pourquoi y a t'il une telle distance entre la fin du formulaire et le bas de la page ?
 
Voici le code les codes en question :
 
Index.htm :

Code :
  1. <HTML>
  2. <HEAD>
  3. <TITLE>Design</TITLE>
  4. <script type="text/javascript" src="js/scriptaculous.js"></script>
  5. <script type="text/javascript" src="js/prototype.js"></script>
  6. <LINK rel="stylesheet" type="text/css" href="style.css">
  7. </HEAD>
  8. <BODY>
  9. <div class="top"></div>
  10. <div class="page">
  11. <div class="logo"><img src="images/logo.png" /></div>
  13. <div class="menu">
  14. <img src="images/home.png" />Accueil<br />
  15. <a href="index.php?action=search"><img src="images/search.png" />Recherche<br /></a>
  16. <a href="index.php?action=add"><img src="images/add.png" />Ajouter une<br /> annonce<br /></a>
  17. <img src="images/plus.png" />Services <br />
  18. <img src="images/mail.png" />Contact <br />
  19. </div>
  20. <div class="conteneur">
  21. <?php
  22. switch($_GET['action'])
  23. {
  24. case add:
  25.  include_once('php/etape1.php');
  26.  break;
  27. case search:
  28.  include_once('php/search.php');
  29.  break;
  30. }
  31. ?>
  32. </div>
  33. </div><div class="bottom"></div>
  34. </BODY>
  35. </HTML>


 
Et le fichier CSS :

Code :
  1. body {
  2. background-image:url('images/fond.jpg');
  3. text-align: center;
  4. }
  6. .top
  7. {
  8. background-image:url('images/top.jpg');
  9. width:900px;
  10. height:27px;
  11. margin-left:auto;
  12. margin-right:auto;
  13. }
  15. .bottom
  16. {
  17. background-image:url('images/bottom.jpg');
  18. width:900px;
  19. height:41px;
  20. margin-left:auto;
  21. margin-right:auto;
  22. }
  24. .page {
  25. text-align:left;
  26. margin-left:auto;
  27. margin-right:auto;
  28. position: relative;
  29. width: 900px;
  30. background-image:url('images/bar.jpg');
  31. }
  33. .conteneur
  34. {
  35. position:relative;
  36. left:200px;
  37. top:-450px;
  38. width:650px;
  39. }
  41. .logo
  42. {
  43. position:relative;
  44. top:20px;
  45. left:45px;
  46. width:120px;
  47. height:120px;
  48. }
  50. .menu
  51. {
  52. position:relative;
  53. top:40px;
  54. left:40px;
  55. width:130px;
  56. height:500px;
  57. border-right:1px dotted black;
  58. border-left:1px dotted black;
  59. text-align:center;
  60. }
  62. .menu img
  63. {
  64. margin-top:10px;
  65. display:block;
  66. margin-left:auto;
  67. margin-right:auto;
  68. border:0px;
  69. }


 
Merci d'avance à ceux qui auront eu la patience ;)


---------------
L'ennemi est bête : il croit que c'est nous l'ennemi alors que c'est lui !
Reply

Marsh Posté le 24-06-2009 à 18:37:08   

Reply

Marsh Posté le 24-06-2009 à 20:34:59    

Déjà ton index doit s'appeler index.php et pas htm
 
Ensuite le problème se situe dans php/search.php
Montre nous le code de ce fichier.

Reply

Marsh Posté le 24-06-2009 à 20:40:34    

Le fichier s'appelait déjà index.php, coquille de ma part :o

 

Pour le reste : j'ai réussi à supprimer le souci d'affichage avec un min-height dans le bloc "page".
Par contre j'ai toujours le même souci, si par exemple je fais un include_once('test.htm'); avec pour fichier test.htm un truc du genre

 
Code :
  1. plop <br />
  2. plop <br />
  3. plop <br />
  4. plop <br />
 

Le bas de ma page sera décalé d'autant en fait, c'est comme si la hauteur du bloc page était calculée en additionnant la hauteur du menu + la hauteur du bloc "conteneur".

 

edit : résolu en filant une marge négative au bloc "conteneur"


Message édité par Yagmoth le 24-06-2009 à 21:11:02

---------------
L'ennemi est bête : il croit que c'est nous l'ennemi alors que c'est lui !
Reply

Marsh Posté le 25-06-2009 à 08:39:54    

ta page est montée à la bite et au couteau à coups de position:relative :fou:, ça te choque pas ????!!!
un élément qui est positionné relativemetn garde sa place  dans le flux, donc si tu le déplace il garde sa place qu'il avait à l'endroit ou il était avant que tu le déplace


---------------
Blablaté par Harko
Reply

Sujets relatifs:

Leave a Replay

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