Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML][Pozycjonowanie na divach] IE vs Inne.
Forum PHP.pl > Forum > Przedszkole
sasky
23.09.2010, 08:41:27
Witam,

Robię stronę znajomemu i idąc z duchem czasów staram się to robić na DIV'ach ale IE vs. inne przeglądarki nie współpracuje. Dlatego kieruje do was pytanie odnośnie pozycjonowania strony
na divach i fixy do IE?
Poniżej przedstawiam kod co jest źle, albo inaczej co zrobić żeby IE dobrze wyświetlało treść tak jak np. w moim przypadku CHROME.

Pozdrawiam
Sasku


[HTML] pobierz, plaintext 
  1. <html>
  2. <style>
  3. * {margin:0; padding:0;}
  4. body, html { width:900px; height:100%; margin:0 auto;
  5. font-family:lucida sans unicode;
  6. font-size:12px;
  7. color:#000;
  8. }
  9.  
  10. #wrapper1 { width:900px; height:280px; background:#0fe3ef;}
  11. #header   { width:100%; height:100%; }
  12.  
  13.  
  14. #wrapper2 {width:400px; height:auto !important; background:#ed0; float:left; margin:0 auto;}
  15. #news { width:100%;}
  16. #tips { width:100%;}
  17.  
  18.  
  19. #wrapper3 {width:490px; height:auto !important;  float:right;}
  20. #oferta-div { width:490px;}
  21. #o1 { float:left; width:230px; height:150px; padding:1px; border:1px #ccc solid; margin:5px;}
  22. #losowe { width:100%; float:right;}
  23.  
  24.  
  25. #footer { width:900px; float:left; background:pink;}
  26.  
  27. </style>
  28.  
  29. <body>
  30.  
  31.  <div id="wrapper1">
  32.  
  33. 	<div id="header"> header 1</div>
  34.  
  35.  </div>
  36.  <div  id="wrapper2">
  37.  
  38. 	<div id="news"> News</div>
  39. 	<div id="tips"> Nawigacja</div>
  40.  
  41.  </div>
  42.  <div id="wrapper3">
  43.  
  44. 	<div id="oferta-div">
  45.  
  46. 		<div id="o1">Oferta 1</div>
  47. 		<div id="o1">Oferta 2</div>
  48. 		<div id="o1">Oferta 3</div>
  49. 		<div id="o1">Oferta 4</div>
  50. 	</div>
  51. 	<div id="losowe">
  52. 	Losowe
  53. 	</div>
  54.  </div>
  55. <div id="footer">Footer</div>
  56. </body>
  57. </html>
  58.  
[HTML] pobierz, plaintext



Make my day czarodziej.gif winksmiley.jpg
essey
23.09.2010, 12:42:31
Zanim spróbuję Ci pomóc, powiedz mi proszę o jakiej wersji IE rozmawiamy? I dodatkowo, jeżeli możesz, wstaw link do screena z efektem docelowym (w Twoim wypadku wykonaj go otwierając dany kod w GoogleChrome).
Damonsson
23.09.2010, 12:54:08
Wystarczy, że zmienisz swoją linijkę na 

[CSS] pobierz, plaintext 
  1. #wrapper3 {width:490px; height:auto !important;  float:left;}
[CSS] pobierz, plaintext


Ale ogólnie coś mi się zdaję, że za dużo tu jest tego float wszędzie, tak tylko zerkając okiem, nie zagłębiałem się szczegółowo. No i sam kod, też coś mi tam dziwnie wygląda.
sasky
23.09.2010, 13:40:36
essey - używam IE 8. A efekt ma tak wyglądać tak jak tutaj już po poprawce kolegi Damonsson'a z tym, że pośrodku.
EFFEKT


Damonsson - faktycznie pomogło zmieniając parametr na 
[HTML] pobierz, plaintext 
  1. float:left;
[HTML] pobierz, plaintext
w #wrapper3. Ale teraz jest inny dylemat, mianowicie
IE interptertuje całosc do lewej strony, pomimo że jest zdefiniowane 
[HTML] pobierz, plaintext 
  1. margin:0 auto;
[HTML] pobierz, plaintext
dla body i html.

Myślałem, żeby dać całość strony w kolejny DIV i zdefiniować tak samo jak w body 
[HTML] pobierz, plaintext 
  1. margin:0 auto;
[HTML] pobierz, plaintext
ale nie pomaga.
Coś w stylu:

[HTML] pobierz, plaintext 
  1. <html>
  2. <body>
  3.  
  4.  
  5. <div id="content-wrapper" style="margin:0 auto; text-align:center !important;">
  6. ...
  7. </div>
  8.  
  9. </body>
  10. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1.  text-align:center !important; 
[HTML] pobierz, plaintext
dla IE, ale nie koniecznie. Efekt marny ten sam IE daje wszystko na lewo.


Pozdrawiam i dzięki za odpowiedź. party.gif
essey
23.09.2010, 14:18:34
Ok, więc:

Dla "content-wrapper" ustaw szerokość optymalną, czyli 900px; 
[CSS] pobierz, plaintext 
  1. div#content-wrapper { width: 900px; margin: 0 auto; }
[CSS] pobierz, plaintext

Teraz w body dodaj: 
[CSS] pobierz, plaintext 
  1. body { text-align:center; }
[CSS] pobierz, plaintext


Prawdopodobnie będzie Ci się również tekst w wrapperach środkował, więc dodaj w każdym text-align: left;

I nie nadużywaj !importantów winksmiley.jpg)
sasky
23.09.2010, 15:00:53
essey - dzięki za czas i wytłumaczenie smile.gif Pomogło i działa smile.gif

Pozdrawiam i powodzenia
Sasku
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.