CODEWITHSUNDEEP
htmlcsshtml-table
Zach M.
Zach M.

Reputation: 1194

Moving a table within my div tag with CSS

I have gotten my web page blocked out with CSS and here is the issue I am having, I want to just move the table of URL's to a more centered and lower position within the 'right' div tag. the colors are just for differentiation of field. ignore the img links.

This is the html code (for this assignment I am not allowed to use anything other than CSS and HTML. Below this code is the CSS file.

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>

Here is the 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;
}

Upvotes: 0

Views: 11368

Answers (2)

andres83
andres83

Reputation: 310

You could add this rule for the css

#right table{margin: 20px;}

Upvotes: 0

Peace
Peace

Reputation: 296

try this, i little changes to your ccs for the #navigation

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

just change the top value if you want to put it down.

Upvotes: 1

Related Questions