I can now see my blocks with this CSS

HTML & CSS
1

Copy and paste the following - if it is a plain HTML page then remove the PHP scripts:

<?php if(isset($_GET['debug1'])) : ?>
	<style>
      /* SAMPLE 001 */
		*{outline:1px solid #fff!important;background-color:rgba(0,2,54,.1)!important}
	</style> 
<?php endif; ?>

<?php if(isset($_GET['debug2'])) : ?>
	<style>
      /* SAMPLE 002 */
		html * {
    background: rgba(64, 255, 64, .1);
    box-shadow: 0 0 0 1px #0f0;
		}
	</style> 
<?php endif; ?>
		
<?php if(isset($_GET['debug3'])) : ?>
	<style>
      /* SAMPLE 003 */
		* { background-color: rgba(255,0,0,.2); }
		* * { background-color: rgba(0,255,0,.2); }
		* * * { background-color: rgba(0,0,255,.2); }
		* * * * { background-color: rgba(255,0,255,.2); }
		* * * * * { background-color: rgba(0,255,255,.2); }
		* * * * * * { background-color: rgba(255,255,0,.2); }
		* * * * * * * { background-color: rgba(255,0,0,.2); }
		* * * * * * * * { background-color: rgba(0,255,0,.2); }
		* * * * * * * * * { background-color: rgba(0,0,255,.2); }
	</style> 
<?php endif; ?>

I prefer SAMPLE 003 :slight_smile:

2

Sorry @John_Betong, you’ve lost me. redface

Can you give a bit more explanation about this?

3

The CSS highlights blocks on an existing web-page in three ways depending on which SAMPLE is selected.

The following page shows WITHOUT the additional CSS:

before

Screenshot%20from%202019-09-10%2016-29-54
Screenshot%20from%202019-09-10%2016-29-54705×419 26.4 KB

Adding the additional CSS:

after

Screenshot%20from%202019-09-10%2016-30-28
Screenshot%20from%202019-09-10%2016-30-28705×419 27.9 KB


Source:

<!DOCTYPE HTML>
<html>
<head>
<title> Just testing </title>
<style>
  .fll {float: left;} 
  .flr {float: right;}
  .ftr {position: fixed; left: 0; bottom: 0;}
  .mga {margin: 0 auto;}
  .w88 {width: 88%;}
  .w99 {width: 99%;}
</style>

<style>

/* SAMPLE 003 */
/*
  * { background-color: rgba(255,0,0,.2); }
  * * { background-color: rgba(0,255,0,.2); }
  * * * { background-color: rgba(0,0,255,.2); }
  * * * * { background-color: rgba(255,0,255,.2); }
  * * * * * { background-color: rgba(0,255,255,.2); }
  * * * * * * { background-color: rgba(255,255,0,.2); }
  * * * * * * * { background-color: rgba(255,0,0,.2); }
  * * * * * * * * { background-color: rgba(0,255,0,.2); }
  * * * * * * * * * { background-color: rgba(0,0,255,.2); }
 */ 
</style> 

</head>
<body>

  <h1> just testing </h1>

  <form action="#" method="post">
    <div class="w88 mga">
    <p class="w88 mga"> 
      <label> Language: </label>
      <input type="radio" name="lang" value="english" /> English
      <input type="radio" name="lang" value="spanish" /> Spanish
      <input type="radio" name="lang" value="gibberish" /> No language
    </p>

    <p class="w88 mga">
      <label> First name: </label>
      <input type="text" name="firstname"  /> 
    </p>

    <p class="w88 mga">
      <label> Last name: </label>
      <input type="text" name="lastname"  />  
    </p>

    <p class="w88 mga">
      <input type="submit" name="submit" value="Submit"  />
    </p>
  </form>

  <hr class="w88 mga">
    <dl> <dt> <b> DEBUG: </b> $msgs </dt>
      <dd>
        <br> Yes we have no $link ???      </dd>
    </dl>    
  <hr>  

  <div class="ftr w99">
    <hr>
    <a class="fll" href="#"> HTML validation </a> 
    <a class="flr" href="#"> CSS validation </a> 
  </div>  
</body>
</html>
4

Thanks for the explanation.

I use the Web Developer Toolbar on Firefox, which has numerous useful tools, including an option to outline block level elements:

outline-block
outline-block1280×900 121 KB

2 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.