Button On A Image HTMLで

-1

私はこのコードを作成していました。複雑なコードでボタンを配置することもできましたが、もっと簡単にしたいだけです。今度はボタンを画像上に置き、マージントップの位置を変更できますが、マージンの左の位置は変更できません。私は惑星のための各ボタンが欲しいが、私が言ったように、私は単純なコードで惑星が写真のどこにあるのかはわからない。
問題がどこにあるかについてのご意見はありますか？Button On A Image HTMLで

.upfront { 
 
    margin-top: 0px; 
 
    margin-left: 0px; 
 
    margin-right: 0px; 
 
    margin-left: 155px; 
 
    margin-right: 23px; 
 
} 
 

 
.menu {} 
 

 
.spaceBoard { 
 
    position: relative; 
 
} 
 

 
.previews { 
 
    left: 173px; 
 
    position: releative; 
 
} 
 

 
.button { 
 
    position: absolute; 
 
    margin-left: 215; 
 
    margin-top: 315px; 
 
    z-index: 2; 
 
    border-radius: 50%; 
 
    border: none; 
 
}

<!DOCTYPE> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <title>Başlıksız Belge</title> 
 
    <link rel="stylesheet" type="text/css" href="css/style.css" /> 
 
</head> 
 

 
<body background="https://i.hizliresim.com/DyZ49m.png"> 
 
    <script> 
 
    function bgClicked() { 
 
     var id = document.getElementById("bgClicked"); 
 
     id.style.visibility = "visible"; 
 
     document.getElementById("bgMAIN").style.display = "none"; 
 
    } 
 
    </script> 
 
    <center> 
 
    <div class="upper"><img src="https://i.hizliresim.com/vJ9n5m.png" width="75%" height="75%" /></div> 
 
    <!--//<div><img src="Pics/2_.png" style="right:9px; top:12 position:relative;" /></div>--> 
 
    <div class="spaceBoard"> 
 
     <input type="button" class="button" /> 
 
     <img src="https://i.hizliresim.com/Eyo5pB.png" id="bgMAIN" onclick="bgClicked()"> 
 
     <img src="https://i.hizliresim.com/mJB15Z.png" style="visibility:hidden;" class="previews;" id="bgClicked;"> 
 
    </div> 
 
    </center> 
 
</body> 
 

 
</html>

出典

2017-12-19 Umutcan Bahadır

なぜ2倍のマージン左とmargin-を望むように移動され、余白、左下の中でピクセルを逃しました右 –

解決策が難しいため、そこにあるごみコード –

あなたは今、それはあなたが

.upfront{ 
 
\t margin-top: 0px; 
 
\t margin-left: 0px; 
 
\t margin-right: 0px; 
 
\t margin-left: 155px; 
 
\t margin-right: 23px; 
 
} 
 
.menu{ 
 
\t 
 
} 
 
.spaceBoard{ 
 
\t position:relative; 
 
\t 
 
\t 
 
} 
 
.previews{ 
 
\t left:173px; 
 
\t position:releative; 
 

 
} 
 
.button{ 
 
\t position:absolute; 
 
\t margin-left:215px; 
 
\t margin-top:315px; 
 
\t z-index:2; 
 
\t border-radius:50%; 
 
\t border:none; \t 
 
} 
 

 

 

 

 

 

 

 

 

 

 

 
s

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<title>Başlıksız Belge</title> 
 
<link rel="stylesheet" type="text/css" href="css/style.css" /> 
 
</head> 
 

 
<body background="https://i.hizliresim.com/DyZ49m.png"> 
 
<script> 
 
\t function bgClicked(){ 
 
\t \t var id = document.getElementById("bgClicked"); 
 
\t \t id.style.visibility="visible"; 
 
\t \t document.getElementById("bgMAIN").style.display="none"; 
 
\t } 
 
\t 
 
</script> 
 
\t <center> 
 
\t \t <div class="upper"><img src="https://i.hizliresim.com/vJ9n5m.png" width="75%" height="75%"/></div> 
 
     <!--//<div><img src="Pics/2_.png" style="right:9px; top:12 position:relative;" /></div>--> 
 
     <div class="spaceBoard"> 
 
     <input type="button" class="button" /> 
 
    \t <img src="https://i.hizliresim.com/Eyo5pB.png" id="bgMAIN" onclick="bgClicked()"> 
 
     
 
\t \t <img src="https://i.hizliresim.com/mJB15Z.png" style="visibility:hidden;"class="previews;" id="bgClicked;"> 
 
     
 
     </div> 
 
     
 
</body> 
 
</html>

出典

2017-12-19 08:43:30 Gattbha

ハハ、私はこの日のために試していたlmao私は確信していたそれはpxを追加せずに働いていた。それらの小さな細部。ありがとうございました –

@UmutcanBahadırWelcome Mate – Gattbha

答えて

関連する問題