CODEWITHSUNDEEP
htmlcssbuttonvertical-alignment
Mr Guliarte
Mr Guliarte

Reputation: 739

CSS: Can't move my button vertically

I got the following simple HTML code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
      <div id="bar">
          <span>
               Palavra       
          </span>
      <form>
          <input class="buttom" type="submit" value=""> 
      </form>
  </div>

  </body>
</html>

And my CSS code is like this:

#bar{
    width:100%;
    height:7%;
    background-color:#5959AB;
    color:white;
    font-family:"Arial";
    font-size:150%;
    font-weight: bold;
    line-height: 190%;
}

.buttom{
background: url(icone_dicionario.jpg) no-repeat;
cursor: pointer;
width: 40px;
height: 41px;
}

input{
    position:relative;
    bottom:1000%;
    left:13%;
}



html, body{
height:100%;
}

Take a look at the input style on the CSS. The element it represents (a button in a dictionary icon) is obeying the horizontal position ("left: 13%") i give it, but not the vertical (don't matter the value I put on it), as you can see:

can someone help me?

PS: I want the button to appear inside the bar, aside that word...

Upvotes: 1

Views: 4008

Answers (4)

PavKR
PavKR

Reputation: 1621

Why not just use 'display: inline-block'?

eg.

#bar span {display: inline-block}
form {display: inline-block}

See the fiddle here: http://jsfiddle.net/pavkr/483pm2x6/2/

Upvotes: 0

Todd Mark
Todd Mark

Reputation: 1885

JSFiddle

Just add the attribute top: -40px; to the input style. Because the input's width is fixed.

input{
    position:relative;
    bottom:1000%;
    left:13%;
    top:-40px;
}

Upvotes: 1

ymz
ymz

Reputation: 6914

you set "position:relative;" for your input. the name "relative" implies that the element's position is relative to itself. if you want to make it vertical, you may choose one of the followings:

  1. use top instead of botoom and use pixels (px) instead of percentage (%)
  2. use "position:absolute;" and use way smaller units or else the element will vanish from the visible part of the screen

if you want the icon to be inside the bar you must specify a position to the bar class. something like:

 #bar
 {
   position:relative;
  /* rest of css */
 }

then you may use the absolute position for you icon. place in with top:0px; and right:0px; to make it "stick" to the top-right corner of your bar

Upvotes: 0

DAB
DAB

Reputation: 1343

you probably want to make your div position relative and your button position absolute, then set the top position instead of the bottom. you can use negative numbers for the position as well.

Upvotes: 0

Related Questions