Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Punkty listy wypunktowanej wychodzą poza diva
Forum PHP.pl > Forum > Przedszkole
Age1869
29.07.2011, 10:43:58
Witam, jak w temacie. Mam diva, o określonej szerokości i w nim mam listę wypunktowaną. I wszystko byłoby pięknie gdyby nie to, że punkciki są poza granicą diva, przez co sypie mi się cały layout. Jak to zmienić?
zamper
29.07.2011, 10:56:48
Spróbuj powiększyć div'a albo zmniejszyć jego zawartość. Możesz pobawić się "overflow:scroll". Poustawiaj marginesy wewnętrzne div'u (padding).
1010
29.07.2011, 12:36:44
Prawdopodobnie masz ustawione zerowe marginesy dla pola ul lub li. Położenie tych "kropek" ustawisz właśnie tymi punktami
Age1869
29.07.2011, 16:09:56
Dobra, kropki rozwiązałem - to co pisaliście to nie to, ale znalazłem CSS: list-style-position: inside;

Niestety to wprowadziło jedynie kropki do 'wnętrza' diva... A strona dalej się lekko sypie. patrz tutaj

Ogólnie sypie się coś z divem #main, który powinien mieć 1000px, a ma 980...

CSS:
[HTML] pobierz, plaintext 
  1. * {
  2. 	margin: 0;
  3. 	padding: 0;
  4. }
  5. body {
  6. 	background: #fff;
  7. 	font-family: verdana, tahoma,sans-serif;
  8. 	font-size: 11px;
  9. 	color: #000;
  10. }
  11. body a {
  12. 	color: #000;
  13. 	text-decoration: none;
  14. }
  15. #calosc {
  16. 	width: 1000px;
  17. 	margin: 0;
  18. 	padding: 0;
  19. }
  20. #above {
  21. 	font-weight: bold;
  22. 	height: 60px;
  23. 	text-align: left;
  24. 	padding-left: 20px;
  25. 	padding-top: 10px;
  26. 	width: 100%;
  27. }
  28. #header {
  29. 	background: url('../images/header.png') no-repeat;
  30. 	width: 100%;
  31. 	padding-right: 20px;
  32. 	padding-top: 10px;
  33. 	height: 43px;
  34. 	margin-top: 5px;
  35. 	margin-bottom: 35px;
  36. }
  37. #top_menu {
  38. 	background: url('../images/menu.png') repeat-x;
  39. 	width: 1000px;
  40. 	padding-right: 20px;
  41. 	padding-top: 10px;
  42. 	height: 24px;
  43. }
  44. #banner_pos {
  45. 	width: 100%;
  46. 	margin-bottom: 15px;
  47. 	margin-top: 15px;
  48. }
  49. #main {
  50. 	width: 1000px;
  51. 	min-height: 200px;
  52. 	margin-bottom: 50px;
  53. 	background: #000;
  54. }
  55. #left, #tresc, #right {
  56. 	display:inline;
  57. }
  58. #left {
  59. 	float: left;
  60. 	width: 184px;
  61. 	margin-right: 6px;
  62. 	padding-top: 10px;
  63. 	text-align: left;
  64. 	text-decoration: none;
  65. }
  66. #left ul, li {
  67. 	text-decoration: none;
  68. 	list-style-position: inside;
  69. }
  70. #left h3{
  71. 	background: url('../images/box_l.png') no-repeat;
  72. 	width:154px;
  73. 	height:18px;
  74. 	font-weight: normal;
  75. 	padding-left: 30px;
  76. 	padding-top: 2px;
  77. 	color: #fff;
  78. }
  79. #right h3{
  80. 	background: url('../images/box_r.png') no-repeat;
  81. 	width:302px;
  82. 	height:18px;
  83. 	font-weight: normal;
  84. 	padding-top: 2px;
  85. 	color: #fff;
  86. }
  87. #tresc {
  88. 	float: left;
  89. 	width: 480px;
  90. 	padding-left: 10px;
  91. 	padding-top: 10px;
  92. 	margin-right: 7px;
  93. 	padding-right: 10px;
  94. }
  95. #right {
  96. 	float: left;
  97. 	width: 302px;
  98. 	padding-top: 10px;
  99. }
  100. #footer {
  101. 	width: 100%;
  102. 	min-height: 100px;
  103. 	padding-left: 10px;
  104. 	border: 1px;
  105. }
  106. .componentheading {
  107. 	background: url('../images/center_box.png') no-repeat;
  108. 	width: 500px;
  109. 	height: 20px;
  110. 	padding-top: 2px;
  111. 	color: #fff;
  112. 	font-size: 13px;
  113. }
[HTML] pobierz, plaintext


HTML/body:
[HTML] pobierz, plaintext 
  1. <body>
  2. <center>
  3. <div id="calosc">
  4. <div id="above">nieaktywne narazie</div>
  5. <div id="header">logo</div>
  6. <div id="top_menu">menu poziome tez nieaktywne narazie</div>
  7. <div id="banner_pos">baner, jeszcze nieaktywne</div>
  8. <div id="main">
  9. <div id="left">kolumna lewa</div>
  10. <div id="tresc">srodek - tresc</div>
  11. <div id="right">kolumna prawa</div>
  12. </div>
  13. <div id="footer">stopka</div>
  14. </div>
  15. </center>
  16. </body>
[HTML] pobierz, plaintext
1010
29.07.2011, 16:13:58
A co konkretnie się sypie? Że treść nie jest w środku?

Zmień w

#treść
padding-left: 10px;

na
padding-left: 0;
Age1869
29.07.2011, 16:23:52
#main powinien mieć 1000px, a ma 980 - patrz czarne tło.
pomiędzy poszczególnymi "belkami" powinien być odstęp (wychodzi po 7px), a jest tylko po pierwszej.

upd: odstępy już są. Nadal nie zgadza się długość
upd2: już i szerokość się zgadza.

dzięki za pomoc, jak tu napiszę to zawsze nachodzi mnie nadchnienie!:-)
1010
29.07.2011, 16:27:28
ma 1000 px, niebieski padding też ma 1000px (width: 980px + 20px prawy padding)
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.