Я следую учебнику из книг по html и css.
Я попытался сделать простой дизайн заголовка, как YouTube, но я не могу получить окно поиска и кнопку для правильного отображения. Кнопка отображается примерно на 10px ниже, чем окно поиска, как если бы у нее был установлен верхний отступ.
Здесь можно увидеть http://www.wourm.com/index.html
Кто-нибудь может понять, почему это происходит?
[ РЕДАКТИРОВАТЬ: Добавление HTML и CSS на эту страницу ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Awtunes.com</title>
<link href="awtunes.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="header">
<div class="logo floatL"><img src="images/logo.png" alt="Awtunes.com logo"/></div>
<div id="find-videos" class="search floatL" style="top:0px;" >
<form id="searchVideos" name="searchVideos" method="get" action="/">
<input name="q" type="text" class="searchBox" id="searchBox" /><input type="submit" class="searchbutton" value="" />
</form>
</div>
<div class="menu floatL">
<ul>
<li>Videos</li>
<li>Music Videos</li>
<li>Trailers</li>
<li>Create Account</li>
<li>Sign in</li>
</ul>
</div>
</div>
</div>
</body>
</html>
и КСС
.awtunes {
font-family: "Courier New", Courier, monospace;
}
.container {
width: 980px;
top: 0px;
margin-left: auto ;
margin-right: auto ;
}
.floatL {
float: left;
position:relative;
}
.floatR {
float: right;
position:relative;
}
.searchBox {
border-style:none;
border-width:0px;
width: 360px;
background-image: url(images/search_bar.png);
background-repeat:no-repeat;
height: 40px;
font-size: 18px;
}
.searchbutton {
border-style:none;
border-width: 0px;
background-repeat:no-repeat;
background-image: url(images/search_button.png);
background-repeat: no-repeat;
width: 55px;
height: 40px;
}
.logo {
width: 122px;
height: 50px;
}
.menu {
width:430px;
}
.search {
width: 425px;
height: 40px;
}
.split {
background-image: url(images/split.jpg);
background-color: #C0C0C0;
background-repeat: no-repeat;
width: 1px;
height: 18px;
}
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(images/split.jpg);
background-repeat: no-repeat;
float: left;
margin: 0 0.15em;
}