Search code examples
htmlcssbuttonstyling

HTML button not working after adding css to a h3

I wanted my h3 to be aligned with my buttons so I made its position absolute and a couple other things. If you want to view the problem you can go here. I don't know anything else I could use to describe the problem. Oh and the show is Once Upon A Time Season 5. Any help will be appreciated greatly.

Solution

  • Try these changes in your html code

    <form method="get">
  <h3 class="watching_what">
    <button class="change" style="float:left;" type="submit" name="episode_num" value="0">Previous</button>
        You Are Watching Episode 1          
    <button class="change" style="float:right;" type="submit" name="episode_num" value="2">Next</button>
  </h3>
</form>

    And in your css code remove the transform property

    .watching_what 
{
  text-align: center;
  color: 003099;
  position: absolute;
  /* position: element(#target); */
  /* transform: translateY(-100%); */
  left: 0px;
  right: 0px;
  padding-top: 18pt;
  padding-bottom: 18pt;
}