Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]Problem z typem relative - IE
Niedowiarek
post
Post #1





Grupa: Zarejestrowani
Postów: 79
Pomógł: 0
Dołączył: 28.04.2011

Ostrzeżenie: (0%)
-----

Witam, właśnie skończyłem pozycjonować moją stronkę, i zauważyłem że position: relative; nie działa w IE :/ (pozycje div'ów poszły się jeb*ć)

Oto strona: Link


Kod:

[CSS] pobierz, plaintext 
  1. body {
  2. font-size: 14;
  3. font-family: segoe print;
  4. background: #61BC3A;
  5. }
  6.  
  7.  
  8. #wrapper {
  9. margin: 0 auto;
  10. }
  11.  
  12. /* Początek nagłówka */
  13.  
  14. #header-wrapper {
  15. width: 100%;
  16. margin: 0; padding: 0;
  17. }
  18.  
  19. #header {
  20. position: relative;
  21. margin: 0 auto;
  22. background: url(header2.png) no-repeat center;
  23. height: 180px;
  24. padding: 0;
  25. overflow: hidden;
  26. }
  27.  
  28. #header-logo {
  29. position: relative; top: 15px; right: 320px;
  30. background: url(head_logo.png) no-repeat center;
  31. height: 150px;
  32. }
  33.  
  34. /* Początek linków */
  35.  
  36. /* Nawigator */
  37.  
  38. #nav {
  39. position: relative; left: 207px; top: 6px;
  40. width: 850px;
  41. }
  42.  
  43. #activ-home {
  44. width: 110px;
  45. height: 50px;
  46. display: inline;
  47. float: left;
  48. background: url(active.png) no-repeat center;
  49. position: relative; bottom: 20px;
  50. }
  51.  
  52. a:link, a:visited { 
  53. text-decoration: none;
  54. color: black;
  55. }
  56.  
  57. a:hover {
  58. color: white;
  59. }
  60.  
  61. a.activ:hover {
  62. color: black;
  63. }
  64.  
  65. /* Nagłówki */
  66.  
  67. h1.logo {
  68. position: relative; bottom: 90px; left: 300px;
  69. font-size: 45;
  70. font-family: times new roman;
  71. color: white;
  72. float: left;
  73. }
  74.  
  75. /* Wykazy */
  76.  
  77. .topmenu ul, li {
  78. font-size: 20;
  79. font-family: times new roman;
  80. list-style-type: none;
  81. display: inline;
  82. color: black;
  83. position: relative; bottom: 13px; right: 82px;
  84. margin: 0px 40px 0px 0px;
  85. padding: 0px;
  86. text-transform: uppercase;
  87. } 
  88.  
  89.  
  90. /* Texty */
  91.  
  92. #text {
  93. display: inblock;
  94. margin: 0 auto;
  95. background: white;
  96. width: 850px;
  97. height: 1000px;
  98. padding: 0;
  99. }
  100.  
  101.  
  102. #left-block {
  103. display: inblock;
  104. background: #c0ffa4;
  105. float: left;
  106. width: 500px;
  107. height: 900px;
  108. position: relative; top: 30px; left: 40px;
  109. overflow: hidden;
  110. }
  111.  
  112. #right-block {
  113. display: inblock;
  114. background: #c0ffa4;
  115. float: left;
  116. width: 250px;
  117. height: 900px;
  118. position: relative; top: 30px; left: 60px;
  119. }
  120.  
  121. /* Stopka */
  122.  
  123. #footer {
  124. display: inblock;
  125. margin: 0 auto;
  126. position: relative;
  127. background: url(header2.png);
  128. width: 850px;
  129. height: 20px;
  130. text-align: right;
  131. font-size: 10;
  132. font-weight: bold;
  133. padding: 0;
  134. }
  135.  
  136. .clear {
  137. clear: both;
  138. display: inline-block;
  139. }
[CSS] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>kaXa.pl</title>
  4. <link rel="stylesheet" type="text/css" href="style.css" />
  5. </head>
  6. <body>
  7. <div id="wrapper">
  8.   <div id="header-wrapper">
  9.     <div id="header">
  10. 	  <div id="header-logo"></div>
  11. 	     <h1 class="logo">kaXa.pl</h1>
  12.     <div id="nav">
  13. 	   <div id="activ-home"></div>
  14. 	    <ul class="topmenu">
  15. 		   <li class="topmenu"><a href="index.html" class="activ">Home</a></li>
  16. 		   <li><a href="index.html">Usługi</a></li>
  17. 		   <li><a href="index.html">Galeria</a></li>
  18. 		   <li><a href="index.html">Kontakt</a></li>
  19. 		</ul>
  20.     </div>
  21. 	</div>
  22.   </div>
  23.  <div id="text">
  24.    <div id="left-block"></div>
  25.    <div id="right-block"></div>
  26.  
  27.  </div>
  28.  
  29. <div id="footer">
  30. All made by Bartosz Kubacki
  31. </div>
  32. </div>
  33. </body>
  34. </html>
[HTML] pobierz, plaintext


Zabraniam kopiowania!



Na FF, Chrome i Operze wszystko śmiga, tylko nieszczęsny IE sprawia problemy :/

Ten post edytował Daiquiri 4.06.2011, 23:02:52
Powód edycji: [Daiquiri]: otwieram
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 9)
drozdii07
post
Post #2





Grupa: Zarejestrowani
Postów: 254
Pomógł: 39
Dołączył: 6.12.2010
Skąd: localhost

Ostrzeżenie: (0%)
-----

Popatrzylem na nazwe tematu i mi sie odechcialo kod czytac.. nie mozna normmlnie napisac nazwy ?
Go to the top of the page
+Quote Post
Niedowiarek
post
Post #3





Grupa: Zarejestrowani
Postów: 79
Pomógł: 0
Dołączył: 28.04.2011

Ostrzeżenie: (0%)
-----

A jaka nazwa jest dla Ciebie normalna?

Pomoże ktoś?
Go to the top of the page
+Quote Post
mat-bi
post
Post #4





Grupa: Zarejestrowani
Postów: 690
Pomógł: 92
Dołączył: 6.02.2011

Ostrzeżenie: (0%)
-----

Człowieku, STFG!

Dlaczego nigdy nie spytacie się wujka?
Go to the top of the page
+Quote Post
Daiquiri
post
Post #5





Grupa: Administratorzy
Postów: 1 552
Pomógł: 211
Dołączył: 7.07.2009
Skąd: NJ
Jak już wymyślisz tę "normalną" nazwę to podeślij mi na PW, wtedy otworzę temat.
Powód edycji: [Daiquiri]: Otwieram
Go to the top of the page
+Quote Post
Niedowiarek
post
Post #6





Grupa: Zarejestrowani
Postów: 79
Pomógł: 0
Dołączył: 28.04.2011

Ostrzeżenie: (0%)
-----

@mat-bi

Szukałem w google i nie znalazłem, dlatego napisałem tutaj.
Go to the top of the page
+Quote Post
mat-bi
post
Post #7





Grupa: Zarejestrowani
Postów: 690
Pomógł: 92
Dołączył: 6.02.2011

Ostrzeżenie: (0%)
-----

http://snook.ca/archives/html_and_css/posi...ve_overflow_ie/
Go to the top of the page
+Quote Post
Niedowiarek
post
Post #8





Grupa: Zarejestrowani
Postów: 79
Pomógł: 0
Dołączył: 28.04.2011

Ostrzeżenie: (0%)
-----

Dodałem relative do wrapper'a i nadal nic :/ Jedynie zaszkodziło to po stronie Opery, z header'a zrobił się przewijany obrazek.

Ten post edytował Niedowiarek 4.06.2011, 23:27:38
Go to the top of the page
+Quote Post
everth
post
Post #9





Grupa: Zarejestrowani
Postów: 782
Pomógł: 153
Dołączył: 21.07.2010

Ostrzeżenie: (0%)
-----

Może się mylę ale przy takim źródle jak twoje prawdopodobnie wpadasz w Quirks Mode w IE - popraw to (choćby nadając DOCTYPE) bo możesz walczyć z problemem który nie istnieje (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post
Niedowiarek
post
Post #10





Grupa: Zarejestrowani
Postów: 79
Pomógł: 0
Dołączył: 28.04.2011

Ostrzeżenie: (0%)
-----

everth jesteś geniusz (IMG:style_emoticons/default/tongue.gif) Dodałem doctype i wszystko ładnie śmiga, dzięki wielkie

I jeszcze jedno pytanko, czy mój kod jest poprawny? Chodzi mi tutaj chyba najbardziej o position: relative. Bo gdzieś przeczytałem że np. DIV znajdujacy się w innym DIV'ie powinien mieć position: absolute, to prawda?

Ten post edytował Niedowiarek 5.06.2011, 00:02:29
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 14:04
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn