이 웹 페이지를 만들려고하는데 문제가 너무 많습니다. #titlediv를 중앙에 놓을 수없고 navbar가 때때로 사라집니다. 나는 거짓말하지 않을 것입니다. 그것은 큰 해결책이 될 수 있습니다. 정말 잘 모르겠습니다. 그러나 누군가가 그것을 구할 수 있다면 여기에 링크가 있습니다.
http://jsfiddle.net/glenohumeral13/c604vbrn/
암호:
<body>
<div id="parallaxish"></div>
<div id="navbar">
<nav>
<a href="#item1">Item1</a>
<a href="#item2">Item2</a>
<a href="#item3">Item3</a>
</nav>
</div>
<div id="contentdiv">
<div id="welcome">
<div id="titlediv">
<h1>Title will go here</h1>
</div>
</div>
<div class="barrier"></div>
<div id="item1">
<h1>Item1</h1>
</div>
<div class="barrier"></div>
<div id="item2">
<h1>Item2</h1>
</div>
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
color: #fff;
background-color: #000;
font-family: Helvetica, Arial, sans-serif;
}
img {
max-width: 100%;
height: auto;
}
#parallaxish {
background-image: url('http://24.media.tumblr.com/tumblr_m54j1nIYN21r0k830o1_500.jpg');
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-position: center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
width: 100%;
height: auto;
}
#navbar {
float:right;
height: 30px;
margin-right: 100px;
}
nav a {
text-decoration: none;
display: inline;
list-style-type: none;
padding-right: 15px;
padding-top: 10px;
float: left;
-webkit-transition: color 1s ease-out;
-moz-transition: color 1s ease-out;
-o-transition: color 1s ease-out;
transition: color 1s ease-out;
font-weight: 100;
color: #fff;
-webkit-font-smoothing: antialiased;
}
nav a:hover {
color: #16a085;
}
#welcome {
height: 600px;
width: 100%;
text-align: center;
text-transform: uppercase;
background-color: black;
}
#welcome h1, #item1 h1, #item2 h1 {
font-weight: 100;
-webkit-font-smoothing: antialiased;
}
#titlediv {
border: 2px solid #fff;
width: 180px;
margin: auto;
padding: auto auto;
position: absolute;
left: 0;
right: 0;
overflow: auto;
}
.barrier {
height: 120px;
width: 100%;
background: transparent;
}
#item1 {
height: 600px;
width: 100%;
text-align: center;
background-color: white;
color: #16a085;
}
#item1 h1, #item2 h1 {
padding: 5% 0;
}
#item2 {
height: 600px;
width: 100%;
text-align: center;
background-color: black;
color: white;
}
우선 데모!
http://jsfiddle.net/ImagineStudios/c604vbrn/10/
수행하려는 작업이 div에서 수직 및 수평 중앙에있는 것처럼 보입니다. 맞습니까?
CSS로이 작업을 수행하는 간단한 방법이 있는데, 매우 유용합니다.
<div id="welcome">
<div id="titlediv">
<h1>Title will go here</h1>
</div>
</div>
우선 position:relative;div에 제공 합니다 id="welcome".
/*With your current CSS*/
#welcome {
height: 600px;
width: 100%;
text-align: center;
text-transform: uppercase;
background-color: black;
position:relative;
}
그리고 마법! 이 <div> id="titlediv"주어진다 position:absolute;과 다른 몇 가지 규칙 :
#titlediv {
border: 2px solid #fff;
width: 180px;
margin: auto;
padding: auto auto;
position: absolute;
width: 180px;
height: 76px;
left: 0;
right: 0;
top:0;
bottom:0;
overflow: auto;
}
이 작은 트릭은 너비와 높이가 선언 된 경우에만 작동합니다. 이제 탐색 표시 줄이 쉽게 수정되었습니다.
#navbar {
position:absolute;
top:0;
right:100px;
height: 30px;
z-index:10;
}
그리고 모든 것을 마무리하기 위해 전체 화면 데모!
http://jsfiddle.net/ImagineStudios/c604vbrn/10/embedded/result/
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다