Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: IE+CSS
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
barthezpl
2.01.2007, 01:27:58
Witajcie, może mój temat to błachostka lub bo ja jestem błachy:p ale mam mały problem- robie maly portal..pierwsza strona to czysty html i css.Mam taki problem ze w Mozilli Operze i innych przegladarkac strona wyglada prawidłowo a w IE jedna cześć przechodzi na bok ,druga częśc ucieka...Jak sobie poradzic z tym problemem.Pozdrowionka
Daevar
2.01.2007, 02:24:11
Może jakiś kod? Najpewniej masz w swoim css coś jak:
[HTML] pobierz, plaintext 
  1. margin: 0 auto;
[HTML] pobierz, plaintext

którą explorer delikatnie mówiąc olewa. Trzeba do nadrzędnego diva dodać
[HTML] pobierz, plaintext 
  1. text-align: center;
[HTML] pobierz, plaintext

i wówczas powinno śmigać i w IE. Na przyszłość na wszelki wypadek zawsze lepiej wkleić fragment kodu, w którym jest problem.
barthezpl
2.01.2007, 09:22:34 
[HTML] pobierz, plaintext 
  1. #cen { text-align:center;
  2. }
  3.  
  4. #pl {
  5.          width:630px;
  6. 		 float:left;
  7. 		 margin-left:14px;
  8. 		 border-bottom-color:#CC0000;
  9. 		 border: 1px solid #000;
  10. 		 border-color:#3333FF;
  11. 		 border-style:dotted
  12.  
  13. 		 }
  14.  
  15. #reklama {
  16.          width:165px;
  17. 		 margin-left:13px;
  18. 		 float:left;
  19.  
  20.  
  21. 		 }
  22.  
  23. #left {
  24.         width:150px;
  25.  
  26. 		height:450px;
  27.         float:left;
  28.         text-align:left;
  29. 		float:left; 
  30. 		margin-top:10px;
  31. 		margin-right:13px;
  32. 		margin-left: 137px;
  33. 		border: 1px solid #000;
  34. 		border-color:#CCCCCC;
  35. 		border-style:dotted;
  36. }
  37. #right{
  38.         width:150px;
  39.  
  40. 		height:450px;
  41.         float:left;
  42.         text-align:left;
  43. 		margin-top:10px;
  44. 		margin-left:13px;
  45. 		border: 1px solid #000;
  46. 		border-color:#CCCCCC;
  47. 		border-style:dotted;
  48.  
  49. }
  50. #central {
  51.         width: 400px;
  52.  
  53. 		height:450px;
  54.         float: left;
  55. 	    margin-top:10px;
  56.  
  57. 		border: 1px solid #000;
  58. 		border-color:#CCCCCC;
  59. 		border-style:dotted;
  60. 		margin-bottom:10px;
  61. 		background-image:url(img/central.jpg);
  62.        }
  63. #stopka {
  64.         width:733px;
  65.         float:left;
  66.         text-align:left;
  67. 		border:0 px;
  68. 		margin-left: 137px;
  69. 		margin-top:10px;
  70.  
  71.  
  72. }
  73. 	#menu1 {
  74.         width:733px;
  75.         float:left;
  76.         text-align:left;
  77. 		border: 0 px;
  78. 		margin-left: 137px;
  79. 		margin-top:25px;
  80.  
  81. }
  82. </style>
[HTML] pobierz, plaintext


oto kod, kodałem div nadrzednego #cen, lecz nadal nie ma efektu.Dzieki za rekację
gekon
2.01.2007, 21:08:54
A HTMLa to Ci ktoś ukradł?
@Daevar: IE olewa tylko jak się nieumiejętnie wprowadza dobre metody, a potem - dzięki "hakom na IE" - wychodzi całkowity pasztet.
barthezpl
2.01.2007, 21:22:19
Mam "html "na samej górze Panowie,
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
  6. <title>Untitled Document</title>
  7.  
  8. <style type="text/css">
  9. body{background-color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:17px; color:#0066CC}
  10.  
  11.  
  12. #cen { text-align:center;
  13. }
  14.  
  15. #pl {
  16.          width:630px;
  17. 		 float:left;
  18. 		 margin-left:14px;
  19. 		 border-bottom-color:#CC0000;
  20. 		 border: 1px solid #000;
  21. 		 border-color:#3333FF;
  22. 		 border-style:dotted
  23.  
  24. 		 }
  25.  
  26. #reklama {
  27.          width:165px;
  28. 		 margin-left:13px;
  29. 		 float:left;
  30.  
  31.  
  32. 		 }
  33.  
  34. #left {
  35.         width:150px;
  36.  
  37. 		height:450px;
  38.         float:left;
  39.         text-align:left;
  40. 		float:left; 
  41. 		margin-top:10px;
  42. 		margin-right:13px;
  43. 		margin-left: 137px;
  44. 		border: 1px solid #000;
  45. 		border-color:#CCCCCC;
  46. 		border-style:dotted;
  47. }
  48. #right{
  49.         width:150px;
  50.  
  51. 		height:450px;
  52.         float:left;
  53.         text-align:left;
  54. 		margin-top:10px;
  55. 		margin-left:13px;
  56. 		border: 1px solid #000;
  57. 		border-color:#CCCCCC;
  58. 		border-style:dotted;
  59.  
  60. }
  61. #central {
  62.         width: 400px;
  63.  
  64. 		height:450px;
  65.         float: left;
  66. 	    margin-top:10px;
  67.  
  68. 		border: 1px solid #000;
  69. 		border-color:#CCCCCC;
  70. 		border-style:dotted;
  71. 		margin-bottom:10px;
  72.  
  73.        }
  74. #stopka {
  75.         width:733px;
  76.         float:left;
  77.         text-align:left;
  78. 		border:0 px;
  79. 		margin-left: 137px;
  80. 		margin-top:10px;
  81.  
  82.  
  83. }
  84. 	#menu1 {
  85.         width:733px;
  86.         float:left;
  87.         text-align:left;
  88. 		border: 0 px;
  89. 		margin-left: 137px;
  90. 		margin-top:25px;
  91.  
  92. }
[HTML] pobierz, plaintext
kwiateusz
2.01.2007, 22:29:01
z html chodziło zapewne o resztę kodu... tzn. te divy którym nadajesz style
chlebik
3.01.2007, 00:36:12
Kod by sie przydal (chocby by sie mniej wiecej rozeznac w rozkladzie planowanych DIVow). Natomiast moja sugestia brzmi tak - moze by wartosc "text-align: center" wrzucic do definicji body? Niestety w podanym kodzie definicje stylu dla body ucielo smile.gif.
barthezpl
3.01.2007, 08:31:05
cały kod:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
  6. <title>Untitled Document</title>
  7.  
  8. <style type="text/css">
  9. body{background-color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:17px; color:#0066CC}
  10.  
  11.  
  12. #cen { text-align:center;
  13. }
  14.  
  15. #plock {
  16.          width:630px;
  17. 		 float:left;
  18. 		 margin-left:14px;
  19. 		 border-bottom-color:#CC0000;
  20. 		 border: 1px solid #000;
  21. 		 border-color:#3333FF;
  22. 		 border-style:dotted
  23.  
  24. 		 }
  25.  
  26. #reklama {
  27.          width:165px;
  28. 		 margin-left:13px;
  29. 		 float:left;
  30.  
  31.  
  32. 		 }
  33.  
  34. #left {
  35.         width:150px;
  36.  
  37. 		height:450px;
  38.         float:left;
  39.         text-align:left;
  40. 		float:left; 
  41. 		margin-top:10px;
  42. 		margin-right:13px;
  43. 		margin-left: 137px;
  44. 		border: 1px solid #000;
  45. 		border-color:#CCCCCC;
  46. 		border-style:dotted;
  47. }
  48. #right{
  49.         width:150px;
  50.  
  51. 		height:450px;
  52.         float:left;
  53.         text-align:left;
  54. 		margin-top:10px;
  55. 		margin-left:13px;
  56. 		border: 1px solid #000;
  57. 		border-color:#CCCCCC;
  58. 		border-style:dotted;
  59.  
  60. }
  61. #central {
  62.         width: 400px;
  63.  
  64. 		height:450px;
  65.         float: left;
  66. 	    margin-top:10px;
  67.  
  68. 		border: 1px solid #000;
  69. 		border-color:#CCCCCC;
  70. 		border-style:dotted;
  71. 		margin-bottom:10px;
  72.  
  73.        }
  74. #stopka {
  75.         width:733px;
  76.         float:left;
  77.         text-align:left;
  78. 		border:0 px;
  79. 		margin-left: 137px;
  80. 		margin-top:10px;
  81.  
  82.  
  83. }
  84. 	#menu1 {
  85.         width:733px;
  86.         float:left;
  87.         text-align:left;
  88. 		border: 0 px;
  89. 		margin-left: 137px;
  90. 		margin-top:25px;
  91.  
  92. }
  93. </style>
  94. <body alink="#FF0000" vlink="#FF0000">
  95. <div id="cen">
  96. <div id="reklama"><img src="img/reklama3.gif"></div>
  97. <div id="plock"><img src="img/plock2.jpg"></div>
  98. <div id="menu1"><table width="733" height="70" border="0" background="img/menu2.gif">
  99. <tr>             <td align="right" valign="bottom" width="508"><a href="contact_form.php" onMouseOver='rollover3.src="img/faq1.gif"'
  100.                  onMouseOut='rollover3.src="img/faq.gif"'><img src="img/faq.gif" name="rollover3" border="0"></a></td>
  101. 				 <td align="right" valign="bottom" width="105"><a href="contact_form.php" onMouseOver='rollover2.src="img/regulamin2.gif"'
  102.                  onMouseOut='rollover2.src="img/regulamin.gif"'><img src="img/regulamin.gif" name="rollover2" border="0"></a></td>
  103. 				 <td align="right" valign="bottom" width="105"><a href="contact_form.php" onMouseOver='rollover1.src="img/kontakt2.gif"'
  104.                  onMouseOut='rollover1.src="img/kontakt.gif"'><img src="img/kontakt.gif" name="rollover1" border="0"></a></td>
  105.  
  106. 	</tr></table>
  107. </div>
  108. <div id="left">
  109. <table width="150" height="450" border="0"  >
  110. <tr><td valign="top" width="144" height="30" align="left"><img src="img/dzial_ogloszenia.gif"></td></tr>
  111. <tr ><td valign="middle" align="left" width="144" height="20"><img src="img/li.gif">Sprzedam dom</td></tr>
  112. <tr ><td valign="middle" align="left" width="144" height="20"><img src="img/li.gif">Towarzyskie</td></tr>
  113. <tr ><td valign="middle" align="left" width="144" height="20"><img src="img/li.gif">Odzież</td></tr>
  114. <tr ><td valign="middle" align="left" width="144" height="20"><img src="img/li.gif">Audio</td></tr>
  115. <tr ><td valign="middle" align="left" width="144" height="20"><img src="img/li.gif">Komputery</td></tr>
  116. <tr ><td valign="middle" align="left" width="144" height="20"><img src="img/li.gif">Telefony</td></tr>
  117. <tr><td valign="bottom"><img src="img/mini.gif"></td></tr></table>
  118. </div>
  119. <div id="central"> 
  120. <table border="1" align="center"></table></div>
  121.  
  122. <div id="right">
  123. <table width="150" height="450" >
  124. <tr><td valign="top" width="144" height="30" align="left" ><img src="img/reklama.gif"></td></tr>
  125. <tr ><td valign="middle" align="left" width="144" height="20"><img src="img/li.gif">Motoryzacja</td></tr>
  126. <tr ><td valign="middle" align="left" width="144" height="20"><img src="img/li.gif">Hurtownie</td></tr>
  127. <tr ><td valign="middle" align="left" width="144" height="20"><img src="img/li.gif">Sklepy</td></tr>
  128. <tr ><td valign="middle" align="left" width="144" height="20"><img src="img/li.gif">Test</td></tr>
  129. <tr ><td valign="middle" align="left" width="144" height="20"><img src="img/li.gif">Test</td></tr>
  130. <tr ><td valign="middle" align="left" width="144" height="20"><img src="img/li.gif">Test</td></tr>
  131. <tr><td valign="bottom"><img src="img/mini.gif"></td></tr></table>
  132. </div>
  133.  
  134. <div id="stopka"><img src="img/stopka.gif"></div>
  135.  
  136.  
  137.  
  138. </div>
  139. </html>				 
  140. </body>
  141. </html>
[HTML] pobierz, plaintext
chlebik
3.01.2007, 10:33:21
Lece na uczelnie wlasnie i tylko zajrzalem - na pierwszy rzut oka to nie wiem po co w menu uzywasz JavaScript skoro mozna to wszystko zrobic CSSem. Konkretnie chodzi mi o czesc:

Kod
<div id="menu1"><table width="733" height="70" border="0" background="img/menu2.gif">
<tr>     <td align="right" valign="bottom" width="508"><a href="contact_form.php" onMouseOver='rollover3.src="img/faq1.gif"' onMouseOut='rollover3.src="img/faq.gif"'><img src="img/faq.gif" name="rollover3" border="0"></a></td>

ITD....




Po co Ci ladowanie GIFow skoro buttony sa bardzo proste i mozna je zrobic operujac tylko na wlasciwosciach tekstu. No i z tego co widze to do tworzenia nawigacji na stronie wykorzystujesz tablice - czy tylko mi sie wydaje ? Poszukaj na necie artykulow o tworzeniu ukladu 3 kolumnowego za pomoca tylko CSS'a. W koncu po to powstal smile.gif

Nie mieszaj tablic do tworzenia strony z CSSem z DIVami bo z tego zazwyczaj nic dobrego nie wychodzi. I jeszcze jedno na koniec - nie nadawaj sztywnych wielkosci w pikselach poszczegolnym DIVom bo jak ktos to otworzy w rozdzialczosci 640x480 lub na jakims komorko-komputerze to nic nie bedzie widzial. Uzyj za to wartosci procentowych.


Pozdrawiam
Chlebik


PS. DIVy "reklama" i "plock" zawierajace obrazki moze da sie zlac w 1 ? Link do reklamy dac na caly obrazek lub wyrzucic z obrazkow w ogole i dodac gdzie indziej lub na dole ?
gekon
3.01.2007, 23:34:25
Wiesz, że dzwonią tylko nie wiesz, w którym kościele. Proponuję jeszczę trochę się poduczyć i zwaracać uwagę na różnicę między przegladarkami.
Zajec
6.01.2007, 17:16:15
IE ma buga (żeby to jednego) i dubluje marginesy elementom, które mają przypisane float. Dodaj dla tych elementów jeszcze
Kod
display: inline
i będzie OK jeśli chodzi o marginesy.
barthezpl
7.01.2007, 00:15:53
Super, ślicznie dziekuję, rzeczywiście pomogło.Dzieki, Bro jak będę w Włocławku:)
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.