2016-06-28 18 views
0

嗨,大家我bin在一個lil網站上工作,但我的表單不會移動,無論我做什麼,只是似乎卡住我試圖浮動位置的邊際,但它不工作,我不能找到解決方案表格不會在CSS中移動,無論我嘗試

我的HTML代碼

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="test.css"> 
 
</head> 
 
<body> 
 

 

 

 
<!--Title--> 
 
<div id="Title"> 
 
    <h1>Magic</h1> 
 
</div> 
 

 

 

 

 

 

 
<!--Navigator--> 
 
<div id="Nav"> 
 
\t <form action="skyrim.html"> 
 
    <input type="submit" value="Map"> 
 
    </form> 
 
\t 
 
\t <form action="races.html"> 
 
\t <input type="submit" value="Races"> 
 
\t </form> 
 
\t 
 
\t <form action="magic.html"> 
 
\t <input type="submit" value="Magic"> 
 
\t </form> 
 
\t 
 
\t <form action="Website 1.html"> 
 
\t <input type="submit" value="Homepage"> 
 
\t </form> 
 
</div> 
 

 

 

 

 

 
<!--Section--> 
 
<div id="Sector"> 
 
    <h1> Skyrim Magic Categories</h1> 
 
</div> 
 

 

 

 

 
<!--Magic--> 
 
<div id="Dmagic"> 
 
    <img src="Dmagic.png" alt="Dmagic.png" style="width:350px;length:300px;"> 
 
</div> 
 

 

 

 

 
\t 
 
\t 
 
<!--Login Form--> 
 
<div id="Form"> 
 
\t <form action="logged.html"> 
 
\t Username:<br> 
 
\t <input type="text" name="Dovahkiin"> 
 
\t <br> 
 
\t Password:<br> 
 
\t <input type="password" name="Dragonborn"> 
 
\t <input type="submit" name="Log in" value="Log in"> 
 
\t </form> 
 
</div> 
 
\t  
 
\t 
 

 

 
\t 
 
<!--footer--> 
 
<div id="Footer"> 
 
    <p>Made by Tommasteragent</p> 
 
</div> 
 
\t 
 
</body> 
 
</html>

我的CSS代碼

<style> 
 
div#Form { 
 
\t \t color:white; 
 
\t \t position:absolute; 
 
\t \t top:20px; 
 
\t \t right:-150px; 
 
\t \t } 
 
div#Title { 
 
     font-size:30px; 
 
\t \t color:white; 
 
\t \t text-align:center; 
 
\t \t background-color:black; 
 
\t \t padding:5px; 
 
\t \t } 
 
\t \t 
 
div#Nav { 
 
     font-size:20px; 
 
\t \t color:black; 
 
\t \t float:left; 
 
\t \t background-color:lightgrey; 
 
\t \t padding:5px; 
 
\t \t line-height:50px; 
 
\t \t height:770px; 
 
\t \t width:100px; 
 
\t \t } 
 
\t \t 
 
div#Footer { 
 
     font-size:20px; 
 
\t \t color:white; 
 
\t \t background-color:black; 
 
\t \t padding:5px; 
 
\t \t clear:both; 
 
\t \t text-align:center; 
 
\t \t } 
 

 
div#Sector { 
 
     background-color:white; 
 
\t \t color:black; 
 
\t \t float:left; 
 
\t \t clear:right; 
 
\t \t width:350; 
 
\t \t padding:10px; 
 
\t \t } 
 
div#Dmagic { 
 
      position:absolute; 
 
\t \t top:200px; 
 
\t \t left:70px; 
 
\t \t } 
 
</style>

已謝謝您的幫助

編輯 呀遺憾不清楚自己我的問題 的問題主要是去了解在「登陸」,「格#表」 那的一部分不會動它需要在右上角,但它不會

我的藉口不夠明確

+0

請說明您的具體問題或添加額外的細節,突顯正是你需要的。正如目前所寫,很難確切地說出你在問什麼。 –

回答

0

你爲什麼使用表單?如果你使用<a href="skyrim.html"> skyrim</a>這將是一個非常容易的風格

0

我收集你試圖橫向移動它。那麼你正在尋找的屬性是「保證金」。這將給定數量的像素添加到元素的任一側。將「邊距」設置爲「自動」將會居中。

//編輯:

請勿使用表單導航。用戶鏈接(<a> -element)代替。

0

我想你想把表格移動到文本'skyrim magic categories'下面。我已經在你的CSS做了一些編輯,請更新這個,你的表單將會移動。

div#Sector { 
    background-color:white; 
    color:black; 
    clear:right; 
    width:350; 
    padding:10px; 
} 
div#Dmagic { 
    top:200px; 
    left:70px; 
} 

我已經從dmagic元素中刪除了扇區和位置的浮點數。

(如果你不想刪除浴液從而增加寬度部門元素,並使其阻塞。)

+0

我添加了代碼,但登錄表單仍然不會移動到右上角 – Tommasteragent

相關問題