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

#bg {
background-attachment: fixed;
background-color: #000;
background-image: url(img/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
}
#top {
width: 810px;
}
#main {
width: 810px;
margin-right: auto;
margin-left: auto;
}
#server {
background-image: url(img/server.png);
background-repeat: no-repeat;
background-position: center top;
height: 47px;
width: 810px;
}
#logo {
background-image: url(img/logo.png);
background-repeat: no-repeat;
background-position: center center;
height: 350px;
width: 810px;
}
#menu {
width: 810px;
}
#m1 {
background-image: url(img/m1.png);
background-repeat: no-repeat;
background-position: left top;
height: 47px;
width: 328px;
float: left;
}
#m2 {
background-image: url(img/m2.png);
background-repeat: no-repeat;
background-position: right top;
height: 47px;
width: 328px;
float: left;
}
#start {
float: left;
height: 153px;
width: 153px;
background-image: url(img/start.png);
background-repeat: no-repeat;
background-position: center top;
position: relative;
top: -50px;
}
#content {
width: 810px;
clear: left;
position: relative;
top: -105px;
}
#c1 {
background-image: url(img/c1.png);
background-repeat: no-repeat;
background-position: center bottom;
height: 70px;
width: 810px;
}
#c2 {
background-image: url(img/c2.png);
background-repeat: repeat-y;
background-position: center top;
width: 810px;
padding-right: 15px;
padding-left: 15px;
}
#c3 {
background-image: url(img/c4.png);
background-repeat: no-repeat;
background-position: center top;
height: 200px;
width: 810px;
}
#cop {
height: 20px;
width: 300px;
margin-right: auto;
margin-left: auto;
position: relative;
top: -100px;
}
.text {
font-family: "Times New Roman", Times, serif;
color: #FFF;
}
//index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>teszt</title>
<link href="config.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {
color: #FFFFFF;
font-size: 18px;
font-style: italic;
}
body,td,th {
font-family: Times New Roman, Times, serif;
}
.style2 {color: #FFFF00}
a:link {
text-decoration: none;
color: #FFFFFF;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:3;
}
-->
</style></head>

<body id="bg">
<div class="text">
<div id="main">
<div id="top">
<div id="server"></div>
<div id="logo"></div>
</div>
<div id="menu">
<div id="m1"></div>
<div id="start"></div>
<div id="m2"></div>
</div>
<div id="content">
<div id="c1">
<p>&nbsp;</p>
<p><br />
<br />
</p>
</div>
<div id="menualatt"></div>
<div id="c2"></div>
<div id="c3"></div>
</div>
<div class="style2" id="cop">Copyright &#169; 2010 WROX L2J Server </div>
</div>
</div>
<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>
</body>
</html>