Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Problem z rozciąganiem DIV'a i pozycjonowaniem
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
StasiuX
5.03.2008, 17:29:10
Witam

Od razu zaznaczę, że odpowiedzi na nurtujące mnie pytania szukałem już bardzo dużo (google, znajomi, inne fora) i NIC! Albo mam zły dzień albo to jest takie trudne. Mam nadzieję, że ktoś mi tu pomoże smile.gif. Ale do rzeczy...

Tworzę znajomej małą stronę (portfolio) i postanowiłem skończyć z tabelami i przerzucić się na DIVy.

Problem mam taki, że chcę stronę wejściową zbudować z 3 DIVów. Lewy, środkowy, prawy. Całość ma być w pionie i poziomie wyśrodkowana. Lewy DIV ma zawierać powtarzalne tło, prawy div tak samo. Niby wszystko działa, ale nie w IE6!!! No po prostu już mnie nosi... nie mogę tego rozwiązać. Wkurza mnie to, bo wszyscy mówią i piszą, że DIVy lepsze a ja nie mogę poradzić sobie z czymś co na głupich tabelkach dawno bym już zrobił! Może robie jakiś idiotyczny błąd, ale już sił nie mam żeby go szukać, więc ktoś może z Was spojrzy na to świeżo i poradzi co mam zrobić.

Roboczy adres strony to:
http://www.closecombat.pl/mm/

Jak widać pod FF jest wszystko OK, w IE6 już nie.

Kod strony w HTML
[HTML] pobierz, plaintext 
  1. <?php echo '<'.'?xml version="1.0" encoding="UTF-8"?'.'>'."\n"; ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  4. <head>
  5. <title>PORTFOLIO</title>
  6. <link rel="stylesheet" href="style.css" type="text/css" />
  7. </head>
  8. <body>
  9.  
  10. <div id="calosc">
  11.  
  12. <div id="lewo"></div>
  13.  
  14. <div id="srodek">
  15. <img src="intro.jpg" />
  16. </div>
  17.  
  18. <div id="prawo"></div>
  19.  
  20. </div>
  21.  
  22. </body>
  23. </html>
[HTML] pobierz, plaintext


CSS:
[HTML] pobierz, plaintext 
  1. body, html {
  2.   margin:0px;
  3.  
  4. }
  5.  
  6.  
  7. div#calosc {
  8. 	text-align: center;
  9. 	position: fixed;
  10. 	top: 50%;
  11. 	width: 100%;
  12. 	height: 1px;
  13. 	overflow: visible;
  14. 	visibility: visible;
  15. 	display: block }
  16.  
  17. div#srodek {
  18. 	margin-left: -390px;
  19. 	position: absolute;
  20. 	top: -170px;
  21. 	left: 50%;
  22. 	width: 780px;
  23. 	height: 360px;
  24. 	visibility: visible }
  25.  
  26. div#lewo {
  27.   background-position: right;
  28.   background-repeat: repeat-x;
  29.   background-image: url('gfx/pattern.jpg');
  30. 	margin-right: 390px;
  31.         position: absolute;
  32.         right: 50%;
  33. 	top: -170px;
  34. 	width: 100%;
  35. 	height: 360px;
  36. 	visibility: visible }
  37.  
  38. div#prawo {
  39.   background-position: left;
  40.   background-repeat: repeat-x;
  41.   background-image: url('gfx/pattern.jpg');
  42.  	margin-left: 390px;
  43.         position: absolute;
  44.         left: 50%;
  45. 	top: -170px;
  46. 	width: 100%;
  47. 	height: 360px;
  48. 	visibility: visible }
[HTML] pobierz, plaintext


POMOCY! smile.gif
arecki
5.03.2008, 20:38:12 
[HTML] pobierz, plaintext 
  1. body, html {
  2. 	margin:0px;
  3. }
  4.  
  5.  
  6. div#calosc {
  7. 	background-color:	#666;
  8. 	text-align:			center;
  9. 	position:			absolute;
  10. 	top:				25%;
  11. 	bottom:				25%;
  12. 	width:				100%;
  13. 	height:				50%;
  14. }
  15.  
  16. div#lewo {
  17. 	background-color:	#0f0;
  18. 	position:			absolute;
  19. 	top:				0%;
  20. 	width:				25%;
  21. 	left:				0px;
  22. 	height:				100%;
  23. }
  24.  
  25. div#srodek {
  26. 	background-color:	#00f;
  27. 	position:			absolute;
  28. 	top:				0%;
  29. 	width:				50%;
  30. 	left:				25%;	
  31. 	height:				100%;
  32. }
  33.  
  34. div#prawo {
  35. 	background-color:	#f00;
  36. 	position:			absolute;
  37. 	top:				0%;
  38. 	width:				25%;
  39. 	left:				75%;
  40. 	height:				100%;
  41. }
[HTML] pobierz, plaintext
StasiuX
5.03.2008, 21:06:18
Dzięki arecki za odp., ale to rozwiązanie nie wchodzi w grę (też już tak myślałem). Problem w tym, że potrzebuje żeby środkowy div określony był pod względem wielkości w px a nie w %. Ważne jest dla mnie też to żeby div lewy i prawy zaczynały się dokładnie na bokach środkowego div'a (żeby tło powtarzalne pasowało) i żeby były rozciągane do boków przeglądarki. Jak widać po linku którego podałem wszystko śmiga w FF i ponoć w IE7.

Kolega mówi, że to wszystko przez position: fixed, którego IE6 nie interpretuje poprawnie. Próbowałem to obejść hackami wypisanymi w necie, ale nic mi nie wychodziło... za dużo nerwów smile.gif...



EDIT: 05.03.2008 godz. 23:28
No więc udało mi się. Fakt faktem nie rozwiązałem problemu i dalej nie znam przyczyny (bo nie tylko o position:fixed chodziło), ale strona działa tak jak chciałem (test na IE6 i7, FF, Opera i nawet Safari). Rozwiązałem to w ten sposób, że zrezygnowałem z prawego diva a wyśrodkowałem lewego i dałem background-position: center. Tym samym tło dopasowało się do grafiki.

http://www.closecombat.pl/mm/

Pozdrawiam
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.