0

我的网页被 CSS 屏蔽了，这就是我遇到的问题，我只想将 URL 表移动到“正确”div 标签内更居中和更低的位置。颜色仅用于区分字段。忽略 img 链接。

这是 html 代码（对于这个作业，我不能使用 CSS 和 HTML 以外的任何东西。这段代码下面是 CSS 文件。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Town of Oz Info</title>
        <meta name="Zachary" content="Zachary Maltais" />
        <link rel="stylesheet" type="text/css" href="oz.css" />
        <!-- Date: 2012-09-05 -->
    </head>
    <body>

        <!--Using a div based layout to position things on the page -->

        <div id="header">
            <!-- header code goes here -->

            <h1 id="welcome">Welcome to Town of Oz</h1>

        </div>

        <div id="content">
            <!-- All main content go here -->

        </div>

        <div id="right">
            <!-- right side of screen code goes here -->

            <!-- Table for navigation -->
            <table id="navigation">
                <tr>
                    <th><img src="images/arrow.gif"></th>
                    <th><a href="home.html">Home</a></th>
                </tr>
                <tr>
                    <th><img src="images/arrow.gif"></th>
                    <th><a href="events.html">Events</a></th>
                </tr>
                <tr>
                    <th><img src="images/arrow.gif"></th>
                    <th><a href="directions.html">Directions</a></th>
                </tr>
                <tr>
                    <th><img src="images/arrow.gif"></th>
                    <th><a href="weather.html">Weather</a></th>
                </tr>
                <tr>
                    <th><img src="images/arrow.gif"></th>
                    <th><a href="wizards.html">Wizards</a></th>
                </tr>
            </table>

        </div>

        <div id="left">
            <!-- left side of screen code goes here -->
        </div>

        <div id="footer">
            <!-- footer code goes here-->

        </div>

    </body>

</html>

这是CSS：

body {
    margin: 0px;
    padding: 0px;
}
#page {
    max-width: 950px;
    max-height: 720px;
}

#header {
    background: #ff9999;
    position: absolute;
    width: 950px;
    height: 100px;
    left: 0px;
    top: 0px;
}
#content {
    background: #9999ff;
    position: absolute;
    top: 100px;
    left: 200px;
    width: 750px;
    height: 550px;
}

#right {
    background: #ffff99;
    position: absolute;
    top: 100px;
    height: 550px;
    width: 200px;
    margin: 0px;
    padding: 0px;
}

#footer {
    background: #99ff99;
    position: absolute;
    top: 650px;
    width: 950px;
    height: 70px;
}

#navigation {
    position:absolute;
    top:200;
    left:50;
    border:dotted;
    border-color: black; 
}
#welcome {
    text-align: center;
    color: blue;
    font-style: oblique;
    font-size: 250%;
    font-family: "Perpetua";
    font-weight: bold;
}
4

2 回答 2

1

试试这个，我对#navigation 的 ccs 几乎没有什么改动

#navigation {
    border:dotted;
    border-color: black;
    margin: 0px auto;
    position: relative;
    top: 50px;
}

如果您想放下它，只需更改最高值。

于 2012-09-07T01:14:18.200 回答
0

您可以为 css 添加此规则

#right table{margin: 20px;}
于 2012-09-07T01:21:41.030 回答