Jump to content
Sign in to follow this  
s_avinash_s

two uneven boxes

Recommended Posts

Hi 

I am trying to make two equal boxes in my code but there is some mismatch happening between both as shown in attached image.

Am using span and p in my code.Please suggest

<style>
span {
    background-color: lightgrey;
    width: 800px;    
    border-style: solid;
    border-color: #92a8d1;
    display: inline-block;
}


p.modify {

display: inline-block;

}
</style>

 

temp.PNG

Share this post


Link to post
Share on other sites

Without the HTML structure it's hard to tell what's going on there, I can only make guesses.

The <span> element cannot contain a <p> element, use <div> instead of <span>.

Try setting the margin of the <p> element to zero.

Share this post


Link to post
Share on other sites

Hi

When i try to change to div, it changes everything which becomes more unusual.

So i only made p element margin as 0 , then first row becomes proper.now other part becomes uneven.

I have attached a the uneven part of boxes.

 <div id="flowvalues" class="tabcontent">
<style>
span {
    background-color: lightgrey;
    width: 800px;    
    border-style: solid;
    border-color: #92a8d1;
    display: inline-block;

}

p.modify {

display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;

}
</style>
</head>
<body>

<span>
<strong><font size="5">Mass Flow Rate</strong></font>
 &emsp;&emsp;&emsp;:&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
  <p class = "modify" id="demo2"></p>
     
    <script>
    var currentUsedFont;
    function massflow_val() {

      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) { 
	      document.getElementById("demo2").value = this.responseText;
          document.getElementById("mass_func").value = this.responseText;            
        }
      };
    xhttp.open("GET", "massflow_val.txt", true);
    xhttp.send();
    }

    setInterval(massflow_val, 1000);
    </script>
    
 
<input type="text" id="mass_func" size ="7" style="border: 2px solid black;font-size:35pt;">

<p class = "modify" id="demo3"></p>
     
    <script>
    function massunit() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
	      document.getElementById("demo3").innerHTML = this.responseText;         
        }
      };
    xhttp.open("GET", "massunit.txt", true);
    xhttp.send();
    }

    setInterval(massunit(), 1000);
    </script>

<br>
<br>

<strong><font size="5">Volume Flow Rate</strong></font> &emsp;&nbsp;&nbsp;:&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;

    <p class = "modify" id="demo5"></p>
    <script>
    function volumeflow_val() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          	      document.getElementById("demo5").value = this.responseText;
          document.getElementById("vol_func").value = this.responseText; 

        }
      };
    xhttp.open("GET", "volumeflow_val.txt", true);
    xhttp.send();
    }

    setInterval(volumeflow_val(), 1000);
    </script>

<input type="text" id="vol_func" size ="7" style="border: 2px solid black;font-size:35pt;">

<p class = "modify" id="demo6"></p>
     
    <script>
    function volumeflowunit() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("demo6").innerHTML = this.responseText;

        }
      };
    xhttp.open("GET", "volumeflowunit.txt", true);
    xhttp.send();
    }

    setInterval(volumeflowunit(), 1000);
    </script>

<br>
<br>

<strong><font size="5">Density</strong></font> &emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;&emsp;&emsp;&emsp;&nbsp;&nbsp;:
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
<p class = "modify" id="demo8"></p>
    <script>
    function densityflow_val() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
                    	      document.getElementById("demo8").value = this.responseText;
          document.getElementById("den_func").value = this.responseText; 
          
        }
      };
    xhttp.open("GET", "densityflow_val.txt", true);
    xhttp.send();
    }

    setInterval("densityflow_val()", 1000);
    </script>


<input type="text" id="den_func" size ="7" style="border: 2px solid black;font-size:35pt;">


    <p class = "modify" id="demo9"></p>
     
    <script>
    function densityflowunit() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("demo9").innerHTML = this.responseText;
       
        }
      };
    xhttp.open("GET", "densityflowunit.txt", true);
    xhttp.send();
    }

    setInterval("densityflowunit()", 1000);
</script>

<br><br>

</span>

<span >
<strong><font size="5">Totaliser 1</strong></font>
 &emsp;&emsp;&emsp;:&emsp;&emsp;&emsp;&nbsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
<p class = "modify" id="totaliser1"></p>
    <script>
    function totaliser1_val() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("totaliser1").value = this.responseText;
          document.getElementById("totaliser1_func").value = this.responseText; 
          
        }
      };
    xhttp.open("GET", "totaliser1_val.txt", true);
    xhttp.send();
    }

    setInterval(totaliser1_val(), 1000);
    </script>


<input type="text" id="totaliser1_func" size ="7" style="border: 2px solid black;font-size:35pt;">

 <p class = "modify" id="totaliser1unit"></p>
     
    <script>
    function totaliser1_unit() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("demo9").innerHTML = this.responseText;
       
        }
      };
    xhttp.open("GET", "totaliser1_unit.txt", true);
    xhttp.send();
    }
 
    setInterval(totaliser1_unit(), 1000);
</script>
hhhh
<br>
<br>

<strong><font size="5">Totaliser 2</strong></font> &emsp;&emsp;&emsp;:&emsp;&emsp;&emsp;&nbsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
<p class = "modify" id="totaliser2"></p>
    <script>
    function totaliser2_val() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("totaliser2").value = this.responseText;
          document.getElementById("totaliser2_func").value = this.responseText; 
          
        }
      };
    xhttp.open("GET", "totaliser2_val.txt", true);
    xhttp.send();
    }

    setInterval(totaliser2_val(), 1000);
    </script>

<input type="text" id="totaliser2_func" size ="7" style="border: 2px solid black;font-size:35pt;">


 <p class = "modify" id="totaliser2unit"></p>
     
    <script>
    function totaliser2_unit() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("totaliser2unit").innerHTML = this.responseText;
       
        }
      };
    xhttp.open("GET", "totaliser2_unit.txt", true);
    xhttp.send();
    }
 
    setInterval(totaliser2_unit(), 1000);
</script>
gggg
<br>
<br>

<strong><font size="5">Temperature</strong></font> &emsp;&nbsp;&nbsp;:
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;

    <p class = "modify" id="demo11"></p>
    <script>
    function temp_val() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("demo11").value = this.responseText;
          document.getElementById("temp_func").value = this.responseText;
          
        }
      };
    xhttp.open("GET", "temp_val.txt", true);
    xhttp.send();
    }

    setInterval(temp_val(), 1000);
    </script>


<input type="text" id="temp_func" size ="7" style="border: 2px solid black;font-size:35pt;">

<p class = "modify" id="demo12"></p>
     
    <script>
    function tempunit() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("demo12").innerHTML = this.responseText;
          
        }
      };
    xhttp.open("GET", "tempunit.txt", true);
    xhttp.send();
    }

    setInterval("tempunit()", 1000);
    </script>
<br>
<br>
</span>


<span>

<style>
input[type=range] {
  -webkit-appearance: none;
  width: 55%;
  border-radius: 8px;
  height: 7px;
  border: 1px solid #bdc3c7;
  background-color: #92a8d1; 
      margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
}
</style>
<br><br>
<strong><font size="5">Current O/P 1:&emsp;&emsp;&emsp;</strong></font>




<form>
  <div>
    4<input id="currentoutput1" type="range" min="4" max="20"  step="0.01" oninput="recieved_current_output_1.value=currentoutput1.value" >20
    
    
    <input id="recieved_current_output_1" type="number" value="100" min="0" max="200"
    
    
    oninput="rangeInput.value=recieved_current_output_1.value" >
  </div>
</form>

<br>
<br>
<br>


<strong><font size="5">Frequency O/P 1:&nbsp;&nbsp;&emsp;</strong></font>
0 Hz<input type="range" id="frequencyoutput1" min="0" max="10000" step="0.01">10000 Hz
<p id="frequency_output_val_1"></p>

<script>
function frequency_output_1() {
    var x = document.getElementById("frequencyoutput1").value;
    document.getElementById("frequency_output_val_1").innerHTML = x;
}
setInterval(frequency_output_1,1000);
</script>
<br>
<br>
</span>
<span>

<br><br>
<strong><font size="5">Current O/P 2:&emsp;&emsp;&emsp;</strong></font>
4 mA<input type="range" id="currentoutput2" min="4" max="20" step="0.01" >20 mA
<p id="current_output_val_2"></p>

<script>
function current_output_2() {
    var x = document.getElementById("currentoutput2").value;
    document.getElementById("current_output_val_2").innerHTML = x;
}
setInterval(current_output_2,1000);
</script>
<br>
<br>
<br>


<strong><font size="5">Frequency O/P 2:&nbsp;&nbsp;&emsp;</strong></font>
0 Hz<input type="range" id="frequencyoutput2" min="0" max="10000" step="0.01" >10000 Hz
<p id="frequency_output_val_2"></p>

<script>
function frequency_output_2() {
    var x = document.getElementById("frequencyoutput2").value;
    document.getElementById("frequency_output_val_2").innerHTML = x;
}
setInterval(frequency_output_2,1000);
</script>
<br>
<br>
</span>
<br>


<style>
#rcorners3 {
    border-radius: 25px;
    border: 4px solid #92a8d1;
    padding: 20px; 
    width: 755px;
    height: 150px;    
}
</style>

<span id="rcorners3" >
 <strong><font size="5">Alerts / Errors</strong></font>
</span>

<span id="rcorners3" >
 <strong><font size="5">IO Connections</strong></font>
</span>
    </div>

Please suggest

uneven.PNG

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×