Question

我已经使用CSS阻止了我的网页，这就是我遇到的问题，我想将URL的表移动到'右'div标签内更加居中和更低的位置。颜色只是为了区分场。忽略img链接。

这是html代码（对于此作业，我不允许使用除CSS和HTML之外的任何内容。此代码下面是CSS文件。

CODE：

<!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;
}

Answer 1

试试这个，我对#navigation

的ccs几乎没有变化

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

如果你想把它放下来，只需更改最高值。

Answer 2

您可以为css添加此规则

#right table{margin: 20px;}

使用CSS在我的div标签中移动表格

2 个答案: