How to put an image in front of a button?

Asked

Viewed 2,104 times

4

I am trying unsuccessfully to put an image (Facebook icon) in front of a form newsletter:

I tried to adjust the size, but was unsuccessful due to my poor CSS knowledge, I tried to narrow down the field of form and even the position of the button.

This is the html of form:

<div id="newsletter-wrap">
    <form action="newsletter.php"  method="post" class="content-form clearfix" id="newsletter-form">
        <input type="submit" class="button" name="button" id="button" value="Enviar" />
        <input id="newsletter" type="email" name="newsletter" placeholder="Fique por dentro de nossas ofertas">
     </form>
     <img src="imagens/icone-facebook.png" width="29" height="29">
     <p class="status"></p>             
     <br>
</div>

I have this CSS from form:

#newsletter-wrap {
    padding-top: 1px;
    /*border-top: 1px solid #e5e5e5;*/
}

#newsletter-form input#newsletter {
    float: left;
    width: 360px;
    margin-right: 10px;
}

#newsletter-form input.button {
    float: right;
    margin-right: 0;
    margin-bottom: 5px;
}

#newsletter-wrap .tip {
    margin-top: 7px;
}

The form of newsletter is inside a div:

<div class="one-half column-last">O formulário está aqui</div>

.one-half {
   width: 80%;
   max-width: 460px;
}

.column-last { 
   margin-right: 0 !important;
}
css

  • in front? replace?

  • I just need to put the facebook image in front of the button "send" form @Matheus Cristian

  • see if the answer below meets you....

  • Hello @Matheus Cristian, the image has now gone to the right but still below the form, thanks for having responded.

  • of what size is the form? if possible try to increase it

  • These responses saying to "put inside the form"... I don’t agree it’s the best way for obvious reasons: The image is not part of the form.

Show 1 more comment

2 answers

3

The image is outside the form and how form is a block then the image has to be inside the tag form, try to put the tag img within the form and add your css:

#newsletter-wrap img{
    display:block;
    float:right;
}

3


Edit the structure. If the button comes afterward of input there’s no reason to put him before in HTML.

<form action="newsletter.php" method="post" class="content-form clearfix" id="newsletter-form">
  <input id="newsletter" type="email" name="newsletter" placeholder="Fique por dentro de nossas ofertas">
  <input type="submit" class="button" name="button" id="button" value="Enviar">
  <img src="imagens/icone-facebook.png" width="29" height="29">
</form>

To adjust your layuot and make room for the img stand to the right:

.one-half {
  width: 80%;
  max-width: 500px;
}

The input and the button are aligned with float: left and the img with float: right.

#newsletter-form input#newsletter {
   float: left;
   width: 360px;
   margin-right: 10px;
   display: inline;
}

#newsletter-form input.button {
  float: left;
  margin-right: 0;
  margin-bottom: 5px;
  display: inline;
}

#newsletter-wrap img {
  float: right;
  display: inline;
}

Upshot:

inserir a descrição da imagem aqui

If you want to bring the facebook icon closer to the Send button, just add one margin-right in the img and go adjusting until you get where you want.

  • Exceptional tip @André Ribeiro, thanks for the great help.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.