在我的div標記中用css移動一個表格

我已經把我的網頁用css屏蔽掉了，這裏是我遇到的問題，我想只把url的表格移動到'正確的'div標籤。顏色只是爲了區分領域。忽略img鏈接。在我的div標記中用css移動一個表格

這是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; 
}

來源

2012-09-07 Zach M.

如果有人想在小提琴版本：http://jsfiddle.net/JdWfB/ – lolol

我缺少導航內的像素，衛生署 –

試試這個，爲#navigation你CCS我的小變化

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

只是如果你想把它放下來就改變最高值。

來源

2012-09-07 01:14:18 Peace

**的jsfiddle ** - http://jsfiddle.net/JdWfB/9/ – Peace

什麼是保證金：0px auto;在這種情況下，我對理解我設置的div的利潤率有點麻煩。 –

它會將左右邊距設置爲自動，使其居中，0px用於上邊距，而自動爲左右邊距。 – Peace

可以添加這些規則的CSS

#right table{margin: 20px;}

來源

2012-09-07 01:21:41 andres83

我可以命名div標籤，然後在CSS中的元素？我不知道。我不得不說這個項目全是CSS，我很喜歡它擁有的力量。 –

如果你想要你可以做一些類似的東西：div＃right table {margin：20px} - 如果你使用class屬性，你可以製作類似div.myClass或者.myClass {css properties} – andres83

在我的div標記中用css移動一個表格

回答

相關問題