CODEWITHSUNDEEP
htmlcss
Jaron787
Jaron787

Reputation: 560

HTML, CSS Shape and Button Positioning

I have the below working example which needs editing:

I want the red square to be centre aligned above table 1 & 2. I then want the black dots to be aligned left vertically (one on top of the order) but left of the red square. What is the best way to achieve this?

https://jsfiddle.net/Jaron787/2mv98mkp/6/

HTML

<div>
  <img src='http://www.imagemagick.org/Usage/blur/black_circle.png'>
  <img src='http://www.imagemagick.org/Usage/blur/black_circle.png'>
  <img src='http://www.clker.com/cliparts/U/D/B/J/j/R/red-square-th.png'>
</div>
<div id="lse" class="display">
  <div id="centertbl">
    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 1</b></td>
      </tr>
    </table>

    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 2</b></td>
      </tr>
    </table>
  </div>

  <input type="submit" class="button button1" name="submitButton" value="Button 1">
  <input type="submit" class="button button1" name="submitButton" value="Button 2">
  <input type="submit" class="button button1" name="submitButton" value="Button 3">
  <input type="submit" class="button button1" name="submitButton" value="Button 4">

</div>

CSS

.TSS {
  border: 1px solid #000000;
  float: none;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10.6px;
  font-style: normal;
  padding: 10px;
  text-decoration: none;
  display: inline-block;
}

#centertbl {
  text-align: center;
}

.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

Upvotes: 0

Views: 61

Answers (3)

lukbl
lukbl

Reputation: 1773

.redsquare {
  display: block;
  position: relative;
  margin: auto;
  height: 140px;
  width: 100px;
}
.redsquare>img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.dots {
  position: absolute;
  display: block;
  left: -70px;
  width: 70px;
}
.TSS {
  border: 1px solid #000000;
  float: none;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10.6px;
  font-style: normal;
  padding: 10px;
  text-decoration: none;
  display: inline-block;
}
#centertbl {
  text-align: center;
}
.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}
.button1:hover {
  background-color: #4CAF50;
  color: white;
}
<div>
  <div class="redsquare">
    <div class="dots">
      <img src='http://www.imagemagick.org/Usage/blur/black_circle.png'>
      <img src='http://www.imagemagick.org/Usage/blur/black_circle.png'>
    </div>
    <img src='http://www.clker.com/cliparts/U/D/B/J/j/R/red-square-th.png'>
  </div>
</div>

<div id="lse" class="display">
  <div id="centertbl">
    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 1</b>
        </td>
      </tr>
    </table>

    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 2</b>
        </td>
      </tr>
    </table>
  </div>

  <input type="submit" class="button button1" name="submitButton" value="Button 1">
  <input type="submit" class="button button1" name="submitButton" value="Button 2">
  <input type="submit" class="button button1" name="submitButton" value="Button 3">
  <input type="submit" class="button button1" name="submitButton" value="Button 4">

</div>

Upvotes: 0

Iv&#225;n Rodr&#237;guez Torres
Iv&#225;n Rodr&#237;guez Torres

Reputation: 4449

What about this solution: https://jsfiddle.net/3ozmqhq8

I added a position: absolute to the dots, and then I centered the square using margin: 0 auto and display:block.

If you don't want to change display, you can apply to .cnt this: text-align:center since img is a line element, it will be centered.

.TSS {
  border: 1px solid #000000;
  float: none;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10.6px;
  font-style: normal;
  padding: 10px;
  text-decoration: none;
  display: inline-block;
}

.cnt {
  margin-bottom: 10px
}

#c1,
#c2 {
  position: absolute;
  top: 20px;
  left: 0
}

#c2 {
  left: 45px
}

#square {
  display: block;
  margin: 0 auto;
}

#centertbl {
  text-align: center;
}

.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}
<div class="cnt">
  <img id="c1" src='http://www.imagemagick.org/Usage/blur/black_circle.png'>
  <img id="c2" src='http://www.imagemagick.org/Usage/blur/black_circle.png'>
  <img id="square" src='http://www.clker.com/cliparts/U/D/B/J/j/R/red-square-th.png'>
</div>
<div id="lse" class="display">
  <div id="centertbl">
    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 1</b></td>
      </tr>
    </table>

    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 2</b></td>
      </tr>
    </table>
  </div>

  <input type="submit" class="button button1" name="submitButton" value="Button 1">
  <input type="submit" class="button button1" name="submitButton" value="Button 2">
  <input type="submit" class="button button1" name="submitButton" value="Button 3">
  <input type="submit" class="button button1" name="submitButton" value="Button 4">

</div>

Try this: https://jsfiddle.net/3ozmqhq8/2/

And if you want to center the dots you can move them to the right increasing left in #c1 and #c2

Upvotes: 1

Mohammad Usman
Mohammad Usman

Reputation: 39332

You can try this code if it helps you:

.TSS {
  border: 1px solid #000000;
  float: none;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10.6px;
  font-style: normal;
  padding: 10px;
  text-decoration: none;
  display: inline-block;
}

#centertbl {
  text-align: center;
}

.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

.images-area {
  position: relative;
  margin: 0 0 15px;
}

.red-square {
  display: block;
  margin: 0 auto;
}

.black-circles {
  position: absolute;
  margin-top: -60px;
  left: 10px;
  top: 50%;
}

.black-circles img {
  margin: 0 0 -15px;
  max-width: 100%;
  display: block;
  height: auto;
}
<div class="images-area">
  <div class="black-circles">
      <img src='http://www.imagemagick.org/Usage/blur/black_circle.png'>
      <img src='http://www.imagemagick.org/Usage/blur/black_circle.png'>
  </div>
  <img class="red-square" src='http://www.clker.com/cliparts/U/D/B/J/j/R/red-square-th.png'>
</div>
<div id="lse" class="display">
  <div id="centertbl">
    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 1</b></td>
      </tr>
    </table>

    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 2</b></td>
      </tr>
    </table>
  </div>

  <input type="submit" class="button button1" name="submitButton" value="Button 1">
  <input type="submit" class="button button1" name="submitButton" value="Button 2">
  <input type="submit" class="button button1" name="submitButton" value="Button 3">
  <input type="submit" class="button button1" name="submitButton" value="Button 4">

</div>

Upvotes: 1

Related Questions