Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]przycinanie diva
Forum PHP.pl > Forum > Przedszkole
ccssik
Witam,

w jaki sposób zrobić tak aby zaznaczone na obrazku tło:

http://s2.ifotos.pl/img/ddddd_hxsprha.jpg

przycinalo się gdy nie miesci sie na ekranie?

Jak zrobilem sztywnego div to szerokosc wynosiła 1254px; więc przy rozdzielczości 1024px pokazuje się scroll... Jak tego uniknąć?

Coś w stylu overflow: hidden...
5skakanek
A jak umieszczasz to tło...?
Bo wystarczy normalnie w css background:url(obrazek.gif); i już nie ma problemu. Jak robisz tak długie elementy to nic dziwnego, że się scroll pokazuje. Jeśli chcesz mieć diva na szerokość strony, napisz w css div{width:100%}; i ew body{margin:0;} żeby uniknąć marginesów.
Tu masz o umieszczaniu tła: klik
Magic WWW
Jak kolega wyżej podał, spróbuj zrobić to poprzez użycie procentów zamiast konkretnych wielkości dodatkowo CSS danego diva powinien wyglądać mniej więćej tak:
Kod
div#element {width:100%;overflow:hidden}
cssik
Mam o to taki kod:

  1. <div class="columns">
  2. <div class="splash">
  3.  
  4. <div id="splash_01"></div>
  5. <div id="splash_02">
  6. <div id="left"></div>
  7. <div id="right">
  8. <?php include_once('menu.php');?>
  9. </div>
  10. </div>
  11.  
  12. </div>
  13. </div>


i CSS:

  1. .columns{
  2. background: url(images/columns_background.gif) repeat-y;
  3. width:100%;
  4. overflow:hidden;
  5. margin: 0;
  6. padding:0;
  7. }
  8.  
  9. .splash{
  10. overflow: hidden;
  11. width: 980px;
  12. margin: auto;
  13. padding: 15px 0 0 0;
  14. color: #007dc8;
  15. font-family: Franklin Gothic Medium;
  16. font-size: 13px;
  17. cursor: pointer;
  18.  
  19. }
  20.  
  21.  
  22. .splash #splash_01{
  23. background: url(images/stream_03.gif) no-repeat;
  24. width: 980px;
  25. height: 211px;
  26. float: left;
  27. }
  28.  
  29. .splash #splash_02 #left{
  30. background: url(images/stream_05.gif) no-repeat;
  31. width: 737px;
  32. height: 172px;
  33. float: left;
  34. }
  35.  
  36. .splash #splash_02 #right_01{
  37. background: url(images/stream_06.gif) no-repeat;
  38. width: 103px;
  39. height: 27px;
  40. float: left;
  41. padding: 26px 0 0 140px;
  42. }
  43.  
  44. .splash #splash_02 #right_01:hover{
  45. background: url(images/stream_06b.gif) no-repeat;
  46. width: 103px;
  47. height: 27px;
  48. float: left;
  49. padding: 26px 0 0 140px;
  50. }
  51.  
  52. .splash #splash_02 #right_02{
  53. background: url(images/stream_07.gif) no-repeat;
  54. width: 133px;
  55. height: 24px;
  56. float: left;
  57. padding: 5px 0 0 110px;
  58. }
  59.  
  60. .splash #splash_02 #right_02:hover{
  61. background: url(images/stream_07b.gif) no-repeat;
  62. width: 133px;
  63. height: 24px;
  64. float: left;
  65. padding: 5px 0 0 110px;
  66. }
  67.  
  68. .splash #splash_02 #right_03{
  69. background: url(images/stream_08.gif) no-repeat;
  70. width: 153px;
  71. height: 25px;
  72. float: left;
  73. padding: 5px 0 0 90px;
  74. }
  75.  
  76. .splash #splash_02 #right_03:hover{
  77. background: url(images/stream_08b.gif) no-repeat;
  78. width: 153px;
  79. height: 25px;
  80. float: left;
  81. padding: 5px 0 0 90px;
  82. }
  83.  
  84. .splash #splash_02 #right_04{
  85. background: url(images/stream_09.gif) no-repeat;
  86. width: 173px;
  87. height: 25px;
  88. float: left;
  89. padding: 8px 0 0 70px;
  90. }
  91.  
  92. .splash #splash_02 #right_04:hover{
  93. background: url(images/stream_09b.gif) no-repeat;
  94. width: 173px;
  95. height: 25px;
  96. float: left;
  97. padding: 8px 0 0 70px;
  98. }
  99.  
  100. .splash #splash_02 #right_05{
  101. background: url(images/stream_10.gif) no-repeat;
  102. width: 183px;
  103. height: 22px;
  104. float: left;
  105. padding: 6px 0 0 60px;
  106. }
  107.  
  108.  
  109. .splash #splash_02 #right_05:hover{
  110. background: url(images/stream_10b.gif) no-repeat;
  111. width: 183px;
  112. height: 22px;
  113. float: left;
  114. padding: 6px 0 0 60px;
  115. }


jak widać do waszych sugestii sie przychylilem, ale:

pod rozdzielczościa 1024px inaczej wyglada i pod 1280px inaczej:

http://s1.ifotos.pl/img/ScreenSho_hxsxqss.jpg

http://s2.ifotos.pl/img/ScreenSho_hxsxqqp.jpg
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.