2
온라인 포트폴리오에 문제가 있습니다. 페이지의 오른쪽에 내비게이션이있는 위치와 동일한 div에서 배경으로 사용하고있는 이미지를 설정했습니다. 내 포트폴리오에 소개 텍스트를 주려고하지만 탐색 막대에 놓으면 내려갑니다. 이 문제를 해결할 수있는 방법이 있습니까?html 코드를 입력하면 Navbar가 움직입니다.
여기 내 코드입니다 :
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
*{
margin: 0 auto;
padding: 0;
}
#wrapper {
margin: 0 auto;
}
#background {
display: block;
background-image: url(images/profile/Untitled-1.jpg);
background-repeat:no-repeat;
background-size:contain;
-webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
filter: grayscale(80%);
margin: 0 auto;
border: 1px solid black;
}
header {
margin-left: 10px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
p {
display: block;
width: 20%;
font-size: 40px;
color: antiquewhite;
padding: 0;
margin: 0 auto;
}
body {
background-color: black;
}
footer{
color: antiquewhite;
}
h1 {
font-family:'Fjalla One', sans-serif;
color: floralwhite;
font-size: 300%;
}
ha {
display: block;
width: 50%;
font-family:'Titillium Web', sans-serif;
color: floralwhite;
font-size: 100%;
}
nav {
display: block;
margin-left: 80%;
border: 2px solid orange;
margin-bottom: 40%;
}
li{
display: inline-block;
padding: 20px;
margin: 9px 0px;
border-radius: 50px 0px 0px 50px;
border: 2px solid white;
width: 250px;
height: 50px;
text-align: center;
text-shadow: 2px 2px black;
font-size: 150%;
font-family: 'Fjalla One', sans-serif;
background-color: dimgray;
position: relative;
-webkit-transition-duration: 0.5s;
/* standard syntax*/
transition-duration: 0.5s;
-webkit-transition-property: transform;
/* standard syntax*/
transition-property: transform;
}
/* tabs will extend to left slightly*/
.stretch:hover {
-webkit-transform: translateX(-25px);
}
/* standard syntax*/
transform: translateX(-8px);
}
@keyframes extend{
from {width: 200px; left:0px;}
to {width: 600px; left: 200px;}
}
li:hover{
/* tabs will extend to left slightly*/
-webkit-animation-name: "extend";
-webkit-animation-duration: 2s;
animation-direction: reverse;
}
a:link {
text-decoration: none;
color: antiquewhite;
}
a:visited {
text-decoration: none;
color: antiquewhite;
}
a:hover {
text-decoration: none;
color: antiquewhite;
}
a:active {
text-decoration: none;
color: antiquewhite;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" media="screen" href="home.css">
<title>Tavyon Richardson</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<script src="jquery-3.1.1.min.js">
</script>
</head>
<body>
<div id="wrapper">
<header>
<h1>Tavyon Richardson</h1>
</header>
<p><span>Hey!</span>Welcome to my webiste. Here, you can see everything from my life story, to my my recent projects and resume.</p>
<div id="background">
<nav id="navbar">
<ul>
<li class="stretch"><a href="">About me</a></li>
<li class="stretch"><a href="">Courses</a></li>
<li class="stretch"><a href="http://tavyonrichardson.com/projects.html">Projects</a></li>
<li class="stretch"><a href="http://tavyonrichardson.com/nms_114/blog">Blog</a></li>
<li class="stretch"><a href="">Resume</a></li>
</ul>
</nav>
<footer>last updated November 2016</footer>
</div>
</div>
</body>
</html>
어디에서 텍스트를 추가 하시겠습니까? –
[mcve]를 추가하십시오 –
nav 요소 옆에 텍스트를 추가하고 싶습니다. –