2017-02-17 18 views
-3

私の質問: 1.ロゴ:ロゴをナビゲーションの左上に表示しようとしていますが、できません。任意のアイデア(コードを変更したくない)? 2.画面解像度:私のウェブサイトは私のPCとノートパソコン(ofc ...)と同じではないことに気付きました。どのようにそれを修正することが可能ですか?この写真では、自分のウェブサイトが私のフォントでどのように見えるかを見ることができます。だからあなたはロゴの問題をよりよく見ることができます。ロゴ、画面解像度

\t \t body { 
 
\t \t \t background-color: white;     
 
\t \t \t margin: 0; 
 
\t \t \t padding: 0; 
 
\t \t \t width: 100%; 
 
\t \t \t height: auto; 
 
\t \t \t min-width: 1000px; 
 
\t \t } 
 

 
\t \t @font-face { 
 
\t \t \t font-family: "Jocker"; 
 
\t \t \t src: url("JockeyOne-Regular.ttf") format("truetype"); 
 
\t \t } 
 

 
\t \t @font-face { 
 
\t \t \t font-family: "Pacifica"; 
 
\t \t \t src: url("PacificaCondensed-Regular.ttf") format 
 

 
("truetype"); 
 
\t \t } 
 

 
\t \t @font-face { 
 
\t \t \t font-family: "ReklameScript"; 
 
\t \t \t src:url("ReklameScript.ttf") format("truetype"); 
 
\t \t } 
 

 
\t \t h1 { 
 
\t \t \t font-size: 120px; 
 
\t \t \t text-align: left; 
 
\t \t \t font-family: "Jocker"; 
 
\t \t \t margin-left: 45; 
 
\t \t \t color: rgb(200,101, 103); 
 
\t \t } \t \t 
 

 
\t \t h2 { 
 
\t \t \t font-size: 70; 
 
\t \t \t margin-left: 224; 
 
\t \t \t font-family: "Jocker"; 
 
\t \t \t color: rgb(200,101, 103); 
 
\t \t } 
 

 
\t \t #header { 
 
\t \t \t width: 100%; 
 
\t \t \t height: 50px; 
 
\t \t \t margin: auto; 
 
\t 
 
\t \t } 
 
\t \t 
 
\t \t #navigacija { 
 
\t \t \t width: 100%; 
 
\t \t \t margin-left: 0px; 
 
\t \t \t padding: 0px; 
 
\t \t \t height: 50px; 
 
\t \t \t overflow: hidden; 
 
\t \t \t text-align: right; 
 
\t \t \t position: fixed; 
 
\t \t \t background-color: #089DE3; 
 
\t \t \t z-index: 9999; \t \t \t 
 
\t \t } 
 
\t \t 
 
\t \t #navigacija a { 
 
\t \t \t color: white; 
 
\t \t \t text-decoration: none; 
 
\t \t \t line-height: 50px; 
 
\t \t \t font-size: 30px; 
 
\t \t \t font-family: "Pacifica"; 
 
\t \t \t display: inline-block; 
 
\t \t \t padding-left: 50px; 
 
\t \t \t padding-right: 50px; 
 
\t \t \t padding-top: 0px; 
 
\t \t \t padding-bottom: 0px; 
 
\t \t } 
 
\t 
 
\t \t #navigacija a:hover { 
 
\t \t \t background: #00C5CD; 
 
\t \t } 
 

 
\t \t .main1 { 
 
\t \t \t margin-top: 50px; 
 
\t \t \t font-family: "ReklameScript"; 
 
\t \t \t font-size: 50; 
 
\t \t \t background: #089DE3; 
 
\t \t \t text-align: left; 
 
\t \t \t margin-left: 194; 
 
\t \t } 
 
\t \t 
 
\t \t .video-container { 
 
\t \t \t position: relative; 
 
\t \t \t padding-bottom: 56.25%; 
 
\t \t \t padding-top: 0px; 
 
\t \t \t height: 0; 
 
\t \t \t overflow: hidden; 
 
\t \t \t bottom: 930; 
 
\t \t \t right: 0px; 
 
\t \t } 
 
\t \t .video-container iframe, 
 
\t \t .video-container object, 
 
\t \t .video-container embed { 
 
\t \t \t position: absolute; 
 
\t \t \t top: 0; 
 
\t \t \t left: 0; 
 
\t \t \t width: 100%; 
 
\t \t \t height: 100%; 
 
\t \t } 
 
\t \t .video-wrapper { 
 
\t \t \t width: 640px; 
 
\t \t \t float: right; 
 
\t \t \t margin-left:auto; 
 
\t \t \t margin-right:auto; 
 
\t \t \t max-width: 100%; 
 
\t \t }
<!DOCYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>MaxSkins-Home</title> 
 
\t \t <link rel="stylesheet" href="Home.css" type="text/css" /> 
 
\t 
 
\t 
 

 
\t </head> 
 

 
<body> 
 
\t <div id="header"> 
 
\t <div id="navigacija"> 
 
     \t \t <a href="Home.html"><div class="Home"><b>HOME</b></div></a> 
 
     \t \t <a href="Shop.html"><b>SHOP</b></a> 
 
     \t \t <a href="#"><b>GET POINTS</b></a> 
 
     \t \t <a href="#"><b>INFO</b></a> 
 
    \t </div> 
 
\t </div> 
 

 
\t \t <h1><b>EARN POINTS,<br> GET SKINS!</b></h1> 
 
\t \t <h2><b>How does it work?</b></h2> 
 
\t <div class="main1"> 
 
\t \t <p><b>It's simple!<br> Watch videos, do tasks and have fun! 
 

 
<br>After earning large amount of coins,<br> contact us to get your skins! 
 

 
<b></p> 
 
\t 
 
\t </div> 
 

 
\t <div class="video-wrapper"> 
 
\t <div class="video-container"> 
 
\t \t <iframe width="640" height="360" 
 

 
src="https://www.youtube.com/embed/lwItL2NXwDw" frameborder="5" 
 

 
allowfullscreen></iframe> 
 
\t </div> 
 
\t <!-- /video --> 
 
</div> 
 
<!-- /video-wrapper --> \t 
 
</body> 
 
</html>

1680x10501366x768

+0

これは「インターネットのページに速いお金を稼ぐ」それらの一つであるように見えますか?印象的な。 – arkascha

+1

あなたが「コードを大きく変更しないでください」と言うと、誰かがあなたのために迅速な回答をコードし、何の仕事もしないようにすることを示します。おそらく、これを学習体験としてアプローチし、コードを分析して、これを配置するより効率的な方法があるかどうかを確認する必要があります。 –

+0

@WillCarron正しくありません、あなたがコード全体を変更するのを手伝ってくれる人がいることを知っています...私はいくつかのアイデアが必要です...私は経験を学ぶためにこれをやっています。私の友人はwixサイトでこのクイックサイトを作って、これに似たものを作ろうと言いました... https://prodajarpsrbija.wixsite.com/maxskins –

答えて

0

あなたはこのような何かをしようとします。あなたがリンクしているサイトで見たように、ロゴは書式設定されたテキストです。左フロートでテキストを挿入しました。それがあなたのために働くかどうか見てください。

\t \t body { 
 
\t \t \t background-color: white;     
 
\t \t \t margin: 0; 
 
\t \t \t padding: 0; 
 
\t \t \t width: 100%; 
 
\t \t \t height: auto; 
 
\t \t \t min-width: 1000px; 
 
\t \t } 
 

 
\t \t @font-face { 
 
\t \t \t font-family: "Jocker"; 
 
\t \t \t src: url("JockeyOne-Regular.ttf") format("truetype"); 
 
\t \t } 
 

 
\t \t @font-face { 
 
\t \t \t font-family: "Pacifica"; 
 
\t \t \t src: url("PacificaCondensed-Regular.ttf") format 
 

 
("truetype"); 
 
\t \t } 
 

 
\t \t @font-face { 
 
\t \t \t font-family: "ReklameScript"; 
 
\t \t \t src:url("ReklameScript.ttf") format("truetype"); 
 
\t \t } 
 

 
\t \t h1 { 
 
\t \t \t font-size: 120px; 
 
\t \t \t text-align: left; 
 
\t \t \t font-family: "Jocker"; 
 
\t \t \t margin-left: 45; 
 
\t \t \t color: rgb(200,101, 103); 
 
\t \t } \t \t 
 

 
\t \t h2 { 
 
\t \t \t font-size: 70; 
 
\t \t \t margin-left: 224; 
 
\t \t \t font-family: "Jocker"; 
 
\t \t \t color: rgb(200,101, 103); 
 
\t \t } 
 

 
\t \t #header { 
 
\t \t \t width: 100%; 
 
\t \t \t height: 50px; 
 
\t \t \t margin: auto; 
 
\t 
 
\t \t } 
 
\t \t 
 
\t \t #navigacija { 
 
\t \t \t width: 100%; 
 
\t \t \t margin-left: 0px; 
 
\t \t \t padding: 0px; 
 
\t \t \t height: 50px; 
 
\t \t \t overflow: hidden; 
 
\t \t \t text-align: right; 
 
\t \t \t position: fixed; 
 
\t \t \t background-color: #089DE3; 
 
\t \t \t z-index: 9999; \t \t \t 
 
\t \t } 
 
\t \t 
 
\t \t #navigacija a { 
 
\t \t \t color: white; 
 
\t \t \t text-decoration: none; 
 
\t \t \t line-height: 50px; 
 
\t \t \t font-size: 30px; 
 
\t \t \t font-family: "Pacifica"; 
 
\t \t \t display: inline-block; 
 
\t \t \t padding-left: 50px; 
 
\t \t \t padding-right: 50px; 
 
\t \t \t padding-top: 0px; 
 
\t \t \t padding-bottom: 0px; 
 
\t \t } 
 

 
\t \t a#logo { 
 
\t \t \t float: left; 
 
\t \t } 
 
\t 
 
\t \t #navigacija a:hover { 
 
\t \t \t background: #00C5CD; 
 
\t \t } 
 

 
\t \t .main1 { 
 
\t \t \t margin-top: 50px; 
 
\t \t \t font-family: "ReklameScript"; 
 
\t \t \t font-size: 50; 
 
\t \t \t background: #089DE3; 
 
\t \t \t text-align: left; 
 
\t \t \t margin-left: 194; 
 
\t \t } 
 
\t \t 
 
\t \t .video-container { 
 
\t \t \t position: relative; 
 
\t \t \t padding-bottom: 56.25%; 
 
\t \t \t padding-top: 0px; 
 
\t \t \t height: 0; 
 
\t \t \t overflow: hidden; 
 
\t \t \t bottom: 930; 
 
\t \t \t right: 0px; 
 
\t \t } 
 
\t \t .video-container iframe, 
 
\t \t .video-container object, 
 
\t \t .video-container embed { 
 
\t \t \t position: absolute; 
 
\t \t \t top: 0; 
 
\t \t \t left: 0; 
 
\t \t \t width: 100%; 
 
\t \t \t height: 100%; 
 
\t \t } 
 
\t \t .video-wrapper { 
 
\t \t \t width: 640px; 
 
\t \t \t float: right; 
 
\t \t \t margin-left:auto; 
 
\t \t \t margin-right:auto; 
 
\t \t \t max-width: 100%; 
 
\t \t }
<!DOCYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>MaxSkins-Home</title> 
 
\t \t <link rel="stylesheet" href="Home.css" type="text/css" /> 
 
\t 
 
\t 
 

 
\t </head> 
 

 
<body> 
 
\t <div id="header"> 
 
\t <div id="navigacija"> 
 
     \t \t <a href="#" id="logo">LOGO</a> 
 
     \t \t <a href="Home.html"><div class="Home"><b>HOME</b></div></a> 
 
     \t \t <a href="Shop.html"><b>SHOP</b></a> 
 
     \t \t <a href="#"><b>GET POINTS</b></a> 
 
     \t \t <a href="#"><b>INFO</b></a> 
 
    \t </div> 
 
\t </div> 
 

 
\t \t <h1><b>EARN POINTS,<br> GET SKINS!</b></h1> 
 
\t \t <h2><b>How does it work?</b></h2> 
 
\t <div class="main1"> 
 
\t \t <p><b>It's simple!<br> Watch videos, do tasks and have fun! 
 

 
<br>After earning large amount of coins,<br> contact us to get your skins! 
 

 
<b></p> 
 
\t 
 
\t </div> 
 

 
\t <div class="video-wrapper"> 
 
\t <div class="video-container"> 
 
\t \t <iframe width="640" height="360" 
 

 
src="https://www.youtube.com/embed/lwItL2NXwDw" frameborder="5" 
 

 
allowfullscreen></iframe> 
 
\t </div> 
 
\t <!-- /video --> 
 
</div> 
 
<!-- /video-wrapper --> \t 
 
</body> 
 
</html>

+0

ありがとうございました、それは動作します:) –

+0

できれば、私の答えを受け入れることを検討してくださいそれは将来他の人に役立つかもしれません。 ;) –