Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Problem z pozycjonowaniem wewn. ramki
Forum PHP.pl > Forum > Przedszkole
DerekDX


Witam
stworzyłem ramkę z obrazków wewn. której zamieszczane są niektóre informację na mojej stronie.
Niestety z niewiadomych mi względów wewn. ramki tj. w <div class="content_body"> nie moge używać float:right ponieważ element który posiada ten atrybut jest traktowany jakby nie był w tej ramce. Tzn. ramka nie dostosowuje się do jego rozmiaru.
Bardzo mi zależy aby nie pozycjonować "wnętrzności" tej ramki za pomocą tabeli

CSS:
  1. #body {
  2. font-family: Verdana, Geneva, sans-serif;
  3. font-size: 12px;
  4. width: 1000px;
  5. margin-right: auto;
  6. margin-left: auto;
  7. }
  8. #content_header_left {
  9. background-image: url(images/naroznik_gora_lewo1.png);
  10. background-repeat: no-repeat;
  11. background-position: left top;
  12. height: 56px;
  13. }
  14. #content_header_right {
  15. background-image: url(images/naroznik_gora_prawo1.png);
  16. background-repeat: no-repeat;
  17. background-position: right top;
  18. height: 56px;
  19. }
  20. #content_header {
  21. background-image: url(images/border_gora1.png);
  22. background-repeat: repeat-x;
  23. background-position: top;
  24. margin-right: 12px;
  25. margin-left: 12px;
  26. height: 56px;
  27. }
  28. #content_body_left {
  29. background-image: url(images/border_lewo1.png);
  30. background-repeat: repeat-y;
  31. background-position: left;
  32. }
  33. #content_body_right {
  34. background-image: url(images/border_prawo1.png);
  35. background-repeat: repeat-y;
  36. background-position: right;
  37. }
  38. #content_body {
  39. background-color: #FFF;
  40. margin-right: 12px;
  41. margin-left: 12px;
  42. padding: 1px;
  43. }
  44. #content_body p {
  45. padding-left: 10px;
  46. padding-right: 10px;
  47. }
  48.  
  49. #content_footer_left {
  50. background-image: url(images/naroznik_dol_lewo1.png);
  51. background-repeat: no-repeat;
  52. background-position: left bottom;
  53. }


HTML:
  1. <div id="body">
  2. <div id="content">
  3. <div id="content_header_left">
  4. <div id="content_header_right">
  5. <div id="content_header">
  6. </div>
  7. </div>
  8. </div>
  9. </div>
  10. <div id="content_body_left">
  11. <div id="content_body_right">
  12. <div id="content_body">
  13.  
  14. </div>
  15. </div>
  16. </div>
  17. <div id="content_footer_left">
  18. <div id="content_footer_right">
  19. <div id="content_footer"></div>
  20. </div>
  21. </div>
CuteOne
  1. #content_body_left {
  2. float: left;
  3. }
  4. #content_body {
  5. float: left;
  6. }
  7. #content_body_right {
  8. float: left;
  9. }
  10.  
  11.  
  12. <div id="content">
  13. <div id="content_body_left"></div>
  14. <div id="content_body"></div>
  15. <div id="content_body_right"></div>
  16. </div>
  17. <div style="clear:both">&nbsp;</div>


resztę elementów strony tworzysz dokładnie w ten sam sposób
DerekDX
ok dzękuje za pomoc
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.