1
매우 이상한 문제가 있습니다. 원인을 알 수 없습니다. 내 페이지의 요소가 정의 된 장소에 고정되어 있지 않고 오히려 위쪽으로 '점프'하고 있습니다. 나는 각 요소에 테두리를 추가 한요소가 위쪽으로 이동하는 CSS
/* HTML reset */
html, * {
margin: 0px;
padding: 0px;
}
/* General styling */
body {
font-family: 'RobotoLtRegular', Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 1em;
color: white;
background-color: black;
line-height: 20px;
letter-spacing: 1.5px;
}
/*Custom link styles*/
a:link {
color: white;
background-color: transparent;
text-decoration: none;
-webkit-transition: color .4s linear;
-moz-transition: color .4s linear;
-ms-transition: color .4s linear;
-o-transition: color .4s linear;
transition: color .4s linear;
}
a:visited {
color: white;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: #b70000;
background-color: transparent;
text-decoration: underline;
}
.logo a:link {
text-decoration: none;
}
.logo a:hover {
color: #b70000;
background-color: transparent;
}
/* Header styling */
header {
margin-bottom: 20px;
}
header, footer {
height: 50px;
padding-left: 50px;
padding-right: 50px;
font-size: .75em;
clear: both;
}
header nav, .logo, footer nav {
float: left;
}
header nav, footer nav, #header_search, #copyright {
margin-top: 20px;
}
header li, footer li {
display: inline;
}
#header_search {
width: 200px;
float: right;
clear: right;
}
#search input, #homesearch input {
padding: 0px 20px 0px 20px;
color: #d7d7d7;
background-color: #2d3035;
border: solid 4px #2a2e31;
}
#search input:focus, #homesearch input:focus {
outline: none;
background-color: white;
color: #6a6f75;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
#search input {
width: 80%;
height: 25px;
font-size: 1.5em;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
/* Logo styling */
.logo {
font-family: 'RobotoLtRegular', Verdana, Helvetica, Arial, sans-serif;
font-size: 3em;
width: 200px;
margin-right: 10px;
clear: left;
border: solid 1px red;
}
/* Content wrapper */
#content {
width: 90%;
max-width: 1500px;
margin: auto;
padding: 30px 15px 30px 15px;
clear: both;
overflow: auto;
background-color: rgba(203,203,203,0.2);
background-image: url(assets/images/bkg.png);
background-repeat: repeat;
}
/* Homepage */
#home_banner {
padding-top: 50px;
font-weight: normal;
text-align: center;
border: solid 1px red;
}
#home_banner h1 {
font-size: 5em;
clear: both;
border: solid 1px blue;
}
#home_banner h2, #search input, #homesearch input, #searchresults, #details .title {
font-family: 'RobotoThRegular', Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
}
#home_banner h2 {
font-size: 1.8em;
clear: both;
border: solid 1px yellow;
}
#homesearch {
width: 480px;
margin: 80px auto 70px auto;
clear: both;
}
#homesearch input {
width: 90%;
font-size: 2em;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}
HTML
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Screening - Your movie database | Discover. Watch. Share.</title>
<meta name="description" content="Screening is a brand new take on the traditional movie database, fusing social networking and multimedia to provide a clear, concise experience allowing you to share your favourite movies, and discover new classics.">
<meta name="keywords" content="Movies, Films, Screening, Discover, Watch, Share, experience, database, movie database, film database, share film, share films, discover film, discover films, share movie, share movies, discover movie, discover movies">
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<link rel="stylesheet" href="fonts.css" type="text/css" />
</head>
<body>
<header>
<p class="logo"><a href="index.php" id="logo">Screening</a></p>
<nav>
<ul>
<li><a href="index.php" title="Home">Home</a></li>
</ul>
</nav>
<section id="header_search">
<form id="search" action="search.php" method="get">
<input type="text" title="name" name="title" placeholder="search for a movie">
</form>
</section>
</header>
<div id="content">
<div id="home_banner">
<h1>Discover. Watch. Share.</h1>
<h2>Screening. Your movie database.</h2>
</div>
<form id="homesearch" action="search.php" method="get">
<input type="text" title="name" name="title" placeholder="search for a movie">
</form>
</div>
<footer>
<p class="logo"><a href="index.php" id="logo">Screening</a></p>
<nav>
<ul>
<li><a href="index.php" title="Home">Home</a> | </li>
<li><a href="about.php" title="About">About</a> | </li>
<li><a href="privacy.php" title="Privacy Policy">Privacy Policy</a></li>
</ul>
</nav>
<p id="copyright">©Screening 2012</p>
</footer>
</body>
</html>
CSS :
나의 현재 배치는 아래의 HTML과 CSS로, 이렇게 본다 나는 혼란스러워서 문제가있다. 목적. 나는 원래 모든것을 올바르게 배치했지만, 어딘가에 뭔가가 쏠리고 내 인생을 생각할 수 없다. 나는 몇 주 동안 이것으로 고투하고있다! 나는 그것이 작고 단순한 무언가 일 것이라고 확신하지만 해결책은 완전히 나를 피합니다. 
당신은 절대 "내용"ID로 사업부 .IE 주요 사업부를 만든 다음 "상대"로 자식 div의 위치를한다면? 그것은 당신의 문제를 해결할 수 있습니다. –
@ TheDarkKnight : 아니요. –