-1
ホームページのテキスト（タグ）のセンタリングに問題があります。なぜそれが動作していないのか分かりません。テキストの中央揃えと背景色との重複のヘルプが必要
私は、ユーザーがボタンの上を移動したときに短いアニメーションを実行するボタンを持っています。ボタンは赤で塗りつぶされているはずですが、#mainコンテナの背景色を変更すると、ボタンのアニメーションが失われます。私はそれがメインの背景色の後ろに隠れていると仮定しているが、私はこの問題を解決する方法を知らない。
ありがとうございます！
/*CSS DOCUMENT*/
/* Notes:
Hashtags are for ID's and dots(.) are for classes
If you do #nav .selected for example, it would look for .selected within the nav ID.
*/
/*Import stuff for button animations */
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
/*Global Button Syles*/
a.animated-button:link, a.animated-button:visited {
\t position: relative;
\t display: block;
\t margin: 30px auto 0;
\t padding: 14px 15px;
\t color: #fff;
\t font-size:14px;
\t font-weight: bold;
\t text-align: center;
\t text-decoration: none;
\t text-transform: uppercase;
\t overflow: hidden;
\t letter-spacing: .08em;
\t border-radius: 0;
\t text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
\t -webkit-transition: all 1s ease;
\t -moz-transition: all 1s ease;
\t -o-transition: all 1s ease;
\t transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
\t content: "";
\t position: absolute;
\t height: 0%;
\t left: 50%;
\t top: 50%;
\t width: 150%;
\t z-index: -1;
\t -webkit-transition: all 0.75s ease 0s;
\t -moz-transition: all 0.75s ease 0s;
\t -o-transition: all 0.75s ease 0s;
\t transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
\t color: #FFF;
\t text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
\t height: 450%;
}
a.animated-button:link, a.animated-button:visited {
\t position: relative;
\t display: block;
\t margin: 30px auto 0;
\t padding: 14px 15px;
\t color: #fff;
\t font-size:14px;
\t border-radius: 0;
\t font-weight: bold;
\t text-align: center;
\t text-decoration: none;
\t text-transform: uppercase;
\t overflow: hidden;
\t letter-spacing: .08em;
\t text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
\t -webkit-transition: all 1s ease;
\t -moz-transition: all 1s ease;
\t -o-transition: all 1s ease;
\t transition: all 1s ease;
}
/*End Global Button Styles*/
/*Victoria Button Style 3*/
a.animated-button.victoria-three {
\t border: 2px solid #D24D57;
\t color: #333;
}
a.animated-button.victoria-three:after {
\t background: #D24D57;
\t opacity: .5;
\t -moz-transform: translateX(-50%) translateY(-50%);
\t -ms-transform: translateX(-50%) translateY(-50%);
\t -webkit-transform: translateX(-50%) translateY(-50%);
\t transform: translateX(-50%) translateY(-50%);
}
a.animated-button.victoria-three:hover:after {
\t height: 140%;
\t opacity: 1;
}
body{
\t background-color: #EEEEEE;
\t font-family: 'Montserrat', sans-serif;
}
a{
\t text-decoration: none;
\t color: #D24D57;
}
h1{
\t padding: 10px;
\t align: left;
}
.light_saber{
\t align:bottom;
\t margin:5px;
}
h2{
\t align:center;
}
#container{
\t width: auto;
\t margin-left: 0px;
\t margin-right: auto;
}
#header{
\t background-color: #D24D57;
\t color: white;
\t padding: 10px;
}
#content{
\t padding: 10px 10px 10px 10px; /*top right bottom left*/
\t width: auto;
}
#nav{
\t width: auto;
\t height: auto;
\t background-color: #999;
}
#nav ul{
\t list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#nav li {
float: left;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#nav .selected{
\t font-weight: bold;
}
#main{
\t width: auto;
\t height: 2000px;
\t float: center;
\t background-color: #999;
}
#main .profile_picture{
\t border-radius: 20px;
\t width: 250px;
\t height: 350px;
\t padding: 10px;
\t float: right;
\t background-color: #333;
}
#footer{
\t clear: both; /*Lets get past all the floating elements and then display footer*/
\t padding: 10px;
\t background-color: #999;
\t color: white;
\t text-align: center;
}<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Siman Shrestha</title>
<link href = "stylesheet.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="container">
\t <div id="header">
\t <h1>Siman Shrestha</h1>
<div class="light_saber">
<img src="light_saber.gif" alt="Whoops, something went wrong :-(">
</div>
\t </div>
\t <div id="content">
<div id="nav">
\t <ul>
\t \t \t <li><a class="selected" href=""> Home </a></li> <!--creates a class tag and hyperlink*/-->
\t \t \t <li><a class="selected" href=""> About </a></li>
\t \t <li><a class="selected" href=""> Contact </a></li>
\t \t \t </ul>
\t \t </div>
\t \t <div id="main">
\t \t \t <h2>Home Page</h2>
\t \t \t <img src="IMG_1689.jpg" class="profile_picture" alt="Whoops, something went wrong :-(">
\t \t <!--Resume Button-->
<div class="col-md-3 col-sm-3 col-xs-6">
<a href="CS Resume- 10_2017.pdf" class="btn btn-sm animated-button victoria-three">Resume</a>
</div>
<p>
Saucin'
</P>
</div>
\t </div>
\t <div id="footer">
\t \t Copyright © 2017 Siman Shrestha
\t </div>
</div>
</body>
</html>
の作品変えるあなたは、最小限の例を提供することはできますか？ – jhpratt