私は非常に奇妙な問題を抱えています、そして私は原因がわかりません。私のページの要素は、定義された場所に固執しておらず、むしろ上向きに「ジャンプ」しています。
私の現在のレイアウトは次のようになります。以下のHTMLとCSSを使用します。
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 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);
}
わかりやすくするために、問題のある各要素に境界線を追加しました。私はもともとすべてを正しくレイアウトしていましたが、どこかで何かが発生し、私の人生ではそれを理解することができません。私はこれに何週間も苦労してきました！小さくてシンプルなものだと確信していますが、解決策は完全に私を避けています。
明らかに、意図した結果は次のようになります（検索バーの表示は無視してください。これは、検索バーが修正される前の初期のモックアップです）。
