Question 184341 in CSS Question posted in
Some basic documentation can be found here.

Problems with the position of a button (CSS)

I’m trying to design a chess board, but I have a problem that the White_Pawn7 appears on the "next" line and I don’t know why.

I’ve used images to show the pieces and made a div that has a chess board background. The ID´s were made to better navigate where this one button should go. I tried to replicate the previous 6 pawns, but the White_Pawn7 went to the next Line.

Pictures used:

Pawn: Pawn

Horse: Horse

Sprinter: Sprinter

King: King

Queen: Queen

Turm/Rook: Rook

The Board: Board

I’ve tried using: top: 9px; and it stayed on the same line but my expectations for White_Pawn7 are the following:

top: -9px;
left: -78px;

I made a Picture for how i want the End-Result to look like:

End Result

How can I make the value for top, for a row the exact same?

#White_Queen{
    width: 50px;
    height: 50px;
    padding: 0px;
    background: none;
    border: none;
    position: relative;
    top: -0px;
    left: -12px;
}
#White_Sprinter{
    width: 50px;
    height: 50px;
    padding: 0px;
    background: none;
    border: none;
    position: relative;
    top: -6px;
    left: -8px;
}
#White_Sprinter2{
    width: 50px;
    height: 50px;
    padding: 0px;
    background: none;
    border: none;
    position: relative;
    top: -6px;
    left: -20px;
}
#White_King{
    width: 50px;
    height: 50px;
    padding: 0px;
    background: none;
    border: none;
    position: relative;
    top: -4px;
    left: -16px;
}
#White_Horse{
    width: 50px;
    height: 50px;
    padding: 0px;
    background: none;
    border: none;
    position: relative;
    top: -6px;
    left: -4px;
}
#White_Horse2{
    width: 50px;
    height: 50px;
    padding: 0px;
    background: none;
    border: none;
    position: relative;
    top: -6px;
    left: -24px;
}
#White_Turm{
    width: 50px;
    height: 50px;
    padding: 0px;
    background: none;
    border: none;
    position: relative;
    top: -4px;
    left: -0px;
}
#White_Turm2{
    width: 50px;
    height: 50px;
    padding: 0px;
    background: none;
    border: none;
    position: relative;
    top: -60px;
    left: 350px;
}
#White_Pawn1{
    width: 50px;
    height: 50px;
    padding: 0px;
    background: none;
    border: none;
    position: relative;
    top: -9px;
    left: -54px;
}
#White_Pawn2{
    width: 50px;
    height: 50px;
    padding: 0px;
    background: none;
    border: none;
    position: relative;
    top: -9px;
    left: -58px;
}
#White_Pawn3{
    width: 50px;
    height: 50px;
    padding: 0px;
    background: none;
    border: none;
    position: relative;
    top: -9px;
    left: -62px;
}
#White_Pawn4{
    width: 50px;
    height: 50px;
    padding: 0px;
    background: none;
    border: none;
    position: relative;
    top: -9px;
    left: -66px;
}
#White_Pawn5{
    width: 50px;
    height: 50px;
    padding: 0px;
    background: none;
    border: none;
    position: relative;
    top: -9px;
    left: -70px;
}
#White_Pawn6{
    width: 50px;
    height: 50px;
    padding: 0px;
    background: none;
    border: none;
    position: relative;
    top: -9px;
    left: -74px;
}
#White_Pawn7{
    width: 50px;
    height: 50px;
    padding: 0px;
    background: none;
    border: none;
    position: relative;
    top: -59px;
    left: 300px;
}
#White_Pawn8{
    width: 50px;
    height: 50px;
    padding: 0px;
    background: none;
    border: none;
    position: relative;
    top: -59px;
    left: 296px;
}

#Background_Board{
    background-image: url("Board as Background/Board.png");
    background-size: cover;
    border: 5px solid black;
}
div{
    height: 400px;
    width: 400px;
}
img{
    width: 45px;
    height: 45px;
    position: relative;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chess Game</title>
  </head>
  <body>
    <div id="Background_Board">
      <button id="White_Turm">
        <img
          src="Pieces/White/White%20Turm.png"
          alt="Turm"
          style="width: 45px; height: 45px; top: -0px; left: -2px"
        />
      </button>

      <button id="White_Horse">
        <img
          src="Pieces/White/White%20Horse.png"
          alt="Horse"
          style="top: 2px; height: 40px; width: 40px"
        />
      </button>

      <button id="White_Sprinter">
        <img
          src="Pieces/White/White%20Sprinter.png"
          alt="Sprinter"
          style="width: 40px; height: 40px; top: 2px"
        />
      </button>

      <button id="White_Queen">
        <img
          src="Pieces/White/White%20Queen.png"
          alt="Queen"
          style="height: 50px; width: 50px; top: -1px"
        />
      </button>

      <button id="White_King">
        <img src="Pieces/White/White%20King.png" alt="King" style="top: 0px" />
      </button>

      <button id="White_Sprinter2">
        <img
          src="Pieces/White/White%20Sprinter.png"
          alt="Sprinter"
          style="width: 40px; height: 40px; top: 2px"
        />
      </button>

      <button id="White_Horse2">
        <img
          src="Pieces/White/White%20Horse.png"
          alt="Horse"
          style="top: 2px; height: 40px; width: 40px"
        />
      </button>

      <button id="White_Turm2">
        <img
          src="Pieces/White/White%20Turm.png"
          alt="Turm"
          style="top: 6px; height: 45px; width: 45px"
        />
      </button>

      <button id="White_Pawn1">
        <img
          src="Pieces/White/Bauer%20Weiß.png"
          alt="White Pawn Number 1"
          style="width: 40px; height: 40px; top: 3px"
        />
      </button>

      <button id="White_Pawn2">
        <img
          src="Pieces/White/Bauer%20Weiß.png"
          alt="White Pawn Number 2"
          style="width: 40px; height: 40px; top: 3px"
        />
      </button>

      <button id="White_Pawn3">
        <img
          src="Pieces/White/Bauer%20Weiß.png"
          alt="White Pawn Number 3"
          style="width: 40px; height: 40px; top: 3px"
        />
      </button>

      <button id="White_Pawn4">
        <img
          src="Pieces/White/Bauer%20Weiß.png"
          alt="White Pawn Number 4"
          style="width: 40px; height: 40px; top: 3px"
        />
      </button>

      <button id="White_Pawn5">
        <img
          src="Pieces/White/Bauer%20Weiß.png"
          alt="White Pawn Number 5"
          style="width: 40px; height: 40px; top: 3px"
        />
      </button>

      <button id="White_Pawn6">
        <img
          src="Pieces/White/Bauer%20Weiß.png"
          alt="White Pawn Number 6"
          style="width: 40px; height: 40px; top: 3px"
        />
      </button>

      <button id="White_Pawn7">
        <img
          src="Pieces/White/Bauer%20Weiß.png"
          alt="White Pawn Number 7"
          style="width: 40px; height: 40px; top: 3px"
        />
      </button>

      <button id="White_Pawn8">
        <img
          src="Pieces/White/Bauer%20Weiß.png"
          alt="White Pawn Number 8"
          style="width: 40px; height: 40px; top: 3px"
        />
      </button>
    </div>

  </body>
</html>
Tags:

2

Answers


  1. 0

    you just need to change top to:

    #White_Turm2{
width: 50px;
height: 50px;
padding: 0px;
background: none;
border: none;
position: relative;
top: -100px;
left: 350px;
}

#White_Pawn7{
width: 50px;
height: 50px;
padding: 0px;
background: none;
border: none;
position: relative;
top: -100px;
left: 300px;
}
#White_Pawn8{
 width: 50px;
 height: 50px;
 padding: 0px;
 background: none;
 border: none;
 position: relative;
 top: -100px;
 left: 296px;
 }

    but I suggest you to use display:flex; property, its easier and you dont need to write that amount of code.

    #Background_Board {
    display:flex;
    flex-direction: column;
}
.row {
    display:flex;
    align-items:center;
    justify-content: center;
}

img {
    width: 45px;
    height: 45px;
    vertical-align: middle;
    position: relative;
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="White.css" />
    <link rel="stylesheet" href="Generell.css" />
    <title>Chess Game</title>
  </head>
  <body>
    <div id="Background_Board">
        <div class="row">
            <button id="White_Turm">
                <img
                src="Pieces/White/White%20Turm.png"
                />
            </button>

            <button id="White_Horse">
                <img
                src="Pieces/White/White%20Horse.png"
                />
            </button>

            <button id="White_Sprinter">
                <img
                src="Pieces/White/White%20Sprinter.png"
                />
            </button>

            <button id="White_Queen">
                <img
                src="Pieces/White/White%20Queen.png"
                />
            </button>

            <button id="White_King">
                <img src="Pieces/White/White%20King.png"/>
            </button>

            <button id="White_Sprinter2">
                <img
                src="Pieces/White/White%20Sprinter.png"
                />
            </button>

            <button id="White_Horse2">
                <img
                src="Pieces/White/White%20Horse.png"
                />
            </button>

            <button id="White_Turm2">
                <img
                src="Pieces/White/White%20Turm.png"
                />
            </button>
        </div>
        <div class="row">
            <button id="White_Pawn1">
                <img
                src="Pieces/White/Bauer%20Weiß.png"
                />
            </button>

            <button id="White_Pawn2">
                <img
                src="Pieces/White/Bauer%20Weiß.png"
                />
            </button>

            <button id="White_Pawn3">
                <img
                src="Pieces/White/Bauer%20Weiß.png"
                />
            </button>

            <button id="White_Pawn4">
                <img
                src="Pieces/White/Bauer%20Weiß.png"
                />
            </button>

            <button id="White_Pawn5">
                <img
                src="Pieces/White/Bauer%20Weiß.png"
                />
            </button>

            <button id="White_Pawn6">
                <img
                src="Pieces/White/Bauer%20Weiß.png"
                />
            </button>

            <button id="White_Pawn7">
                <img
                src="Pieces/White/Bauer%20Weiß.png"
                />
            </button>

            <button id="White_Pawn8">
                <img
                src="Pieces/White/Bauer%20Weiß.png"
                />
            </button>
        </div>
    </div>

  </body>
</html>
    Login or Signup to reply.
  2. 0

    It would surely help to understand the problem, if the code snippet would contain working image links, so one could see what the actual output is.

    I am sure, I am not yet fully understanding the problem, but reading your description, it seems you want to position chess figures freely on a board. I would thus suggest to use position absolute for the figures to place them on the board (and not position relative).

    You’d set the board to position: relative, so the absolute positioned figures would be positioned relative to the board.

    I.E.:

    #Background_Board {
  width: 300px;
  height: 300px;
  position: relative;
  background-color: #fafafa;
  border: 1px solid black;
}

button.chessfigure img {
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
  height: 45px;
}

#White_Turm {
  top: 0;
  left: 0;
  background-color: yellow;
}

#White_Horse {
  top: 45px;
  left: 90px;
  background-color: green;
}
    <div id="Background_Board">
  <button class="chessfigure">
        <img
          id="White_Turm"
          src=""
          alt="Turm"
        />
      </button>

  <button class="chessfigure">
        <img
          id="White_Horse"
          src=""
          alt="Horse"
        />
      </button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search