css - 在网站上定位元素时遇到问题

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在它们下面有下拉菜单。但是，由于某种原因，菜单根本不会出现。

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

score 0 · Accepted Answer

首先，您的 HTML 中似乎存在代码错误，涉及您的 <ul>。您绝对应该确保您的标签正确嵌套，因为这可能是您的问题的原因之一。此外，您在此处显示的页面上有 8 个 JavaScript 错误。

当我使用 top: 0px; 时，您的#tabs div 会为我移到顶部应该的。我不太确定你遇到了什么麻烦。
您的白色背景似乎包含其他 div，因此不会将您的项目移动到任何地方。
如果没有我们可以查看的带有图像的实时工作演示，我们就无法为您解决此问题。此外，使用表格进行下拉导航本身就会引发一大堆问题——您应该考虑切换到 div 或结构化的 <ul>。

css - 在网站上定位元素时遇到问题

1 回答 1

Related

Reference