How can i divide the window in 4 columns and fill it with images-CodePudding

I'm trying to divide this in 4 columns, but this never works. I tried with full height,

<style="heigth:100%">

in each div and nothing resulted. I could do it with colors, but not with images.

So, how can I divide the window in 4, even when resized and fill it with images?

I have a nav-bar too, but for that I can put it with z-index=1 and make it be visible.

#index1 {
  background: url('img/WhatsApp Image 2022-01-24 at 17.07.09.jpeg');
  position: relative;
}

#index2 {
  background: url('img/WhatsApp Image 2022-01-24 at 17.07.08.jpeg');
  position: relative;
}

#index3 {
  background: url('img/WhatsApp Image 2022-01-24 at 17.07.08(1).jpeg');
  position: relative;
}

#index4 {
  background: url('img/WhatsApp Image 2022-01-24 at 17.07.08(2).jpeg');
  position: relative;
}

<div  style="width:100%; height:100%">
  <div  id="index1"><input type="button"  onclick="myFunction1()" value="Calendar" /></div>
  <div  id="index2"><input type="button"  onclick="myFunction2()" value="Classifications" /></div>
  <div  id="index3"><input type="button"  onclick="myFunction3()" value="Winner-Driver" /></div>
  <div  id="index4"><input type="button"  onclick="myFunction4()" value="Winner-Constructor" /></div>
</div>

CodePudding user response：

You can set up flex layout and alignment using Bootstrap flex classes.

One problem is that your buttons don't fit on smaller screens. You may want to use a vertical stack for mobile and a row for larger screens.

#index1 {
  background: url('https://via.placeholder.com/800');
}

#index2 {
  background: url('https://via.placeholder.com/800/dddddd');
}

#index3 {
  background: url('https://via.placeholder.com/800');
}

#index4 {
  background: url('https://via.placeholder.com/800/dddddd');
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <div  id="index1">
    <input type="button"  onclick="myFunction1()" value="Calendar" />
  </div>

  <div  id="index2">
    <input type="button"  onclick="myFunction2()" value="Classifications" />
  </div>

  <div  id="index3">
    <input type="button"  onclick="myFunction3()" value="Winner-Driver" />
  </div>

  <div  id="index4">
    <input type="button"  onclick="myFunction4()" value="Winner-Constructor" />
  </div>
</div>

CodePudding user response：

By default any <div> has a height=0. It can expand if there is an element inside the div. But it will not expand with the size of background-image of the <div>.

Your code is perfect except that you have not specified height in the corresponding <div> elements. You have to specify height to each div containing a background. Otherwise the browser will make it's height=0 or in this case the height of the button.

Height='100%' does not work in your case because the row height will be calculated to 100% to it's largest child element (Not the browser window!). That is the div -> which is the height of it's child element button.

The height must be specified in either px, em, rem, vh. Height does not behave like width!

Easiest solution: Set row height to 100vh instead of 100%

If you want to set height of each div, you can do it by adding height or min-height property to them. Try experimenting with different values.
**Tip: You can check your div size by going to code inspector of browser (in windows: right mouse click and inspect)

<style>
    #index1 {
      background: url('https://source.unsplash.com/1600x900/?fire');
      position: relative;
      height: 90vh; //Experiment here
    }

    #index2 {
      background: url('https://source.unsplash.com/1600x900/?beach');
      position: relative;
      height: 500px; //Experiment here
    }

    #index3 {
      background: url('https://source.unsplash.com/1600x900/?team');
      position: relative;
      min-height: 100vh; //Experiment here
    }

    #index4 {
      background: url('https://source.unsplash.com/1600x900/?love');
      position: relative;
      min-height: 50vh; //Experiment here
    }
  </style>

Html:

 <div >
    <div >
      <div  id="index1"><input type="button"  onclick="myFunction1()"
          value="Calendar" /></div>
      <div  id="index2"><input type="button"  onclick="myFunction2()"
          value="Classifications" /></div>
      <div  id="index3"><input type="button"  onclick="myFunction3()"
          value="Winner-Driver" /></div>
      <div  id="index4"><input type="button"  onclick="myFunction4()"
          value="Winner-Constructor" /></div>
    </div>
  </div>

*Remember: The row will always have a height of the largest child element here.

I hope this guideline will help you in this project and all your future projects. All the best.

CodePudding user response：

You can use the Grid Layout to do this.

First, set the display: grid to the container that groups all your columns. After, you can set the grid template columns to 4 columns with grid-template-columns: 1fr 1fr 1fr 1fr;.

With that, you will have 4 columns that will each be equal in width.

For the purpose of the example, I have put a min-height of 100vh so you can properly see the columns in the viewport. I also used image that I found on Google.

Here is the full documentation on Grid Layout: CSS Grid Layout

Here is the example:

#index1 {
  background: url('https://img-19.ccm2.net/WNCe54PoGxObY8PCXUxMGQ0Gwss=/480x270/smart/d8c10e7fd21a485c909a5b4c5d99e611/ccmcms-commentcamarche/20456790.jpg');
  position: relative;
}

#index2 {
  background: url('https://img-19.ccm2.net/cI8qqj-finfDcmx6jMK6Vr-krEw=/1500x/smart/b829396acc244fd484c5ddcdcb2b08f3/ccmcms-commentcamarche/20494859.jpg');
  position: relative;
}

#index3 {
  background: url('https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hhbmdlfGVufDB8fDB8fA==&w=1000&q=80');
  position: relative;
}

#index4 {
  background: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg');
  position: relative;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  min-height: 100vh;
}

<div >
  <div  id="index1"><input type="button"  onclick="myFunction1()" value="Calendar" /></div>
  <div  id="index2"><input type="button"  onclick="myFunction2()" value="Classifications" /></div>
  <div  id="index3"><input type="button"  onclick="myFunction3()" value="Winner-Driver" /></div>
  <div  id="index4"><input type="button"  onclick="myFunction4()" value="Winner-Constructor" /></div>
</div>