How do I change the styling for the following?-CodePudding

I am building a calculator and I would like it styled differently. The colours are not included in the css for simplicity.

What it currently looks like

What I want it to look like

.button { text-align: center;}
label {margin: 10px ;}
label:first-of-type,
label:last-of-type {display: block;}

.img2 {
    width: 300px;
}

</div>
            <form class="calculator">
                <label for="base_width">Base Width (m)</label>
                <input type="number" value="1" min="1" max="20" step="1" id="base_width" name="base_width" onclick="checks()"></input>
        
                <label for="base_length">Base Length (m)</label>
                <input type="number" value="1" min="1" max="20" step="1" id="base_length" name="base_length" onclick="checks()"></input>
        
                <label for="wall">Wall Type</label>
                    <select name="walltype" id="walltype">
                        <option value="40">Inflated</option>
                        <option value="25">Netted</option>
                    </select>
                
                <div class="button">
                        <label for="wall_side1">Side 1 <input type="checkbox" id="wall_side1" /></label>
                        <label for="wall_side2">Side 2 <input type="checkbox" id="wall_side2" /></label>
                        <img class="img2" src="https://i.stack.imgur.com/N1leH.png" alt="Bouncy Castle">
                        <label for="wall_side3">Side 3 <input type="checkbox" id="wall_side3" /></label>
                        <label for="wall_side4">Side 4 <input type="checkbox" id="wall_side4" /></label>
                    
                </div>
                <label for="ceiling">Ceiling</label>
                    <select name="ceiling" id="ceiling">
                        <option value="1">Yes</option>
                        <option value="0">No</option>
                    </select>
        
                <label for="tunnels">Tunnels</label>
                <input type="number" value="0" min="0" max="20" step="1" id="tunnel" name="tunnel"></input>
                
                <label for="slides">Slides</label>
                <input type="number" value="0" min="0" max="20" step="1" id="slide" name="slide"></input>
        
                <input type="button" value="Calculate" onclick="calculate()"></input>
        
                <span>Total: $</span>
                <span id="totalvalue"></span>
                <script type="text/javascript" src="calc.js"></script>
        
                </form>

enter image description here

CodePudding user response：

You can use css flex to get a nice layout for the top and bottom rows, and it works really well for your graphic too!

.img2 {
  width: 300px;
}

.flex-row {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.flex-column {
text-align: center;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

</div>
<form class="calculator flex-column">
  <div class="flex-row">
    <label for="base_width">Base Width (m)</label>
    <input type="number" value="1" min="1" max="20" step="1" id="base_width" name="base_width" onclick="checks()" />

    <label for="base_length">Base Length (m)</label>
    <input type="number" value="1" min="1" max="20" step="1" id="base_length" name="base_length" onclick="checks()" />

    <label for="wall">Wall Type</label>
    <select name="walltype" id="walltype">
      <option value="40">Inflated</option>
      <option value="25">Netted</option>
    </select>
  </div>
  <div class="flex-row">
  <div class="button">
    <label for="wall_side1">Side 1 <input type="checkbox" id="wall_side1" /></label>
    <div class="flex-row">
      <label for="wall_side2">Side 2 <input type="checkbox" id="wall_side2" /></label>
      <img class="img2" src="https://i.stack.imgur.com/N1leH.png" alt="Bouncy Castle">
      <label for="wall_side3">Side 3 <input type="checkbox" id="wall_side3" /></label>
    </div>
    <label for="wall_side4">Side 4 <input type="checkbox" id="wall_side4" /></label>
</div>
  </div>

  <div class="flex-row">
    <label for="ceiling">Ceiling</label>
    <select name="ceiling" id="ceiling">
      <option value="1">Yes</option>
      <option value="0">No</option>
    </select>

    <label for="tunnels">Tunnels</label>
    <input type="number" value="0" min="0" max="20" step="1" id="tunnel" name="tunnel"></input>

    <label for="slides">Slides</label>
    <input type="number" value="0" min="0" max="20" step="1" id="slide" name="slide"></input>

    <input type="button" value="Calculate" onclick="calculate()"></input>

    <span>Total: $</span>
    <span id="totalvalue"></span>
  </div>
  <script type="text/javascript" src="calc.js"></script>

</form>

CodePudding user response：

Wrap the rows into section tags with a the class-name "row".
Set the width of .row to 100%.
Set the display property to flex.
justify-content: flex-start.
align-items: center.

* {
            margin: 0;
            padding: 0;
        }

        form {
            width: 100%;
            height: 100%;
        }

        .row {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .button { text-align: center;}
        label {margin: 10px ;}
        label:first-of-type,
        label:last-of-type {display: block;}
        .img2 {
            width: 300px;
        }

<form class="calculator">   
    <section class="row">
        <label for="base_width">Base Width (m)</label>
        <input type="number" value="1" min="1" max="20" step="1" id="base_width" name="base_width" onclick="checks()"></input>
        
        <label for="base_length">Base Length (m)</label>
        <input type="number" value="1" min="1" max="20" step="1" id="base_length" name="base_length" onclick="checks()"></input>
        
        <label for="wall">Wall Type</label>
        <select name="walltype" id="walltype">
            <option value="40">Inflated</option>
            <option value="25">Netted</option>
        </select>
    </section>
    <section class="row">
        <div class="button">
            <label for="wall_side1">Side 1 <input type="checkbox" id="wall_side1" /></label>
            <label for="wall_side2">Side 2 <input type="checkbox" id="wall_side2" /></label>
            <img class="img2" src="https://i.stack.imgur.com/N1leH.png" alt="Bouncy Castle">
            <label for="wall_side3">Side 3 <input type="checkbox" id="wall_side3" /></label>
            <label for="wall_side4">Side 4 <input type="checkbox" id="wall_side4" /></label>
            
        </div>
    </section>
    <section class="row">

        <label for="ceiling">Ceiling</label>
        <select name="ceiling" id="ceiling">
            <option value="1">Yes</option>
            <option value="0">No</option>
        </select>
        
        <label for="tunnels">Tunnels</label>
        <input type="number" value="0" min="0" max="20" step="1" id="tunnel" name="tunnel"></input>
        
        <label for="slides">Slides</label>
        <input type="number" value="0" min="0" max="20" step="1" id="slide" name="slide"></input>
        
        <input type="button" value="Calculate" onclick="calculate()"></input>
        
        <span>Total: $</span>
        <span id="totalvalue"></span>
        <script type="text/javascript" src="calc.js"></script>
        
    </section>
    </form>

CodePudding user response：

body {
  background-color: darkred;
}

.calculator > * {
  margin: 20px;
}

#top-section {
  display: inline;
}

#middle-section {
  display: flex;
  align-items: center;
}

.middle-middle {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img2 {
    width: 300px;
}

#bottom-section {
  display: inline;
}

<div class="calculator">
    <div id="top-section">
        <label for="base_width">Base Width (m)</label>
        <input type="number" value="1" min="1" max="20" step="1" id="base_width" name="base_width" onclick="checks()">            
        <label for="base_length">Base Length (m)</label>
        <input type="number" value="1" min="1" max="20" step="1" id="base_length" name="base_length" onclick="checks()">
        <label for="wall">Wall Type</label>
        <select name="walltype" id="walltype">
            <option value="40">Inflated</option>
            <option value="25">Netted</option>
        </select>
    </div>
    <div id="middle-section">
        <div class="middle-side">
            <label for="wall_side2">Side 2 <input type="checkbox" id="wall_side2" /></label>
        </div>
        <div class="middle-middle">
            <label for="wall_side1">Side 1 <input type="checkbox" id="wall_side1" /></label>
            <img class="img2" src="https://i.stack.imgur.com/N1leH.png" alt="Bouncy Castle">
            <label for="wall_side4">Side 4 <input type="checkbox" id="wall_side4" /></label>
        </div>
        <div class="middle-side">
             <label for="wall_side3">Side 3 <input type="checkbox" id="wall_side3" /></label>
        </div> 
    </div>
    <div id="bottom-section">
        <label for="ceiling">Ceiling</label>
        <select name="ceiling" id="ceiling">
            <option value="1">Yes</option>
            <option value="0">No</option>
        </select>
        <label for="tunnels">Tunnels</label>
        <input type="number" value="0" min="0" max="20" step="1" id="tunnel" name="tunnel">
        <label for="slides">Slides</label>
        <input type="number" value="0" min="0" max="20" step="1" id="slide" name="slide">
        <input type="button" value="Calculate" onclick="calculate()">
        <span>Total: $</span>
        <span id="totalvalue"></span>
    </div>
</div>
<script type="text/javascript" src="calc.js">

This should be pretty much exactly what you're asking for. I just divided the 3 sections up into divs so they could all be styled within their own "containers". As you can see the middle section is also divided even more which allows the side 1 img side 3 to all be stacked while the side 2 and side 4 are placed on the left and right hand side. If you do an inspect you'll be able to see the way they are laid out!

CodePudding user response：

I would say to add a around the area box and doing this:

.button{
position: "relative";
left: 0px;
/*Other stuff...*/
}