Question

我在编码网站时遇到一些问题，我无法找到答案。首先，这是我遇到问题的页面的HTML代码，以及链接到它的CSS代码：

HTML：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/test.css">
<title>Capturing Life - Kim Chaffin Photography</title>
</head>
<body>
<div id="bg2">
<center>
<div id="logo">
<img src="../Pictures/logo.png" width="511" height="207" alt="Load Error">
</div>
</center>
<center>
<div id="flourish">
<img src="../Pictures/flourish2.png" width="462px" height="329px" alt="Load Error">
</div>
</center>
<center>
<div id="header">
<svg>
<rect x="100" y="100" rx="20" ry="20" width="1096" height="230"     style="fill:#625D5D;stroke:#625D5D;stroke-width:5;opacity:1"/>
</svg>
</div>
</center>
<center>
<div id="headerfix">
<svg>
<rect x="100" y="300" width="1096" height="100"     style="fill:#625D5D;stroke:#625D5D;stroke-width:5;opacity:1"/>
</svg>
</div>
</center>
<center>
<div id="tabbox">
<svg>
<rect x="100" y="300" width="1096" height="50"     style="fill:#625D5D;stroke:#625D5D;stroke-width:5;opacity:1"/>
</svg>
</div>
</center>
<center>
<div id="tabs">
<ul type=none>
<table width="80%">
<tr>
<td>
<ul>
<a href="Home.html"><img src="../Pictures/Kim Photography_1.png"     onmouseover="this.src='../Pictures/Kim Photography on mouseover_1.png'" 
onmouseout="this.src='../Pictures/Kim Photography_1.png';" alt="Load Error" /></a> 
<script type="text/javascript"> 
img=new Image(); 
img.src= "../Pictures/Kim Photography on mouseover_1.png";
</script>
</td>
<td>
<a href="About Kim.html"><img style="border:0px;" src="../Pictures/Kim     Photography_2.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_2.png'" 
onmouseout="this.src='../Pictures/Kim Photography_2.png';" alt="Load Error" /></a> 
<script type="text/javascript"> 
img=new Image(); 
img.src= "../Pictures/Kim Photography on mouseover_2.png";
</script>
</td>
<td onmouseover="showmenu('portfolios')" onmouseout="hidemenu('portfolios')">
<a href="Portfolios.html"><img style="border:0px;" src="../Pictures/Kim     Photography_3.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_3.png'" 
onmouseout="this.src='../Pictures/Kim Photography_3.png';" alt="Load Error" /></a> 
<script type="text/javascript"> 
img=new Image(); 
img.src= "../Pictures/Kim Photography on mouseover_3.png";
</script>
<br>
<table class="menu" id="portfolios" width="124px" rules="cols">
<tr><td class="menu"><a href="portfolios/maternity.html"><center><b>Maternity</b>    </center></a></td></tr>
<tr><td class="menu"><a href="portfolios/little ones.html"><center><b>Little Ones</b>    </center></a></td></tr>
<tr><td class="menu"><a href="portfolios/teens.html"><center><b>Teens</b></center></a>    </td></tr>
<tr><td class="menu"><a href="portfolios/families.html"><center><b>Families</b>    </center></a></td></tr>
<tr><td class="menu"><a href="portfolios/events.html"><center><b>Events</b></center>    </a></td></tr>
<tr><td class="menu2"><a href="portfolios/pets.html"><center><b>Pets</b></center></a>    </td></tr>
</table>
</td>
<td onmouseover="showmenu('sessions')" onmouseout="hidemenu('sessions')">
<a href="Sessions.html"><img style="border:0px;" src="../Pictures/Kim     Photography_4.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_4.png'" 
onmouseout="this.src='../Pictures/Kim Photography_4.png';" alt="Load Error" /></a> 
<script type="text/javascript"> 
img=new Image(); 
img.src= "../Pictures/Kim Photography on mouseover_4.png";
</script>
<br>
<table class="menu" id="sessions" width="121px" rules="cols">
<tr><td class="menu"><a href="sessions/mini.html"><center><b>Mini-Sessions</b></center>    </a></td></tr>
<tr><td class="menu"><a href="sessions/full.html"><center><b>Full Sessions</b></center>    </a></td></tr>
<tr><td class="menu"><a href="sessions/newborns.html"><center><b>Newborns</b></center>    </a></td></tr>
<tr><td class="menu2"><a href="sessions/slice.html"><center><b>Slice of Life</b>    </center></a></td></tr>
</table>
</td>
<td onmouseover="showmenu('workshops')" onmouseout="hidemenu('workshops')">
<a href="Workshops.html"><img style="border:0px;" src="../Pictures/Kim     Photography_5.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_5.png'" 
onmouseout="this.src='../Pictures/Kim Photography_5.png';" alt="Load Error" /></a> 
<script type="text/javascript"> 
img=new Image(); 
img.src= "../Pictures/Kim Photography on mouseover_5.png";
</script>
<br>
<table class="menu" id="workshops" width="143px" rules="cols">
<tr><td class="menu"><a href="workshops/slr.html"><center><b>SLR</b></center></a></td>    </tr>
<tr><td class="menu"><a href="workshops/quick tips.html"><center><b>Quick Tips</b>    </center></a></td></tr>
<tr><td class="menu2"><a href="workshops/documenting life.html"><center><b>Documenting     Life</b></center></a></td></tr>
</table>
</td>
<td>
<a href="Client Galleries.html"><img style="border:0px;" src="../Pictures/Kim     Photography_6.png" onmouseover="this.src='../Pictures/Kim Photography on mouseover_6.png'" 
onmouseout="this.src='../Pictures/Kim Photography_6.png';" alt="Load Error" /></a> 
<script type="text/javascript"> 
img=new Image(); 
img.src= "../Pictures/Kim Photography on mouseover_6.png";
</script>
</td>
<td>
<a href="Contact.html"><img style="border:0px;" src="../Pictures/Kim Photography_7.png"     onmouseover="this.src='../Pictures/Kim Photography on mouseover_7.png'" 
onmouseout="this.src='../Pictures/Kim Photography_7.png';" alt="Load Error" /></a> 
<script type="text/javascript"> 
img=new Image(); 
img.src= "../Pictures/Kim Photography on mouseover_7.png";
</script>
</td>
</tr>
<li>
</ul>
</table>
</ul>
</div>
</center>
</div>
</body>
</html>

CSS：

body
{
background-image:url('../Pictures/Black dot 2.png');
background-attachment:fixed;
font-family:Arial,Helvetica,sans-serif;
}    
table
a
{
color:black;
text-decoration:none;
}
a:hover
{
color:#FFFFFF;
}
td.menu
{
background-color:#625D5D;
}
td.menu2
{
background-color:#625D5D;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
    -moz-border-radius-bottomright:10px;
    -moz-border-radius-bottomleft:10px;
    -webkit-border-bottom-right-radius:10px;
    -webkit-border-bottom-left-radius:10px;
}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
#bg2
{
background:#FFFFFF;
background:rgba(255,255,255,1);
width:90%;
height:90%;
margin:4em auto;
}
#header
{
position:relative;
top:-545px;
}
#headerfix
{
position:relative;
top:-1265px;
}
#tabbox
{
position:relative;
top:-1770px;
}
#tabs
{
position:absolute;
}
#flourish
{
position:relative;
top:-150px;
right:340px;
z-index:+1;
}
#logo
{
position:relative;
top:113px;
right:-240px;
z-index:+1;
}

这些是我遇到的问题：

代码不允许我移动卡在页面底部的导航标签（div id="tabs"）。如果我应用任何移动属性（i.e. "top:-1000px;"），则标签会完全消失，而不是移动到我希望的位置。

白色背景（div id="bg2"）会导致元素div id="header"，div id="headerfix"，div id="logo"，div id="flourish"和div id="tabbox"被推下在右边，而不是我希望他们进入的顶部和中心位置。

导航标签Portfolios，Sessions和Workshops 假设在其下方有下拉菜单。但是，菜单根本没有出现。

我认为这些是我目前遇到的唯一问题。但是，如果有人在我的代码中发现任何其他问题，如果你告诉我，我会非常感激。

Answer 1

首先，您的HTML中的代码错误看起来与您的＆lt; ul＆gt;。您应该确保您的标签已正确嵌套，因为这可能是您遇到问题的原因之一。此外，您在此处显示的页面上有8个JavaScript错误。

当我使用top时，你的#tabs div会移动到顶部：0px;应该如此。我不太确定你遇到了什么麻烦。
您的白色背景似乎包含其他div，因此不会在任何地方移动您的商品。
如果没有我们可以查看的图像的实时工作演示，我们无法为您排除故障。此外，使用表格进行下拉导航会引发一系列问题 - 您应该考虑切换到div或结构化的＆lt; ul＆gt;。

在网站上定位元素有问题

1 个答案: