ページを凝縮するときにdiv内のボタンを安定させる方法

Question

ページを凝縮するときに私の「ホーム」ボタンがdivに上がります。ページが圧縮されているときにdivの中央にとどまるようにボタンを安定させる最善の方法は何ですか？私はいろいろなことを試みましたが、これまでのところ何も働いていないので、このサイトの誰かがこの問題に答えるのを助けてくれることを願っています。私は成功せずに多くの異なることを試みました。

JS/CSS/HTML

$(document).ready(function() { 
 

 
    //mouseenter overlay 
 
    $('ul#gallery li').on('mouseenter', function() { 
 

 
    // Get data attribute values 
 
    var title = $(this).children().data('title'); 
 
    var desc = $(this).children().data('desc'); 
 

 
    //validation 
 
    if (desc == null) { 
 
     desc = 'Click To Enlarge'; 
 
    } 
 

 
    if (title == null) { 
 
     title = ''; 
 
    } 
 

 
    //Create overlay div 
 
    $(this).append('<div class="overlay"></div>'); 
 

 
    //Get the overlay div 
 
    var overlay = $(this).children('.overlay'); 
 

 
    // Add html to overlay 
 
    overlay.html('<h3>' + title + '</h3><p>' + desc + '</p>'); 
 

 
    // Fade in overlay 
 
    overlay.fadeIn(400); 
 
    }); 
 

 
    $('ul#gallery li').on('mouseleave', function() { 
 

 
    //Create overlay div 
 
    $(this).append('<div class="overlay"></div>'); 
 

 
    //Get the overlay div 
 
    var overlay = $(this).children('.overlay'); 
 

 
    //Fade out overlay 
 
    overlay.fadeOut(200); 
 
    }); 
 

 
});

body{ 
 
    background-color: white; 
 
    font-family:Orbitron; 
 
    color:white; 
 
    width:100% 
 
} 
 

 
.fa-stack-overflow{ 
 
color: #f48024 
 
} 
 

 
.fa-github{ 
 
color:rgb(102,43,129); 
 
} 
 

 
.fa-linkedin{ 
 
color:rgb(0,127,178); 
 
} 
 

 
.fa-facebook-official{ 
 
color:rgb(59, 89, 153); 
 
} 
 

 
.nav-pills{ 
 
font-size: 1.7em; 
 
background-color: none; 
 
margin-bottom: 10%; 
 
color:white; 
 
} 
 

 

 
.block{ 
 
    background-color: #337ab7; 
 
    opacity: .7; 
 
    padding:10px; 
 
    width:50%; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    border-radius:5px; 
 
} 
 

 

 
h1{ 
 
    padding:0; 
 
margin-top: 0px; 
 
font-size: 5.0em; 
 
} 
 

 
.btn-default{ 
 
font-size:1.7em; 
 
color:#337ab7; 
 
} 
 

 

 
.pageOne{ 
 
    background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); 
 
    background-repeat: none; 
 
    background-size: cover; 
 

 
    height: 1000px; 
 

 
} 
 

 
/* 
 
parallax effect start 
 
*/ 
 
.pageOne, .pageThree{ 
 
position: relative; 
 
background-position: center; 
 
background-size: cover; 
 
background-repeat: no-repeat; 
 
background-attachment: fixed; 
 
} 
 

 

 

 
/* 
 
parallax effect end 
 
*/ 
 

 
.pageTwo{ 
 
background: white; 
 
color:#337ab7; 
 
background-repeat:no-repeat; 
 
background-size: cover; 
 
height: 400px; 
 
padding-top: 5%; 
 
border-bottom:#00bfff 3px solid; 
 
border-top:#00bfff 3px solid; 
 
background-attachment: fixed; 
 
} 
 

 

 
.boxed{ 
 
    font-size: 1.7em; 
 
text-align: center; 
 
margin-right: auto; 
 
margin-left: auto; 
 
margin-bottom: 100px; 
 
} 
 

 

 

 

 
.me{ 
 
height: 850px; 
 
    display:block; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 

 
} 
 

 
.pageThree{ 
 
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb); 
 
background-repeat: none; 
 
background-size: cover; 
 
height: 800px; 
 
padding-top:6%; 
 
background-attachment: fixed; 
 
} 
 

 
.button{ 
 
    background-size: contain; 
 
} 
 

 
.container{ 
 
    width:80%; 
 
    margin:auto; 
 
    overflow:auto; 
 
} 
 

 
section{ 
 
    padding:20px 0; 
 
    overflow:hidden; 
 
    padding-bottom: 5%; 
 
    margin-top: 2.5%; 
 
} 
 

 
#gallery{ 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 
#gallery li{ 
 
    display: block; 
 
    float: left; 
 
    width: 23%; 
 
    cursor: pointer; 
 
    border: 5px; 
 
    box-sizing: border-box; 
 
    margin: 0 12px 7px 0; 
 
    position: relative; 
 
} 
 

 
#gallery img{ 
 
    width:100%; 
 
    border-radius:5% 
 
} 
 

 
.overlay{ 
 
    display:none; 
 
    background:#337ab7 url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb) no-repeat top center; 
 
    color:#fff; 
 
    position:absolute; 
 
    top:0; 
 
    z-index:100; 
 
    width:100%; 
 
    height:100%; 
 
    padding:20px; 
 
    border-radius:5%; 
 
    box-sizing: border-box; 
 
    pointer-events: none; 
 
    opacity: .7; 
 
} 
 

 
.overlay h3{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.pageThreeFooter{ 
 
    background: black; 
 
    color:#337ab7; 
 
    background-repeat: none; 
 
    background-size: cover; 
 
    height: 150px; 
 
    padding-top: 2.5%; 
 
    background-attachment: fixed; 
 

 
} 
 

 

 

 
.pageFour{ 
 
    background: white; 
 
    color:#337ab7; 
 
    background-repeat: none; 
 
    background-size: cover; 
 
    height: 300px; 
 
    padding-top: 2.5%; 
 

 
} 
 

 
.black{ 
 
    color:black; 
 
}

<!DOCTYPE html> 
 

 
<html> 
 
    <head> 
 
<title>Daniel's Portfolio | Welcome</title> 
 
<link rel="stylesheet" href="CSS/bootstrap.min.css"> 
 
<link rel="stylesheet" href="CSS/style.css"> 
 
<link rel="stylesheet" href="CSS/font-awesome.min.css"> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="js/main.js"></script> 
 
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet"> 
 

 
</head> 
 
<body> 
 
<div class="pageOne text-center"> 
 
    <ul class = "nav nav-pills"> 
 
<li> 
 
    <a href="#">Daniel Collins</a> 
 
</li> 
 
<li class="pull-right"> 
 
    <a href="#p4">Contact Me</a> 
 
</li> 
 
<li class="pull-right"> 
 
    <a href="#p3">Portfolio</a> 
 
</li> 
 
<li class="pull-right"> 
 
    <a href="#p2">About Me</a> 
 
</li> 
 
</ul> 
 

 
<div class="block text-center" id="p1"> 
 
<h1>Daniel's Portfolio Website</h1> 
 
<h2>Various Web Projects</h2> 
 
</div> 
 
<div class = "btnList text-center"> 
 
    <a class = "btn btn-default" href="https://stackoverflow.com/users/7024823/daniel"><i class="fa fa-stack-overflow" aria-hidden="true"></i>Stack Overflow</a> 
 
    <a class = "btn btn-default" href="https://github.com/casteyes"><i class="fa fa-github" aria-hidden="true"></i>GitHub</a> 
 
    <a class = "btn btn-default" href="https://www.linkedin.com/in/daniel-collins-927b1ab0/"><i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin</a> 
 
    <a class = "btn btn-default" href="https://www.facebook.com/daniel.p.collins1"><i class="fa fa-facebook-official" aria-hidden="true"></i>Facebook</a> 
 
</div> 
 
</div> 
 
<div class= "pageTwo text-center" id="p2"> 
 

 

 
     <h2>Daniel Collins</h2> 
 
<div class="boxed"> 
 
     <p class="black"> 
 
     I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many 
 
     different areas of web development from back end programming (MySQL, PHP, C#, Java) to front end engineering 
 
     (HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design. 
 
</p> 
 
</div> 
 

 
    </div> 
 
<div class= "pageThree" id="p3"> 
 
<header> 
 
<div class="block text-center"> 
 
    <h1 class = "logo">Portfolio</h1> 
 
</div> 
 
</header> 
 
<section> 
 
<div class="container"> 
 
    <h1 id="heading">Projects</h1> 
 
    <ul id="gallery"> 
 
    <li><a href="" data-title="Project 1" data-desc="This is the first project"></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> 
 
    <li><a href="" data-title="Project 2" data-desc="This is the second project"></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> 
 
    <li><a href="" data-title="Project 3" data-desc="This is the third project"></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> 
 
    <li><a href="" data-title="Project 4" data-desc="This is the fourth project"></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> 
 
    <li><a href="" data-title="Project 5" data-desc="This is the fifth project"></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> 
 
    <li><a href="" data-title="Project 6" data-desc="This is the sixth project"></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> 
 
    <li><a href="" data-title="Project 7" data-desc="This is the seventh project"></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> 
 
    <li><a href="" data-title="Project 8" data-desc="This is the eighth project"></a> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li> 
 
    </ul> 
 
</div> 
 
</div> 
 
</section> 
 
<div class="pageThreeFooter text-center"> 
 
    <div class="row"> 
 
    <a href="#p1" class="btn btn-primary btn-x2 text-center">Home</a> 
 
</div> 
 
</div> 
 
<div class= "pageFour text-center" id="p4"> 
 
    <div class="container"> 
 
       <div class="row"> 
 
        <div class="col-lg-8 col-lg-offset-2 text-center"> 
 
         <h2 class="section-heading">Let's Get In Touch!</h2> 
 
         <hr class="primary"> 
 
         <p class="black">Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!</p> 
 
        </div> 
 
        <div class="col-lg-4 col-lg-offset-2 text-center"> 
 
         <i class="fa fa-phone fa-3x sr-contact"></i> 
 
         <p class="black">555-5555</p> 
 
        </div> 
 
        <div class="col-lg-4 text-center"> 
 
         <i class="fa fa-envelope-o fa-3x sr-contact"></i> 
 
         <p class="black"><a class="black" href="mailto:casteyestothesun@gmail.com">myemail.com</a></p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
</div> 
 
    </body> 
 
</html>

Answer 1

あなたは重要な応答メタタグ不足している：

<meta name="viewport" content="width=device-width, initial-scale=1"> 

をしかし、あなたは応答フレームワークであるブートストラップを使用しています。だから、あなたの質問への答えは、Bootstrapを勉強し理解することと、サイトが反応することを意味するものをより一般的に勉強することです。

Answer 2

1つまたは2つのものを変更するだけではなく、ウェブサイトを反応させることには多くのことがあります。これらの要素の各要素またはコンテナがどのようにして自分自身の責任において反応するのかについて実際に計画する必要があります。また、すべてのコンテンツのラップまたはコンテナがどのように動作し、画像、テキスト/フォントなどもどのように応答するかについても説明します。

これはあまりにも広すぎて簡単に答えられないことがあります。

すでにブートストラップを使用しているので、これを最大限に活用する方法を研究し、簡単にウェブサイトを反応させることができます。

Answer 3

あなたが推測したように、これを行うにはメディアクエリが適しています。

あなたは仕事にこれらのためにあなたのヘッダーにこのタグを追加する必要があります：

<meta name="viewport" content="width=device-width, initial-scale=1"> 

あなたのブレークポイントの設定については行くことができる2つの方法があります - 最小幅または最大幅によっては。

すでにほとんどのスタイルを書いているので、分の幅がおそらく理にかなっています。ブレークポイントが複数ある場合は、min-widthとmax-widthを1つのクエリに組み合わせて、他のメディアクエリとの競合を避けることができます。

ホームボタンは、要素を垂直方向にセンタリングする方法を調べることをおすすめします。このガイドはかなり便利です：https://css-tricks.com/centering-css-complete-guide/