Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: IE przełamanie diva(lini).
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
robert-0627
22.03.2011, 22:19:28
Witam. Mam mały problem stronka mi ładnie działa na wszystkich przeglądarkach prócz na IE gdzie to div "main" gdzie się znajdują treści itp przełamuje się i schodzi na dół poniżej diva "info" i diva "menu" które są po jego bokach. A powinny być wszystkie w jednym wierszu 3 kolumny. Czy ktoś wie może co z tym zrobić ?

[HTML] pobierz, plaintext 
  1. html, body {
  2. 	background-color: darkgray;
  3. 	margin: 0 auto;
  4. 	text-align: center;
  5. 	font-family: 'Times New Roman';
  6. 		padding: 0;
  7.  
  8. }
  9.  
  10. #content{
  11. 	background-color: darkblue;
  12. 	width:1200px;
  13. 	margin: 0 auto;
  14. 	position: relative;
  15. 	padding-bottom:30px;
  16. 	padding-top:30px;
  17. 	-webkit-border-radius: 10px;
  18. 	-moz-border-radius: 10px;
  19. 	border-radius: 10px;
  20. }
  21.  
  22. #header {
  23. 	width: 1140px;
  24. 	margin-left: 30px;
  25. 	margin-right: 30px;
  26. 	position: relative;
  27. }
  28.  
  29. #menu {
  30. 	background-color:#85b1db;
  31. 	width: 200px;
  32. 	float: left;
  33. 	overflow: hidden;
  34. 	position: relative;
  35. 	height: 600px;
  36. 	margin-left:30px;
  37. 	margin-top:10px;
  38. 	-webkit-border-top-left-radius: 10px;
  39. 	-webkit-border-top-right-radius: 10px;
  40. 	-moz-border-radius-topleft: 10px;
  41. 	-moz-border-radius-topright: 10px;
  42. 	border-top-left-radius: 10px;
  43. 	border-top-right-radius: 10px;
  44. }
  45.  
  46. #info {
  47. 	width: 200px;
  48. 	float: right;
  49. 	overflow: hidden;
  50. 	position: relative;
  51. 	background-color:#85b1db;
  52. 	height: 600px;
  53. 	margin-right:30px;
  54. 	margin-top:10px;
  55. 	-webkit-border-top-left-radius: 10px;
  56. 	-webkit-border-top-right-radius: 10px;
  57. 	-moz-border-radius-topleft: 10px;
  58. 	-moz-border-radius-topright: 10px;
  59. 	border-top-left-radius: 10px;
  60. 	border-top-right-radius: 10px;
  61. }
  62.  
  63. #main {
  64. 	background-color:#85b1db;
  65. 	margin-left: 240px;
  66. 	margin-right: 240px;
  67. 	margin-top:10px;
  68. 	width:720px;
  69. 	height: 600px;
  70. 	-webkit-border-top-left-radius: 10px;
  71. 	-webkit-border-top-right-radius: 10px;
  72. 	-moz-border-radius-topleft: 10px;
  73. 	-moz-border-radius-topright: 10px;
  74. 	border-top-left-radius: 10px;
  75. 	border-top-right-radius: 10px;
  76. }
  77.  
  78.  
  79. #stopka {
  80. 	clear: both;
  81. 	background-color: #85b1db;
  82. 	margin:0 auto;
  83. 	margin-top:10px;
  84. 	width: 1140px;
  85. 	-webkit-border-bottom-right-radius: 10px;
  86. 	-webkit-border-bottom-left-radius: 10px;
  87. 	-moz-border-radius-bottomright: 10px;
  88. 	-moz-border-radius-bottomleft: 10px;
  89. 	border-bottom-right-radius: 10px;
  90. 	border-bottom-left-radius: 10px;
  91. }
[HTML] pobierz, plaintext
konole
22.03.2011, 22:43:06
Jakiś screen, jak to dokładnie wygląda i HTML?
robert-0627
23.03.2011, 14:17:57
To jest strona ktorą muszę zrobić na zaliczenie i ma działać poprawnie w 3 przeglądarkach w tym w IE





[HTML] pobierz, plaintext 
  1. <html>
  2. <head> 
  3.  
  4. <script type="text/javascript" src="skrypty/menu.js"></script>
  5. <script type="text/javascript" src="skrypty/pasek.js"></script>
  6.  
  7. </head>
  8. <body>
  9. <div id="content">
  10. 	<div id="header">
  11. <img src="grafika/logo.gif">
  12. 	</div>	
  13. 	<div id="menu">
  14.  
  15. 	</div>
  16.  
  17. 	<div id="info">
  18.  
  19. 	</div>	
  20.  
  21.  
  22.  
  23. 	<div id="main">	
  24. 					<iframe name="I1" id="I1"  src="podstrony/stronaglowna.html" width="720px" height="100%"  height="100%" border="0" frameborder="0" target="_blank">
  25. 					</iframe>
  26. 	</div>	
  27.  
  28.  
  29. 	<div id="stopka">				
  30.  
  31. 	</div>
  32. </div>
  33. </body>
  34. </html>
  35.  
  36.  
[HTML] pobierz, plaintext


Zawartość tresciową divów usunąłem bo chyba nie jest potrzebna ? Żeby nie zaśmiecało.
krzywy36
23.03.2011, 14:51:48
nadaj wszystkim trzem kolumnom (menu, main, info) float: left i ustaw je w kodzie po kolei.
robert-0627
23.03.2011, 16:59:41
Zrobiłem tak ale wtedy elementy całkowicie się rozleciały. A jak przestawiłęm tylko miejscami div main na jego właściwe miejsce to info odleciało na dół nawet w operze. W IE utworzyły się takie schodki tak jak na obrazku tylko kolumna z info jest jeszcze pod main po prawej stronie.
krzywy36
23.03.2011, 18:34:41 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head> 
  3. <style>
  4. html, body {
  5.     background-color: darkgray;
  6.     margin: 0 auto;
  7.     text-align: center;
  8.     font-family: 'Times New Roman';
  9.     padding: 0;
  10.  
  11. }
  12.  
  13. #content{
  14.     background-color: darkblue;
  15.     width:1200px;
  16.     margin: 0 auto;
  17.     position: relative;
  18.     padding-bottom:30px;
  19.     padding-top:30px;
  20. }
  21.  
  22. #header {
  23.     width: 1140px;
  24.     margin-left: 30px;
  25.     margin-right: 30px;
  26.     float: left;
  27. }
  28.  
  29. #menu {
  30.     background-color:#85b1db;
  31.     width: 200px;
  32.     float: left;
  33.     overflow: hidden;
  34.     float: left;
  35.     height: 600px;
  36.     margin-left:30px;
  37.     margin-top:10px;
  38. }
  39.  
  40. #info {
  41.     width: 200px;
  42.     float: left;
  43.     overflow: hidden;
  44.     background-color:#85b1db;
  45.     height: 600px;
  46.     margin-right:30px;
  47.     margin-top:10px;
  48. }
  49.  
  50. #main {
  51.     background-color:#85b1db;
  52.     margin-top:10px;
  53.     width:720px;
  54.     float: left;
  55.     height: 600px;
  56. }
  57.  
  58.  
  59. #stopka {
  60.     clear: both;
  61.     background-color: #85b1db;
  62.     margin:0 auto;
  63.     margin-top:10px;
  64.     width: 1140px;
  65. }
  66. </style>
  67. </head>
  68. <body>
  69. <div id="content">
  70.     <div id="header">
  71.     <img src="grafika/logo.gif">
  72.     </div>  
  73.     <div id="menu">
  74.  
  75.     </div>
  76.     <div id="main"> 
  77.                     <iframe name="I1" id="I1"  src="podstrony/stronaglowna.html" width="720px" height="100%"  height="100%" border="0" frameborder="0" target="_blank">
  78.                     </iframe>
  79.     </div>   
  80.     <div id="info">
  81.  
  82.     </div>  
  83.  
  84.  
  85.  
  86.  
  87.  
  88.  
  89.     <div id="stopka">               
  90.  
  91.     </div>
  92. </div>
  93. </body>
  94. </html>
[HTML] pobierz, plaintext


jak chcesz żeby elementy div były obok siebie to zwróć uwagę na to żeby obejmujący je div miał takie wymiary żeby pomieścić to co ma w środku. W wymiary wlicza się też margin i padding więc jeśli masz diva który ma 
[CSS] pobierz, plaintext 
  1. div
  2. {
  3.     width: 400px;
  4.     padding: 0 100px;
  5.     margin: 0 100px;
  6. }
[CSS] pobierz, plaintext

to rzeczywista szerokość diva wynosi 800px (do tego dolicza się jeszcze border jeśli jest).
mały "tutek" http://w3schools.com/css/css_boxmodel.asp.
robert-0627
23.03.2011, 18:50:31
Miałeś racje tu był problem. Dzięki wielkie smile.gif.
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.