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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...