redwolf10105 redwolf10105 - 3 months ago 15
CSS Question

Div lowered instead of buttons

I am trying to make a website that creates a design for websites. It will tell you the code you will need to make the site. I have a toolbar div that contains a table with 6 buttons. When I attempt to make the buttons lower down in the toolbar div, it moves the div down, and the buttons are still at some dozen pixels down from the top of the div. Here's my code:



.toolbar {
width: 200px;
height: 300px;
background-color: #444444;
}
#a {
height: 50px;
width: 150px;
}

<div class='toolbar'>
<center>
<table class='tools' id='a'>
<tr>
<td>
<button class='text' id='a'>
Add text
</button>
</td>
</tr>
<tr>
<td>
<button class='image' id='a'>
Add image
</button>
</td>
</tr>
<tr>
<td>
<button class='table' id='a'>
Add table
</button>
</td>
</tr>
<tr>
<td>
<button class='jsbutton' id='a'>
Add button
</button>
</td>
</tr>
<tr>
<td>
<button class='addons' id='a'>
Add-ons
</button>
</td>
</tr>
</table>
</center>
</div>





Is there anything wrong with this code, or are my requirements impossible?

Answer

This is how you can use paddings and margins, and drop the toolbar height.

By setting padding on the toolbar, all buttons is pushed down, and the by using margin on each button, they individually separate.

I changed the table to display: inline-table;, added text-align: center; to your toolbar so it's centered (as the <center> element is deprecated), and I also dropped the id's, as they should be unique.

.toolbar {
  padding-top: 10px;
  width: 200px;
  background-color: #444444;
  text-align: center;
}
.tools {
  display: inline-table;
}
.tools, .text, .image, .table, .jsbutton, .addons {
  margin-bottom: 6px;
  height: 50px;
  width: 150px;
}
<div class='toolbar'>
    <table class='tools'>
      <tr>
        <td>
          <button class='text'>
            Add text
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <button class='image'>
            Add image
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <button class='table'>
            Add table
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <button class='jsbutton'>
            Add button
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <button class='addons'>
            Add-ons
          </button>
        </td>
      </tr>
    </table>
</div>

Comments