需要帮助将文本居中并与背景颜色重叠

时间：2017-11-30 21:14:54

标签： html css

我无法集中我的主页文字（标签）。我不确定为什么它不起作用。

我有一个按钮，当用户将鼠标悬停在按钮上时会执行短动画。该按钮应该填充红色，但是当我更改#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 {
	position: relative;
	display: block;
	margin: 30px auto 0;
	padding: 14px 15px;
	color: #fff;
	font-size:14px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	overflow: hidden;
	letter-spacing: .08em;
	border-radius: 0;
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
	content: "";
	position: absolute;
	height: 0%;
	left: 50%;
	top: 50%;
	width: 150%;
	z-index: -1;
	-webkit-transition: all 0.75s ease 0s;
	-moz-transition: all 0.75s ease 0s;
	-o-transition: all 0.75s ease 0s;
	transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
	color: #FFF;
	text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
	height: 450%;
}
a.animated-button:link, a.animated-button:visited {
	position: relative;
	display: block;
	margin: 30px auto 0;
	padding: 14px 15px;
	color: #fff;
	font-size:14px;
	border-radius: 0;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	overflow: hidden;
	letter-spacing: .08em;
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
/*End Global Button Styles*/

/*Victoria Button Style 3*/
a.animated-button.victoria-three {
	border: 2px solid #D24D57;
	color: #333;
}
a.animated-button.victoria-three:after {
	background: #D24D57;
	opacity: .5;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
a.animated-button.victoria-three:hover:after {
	height: 140%;
	opacity: 1;
}


body{
	background-color: #EEEEEE;
	font-family: 'Montserrat', sans-serif;
}

a{
	text-decoration: none;
	color: #D24D57;

}

h1{
	padding: 10px;
	align: left;
}

.light_saber{
	align:bottom;
	margin:5px;
}

h2{
	align:center;
}


#container{
	width: auto;
	margin-left: 0px;
	margin-right: auto;
}

#header{
	background-color: #D24D57;
	color: white;
	padding: 10px;
}

#content{
	padding: 10px 10px 10px 10px; /*top right bottom left*/
	width: auto;
}

#nav{
	width: auto;
	height: auto;
	background-color: #999;
}

#nav ul{
	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{
	font-weight: bold;
}

#main{
	width: auto;
	height: 2000px;
	float: center;
	background-color: #999;
}

#main .profile_picture{
	border-radius: 20px;
	width: 250px;
	height: 350px;
	padding: 10px;
	float: right;
	background-color: #333;
}

#footer{
	clear: both; /*Lets get past all the floating elements and then display footer*/
	padding: 10px;
	background-color: #999;
	color: white;
	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">
  	<div id="header">
  	<h1>Siman Shrestha</h1>
      <div class="light_saber">
        <img src="light_saber.gif" alt="Whoops, something went wrong :-(">
      </div>
  	</div>

  	<div id="content">
        <div id="nav">
    	    <ul>
  			<li><a class="selected" href=""> Home </a></li> <!--creates a class tag and hyperlink*/-->
  			<li><a class="selected" href=""> About </a></li>
  		    <li><a class="selected" href=""> Contact </a></li>
  			</ul>
  		</div>

  		<div id="main">
  			<h2>Home Page</h2>
  			<img src="IMG_1689.jpg" class="profile_picture" alt="Whoops, something went wrong :-(">
  		    <!--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>

  	</div>

  	<div id="footer">
  		Copyright &copy; 2017 Siman Shrestha
  	</div>

  </div>

</body>
</html>

1 个答案:

答案 0 :(得分：0)

更改z-index工作

＆＃13;
＆＃13; 
/*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 {
	position: relative;
	display: block;
	margin: 30px auto 0;
	padding: 14px 15px;
	color: #fff;
	font-size:14px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	overflow: hidden;
	letter-spacing: .08em;
	border-radius: 0;
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
	content: "";
	position: absolute;
	height: 0%;
	left: 50%;
	top: 50%;
	width: 150%;
	z-index: -1;
	-webkit-transition: all 0.75s ease 0s;
	-moz-transition: all 0.75s ease 0s;
	-o-transition: all 0.75s ease 0s;
	transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
	color: #FFF;
	text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
	height: 450%;
}
a.animated-button:link, a.animated-button:visited {
	position: relative;
	display: block;
	margin: 30px auto 0;
	padding: 14px 15px;
	color: #fff;
	font-size:14px;
	border-radius: 0;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	overflow: hidden;
	letter-spacing: .08em;
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
/*End Global Button Styles*/

/*Victoria Button Style 3*/
a.animated-button.victoria-three {
	border: 2px solid #D24D57;
	color: #333;
    z-index:998;
}
a.animated-button.victoria-three span{
    z-index:999;
}

a.animated-button.victoria-three:after {
	background: #D24D57;
	opacity: .5;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
a.animated-button.victoria-three:hover:after {
	height: 140%;
	opacity: 1;
}


body{
	background-color: #EEEEEE;
	font-family: 'Montserrat', sans-serif;
}

a{
	text-decoration: none;
	color: #D24D57;

}

h1{
	padding: 10px;
	align: left;
}

.light_saber{
	align:bottom;
	margin:5px;
}

h2{
	align:center;
}


#container{
	width: auto;
	margin-left: 0px;
	margin-right: auto;
}

#header{
	background-color: #D24D57;
	color: white;
	padding: 10px;
}

#content{
	padding: 10px 10px 10px 10px; /*top right bottom left*/
	width: auto;
}

#nav{
	width: auto;
	height: auto;
	background-color: #999;
}

#nav ul{
	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{
	font-weight: bold;
}

#main{
	width: auto;
	height: 2000px;
	float: center;
	background-color: #999;
}

#main .profile_picture{
	border-radius: 20px;
	width: 250px;
	height: 350px;
	padding: 10px;
	float: right;
	background-color: #333;
}

#footer{
	clear: both; /*Lets get past all the floating elements and then display footer*/
	padding: 10px;
	background-color: #999;
	color: white;
	text-align: center;
}
＆＃13; 
<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">
  	<div id="header">
  	<h1>Siman Shrestha</h1>
      <div class="light_saber">
        <img src="light_saber.gif" alt="Whoops, something went wrong :-(">
      </div>
  	</div>

  	<div id="content">
        <div id="nav">
    	    <ul>
  			<li><a class="selected" href=""> Home </a></li> <!--creates a class tag and hyperlink*/-->
  			<li><a class="selected" href=""> About </a></li>
  		    <li><a class="selected" href=""> Contact </a></li>
  			</ul>
  		</div>

  		<div id="main">
  			<h2>Home Page</h2>
  			<img src="IMG_1689.jpg" class="profile_picture" alt="Whoops, something went wrong :-(">
  		    <!--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"><span>Resume</span></a>
            </div>
            <p>
                Saucin'
            </P>
        </div>

  	</div>

  	<div id="footer">
  		Copyright &copy; 2017 Siman Shrestha
  	</div>

  </div>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题