Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Layout strony - wszystko się zlewa
Forum PHP.pl > Forum > Przedszkole
diron18
5.12.2012, 01:12:06
Witam

Od dłuższego czasu nie robiłem szablonu html + css i nadając divy i opisując je w css robię coś źle, a nie pamiętam co to za błąd, że wszystkie divy nachodzą na siebie. Tak jakby nie trzymały się swoich rozmiarów, bo zmniejszają się i nachodzą na siebie. Bardzo proszę o pomoc.

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>szablon</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
  5.  
  6. <link rel="stylesheet" type="text/css" href="css/template.css" />
  7.  
  8. </head>
  9. <body>
  10. <div id="all">
  11. <div id="header">
  12.      <div id="top">
  13. 	<div id="top_menu">
  14. 	dsa
  15.         </div>
  16. 	<div id="logo_panel">
  17.              <div id="logo">
  18.              sad
  19.              </div>
  20.              <div id="slideshow">
  21.              sda
  22.              </div>
  23.        </div>
  24. 	<div id="under_menu_bar">
  25. 	</div>
  26.      </div>
  27. </div>
  28.  
  29.  
  30. <div id="panel_menu">
  31.      <div id="pasek_menu_top">
  32.      </div>
  33.         <div id="menu_gorne">
  34.         </div>
  35.      <div id="between_menu">
  36.      </div>
  37.         <div id="menu_dolne">
  38.         </div>
  39.      <div id="pasek_menu_down">
  40.      </div>
  41. </div>
  42.  
  43. <div id="central_content">
  44.      <div id="content_in">
  45. 	<div id="whereami">
  46. 	</div>
  47. 	<div id="modules">
  48. 		<div id="left_module">
  49.                 </div>
  50. 		<div id="right_module">
  51. 		</div>
  52. 	</div>
  53. 	<div id="content">
  54.  
  55. 	</div>
  56.      </div>
  57.      <div id="banners">
  58. 	<div id="small_banner">
  59.  
  60. 	</div>
  61. 	<div id="bigger_banner">
  62.  
  63. 	</div>
  64. 	<div id="goto_the_top">
  65.  
  66. 	</div>
  67. </div>
  68. <div id="footer">
  69.      <div id="footer_inside">
  70.      </div>
  71. </div>
  72. </div>
  73. </body>
  74. </html>
[HTML] pobierz, plaintext



Kod CSS:
[HTML] pobierz, plaintext 
  1. * {
  2.      margin: 0px;
  3.      padding: 0px;
  4.      border: none;
  5. }
  6.  
  7. all {
  8.      margin: 0 auto;
  9.      width: 100%;
  10.      height: 100%;
  11. }
  12. #header {
  13.      background: url(../images/images_01.gif);
  14.      width: 754px;
  15.      height 84px;
  16.      clear: both;
  17. }
  18.  
  19. #top {
  20.      width: 754px;
  21.      height 84px;
  22. }
  23.  
  24. #top_menu {
  25.      background: url(../images/images_02.gif);
  26.      width: 754px;
  27.      height 27px;
  28. }
  29.  
  30. #logo_panel {
  31.      width: 754px;
  32.      height 50px;
  33. }
  34.  
  35. #logo {
  36.      background: url(../images/images_04.gif);
  37.      width: 493px;
  38.      height 50px;
  39. }
  40.  
  41. #slideshow {
  42.      background: url(../images/images_05.gif);
  43.      width: 261px;
  44.      height 50px;
  45. 	 float: left;
  46. }
  47.  
  48. #under_menu_bar {
  49.      background: url(../images/images_06.gif);
  50.      width: 754px;
  51.      height 7px;
  52. 	 clear: both;
  53. }
  54.  
  55.  
  56. #panel_menu {
  57.      background: url(../images/images_07.gif);
  58.      width: 100%;
  59.      height 63px;
  60.      clear: both;
  61. }
  62.  
  63. #pasek_menu_top {
  64.      background: url(../images/images_08.gif);
  65.      width: 754px;
  66.      height 12px;
  67. }
  68.  
  69. #menu_gorne {
  70.      background: url(../images/images_10.gif);
  71.      width: 754px;
  72.      height 19px;
  73. }
  74.  
  75. #between_menu {
  76.      background: url(../images/images_11.gif);
  77.      width: 754px;
  78.      height 1px;
  79. }
  80.  
  81. #menu_dolne {
  82.      background: url(../images/images_12.gif);
  83.      width: 754px;
  84.      height 19px;
  85. }
  86.  
  87. #pasek_menu_down {
  88.      background: url(../images/images_13.gif);
  89.      width: 754px;
  90.      height 12px;
  91. }
  92.  
  93.  
  94. #central_content {
  95.      width: 100%;
  96.      height auto;
  97.      clear: both;
  98. }
  99.  
  100. #centent_in {
  101.      width: 754px;
  102.      height auto;
  103.      min-height: 400px;
  104. }
  105.  
  106. #whereami {
  107.      background: url(../images/images_15.gif);
  108.      width: 754px;
  109.      height 38px;
  110. }
  111.  
  112. #modules {
  113.      width: 754px;
  114.      height 428px;
  115. }
  116.  
  117. #left_module {
  118.      background: url(../images/images_17.gif);
  119.      width: 376px;
  120.      height 428px;
  121. }
  122.  
  123. #right_module {
  124.      background: url(../images/images_18.gif);
  125.      width: 378px;
  126.      height 428px;
  127. }
  128.  
  129. #content {
  130.      background: url(../images/images_19.gif);
  131.      width: 754px;
  132.      height auto;
  133.      min-height: 200px;
  134. }
  135.  
  136. #banners {
  137.      width: 754px;
  138.      height 190px;
  139. }
  140.  
  141. #small_banner {
  142.      background: url(../images/images_20.gif);
  143.      width: 754px;
  144.      height 64px;
  145. }
  146.  
  147. #bigger_banner {
  148.      background: url(../images/images_21.gif);
  149.      width: 754px;
  150.      height 92px;
  151. }
  152.  
  153. #goto_the_top {
  154.      background: url(../images/images_22.gif);
  155.      width: 754px;
  156.      height 34px;
  157. }
  158.  
  159.  
  160. #footer {
  161.      background: url(../images/images_23.gif);
  162.      width: 100%;
  163.      height 36px;
  164.      clear: both;
  165. }
  166.  
  167. #footer_inside {
  168.      width: 754;
  169.      height 36px;
  170. }
[HTML] pobierz, plaintext
!*!
5.12.2012, 01:30:00
1. pokaż kod online http://jsfiddle.net/
2. może chodzi Ci o clear:both (na głównym elemencie), overflow:auto/hidden gdy masz float?
3. poszukaj jakiegoś kursu o html5 i o tym jak dziś tworzy się strony, wszytko to co masz wyżej można skrócić o 95%, dosłownie upychając to w 5 linijkach.
diron18
6.12.2012, 12:42:08
Kurka.. Nigdy się z takim czymś niespotkałem, a robie to tak jak zawsze ;/ Dodam, że robię szablon dla Joomli 2.5.

Tutaj link do paczki z szablonem:
http://www.sendspace.pl/file/2287edee40afd1e73008f6a

Bardzo proszę o pomoc.

No i problem rozwiązany wink.gif Czasem na tak prostych rzeczach człowiek może zwariować wink.gif Wszystko popisałem dobrze, oczywiście była to wersja bazowa, którą teraz będę ulepszać. Błędem było brak w pliku css dwukropka przy height. Zamiast "height:" był "height" przez co wszystko się sypało i zlewało w jedno pole. Dlatego też już wariowałem, bo zawsze robiłem szablony tak samo i było dobrze. Dobrze, że znalazłem problem.

Dzięki za pomoc wink.gif

Pozdro 4 all
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.