Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Problem z DIV'em
Forum PHP.pl > Forum > Przedszkole
patryk9200
19.10.2009, 22:07:29
Cześć,
Tworzę layout na stronę i mam taki problem mianowicie nie pokazuje mi się stopka oraz nie mogę stworzyć diva odpowiadającego szaremu
kwadratowi w logo na stronie http://zs4.tychy.edu.pl/test/.
Jak to zrobić, co robię źle? próbowałem chyba z setek kombinacji ale to tylko komplikuje sprawę.
kod html:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>'.$title.'</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6. <link rel="stylesheet" type="text/css" href="style.css" />
  7. </head>
  8. <body><center>
  9. <div id="general">
  10. <div id="logo_background">
  11.  
  12.     <div id="logo_left">
  13.         <div id="szybkie_wybieranie"> </div>  
  14.         <!--<div id="logo"> </div>-->
  15.     </div>
  16.     <div id="zdjecia"> </div>
  17.  
  18. </div>
  19. <div id="TOP">
  20. <div id="menu_top">
  21. <div id="txt">Strona główna</div>
  22. </div>
  23. <div id="szukaj"><div id="txt"> </div>
  24. </div></div>
  25.  
  26.     <div id="left"><br><br><br><br><br><br><br></div>
  27.     <div id="right"><br><br><br><br><br><br><br></div>
  28.  
  29. </div>
  30. <div id="bottom"></div>
  31. </center></body>
  32. </html>
  33.  
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. @charset "UTF-8";
  2. body{margin:5px;padding:0}
  3. body{font: arial,sans-serif;text-align:center}
  4. #general {
  5. width: 1000px;
  6. /*background-image: url(images/tlo.png);*/
  7. background-color:#F3F2ED;
  8. }
  9. #logo_background {
  10. width: 1000px;
  11. height: 220px;
  12. /*background-image: url(images/logo_background.png);*/
  13. background-color: none;
  14. }
  15. #TOP {
  16. width: 1000px;
  17. height: 20px;
  18. /*background-image: url(images/logo_background.png);*/
  19. }
  20. #menu_top {
  21. float: left;
  22. width: 700px;
  23. height: 40px;
  24. /*background-image: url(images/logo_background.png);*/
  25. background-color: green;
  26. }
  27. #szukaj {
  28. float: right;
  29. width: 300px;
  30. height: 40px;
  31. /*background-image: url(images/logo_background.png);*/
  32. background-color: blue;
  33. }
  34. #zdjecia {
  35. float: right;
  36. width: 450px;
  37. height: 220px;
  38. /*background-image: url(images/logo_background.png);*/
  39. background-color: gray;
  40. }
  41. #szybkie_wybieranie {
  42. float: left;
  43. width: 550px;
  44. height: 80px;
  45. /*background-image: url(images/logo_background.png);*/
  46. background-color: #F585ED;
  47. }
  48. #left {
  49. float: left;
  50. width: 250px;
  51. background-color: #2585ED;
  52. }
  53. #right {
  54. float: right;
  55. width: 750px;
  56. background-color: #5585ED;
  57. }
  58. #bottom {
  59.  
  60. width: 1000px;
  61. height: 40px;
  62. background-color: green;
  63. }
  64. #logo {
  65.  
  66. width: 550px;
  67. height: 80px;
  68. /*background-image: url(images/logo_background.png);*/
  69. background-color: white;
  70. }
  71. #txt {
  72. margin: 2px;
  73. }
[HTML] pobierz, plaintext
parfienczyk
20.10.2009, 08:36:06
dodaj w pliku CSS do sekcji bottom:

#bottom{
clear:both;
}
lamcpp
20.10.2009, 10:46:00
Spróbuj tak:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>'.$title.'</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6. <link rel="stylesheet" type="text/css" href="style.css" />
  7. </head>
  8. <body><center>
  9. <div id="general">
  10.  
  11. <div id="logo_background">
  12.   <div id="szybkie_wybieranie"></div><div id="zdjecia"> </div>
  13.   <div id="szary_kwadrat"></div>
  14.  
  15. </div>
  16. <div id="TOP">
  17.   <div id="menu_top">
  18.   <div id="txt">Strona główna</div>
  19. </div>
  20. <div id="szukaj">
  21.   <div id="txt">
  22.   </div>
  23. </div>
  24. </div>
  25. <div id="left"><br><br><br><br><br><br><br></div>
  26. <div id="right"><br><br><br><br><br><br><br></div>
  27. <div id="bottom"></div>
  28. </center></body>
  29. </html>
[HTML] pobierz, plaintext 



[HTML] pobierz, plaintext 
  1.  
  2.       @charset "UTF-8";
  3.  
  4.       body{margin:5px;padding:0}
  5.  
  6.       body{font: arial,sans-serif;text-align:center}
  7.  
  8.       #general {
  9.       margin: 0;
  10.       border: 0;
  11.       padding: 0; 
  12.       width: 1000px;
  13.       background-color:#F3F2ED;
  14.  
  15.       }
  16.  
  17.       #logo_background {
  18.       margin: 0;
  19.       padding: 0;
  20.       border: 0;
  21.       width: 1000px;
  22.       height: 220px;
  23.       background-color: none;
  24.  
  25.       }
  26.  
  27.       #TOP {  
  28.       width: 1000px; 
  29.       height: 20px;  
  30.       /*background-image: url(images/logo_background.png);*/
  31.  
  32.       }
  33.  
  34.       #menu_top {
  35.       float: left; 
  36.       width: 700px; 
  37.       height: 40px;
  38.       /*background-image: url(images/logo_background.png);*/  
  39.       background-color: green;
  40.       }
  41.  
  42.       #szukaj { 
  43.       float: right;
  44.       width: 300px; 
  45.       height: 40px; 
  46.       /*background-image: url(images/logo_background.png);*/
  47.       background-color: blue; 
  48.       }
  49.  
  50.       #zdjecia {
  51.       margin: 0;
  52.       border: 0;
  53.       padding: 0;
  54.       float: right; 
  55.       width: 450px;
  56.       height: 220px;
  57.       background-color: gray; 
  58.       }
  59.  
  60.       #szybkie_wybieranie {
  61.       margin: 0;
  62.       border: 0;
  63.       padding: 0;
  64.       float: left;
  65.       width: 550px;
  66.       height: 80px;
  67.       background-color: #F585ED;
  68.       }
  69.  
  70.       #szary_kwadrat{
  71.       margin: 0;
  72.       border: 0;
  73.       padding: 0;
  74.       float: left;
  75.       width:550px;
  76.       height: 140px;
  77.       background: yellow;
  78.       }
  79.  
  80.  
  81.       #left {
  82.       float: left; 
  83.       width: 250px;
  84.       background-color: #2585ED; 
  85.       }
  86.  
  87.       #right {
  88.       float: right;
  89.       width: 750px;
  90.       background-color: #5585ED;
  91.       }
  92.  
  93.       #bottom {
  94.        clear:both;
  95.       width: 1000px;  
  96.       height: 40px; 
  97.       background-color: green;
  98.       }
  99.  
  100.       #logo {
  101.       width: 550px;
  102.       height: 80px;  
  103.       /*background-image: url(images/logo_background.png);*/ 
  104.       background-color: white;
  105.       }
  106.  
  107.       #txt {
  108.       margin: 2px;
  109.       }
[HTML] pobierz, plaintext
patryk9200
20.10.2009, 16:23:26
Dzięki lamcpp, Twój pomysł się sprawdził ;-) masz pomógł.
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.