1
Ich versuche, eine einfache Suchmaske zu machen. Es hat eine Suchleiste und eine Tabelle. Die Tabelle wird nach einigen Suchanfragen angezeigt. Aber für mich kommen diese zwei Elemente übereinander.HTML CSS Elemente kommen über einander
Hier ist mein HTML
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Store Dashboard</title>
<link rel="stylesheet" href="css/dashboard.css">
</head>
<body>
<nav class="navigation">
<div class="container">
<span class="title">
<i class="fa fa-home"></i> Store Dashboard
</span>
<span class="search-control" onclick="">
Log Out <a style="font-family:fontawesomqe;"></a>
</span>
</div>
</nav>
<div class="container">
<div class="search-box" id="SBox">
<input id="search" placeholder="Search..." type="text">
<div class="also search-link" onclick="" id="searchclick"></div>
</div>
</div>
<div class="container">
<table>
<tbody>
<tr>
<th>Head 1</th>
<th>Head 2</th>
</tr>
<tr>
<td>Example 1</td>
<td>Example 2</td>
</tr>
<tr>
<td>Example 6</td>
<td>Example 7</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hier ist meine CSS:
@import url('http://fonts.googleapis.com/css?family=Cookie');
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
@import url('http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
*{margin:0px;padding:0px;}
body{
background-color:#eee;
}
.navigation {
background-color:#fff;
width:100%;
height:50px;
box-shadow: 0px 1px 1px #c8c8c8;
line-height:52px;
color:#62bb49;
}
.container {
width:760px;
margin:auto;
position: relative;
}
.title {
font-family:'Cookie';
font-size:32px;
cursor: pointer;
}
.search-control{
font-family:'Open Sans';
position: absolute;
right:0;
cursor: pointer;
color: #bbb;
}
.search-control:hover {color:#686868;}
.fa-home {
font-size:22px;
}
.search-box {
width:100%;
position: relative;
top:48px;
height:48px;
transition:opacity 0.4s linear ,visibility 0.4s linear 0s;
}
.search-box > #search {
width:640px;
height:48px;
border-radius:6px 0px 0px 6px;
box-shadow:none;
box-shadow: 1px 2px 2px #ddd;
}
input , input:focus {
border:none;
box-shadow:none;
background-color:none;
outline: 0;
font-size:16px;
font-family:'Open Sans';
color:#bbb;
padding:0px 12px;
}
.also {
font-family:'fontawesome';
color:#bbb;
display:inline-block;
background-color:#fff;
height:48px;
width:48px;
line-height: 48px;
text-align: center;
cursor: pointer;
border-left:1px solid #ddd;
position: absolute;
top:0;
box-shadow: 1px 2px 2px #ddd;
}
.search-link:hover {color:#686868;}
.setting {
border-radius:0px 6px 6px 0px;
margin-left:48px;
font-size:18px;
}
.setting:hover {color:#686868;}
.flat-table {
display: block;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 115%;
overflow: auto;
width: auto;
}
th {
background-color: rgb(112, 196, 105);
color: white;
font-weight: normal;
padding: 20px 30px;
text-align: center;
}
td {
background-color: rgb(238, 238, 238);
color: rgb(111, 111, 111);
padding: 20px 30px;
}
Kann jemand vorschlagen, was ich falsch mache?
Willkommen zu stackOverflow, wenn eine Antwort hilft Ihnen [vote it up] (http://meta.stackexchange.com/questions/173399/how-to-upvote-on-stack-overflow), Wenn die Antwort was ist Sie suchen für die zukünftigen Leser markieren Sie es als [Correct answe] (http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work). Vielen Dank! –