Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] Obrazek poza DIVem
in5ane
post
Post #1





Grupa: Zarejestrowani
Postów: 1 335
Pomógł: 34
Dołączył: 9.11.2005
Skąd: Wrocław

Ostrzeżenie: (10%)
X----

Cześć, mam pytanko, dlaczego mi ten obrazek wylatuje poza DIV?

Screen:
(IMG:http://img257.imageshack.us/img257/2046/beztytuutqd.th.jpg)
(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


Ten post edytował in5ane 30.06.2009, 11:14:37
Go to the top of the page
+Quote Post
webber
post
Post #2





Grupa: Zarejestrowani
Postów: 107
Pomógł: 19
Dołączył: 30.10.2007

Ostrzeżenie: (0%)
-----

Dodaj tam gdzie wychodzi
Kod
overflow: hidden;
(IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
Go to the top of the page
+Quote Post
in5ane
post
Post #3





Grupa: Zarejestrowani
Postów: 1 335
Pomógł: 34
Dołączył: 9.11.2005
Skąd: Wrocław

Ostrzeżenie: (10%)
X----

Spoko, działa.
Można wiedzieć, dlaczego się to działo?
Go to the top of the page
+Quote Post
webber
post
Post #4





Grupa: Zarejestrowani
Postów: 107
Pomógł: 19
Dołączył: 30.10.2007

Ostrzeżenie: (0%)
-----

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" (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

O zobacz, nawet coś znalazłem:

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

(IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował webber 30.06.2009, 11:18:18
Go to the top of the page
+Quote Post
in5ane
post
Post #5





Grupa: Zarejestrowani
Postów: 1 335
Pomógł: 34
Dołączył: 9.11.2005
Skąd: Wrocław

Ostrzeżenie: (10%)
X----

Aha, w sumie dziwne, że DIV sam się nie dostosowuje do obrazków, a tylko do treści.
Go to the top of the page
+Quote Post
viking
post
Post #6





Grupa: Zarejestrowani
Postów: 6 381
Pomógł: 1116
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----

Poczytaj o clear raczej skoro używasz float.
Go to the top of the page
+Quote Post
in5ane
post
Post #7





Grupa: Zarejestrowani
Postów: 1 335
Pomógł: 34
Dołączył: 9.11.2005
Skąd: Wrocław

Ostrzeżenie: (10%)
X----

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?
Go to the top of the page
+Quote Post
webber
post
Post #8





Grupa: Zarejestrowani
Postów: 107
Pomógł: 19
Dołączył: 30.10.2007

Ostrzeżenie: (0%)
-----

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/
Go to the top of the page
+Quote Post
in5ane
post
Post #9





Grupa: Zarejestrowani
Postów: 1 335
Pomógł: 34
Dołączył: 9.11.2005
Skąd: Wrocław

Ostrzeżenie: (10%)
X----

I żeby temu zapobiec, np. zamiast <br /> albo <hr> trzeba wstawić <p style="clear: both;">?
Go to the top of the page
+Quote Post
gaculla
post
Post #10





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 1.01.2009
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) Jak po dobrym sr.... (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 15.09.2025 - 05:20
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn