display

With the display property you can specifies if or how an HTML element is displayed in the web page.
  - Values:   - Syntax:
  Example (remove a DIV, displays <a> tags as block elements and <li> with inline):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>display</title>
 <style type="text/css"><!--
 #idd { display: none; }
 .a_block { display: block; }
 #idu li { display: inline; }
 --></style>
</head>
<body>
 <div id="idd">Removed content.</div>
 <a href="https://coursesweb.net/css/" title="CSS course" class="a_block">CSS course</a> <a href="https://coursesweb.net/html/" title="HTML course" class="a_block">HTML course</a>
 <ul id="idu">
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
 </ul>
</body>
</html>
  - Result:
CSS course
HTML course

visibility

The visibility property can control if an element is visible or not. Even if the element is hidden, still affects layout and will take up space on the web page, where it should to be displayed.
  - Values:   - Syntax:
  Example (make a <span> invisible):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>visibility</title>
 <style type="text/css"><!--
 #idd span { visibility: hidden; }
 --></style>
</head>
<body>
 <div id="idd">This row contains a text <span>in a SPAN tag</span> that is hidden but still takes up space.</div>
 </ul>
</body>
</html>
  - Result:
This row contains a text                     that is hidden but still takes up space.

Define the visible portion of an element

Defining the visible surface of an element determines its visible portion. The remaining contents of that element does not disappear, but is invisible to the visitor.
The element must have set position:absolute, then, to define the visible region it's used the clip property with rect value that sets the shape of the visible region.
  - Values:   - Syntax:
  Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>clip</title>
 <style type="text/css"><!--
 #idd {
  position: absolute;
  clip: rect(0px, 200px, 23px, 60px);
 }
 --></style>
</head>
<body>
 <div id="idd">Free CSS: coursesweb.net/css/</div>
 </ul>
</body>
</html>
  - Result:
: coursesweb.net/

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add definition lists into a <dl> element?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>
Which CSS property can hide an element on page, letting an empty space in its place?
display position visibility
#id {
  visibility: hidden;
}
Click on the event which is triggered when the mouse clicks on an object.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}
Indicate the PHP variable that contains the contents of both $_GET, $_POST, and $_COOKIE arrays.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Display and Visibility

Last accessed pages

  1. Script Users Register, Login, Online (16203)
  2. Get Attribute (ID, Class, Name, Title, Src) with jQuery (52460)
  3. Sending data with GET and POST in the same request (3603)
  4. Node.js Move and Copy file (3518)
  5. Get the value of the selected /checked checkboxes in a form (37630)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (448)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (352)
  3. Register and show online users and visitors (321)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (302)
  5. Insert, Select and Update NULL value in MySQL (214)