2016-06-28 30 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

相关问题