Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][PHP]Dziwne rozrzucenie divów w IE
Forum PHP.pl > Forum > Przedszkole
karer
Witam! Po robieniu testowej strony natrafiłem na coś dziwnego, a mianowicie rozrzucenie divów w ie.

Oto screeny:

IE: http://imageshack.us/photo/my-images/687/67517499.png/
Chrome: http://imageshack.us/photo/my-images/11/chromemc.png/



index.php
  1. <link rel="stylesheet" href="style.css" type="text/css" />
  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  3. <meta http-equiv="Content-Language" content="pl" />
  4. <meta name="Author" content="karer" />
  5. <title>Topspin - wciel sie w tenisiste</title>
  6.  
  7. <div id="box">
  8.  
  9. <center><img src="logo.png" /></center>
  10.  
  11. <div id="lewy">
  12. <div id="pasek">
  13. <center>Menu</center>
  14. </div>
  15. <br/>
  16. <center>
  17. <a href="index.php">Strona główna</a>
  18. <br/>
  19. <a href="informacje.php">Informacje o grze</a>
  20. <br/>
  21. </center>
  22. </div>
  23.  
  24. <div id="srodek">
  25. <div id="pasek">
  26. <center>Informacje</center>
  27. </div>
  28.  
  29. <center>
  30. <br/>
  31. <?
  32. $uchwyt=mysql_connect('localhost','root','kacper')
  33. or die('Nieudane połączenie z bazą danych...');
  34. mysql_select_db('topspin')
  35. or die('Nie udało się wybrać bazy danych...');
  36. mysql_query('SET NAMES utf8');
  37. $link=mysql_query("SELECT * FROM news ORDER BY id desc");
  38.  
  39. while($wiersz=mysql_fetch_array($link))
  40. {
  41. echo '<div id="ramka">';
  42. echo '<div id="news">';
  43. echo $wiersz['tytul'];
  44. echo '</div>';
  45.  
  46. echo "Data: ".$wiersz['data'];
  47. echo "<br/>";
  48. echo $wiersz['tresc'];
  49. echo '</div>';
  50. echo "<br/>";
  51. }
  52. mysql_close($uchwyt);
  53. ?>
  54.  
  55. </center>
  56. </div>
  57.  
  58. <div id="prawy">
  59. <div id="pasek">
  60. <center>Logowanie</center>
  61. </div>
  62.  
  63. <center>
  64. <br/>
  65. <form style="margin-left: 4%; margin-right: 4%; border: 1px solid;" action="login.php" method="POST">
  66. Login: <input type="text" name="login" id="login" />
  67. <br/>
  68. Hasło: <input type="text" name="haslo" id="haslo" />
  69. <br/>
  70. <input type="submit" value="Zaloguj"/>
  71. </form>
  72. </center>
  73. </div>
  74.  
  75. <br/>
  76. <center>
  77. <div id="stopka">
  78. <center><font size="5"><b>(c) 2012 by karer</b></font></center>
  79. </div>
  80. </center>
  81. </div>


style.css
  1. body{
  2. background-color: #808080;
  3. }
  4.  
  5. div#lewy{
  6. border-radius: 20px;
  7. -moz-border-radius: 20px;
  8. -webkit-border-radius: 20px;
  9. behavior:url(border-radius-ie8.htc);
  10. margin-left: 9%;
  11. margin-top: 3%;
  12. height: 50%;
  13. min-width: 15%;
  14. background-color: #999999;
  15. float: left;
  16. }
  17.  
  18.  
  19. a {
  20. color: black;
  21. font-size: 160%;
  22. text-decoration: none;
  23. }
  24.  
  25.  
  26. div#stopka{
  27. clear: both;
  28. width: 15%;
  29. background-color: #999999;
  30. }
  31.  
  32. div#prawy{
  33. border-radius: 20px;
  34. -moz-border-radius: 20px;
  35. -webkit-border-radius: 20px;
  36. behavior:url(border-radius-ie8.htc);
  37. margin-left: 1%;
  38. margin-top: 3%;
  39. height: 50%;
  40. min-width: 15%;
  41. background-color: #999999;
  42. float: left;
  43. }
  44.  
  45. div#srodek{
  46. border-radius: 20px;
  47. -moz-border-radius: 20px;
  48. -webkit-border-radius: 20px;
  49. behavior:url(border-radius-ie8.htc);
  50. margin-left: 1%;
  51. margin-top: 3%;
  52. margin-bottom: 1%;
  53. height: 50%;
  54. min-width: 50%;
  55. background-color: #999999;
  56. float: left;
  57. }
  58.  
  59. div#news{
  60. width: 99%;
  61. margin-top: 0.5%;
  62. font-size: 160%;
  63. background-image:url('news.jpg');
  64. }
  65.  
  66. div#ramka{
  67. border: 1px solid;
  68. width: 80%;
  69. }
  70.  
  71. div#pasek{
  72. border-top-left-radius: 20px;
  73. border-top-right-radius: 20px;
  74. -moz-border-radius-topleft: 20px;
  75. -moz-border-radius-topright: 20px;
  76. -webkit-border-top-left-radius: 20px;
  77. -webkit-border-top-right-radius: 20px;
  78. -khtml-border-top-left-radius: 20px;
  79. -khtml-border-top-right-radius: 20px;
  80. behavior:url(border-radius-ie8.htc);
  81.  
  82. width: 100%;
  83. background-image:url('pasek.png');
  84. color: black;
  85. font-size: 110%;
  86. font-family:"segoe print"
  87. }
krzywy36
powywalaj <center> i niepotrzebne <br>, ze znacznika <font> też już się nie korzysta. Layout 3 kolumnowy najprościej zrobić tak: wszystkie kolumny (divy) wrzucasz w kolejnego diva i nadajesz mu overflow: hidden; i szerokość. Divom w środku nadajesz konkretną szerokość i float: left. tyle wink.gif
Jak koniecznie chcesz poprawiać ten kod zamiast napisać nowy, to wrzuć to na jakiś server żeby była wersja "live".
karer
http://topspin.zapto.org/

Demko tongue.gif

Cytat(krzywy36 @ 28.06.2012, 13:51:30 ) *
powywalaj <center> i niepotrzebne <br>, ze znacznika <font> też już się nie korzysta. Layout 3 kolumnowy najprościej zrobić tak: wszystkie kolumny (divy) wrzucasz w kolejnego diva i nadajesz mu overflow: hidden; i szerokość. Divom w środku nadajesz konkretną szerokość i float: left. tyle wink.gif
Jak koniecznie chcesz poprawiać ten kod zamiast napisać nowy, to wrzuć to na jakiś server żeby była wersja "live".


Dzięki biggrin.gif do zamknięcia.
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.