2016-06-28 8 views
0

こんにちはみんな私はビールウェブサイト上で作業していますが、私のフォームは、私はそれがちょうど私はフローティングポジションマージンを試みたが、私は解決策を見つけるカントフォーム私は何を試しても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>

は、すでにあなたが助けてくれてありがとう

EDIT うんのdiv#フォーム「の部分ザッツ 」質問は主に「ログイン・フォーム」についての行く私の問題 については不明であることについて申し訳ありませんことそれは右上隅にする必要が移動するが、それはあなたがなぜ不明確

+0

があなたの特定の問題を明確にしたり、必要な正確に何を強調表示するために、追加の詳細情報を追加してください。現在書かれているとおり、あなたが求めていることを正確に伝えるのは難しいです。 –

答えて

0

いるため

私の言い訳を習慣はありませんフォームを使って? <a href="skyrim.html"> skyrim</a>を使用すると、スタイルがかなり簡単になります

0

私はあなたを横に動こうとしています。次に、探している属性は「マージン」です。これにより、要素のいずれかの側に所定量のピクセルが追加されます。 "margin"を "auto"に設定すると、中央に配置されます。

//編集:

ナビゲーションのためのフォームを使用しないでください。ユーザーリンク(<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要素からセクタと位置からfloatを削除しました。

(ケースで、あなたは、フロートを削除部門の要素に幅を追加し、それをブロックしたくない。)

+0

コードを追加しましたが、ログインフォームはまだ右上に移動しません – Tommasteragent

関連する問題