Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Błąd z CSS/includowanym header'em.php
Forum PHP.pl > Forum > PHP
szakallt
26.07.2011, 13:31:30
Witam mam problem.

Zrobiłem szablon strony HTML + CSS
Jeśli odnośnik do CSS jest w indexie wszystko jest ok.
Niestety gdy includuję headera, w którym jest umieszczona cała zawartość head strona się rozjeżdża w ten sposób:


Proszę o pomoc załączam pliki oraz kod. Pozdrawiam



index.php
[PHP] pobierz, plaintext 
  1. <?php
  2. session_start()
  3. ?>
  4. <?php
  5. include('header.php');
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12. echo'fdfddfffd';
  13.  
  14.  
  15.  
  16.  
  17.  
  18.  
  19.  
  20.  
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27. include('footer.php');
  28. ?>
[PHP] pobierz, plaintext



header.php
[PHP] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4.    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.    <meta name="GENERATOR" content="Notepad++">
  6.    <meta name="description" content="Opis">
  7.    <meta name="keywords" content="słowa, kluczowe">
  8.    <link rel="stylesheet" href="css/style.css" />
  9.    <title>Test</title>
  10.  
  11. </head>
  12. <body>
  13. <div id="strona">
  14. <div id="naglowek">
  15. <div id="logo">logo</div>
  16. <div id="top">top</div>
  17. </div>
  18. <div id="belka">belka</div>
  19. <div id="srodek">
  20. <div id="lewe_menu">lewe</div>
  21. <div id="tresc">
[PHP] pobierz, plaintext


footer.php

[PHP] pobierz, plaintext 
  1. tresc</div>
  2. <div id="prawa">prawa</div>
  3. </div>
  4. <div id="stopka">stopka</div>
  5. </div>
  6. </body>
  7. </html>
[PHP] pobierz, plaintext


css/style.css
[PHP] pobierz, plaintext 
  1. *{
  2. margin:0px;
  3. padding:0px;
  4. border:none;
  5. }
  6. #strona{
  7. margin:0 auto;
  8. height:100%;
  9. width:960px;
  10. }
  11. #naglowek{
  12. height:100%;
  13. width:100%;
  14. }
  15. #logo{
  16. display: inline;
  17. border:1px solid black;
  18. height:120px;
  19. width:200px;
  20. float:left;
  21. margin-top:10px;
  22. margin-bottom:10px;
  23. }
  24. #top{
  25. display: inline;
  26. border:1px solid black;
  27. height:120px;
  28. width:756px;
  29. float:right;
  30. margin-top:10px;
  31. margin-bottom:10px;
  32. }
  33. #belka{
  34. border:1px solid black;
  35. height:60px;
  36. width:958px;
  37. clear:both;
  38. margin-top:10px;
  39. }
  40. #srodek{
  41. height:100%;
  42. width:100%;
  43. }
  44. #lewe_menu{
  45. display: inline;
  46. border:1px solid black;
  47. height:400px;
  48. width:150px;
  49. float:left;
  50. margin-top:10px;
  51. margin-bottom:10px;
  52. margin-right:10px;
  53. }
  54. #tresc{
  55. float:left;
  56. border:1px solid black;
  57. height:400px;
  58. width:594px;
  59. margin-top:10px;
  60. margin-bottom:10px;
  61. position:relative;
  62. }
  63. #prawa{
  64. display: inline;
  65. position: relative;
  66. border:1px solid black;
  67. height:400px;
  68. width:200px;
  69. float:right;
  70. margin-top:10px;
  71. margin-bottom:10px;
  72. }
  73. #stopka{
  74. border:1px solid black;
  75. height:100px;
  76. width:958px;
  77. clear:both;
  78. margin-bottom:100px;
  79. }
[PHP] pobierz, plaintext


paczka .rar plików

Link do pobrania paczki
adbacz
26.07.2011, 13:46:17
A próbowałeś dla wartości wysokości poszczególnych elementów strony (tam gdzie CI sie rozjeżdża) ustawiać sztywno? Tak samo ustawić marginesy wewnętrzne i zewnętrzne na 0px na wszelki wypadek.
szakallt
26.07.2011, 13:55:28
tak chyba już wszystkiego próbowalem ;(
adbacz
26.07.2011, 14:15:42
Usuń z początku wers: height:100%;
Czyli dla id="strona" daj taki kod:
[CSS] pobierz, plaintext 
  1. #strona{
  2. margin:0px auto;
  3. width:960px;
  4. }
[CSS] pobierz, plaintext


Teraz powinno być gites.

PS:
Mój błąd, nie napisałeś na jakiej przeglądarce masz takie coś i to co wyżej napisałem dotyczy tylko Opery. Napisałem wyżej, żebyś przypisał stałe wartości bloków. Napisałeś, że nic to nie dawało. Ja zrobiłem tak i działa dobrze na FF3.6 Opera 10.6 i IE6:
[CSS] pobierz, plaintext 
  1. body{margin:0px auto;}
  2. #strona{
  3. margin:0px auto;
  4. width:960px;
  5. }
  6. #naglowek{
  7. padding:0px;margin:0px;
  8. }
  9. #logo{
  10. display: inline;
  11. border:1px solid black;
  12. height:120px;
  13. width:200px;
  14. float:left;
  15. margin-top:10px;
  16. margin-bottom:10px;
  17. }
  18. #top{
  19. display: inline;
  20. border:1px solid black;
  21. height:120px;
  22. width:756px;
  23. float:right;
  24. margin-top:10px;
  25. margin-bottom:10px;
  26. }
  27. #belka{
  28. border:1px solid black;
  29. height:60px;
  30. width:958px;
  31. clear:both;
  32. margin-top:10px;
  33. }
  34. #srodek{
  35. }
  36. #lewe_menu{
  37. display: inline;
  38. border:1px solid black;
  39. height:400px;
  40. width:150px;
  41. float:left;
  42. margin-top:10px;
  43. margin-bottom:10px;
  44. margin-right:10px;
  45. }
  46. #tresc{
  47. float:left;
  48. border:1px solid black;
  49. height:400px;
  50. width:594px;
  51. margin-top:10px;
  52. margin-bottom:10px;
  53. position:relative;
  54. }
  55. #prawa{
  56. display: inline;
  57. position: relative;
  58. border:1px solid black;
  59. height:400px;
  60. width:200px;
  61. float:right;
  62. margin-top:10px;
  63. margin-bottom:10px;
  64. }
  65. #stopka{
  66. border:1px solid black;
  67. height:100px;
  68. width:958px;
  69. clear:both;
  70. margin-bottom:100px;
  71. }
[CSS] pobierz, plaintext
szakallt
26.07.2011, 14:48:29
Cytat(adbacz @ 26.07.2011, 15:15:42 ) *
Usuń z początku wers: height:100%;
Czyli dla id="strona" daj taki kod:
[CSS] pobierz, plaintext 
  1. #strona{
  2. margin:0px auto;
  3. width:960px;
  4. }
[CSS] pobierz, plaintext


Teraz powinno być gites.

PS:
Mój błąd, nie napisałeś na jakiej przeglądarce masz takie coś i to co wyżej napisałem dotyczy tylko Opery. Napisałem wyżej, żebyś przypisał stałe wartości bloków. Napisałeś, że nic to nie dawało. Ja zrobiłem tak i działa dobrze na FF3.6 Opera 10.6 i IE6:
[CSS] pobierz, plaintext 
  1. body{margin:0px auto;}
  2. #strona{
  3. margin:0px auto;
  4. width:960px;
  5. }
  6. #naglowek{
  7. padding:0px;margin:0px;
  8. }
  9. #logo{
  10. display: inline;
  11. border:1px solid black;
  12. height:120px;
  13. width:200px;
  14. float:left;
  15. margin-top:10px;
  16. margin-bottom:10px;
  17. }
  18. #top{
  19. display: inline;
  20. border:1px solid black;
  21. height:120px;
  22. width:756px;
  23. float:right;
  24. margin-top:10px;
  25. margin-bottom:10px;
  26. }
  27. #belka{
  28. border:1px solid black;
  29. height:60px;
  30. width:958px;
  31. clear:both;
  32. margin-top:10px;
  33. }
  34. #srodek{
  35. }
  36. #lewe_menu{
  37. display: inline;
  38. border:1px solid black;
  39. height:400px;
  40. width:150px;
  41. float:left;
  42. margin-top:10px;
  43. margin-bottom:10px;
  44. margin-right:10px;
  45. }
  46. #tresc{
  47. float:left;
  48. border:1px solid black;
  49. height:400px;
  50. width:594px;
  51. margin-top:10px;
  52. margin-bottom:10px;
  53. position:relative;
  54. }
  55. #prawa{
  56. display: inline;
  57. position: relative;
  58. border:1px solid black;
  59. height:400px;
  60. width:200px;
  61. float:right;
  62. margin-top:10px;
  63. margin-bottom:10px;
  64. }
  65. #stopka{
  66. border:1px solid black;
  67. height:100px;
  68. width:958px;
  69. clear:both;
  70. margin-bottom:100px;
  71. }
[CSS] pobierz, plaintext


Bardzo dziękuję pomogło.
Pomogło take dodanie w parametrze #strona{
height:0px;
}
nie wiem czemu i wątpie, żeby działało to przy większej ilości informacji.
Zastosowałem Twoje rozwiązanie, które podałes w całości za co dziękuję i Pozdrawiam
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.