ugrás a tartalomhoz

Layer elcsúszik másfelbontásba

drk88 · 2010. Júl. 10. (Szo), 12.11
Sziasztok!

Olyan problémám lenne, hogy az oldalon a diveket már frankon megcsináltam minden a helyén sehol nem csúszik de viszont van a menüsornak egy div-je amiben a kép és arra szeretnék egy layert rakni, hogy "kezdőlap" és stb.. de elcsúszik a layer. Hogy lehet megoldani, hogy a beállított helyzet fix legyen ne mozogjon el? Hozzá teszem most foglalkozok ilyen jellegű lappal először :)

(IE és Firefox között is csúszkál)
‹ Select lenyílás animálása jquery-vel Javascript - Jquery - Sammy - Template ›
 ■
1

Képzelet

Poetro · 2010. Júl. 10. (Szo), 13.05
Mivel se kódot, se linket nem mellékeltél, nehéz elképzelni, hogy mi is pontosan a te problémád, vagy hogyan valósítottad meg az elhelyezést.
2

nincs tárhely még van egy

drk88 · 2010. Júl. 10. (Szo), 13.09
nincs tárhely még van egy layer az oldalon amit oda húztam a helyére de mindig elcsúszik így egyszerűen..
3

Központozás?

Poetro · 2010. Júl. 10. (Szo), 13.14
Úgy látom, hiányzik egy pár pont és vessző, így nem teljesen tiszta, mit is szeretnél írni. Azért kódot mutathatnál. És használd a kódszínezőt.
4

<div id="Layer2"

drk88 · 2010. Júl. 10. (Szo), 13.32
  1. <div id="Layer2" style="position:relative; left:360px; top:-432px; width:75px; height:24px; z-index:2;"><span class="style1"><a href="index.php">Kezdőlap</a></span></div>  
És egyszerűen nem ott van ahol én látom az én böngészőmbe megnézem másik gépen és máshol van..
5

pozícionálás

kerzo · 2010. Júl. 10. (Szo), 13.38
A left és top értéket mihez képest adod meg? Szerintem vagy állítsd át position:absolute;-ra, vagy ne add meg a top és left értékeket. De ez csak tipp, mert nem látjuk hogy milyen kódkörnyezetben kell működnie.
6

itt az egész, nem sikerült

drk88 · 2010. Júl. 10. (Szo), 15.13
itt az egész, nem sikerült fixálnom sajnos.

//config.css
  1. #bg {  
  2. background-attachment: fixed;  
  3. background-color: #000;  
  4. background-image: url(img/bg.jpg);  
  5. background-repeat: no-repeat;  
  6. background-position: center top;  
  7. }  
  8. #top {  
  9. width: 810px;  
  10. }  
  11. #main {  
  12. width: 810px;  
  13. margin-right: auto;  
  14. margin-left: auto;  
  15. }  
  16. #server {  
  17. background-image: url(img/server.png);  
  18. background-repeat: no-repeat;  
  19. background-position: center top;  
  20. height: 47px;  
  21. width: 810px;  
  22. }  
  23. #logo {  
  24. background-image: url(img/logo.png);  
  25. background-repeat: no-repeat;  
  26. background-position: center center;  
  27. height: 350px;  
  28. width: 810px;  
  29. }  
  30. #menu {  
  31. width: 810px;  
  32. }  
  33. #m1 {  
  34. background-image: url(img/m1.png);  
  35. background-repeat: no-repeat;  
  36. background-position: left top;  
  37. height: 47px;  
  38. width: 328px;  
  39. float: left;  
  40. }  
  41. #m2 {  
  42. background-image: url(img/m2.png);  
  43. background-repeat: no-repeat;  
  44. background-position: right top;  
  45. height: 47px;  
  46. width: 328px;  
  47. float: left;  
  48. }  
  49. #start {  
  50. float: left;  
  51. height: 153px;  
  52. width: 153px;  
  53. background-image: url(img/start.png);  
  54. background-repeat: no-repeat;  
  55. background-position: center top;  
  56. position: relative;  
  57. top: -50px;  
  58. }  
  59. #content {  
  60. width: 810px;  
  61. clear: left;  
  62. position: relative;  
  63. top: -105px;  
  64. }  
  65. #c1 {  
  66. background-image: url(img/c1.png);  
  67. background-repeat: no-repeat;  
  68. background-position: center bottom;  
  69. height: 70px;  
  70. width: 810px;  
  71. }  
  72. #c2 {  
  73. background-image: url(img/c2.png);  
  74. background-repeat: repeat-y;  
  75. background-position: center top;  
  76. width: 810px;  
  77. padding-right: 15px;  
  78. padding-left: 15px;  
  79. }  
  80. #c3 {  
  81. background-image: url(img/c4.png);  
  82. background-repeat: no-repeat;  
  83. background-position: center top;  
  84. height: 200px;  
  85. width: 810px;  
  86. }  
  87. #cop {  
  88. height: 20px;  
  89. width: 300px;  
  90. margin-right: auto;  
  91. margin-left: auto;  
  92. position: relative;  
  93. top: -100px;  
  94. }  
  95. .text {  
  96. font-family: "Times New Roman", Times, serif;  
  97. color: #FFF;  
  98. }  
//index.php
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>teszt</title>  
  6. <link href="config.css" rel="stylesheet" type="text/css" />  
  7. <style type="text/css">  
  8. <!--  
  9. .style1 {  
  10. color: #FFFFFF;  
  11. font-size: 18px;  
  12. font-style: italic;  
  13. }  
  14. body,td,th {  
  15. font-family: Times New Roman, Times, serif;  
  16. }  
  17. .style2 {color: #FFFF00}  
  18. a:link {  
  19. text-decoration: none;  
  20. color: #FFFFFF;  
  21. }  
  22. a:visited {  
  23. text-decoration: none;  
  24. color: #FFFFFF;  
  25. }  
  26. a:hover {  
  27. text-decoration: none;  
  28. color: #FFFFFF;  
  29. }  
  30. a:active {  
  31. text-decoration: none;  
  32. color: #FFFFFF;  
  33. }  
  34. #Layer1 {  
  35. position:absolute;  
  36. width:200px;  
  37. height:115px;  
  38. z-index:3;  
  39. }  
  40. -->  
  41. </style></head>  
  42.   
  43. <body id="bg">  
  44. <div class="text">  
  45. <div id="main">  
  46. <div id="top">  
  47. <div id="server"></div>  
  48. <div id="logo"></div>  
  49. </div>  
  50. <div id="menu">  
  51. <div id="m1"></div>  
  52. <div id="start"></div>  
  53. <div id="m2"></div>  
  54. </div>  
  55. <div id="content">  
  56. <div id="c1">  
  57. <p>&nbsp;</p>  
  58. <p><br />  
  59. <br />  
  60. </p>  
  61. </div>  
  62. <div id="menualatt"></div>  
  63. <div id="c2"></div>  
  64. <div id="c3"></div>  
  65. </div>  
  66. <div class="style2" id="cop">Copyright &#169; 2010 WROX L2J Server </div>  
  67. </div>  
  68. </div>  
  69. <div id="Layer2" style="position:relative; left:360px; top:-432px; width:75px; height:24px; z-index:2;"><span class="style1"><a href="index.php">Kezdőlap</a></span></div>  
  70. </body>  
  71. </html>