samedi 8 août 2015

Button interfering with table below it?

I have a problem with a webpage I'm currently working on:

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Title</title>
</head>
<body>
  <form action="/cgi-bin/play.cgi" method="GET">
    <input type="submit" title="Play" class="play-button" value="">
  </form>
  <span class="number">1252</span><br>
  <table>
...

CSS:

.play-button {  
  background: url(/images/play-button.png) no-repeat;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border: none;
  float: left;
}

.number {
  color: white;
  float: right;
}

The code above results in a button in the left and a number in the right side, both on the same line. Below is a centered table. My problem is that the table is pushed 32px to the right, like if the button and table was the same line.

I want the form to be completely centered, so how can I stop the button interfering with things below it?




Aucun commentaire:

Enregistrer un commentaire