Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Obrazek poza DIVem
Forum PHP.pl > Forum > Przedszkole
in5ane
30.06.2009, 11:13:45
Cześć, mam pytanko, dlaczego mi ten obrazek wylatuje poza DIV?

Screen:

(treść została zamazana)

Oto kod:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html lang='pl' xml:lang='pl' xmlns='http://www.w3.org/1999/xhtml'>
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. 	<link rel="stylesheet" type="text/css" href="style.css" />
  6. </head>
  7. <body>
  8.  
  9. 	<div id="content">
  10. 		<div id="content_1">
  11. 			asd
  12. 		</div>
  13. 		<div id="content_2">
  14. 			asd
  15. 		</div>
  16. 		<div id="content_3">
  17. 			O nas
  18. 		</div>
  19. 		<div id="content_4">
  20. 			asd
  21. 		</div>
  22. 		<div id="content_3">
  23. 			asd
  24. 		</div>
  25. 		<div id="content_4">
  26. 			<img src="asd" style="float: left; margin-right: 10px;" alt="" /><p style="width: 100%">asd</p>
  27. 		</div>
  28. 		<div id="content_3">
  29. 			asd
  30. 		</div>
  31. 		<div id="content_4">
  32. 			asd
  33. 		</div>
  34. 		<p id="footer">asd</em></p>
  35. 	</div>
  36.  
  37. </body>
  38. </html>
[HTML] pobierz, plaintext


Style:
[HTML] pobierz, plaintext 
  1. * {
  2. margin: 0px;
  3. padding: 0px;
  4. }
  5.  
  6. html {
  7. text-align: justify;
  8. font-family: Verdana;
  9. font-size: 12px;
  10. color: #676767;
  11. }
  12.  
  13. body {
  14. width: 800px;
  15. margin-left: auto;
  16. margin-right: auto;
  17. margin-top: 15px;
  18. }
  19.  
  20. img {
  21. border: 0px;
  22. }
  23.  
  24. a:link {
  25. color: #676767;
  26. text-decoration: none;
  27. }
  28.  
  29. a:visited {
  30. color: #676767;
  31. text-decoration: none;
  32. }
  33.  
  34. a:hover {
  35. color: #000000;
  36. text-decoration: none;
  37. }
  38.  
  39. a:active {
  40. color: #676767;
  41. text-decoration: none; 
  42. }
  43.  
  44. #content {
  45. text-align: center;
  46. border: 1px solid #000000;
  47. }
  48.  
  49. #content_1 {
  50. background-color: #f0f0ff;
  51. text-align: right;
  52. border-bottom: 1px solid #000000;
  53. font-weight: bold;
  54. }
  55.  
  56. #content_2 {
  57. background-color: #9999cc;
  58. text-align: left;
  59. border: 1px solid #000000;
  60. margin: 10px;
  61. padding: 10px;
  62. font-size: 20px;
  63. font-weight: bold;
  64. color: #FFFFFF;
  65. }
  66.  
  67. #content_3 {
  68. background-color: #f0f0ff;
  69. border: 1px solid #000000;
  70. margin: 10px;
  71. font-weight: bold;
  72. }
  73.  
  74. #content_4 {
  75. border-bottom: 1px solid #000000;
  76. border-left: 1px solid #000000;
  77. border-right: 1px solid #000000;
  78. margin: -10px 10px 10px 10px;
  79. padding: 10px;
  80. line-height: 22px;
  81. }
  82.  
  83. #footer {
  84. font-size: 10px;
  85. margin: 5px;
  86. }
[HTML] pobierz, plaintext
webber
30.06.2009, 11:14:44
Dodaj tam gdzie wychodzi
Kod
overflow: hidden;
winksmiley.jpg
in5ane
30.06.2009, 11:16:42
Spoko, działa.
Można wiedzieć, dlaczego się to działo?
webber
30.06.2009, 11:17:53
Cytat(in5ane @ 30.06.2009, 12:16:42 ) *
Spoko, działa.
Można wiedzieć, dlaczego się to działo?


No div jest mniejszy niż obrazek tak? Więc następuje przepełnienie, a na przepełnienia lekiem jest "overflow" smile.gif

O zobacz, nawet coś znalazłem:

http://www.kurshtml.boo.pl/css/przepelnienie,rozmiary.html

smile.gif
in5ane
30.06.2009, 11:19:33
Aha, w sumie dziwne, że DIV sam się nie dostosowuje do obrazków, a tylko do treści.
viking
30.06.2009, 11:19:57
Poczytaj o clear raczej skoro używasz float.
in5ane
30.06.2009, 11:22:09
Mam jeszcze jedno pytanie, jak dodałem w ten sam sposób drugi obrazek + treść, to mi to nie wyświetliło się pod pierwszym, tylko pod treścią pierwszego, a więc obok pierwszego obrazka. Dlaczego tak?
webber
30.06.2009, 11:25:00
Cytat(in5ane @ 30.06.2009, 12:22:09 ) *
Mam jeszcze jedno pytanie, jak dodałem w ten sam sposób drugi obrazek + treść, to mi to nie wyświetliło się pod pierwszym, tylko pod treścią pierwszego, a więc obok pierwszego obrazka. Dlaczego tak?


To już myślę tak jak kolega wyżej napisał, poczytaj:

http://css-tricks.com/all-about-floats/
in5ane
30.06.2009, 11:29:23
I żeby temu zapobiec, np. zamiast <br /> albo <hr> trzeba wstawić <p style="clear: both;">?
gaculla
30.06.2009, 12:44:00
Cytat(in5ane @ 30.06.2009, 12:29:23 ) *
I żeby temu zapobiec, np. zamiast <br /> albo <hr> trzeba wstawić <p style="clear: both;">?


Olśnienie, teraz już rozumiem, czemu w tych setkach szablonów i stron które podglądam jest #div z kodem {clear: both;}. Co za ulga smile.gif Jak po dobrym sr.... winksmiley.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.