icon form
-
Hello! It is necessary to place the bacon inside the right form. Ikon's not out. What's the problem?
An example of what should be.
My code is:
CSS
body{ width: 100%; overflow: hidden; } header{ width: 100%; border-bottom: 4px solid #828282; } .navigation{ padding: 0px; background-color: #24252d; height: 3em; padding-bottom: 10px; } /*.box { display: block; }*/ .social_networks { padding: 10px; float: right; }.box {
float: right;
padding: 18px;
}
.container-1{
width: 300px;
vertical-align: right;
}
.container-1 input#search{
width: 200px;
height: 28px;
background: #000000;
border: none;
font-size: 10pt;
color: #63717f;
padding-left: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 15px;
}input {
background-image: url('search.png');
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0px center;
padding-left: 18px;
z-index: 1;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="style.css" /
</head>
<body>
<div class="all">
<header>
<div class="navigation">
<div class="box">
<div class="container-1">
<form>
<!-- <span class="icon"><img src="search.png"></span> -->
<input type="search" id="search" placeholder="Search"/>
</form>
</div> <!--container-->
</div> <!--box-->
<div class="social_networks">
<img src="twitter.png">
<img src="facebook.png">
<img src="dribble.png">
<img src="lastfm.png">
<img src="linkedin.png">
<img src="tumblr.png">
</div><!--social_networks-->
</div><!--navigation-->
</div> <!--all-->
</header>
</body>
</html>
-
So check the firebug. Ctrl+Shift+i) and look what athribut is not what you want. And actually, I don't see the description of class icon or img. ♪ ♪ P.S. I hope the real span code doesn't have a clue?)
