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?)


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2