What steps should I take to modify the appearance of the following?

I am currently working on a calculator project and I would like to change its styling. The color schemes are not specified in the CSS for simplicity's sake.

This is how it looks now

This is how I want it to look

.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.sstatic.net/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>

Click here for image description

javascripthtmlcss

Answer №1

Easily achieve a stylish layout for the top and bottom rows using css flex, which complements your graphic design beautifully!

.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.sstatic.net/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>

Answer №2

  • Enclose each row within section tags with the class named "row".
  • Adjust the width of .row to be 100%.
  • Apply the flex display property to the rows.
  • Ensure content is justified to start from the beginning in a row layout.
  • Center align items within the rows.

* {
            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.sstatic.net/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>

Answer №3

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.sstatic.net/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 is essentially the same content you requested. I just structured it into separate divs so each section can be styled independently within their own "containers". The middle section is further divided to stack the side 1, img, and 

side 3</code, while placing <code>side 2
and side 4 on the left and right side. You can inspect the layout visually!

Answer №4

If you want to enhance the appearance of the area box, consider enclosing it within a div tag and including the following CSS code:

.button{
position: "relative";
left: 0px;
/*Additional styles...*/
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Clicking on the image in an owl carousel slider does not trigger the onsen template page to load

I am experiencing an issue with my owl carousel slider while calling an API for page content on image click. I have implemented an onsen template page using ng-click on image, but it only works for the first image click. Subsequent images do not call the o ...

javascriptjqueryhtmlangularjsonsen-ui

Creating a state in React and populating the rows of a Material-UI table with fixed data

I have implemented a table in the UI using the material-UI Table component. Initially, I added static data without using the state property of react. Now, I am looking for a way to assign static data to table rows by utilizing the state property. The code ...

javascriptreactjsreact-reduxmaterial-ui

Modifications made to the content of the element can disrupt the functioning of the delegated event handlers tied to its parent

Currently, I am working on implementing a drop-down menu for a school project. While most of the functionality is in place, I encountered an issue with JQuery events that has me stumped. When I click on a list item, the name is set correctly, but then the ...

javascriptjqueryhtmlcssdynamic-content

Exploring the creation of CSS animations using box-shadow effects

Looking to create a CSS animation where part of a line (200px) changes color like a gradient. Any ideas on how to achieve this effect? Below is the current code being used: * { margin: 0; padding: 0 20px; } h1 { text-align: center; } ...

cssanimationbox-shadow

What is the best method for updating audio from a source in Vue.js?

Forgive me if this is a silly question, but I'm still learning the ropes here. I may be going about this in all the wrong ways! I created a backend that learns from a text file and generates sentences along with an audio version of those sentences. I ...

javascriptnode.jsvue.jsaudio

Is it possible for me to include detailed information to a particular attribute of an object?

Although the code below is incorrect, it reflects my intention. Can this be achieved? I am looking to update the original array so that all orderno values are formatted as 000.0.000.00000.0. let cars= [ {orderno: "5766302385925", make: "Alfa", dealersh ...

javascriptarraysfunctionobject

What is the method to ensure that the Node REPL solely displays the result?

Is there a way to execute a script in Electron that only logs the output value without displaying all the code? I am utilizing xterm.js and node-pty for this project. For instance, consider the following sample code: // Add your code here function multi ...

javascriptnode.jsread-eval-print-loopptyxtermjs

Excessive spacing issues arise while adjusting CSS height, leading to undesirable vertical scrolling

One of the features of my website is a post section where users can leave comments. These comments are displayed at the bottom of the post. To enhance user experience, I decided to create a modal for posts using HTML and CSS as shown below. However, I enc ...

jqueryhtmlcss

Can I compile a build using browserify/babel for a specific browser version?

After reviewing compatibility tables, like the one found at , it appears that Chrome is on the verge of fully supporting ES6. This leads me to believe that I can omit certain elements during development. var babelifyOptions = { presets: ['es2015& ...

javascriptbrowserifybabeljsgulp-babel

Retrieve data from the client side and pass it to another PHP file using Ajax

I am working with three PHP files: filter.php - used for sending Ajax requests and receiving responses insert.php - used for storing Ajax responses getResponse.php - used for utilizing the stored Ajax response. The main goal of this setup is to access cl ...

javascriptphpajax

Disable functionality not functioning properly on button attribute

I've created a demo on JSFiddle here: http://jsfiddle.net/qJdaA/2/. The goal of this code is to disable the button with the ID #monitor if no checkboxes are checked. var checked = $('#status_table tr [id^="monitor_"]:checked'); if (checked. ...

javascriptjquery

What are the best techniques for recreating the "Price Compare" responsive card layout?

Comparison of Plans on Desktop: https://i.sstatic.net/fzTeOJF6.png Mobile Plan Comparison: https://i.sstatic.net/2FBEmdM6.png Hello there, I'm seeking suggestions for designing this particular section of the layout. This section is visible both i ...

htmlcsshtml-tableflexboxcss-grid

Adjusting the gutter size for specific components in Bootstrap 4 using a mixin

How can I adjust the spacing between specific elements using mixins in my code? I've searched through numerous tutorials, but I haven't found the solution I'm seeking. Here is the code snippet I'm working with: <div class="row" id= ...

htmltwitter-bootstrapsassbootstrap-4mixins

Stopping a Bootstrap Modal Closure When Validation Errors are Present

I'm dealing with a bootstrap model within a .NET MVC5 app. Although my client-side validation is functioning properly (using jquery unobtrusive in MVC), I have encountered an issue where the modal keeps closing even when there are errors present. How ...

javascriptjqueryvalidationasp.net-mvc-5bootstrap-modal

After the ajax request is made in React JS, the column vanishes from the screen

Upon querying a node.js server's PostgreSQL database, I receive specific data that needs to be displayed in two separate tables. Each table consists of two columns. However, after the AJAX call, only the first column is being populated in the first ta ...

javascriptjqueryajaxreactjs

What is the best method for comparing the JSP page response with the AJAX page response?

I am experiencing issues when trying to compare the response received from a JSP page with Ajax. I am looking to execute an action in the success Ajax function if the out.print() method prints a success message. Despite comparing the data, it seems like it ...

javascriptajaxjspjquery-uiservlets

Can stringByEvaluatingJavaScriptFromString be utilized with JavaScript that makes references to local files?

     I am looking to implement stringByEvaluatingJavaScriptFromString in order to execute a JavaScript code that accesses local files (such as CSS or JS files) stored on the device (presumably in the Documents folder)... NSString *theJS = [[NSString ...

javascriptiphoneuiwebviewstringbyevaluatingjavascr

I am experiencing issues with my CSS list style, as it seems to be functioning fine on all other elements except for

Can anyone provide assistance in troubleshooting why my CSS is not functioning properly? How can I ensure it links with my external CSS file for the list to display correctly? The issue seems to arise when using external CSS rather than internal. Whenever ...

javascriptphphtmljquerycss

Retrieving multiple entries using a single query

Hello everyone, I have a question for you all. UPDATE `talent2db`.`talent_employee` SET `Rec_Status` = 'I' WHERE `talent_employee`.`Emp_Id` = '241074' AND `talent_employee`.`Rec_Status` = 'A' ; UPDATE `talent2db`.`talent_emp ...

phphtmlmysqlsql

What are the top techniques for designing with Angular 2 Material Design?

As a newcomer to angular 2 material design, I have noticed the primary, accent, and warn classes that apply specific colors to elements. Are these the only styling options available in Angular Material 2? Are there other classes that can be utilized for cu ...

cssangularangular-materialangular-material2