CODEWITHSUNDEEP
htmlcss
user7454355
user7454355

Reputation:

HTML adjust four images in CSS box

Good Day, I am trying to align three images in one css box. My goal is to place the logo and button in the right (top and bottom) and two pictures to the left but they are overlapping each other. Also, the reason that I won't compile all of them into one image is that I am planning to use bootstrap to make this intro page responsive. CSS such as position and align does not seem to make it work, any help would be truly appreciated.

div.intro_box {
    width: 1000px;
    height: 650px;
    border: 8px;
    border-style: solid;
    border-color: #00008B;
    background-color: #9e9e9e;
    padding: 25px;
    margin: auto;
    position:relative;
}

.intro_box img {
    position: absolute;
}

.adjust_center {
    text-align: center;
}
<html>
    <head>
        <title>Pokemon TCG Western Visayas PH</title>
        <link rel="stylesheet" href="intro_page.css">
    </head>

    <body>

        <div class="intro_box">

            <div>
                <img src="images/l_tcg.png" alt="Empoleon"/>
            </div>

            <div>
                <img src="images/button_enter.png" alt="Empoleon"/>
            </div>

            <div id="pkmn">
                <img src="images/p_empoleon.png" alt="Empoleon"/>
                <img src="images/p_gardevoir.png" alt="Gardevoir"/>
            </div>

        </div>
    </body>

</html>

goal[![][1]]2

Upvotes: 0

Views: 1436

Answers (4)

Ashu Mhatugade
Ashu Mhatugade

Reputation: 80

You can achieve this without grid system..

<!doctype html>
<html lang="en">
<head>
  <style>
  body{
    margin:0px;
    padding:0px;
  }

  .wrapper{
    border:2px solid green;
    width:99%;
    height:500px;
    position:relative;
    display:flex;
  }

   .wrapper .leftWrapper{
        width:50%;
        display:inline-block;
  }

  .wrapper .leftWrapper .img1{
    position:relative;
    top:20px;
  }
   .wrapper .leftWrapper .img1 img{
        width:60%;
   }

  .wrapper .leftWrapper .img2{
    position:absolute;
    top:50px;
    left:30px;
  }

  .wrapper .leftWrapper .img2 img{
    width:40%;
   }


  .wrapper .rightWrapper{
        width:20%;
        display:inline-block;
  }

  .wrapper .rightWrapper .logo{
    position:absolute;
    top:0;
    right:0;
    text-align:right;
  }

  .wrapper .rightWrapper .logo a img{
    width:20%;
    height:50px;
    border:1px solid #000;
  }

   .wrapper .rightWrapper .btn{
    position:absolute;
    bottom:0;
    right:0;
    text-align:right;
  }
   .wrapper .rightWrapper .btn a img{
        width:20%;
        min-width:100px;
        height:100px;
        border:1px solid #000;
  }

  </style>
</head>

<body>

    <div class="wrapper">
        <div class="leftWrapper">
            <div class="img1"><img src="images/abstract.jpg" title="img1" alt="img1"/></div>
            <div class="img2"><img src="images/ball.png" title="img2" alt="img2"/></div>
        </div>

        <div class="rightWrapper">
            <div class="logo">
                <a href="#"><img src="images/defaultlogo.jpg" title="logo" alt="logo"/></a>
            </div>

            <div class="btn">
                <a href="#"><img src="images/btn.jpg" title="btn" alt="btn"/></a>
            </div>
        </div>
    </div>

</body>
</html>

Upvotes: 0

Leo K
Leo K

Reputation: 5354

You say that position and align don't work, but your example doesn't show an attempt to use them. You should be able to style your display elements with position and place them as you wish (for the button and logo which are in divisions of their own, do that on the 'div' elements, as in the example here, not on 'img').

NOTE1: I reduced the container 'div' to make the example displayable here in StackOverflow.

NOTE2: my sample simply scatters the elements to the places you say you want them to be, it doesn't take into account their sizes, so they may still overlap. You will need to play with the sizes and use conditional styling to make your design respond correctly to window size changes (and work both on desktop and mobile).

div.intro_box {
    width: 500px;
    height: 325px;
    border: 8px;
    border-style: solid;
    border-color: #00008B;
    background-color: #9e9e9e;
    padding: 25px;
    margin: auto;
    position:relative;
}

.adjust_center {
    text-align: center;
}

#pkmn { position: absolute ; left: 0 ; top : 0 ; }
#button { position: absolute; right: 0 ; top : 0 ; }
#logo { position: absolute; right: 0 ; bottom: 0 ; }

/* you will need additional styles either here or inline to place
  the two images within the #pkmn div element, I'm not adding this here */
}
<html>
    <head>
        <title>Pokemon TCG Western Visayas PH</title>
        <link rel="stylesheet" href="intro_page.css">
    </head>

    <body>

        <div class="intro_box">

            <div id="logo">
                <img src="images/l_tcg.png" alt="Logo"/>
            </div>

            <div id="button">
                <img src="images/button_enter.png" alt="Button"/>
            </div>

            <div id="pkmn">
                <img src="images/p_empoleon.png" alt="Empoleon"/>
                <img src="images/p_gardevoir.png" alt="Gardevoir"/>
            </div>

        </div>
    </body>

</html>

Upvotes: 0

Karakuchi
Karakuchi

Reputation: 1324

If you use bootstrap grid (since you said you were already going to use bootstrap for a responsive design). You could do something like this. The code snippet is best viewed full screen mode .

Padding and column widths will need to be adjusted to make it appear exactly the way you want and to make it look better on mobile devices, but this gives it the basic structure.

For more info about bootstrap grids have a look at the Bootstrap Documentation (grid systems)

<html>

<head>
  <title>Pokemon TCG Western Visayas PH</title>
  <link rel="stylesheet" href="intro_page.css">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" />
</head>

<body>
  <div class="container">

    <div class="row">
      <div class="col-md-6 text-center">
        <div class="row">
          <div class="col-md-12">
            <!-- Logo Image -->
            <img src="http://via.placeholder.com/350x150" alt="Empoleon" />
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <!-- Button Image -->
            <img src="http://via.placeholder.com/350x150" alt="Empoleon" />
          </div>
        </div>
      </div>
      <div class="col-md-6 text-center">
        <div class="row">
          <div class="col-md-6">
            <!-- Main Image 1 -->
            <img src="http://via.placeholder.com/150x350" alt="Empoleon" />
          </div>
          <div class="col-md-6">
            <!-- Main Image 2 -->
            <img src="http://via.placeholder.com/150x350" alt="Gardevoir" />
          </div>
        </div>
      </div>

    </div>
  </div>

</body>

</html>

Upvotes: 0

Domenik Reitzner
Domenik Reitzner

Reputation: 1613

Use css grid. For more detail, I usually look at this page.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  min-height: 300px;
}

.leftTop {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background: red;
}

.leftBottom {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background: green;
}

.right {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  background: purple;
}
<div class="grid">
  <div class="leftTop">
  </div>
  <div class="leftBottom">
  </div>
  <div class="right">
  </div>
</div>

Upvotes: 2

Related Questions