Question

当我将位置从绝对变为相对或任何东西时，它会完全搞砸一切。在布局上到处发送图像。我不知道该怎么办。请帮助= [[因为现在，当浏览器被缩小时，文本会根据我正在测试它的计算机上的布局而放置。网站 - www.byteknightrepair.com

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org      /TR/html4/loose.dtd">
<html>
<head>
<title>-ByteKnight Repair-</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="site_layout.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
    background-color: #2b2b2b;
}
</style>
<link href="site_layout_content.css" rel="stylesheet" type="text/css">
<style type="text/css">
#testimonials {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 220px;
top: 563px;
float: right;
}
body,td,th {
color: #999;
}
#housecalls {
position:absolute;
width:200px;
height:105px;
z-index:2;
left: 504px;
top: 557px;
}
#WhatWeDo {
position:;
width:379px;
height:46px;
z-index:3;
left: 201px;
top: 222px;
}
</style>
<link href="site_layout_whatwedo.css" rel="stylesheet" type="text/css">
<style type="text/css">
#Description {
position:absolute;
width:326px;
height:73px;
z-index:4;
left: 219px;
top: 289px;
}
#news {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 804px;
top: 556px;
}
#apDiv6 {
position:absolute;
width:200px;
height:115px;
z-index:6;
left: 721px;
top: 390px;
}
</style>

Answer 1

Waoh，嗯，我的第一个建议是重新开始并正确定位一切。您页面上的文字随处可见，因为它们没有正确包含，只是手动放置在屏幕上，相对于您当时使用的屏幕绝对定位，因此它们为什么到处飞行（并非每个人都有相同的屏幕）尺寸）。您可以采取以下措施快速解决问题：

td {
    vertical-align:top;
}

#description {
    padding:30px;
    position:absolute;
    width:326px;
}

稍后删除你的“我们做什么”div并将其包含在你的“描述”div中，如下所示：

<div id="Description">
<h2>What we do</h2>
<p>ByteKnight Repair is a local, San Fernando Valley based computer repair and servicing company that services both PC desktops and laptops of all brands.</p></div>

这应该可以在调整屏幕大小时阻止该文本浮动。

现在点到你的价格页面。

首先，将您的＃apDiv5 ID格式化为：

#apDiv5 {
    color:#ccc;
    font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size:12px;
    position:absolute;
    width:255px;
}

然后，修复包含该div的td，将图像置于“内容”下方，如下所示：

<td colspan="3" rowspan="4">
        <div id="apDiv5">
          <p>The squire tune-up includes: </p>
          <ul>
            <li>Clear Cache</li>
            <li>Clear Pagefiles</li>
            <li>Virus Scan</li>
            <li>Virus Removal</li>
            <li>Spyware Scan</li>
            <li>Spyware Removal</li>
            <li>Registry Cleaning</li>
            <li>Registry Defragmentation</li>
            <li>Hard Drive Test</li>
            <li>RAM Test</li>
            <li>CPU Thermal Test</li>
            <li>Configure Windows Updates</li>
            <li>Remove Unneeded Startup Programs</li>
          </ul>
      </div><img width="260" height="350" src="images/prices_28.jpg" alt="">
</td>

此外，在“Knightly Tune-up”部分中，将该div上的＃apDiv4 ID更改为＃apDiv5 。

这应该可以解决大多数对齐问题，虽然我强烈建议从头开始，但您可以轻松地仅使用表格来定位此类设计。另外，尝试通过常规编辑器而不是通过可视化编辑器进行所有这些更改。

与往常一样，如果它有效，无论它如何设置都有效。祝你好运。

在Dreamweaver中更改DIV AP标记的位置

1 个答案: