Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] Niewidoczny div
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
virto
Witam.

Problem jest następujący:
Mam stronę:

  1. <div id="header">
  2. <div class="container">
  3. <ul id="navigation">
  4. <li class="active"><a href="#" title="Strona główna">Strona główna</a></li>
  5. <li><a href="#" title="O nas">O nas</a></li>
  6. <li><a href="#" title="Serwis">Serwis</a></li>
  7. <li><a href="#" title="Sklep">Sklep</a></li>
  8. <li><a href="#" title="Kontakt">Kontakt</a></li>
  9. </ul>
  10. </div>
  11. </div>
  12.  
  13. <div id="banner">
  14. <div id="banner-in">
  15. <div class="container">
  16.  
  17. </div>
  18. </div>
  19. </div>


i plik ze stylami css:

  1. @import url("reset.css");
  2.  
  3. body {
  4. font: 62.5%/2.2em Tahoma, Verdana, Arial, Helvetica, sans-serif;
  5. color: #000;
  6. }
  7.  
  8.  
  9. .container{
  10. width: 900px;
  11. margin: 0 auto;
  12. position: relative;
  13. overflow:hidden;
  14. }
  15.  
  16. #header{
  17. height: 55px;
  18. background-image: url(../images/top-back2.jpg);
  19. background-repeat: repeat-x;
  20. }
  21.  
  22. #header .container{
  23. height: 55px;
  24. background-image: url(../images/top-back2.jpg);
  25. background-repeat: repeat-x;
  26. }
  27.  
  28. /*
  29. TOP MENU
  30. */
  31.  
  32. #navigation li{
  33. float: left;
  34. padding-right: 27px;
  35. text-transform: uppercase;
  36. font-size: 1.3em;
  37. font-weight: normal;
  38. }
  39.  
  40. #navigation{
  41. float:right;
  42. top:13px;
  43. padding-top: 13px;
  44. }
  45.  
  46. #navigation li a{
  47. color: #fff;
  48. }
  49.  
  50. #navigation li a:hover,#navigation li.active a{
  51. color: #2c2c2c;
  52. }
  53.  
  54. /*-------------------*/
  55.  
  56.  
  57. /*BANER*/
  58. #banner{
  59. height: 200px;
  60. background-color:blue;
  61. background-image: url(../images/topek.gif);
  62. background-repeat: repeat-y;
  63. background-position: 0px 100px;
  64. }
  65.  
  66. #banner-in{
  67. height:200px;
  68. background-color:transparent;
  69. background-image: url(../images/topek.gif);
  70. background-repeat: repeat-y;
  71. background-position: 100% 0px;
  72. }
  73.  
  74. #banner-in .container{
  75. height:200px;
  76. background-color: red;
  77. }
  78. /*-------------------*/


Chodzi o to że w miejscu gdzie ma znajdować się baner, strona po zmniejszeniu okna przeglądarki sie rozlatuje. Po prawej i lewej stronie czerwonego banera są dwa niebieskie paski. Gdy okno przeglądarki jest zmaksymalizowane wszystko jest ok, po zmniejszeniu te paski w ogole znikają. Co robię nie tak i jak to naprawić ?
smialy
Witam

To chyba zależy co chcesz osiągnąć. Jak dla mnie wszystko jest OK. Działa tak jak napisałeś. #baner ma szerokość 100% a .container ma 900px wiec jak zmniejszysz okno to chyba naturalne że #baner się dopasuje do okna a .container bedzie sztywno trzymał swoje 900px.
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.