0

Webページが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 に答える